标签：jquery function obj color 标签 tag Html var css

第1章

<!DOCTYPE html>    <!--规定用这个规则-->
<html lang="en">
<head>  <!--hai de 就是定义你一些内在的东西-->
    <!--charset \cha sai te-->
    <meta charset="UTF-8">  <!--mai te 自闭标签-->
    <!--标签的属性-->
    <title name="alex">你好</title><!--tai tou 是头部的意思-->
</head>
    <body>  <!--bao dei 网页体-->
        gdfg
    </body>
</html>
<!--xxx-->  <!--注释-->

1.html

1.1 head 的设置

页面编码

<meta http-equiv="content-type" content="text/html.charest=utf-8">
#######################################
<meta charset="UTF-8">

跳转

<meta http-equiv="Refresh" Content="5;Url=http://www.autohome.com.cn"/>                                      
<!--跳转-->
<!--url-->

刷新

<meta http-equiv="Refresh" Content="30">    <!--刷新-->
 <!--refresh\rui fu lai shi /Content \kan ten te-->

关键词

<meta name="keywords" content="星际老男孩">

X-UA-Compatible

只对ie有用这段代码是然ie用最新的版本来处理它

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Link

css #用来引入css的

<!--min是压缩上网的时候可以用-->
<link rel="stylesheet" type="text/css" href="css/common.min.css" >
<!--Link  ling ke-->

icon 图标

<link rel="shortcut icon" href="image/favicon.ico">
<!--icon   # ai kan 图标-->

1.2 body 中的标签

行内标签和块级标签
- span，a，select 等行内标签有多少占多少
- div， h1，p 等块级标签没有一行也要占满一行

字符网站

https://www.cnblogs.com/mengmengi/p/10137167.html

&lt;&nbsp;&gt;

p和 br

p表示段落，默认段落之间是有间距的 <p></p>

dr 是换行符

a标签

直接跳转

<a href="http://www.baidu.com">跳转</a>

新建在跳转

<a href="http://www.baidu.com" target="_blank">跳转</a>

锚寻找页面中id=i1的标签，将其标签放置再顶部

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<!--id不能重复-->
<div id="i1" style="height: 500px";>第一章内容</div>
<div id="i2" style="height: 500px";>第二章内容</div>
<div id="i3" style="height: 500px";>第三章内容</div>

H标签

<!--h标签只有六个，分别是，以次排序字体大小-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h6 style="font-size: 65px"></h6>

字体加颜色

< div style="color: green;"></div>

<!---->
<!--这是html的注释信息-->
<!--这是根-->
<html>
    <!--头-->
    <head>
        <!--标题栏 tai tou-->
        <title>标题栏</title>
    </head>
    <!--网页体-->
    <body>
        <!--这里的内容显示到网页上！-->
        这是第一个htnl页面！
    </body>

</html>

div

<form><!--fou mu 表单-->
<div style="border: 1px solid red;">     
    <!--样式边框1px纯红色-->
    <p>用户名<input type="text" /></p>    
    <!--输入文字-->
    <p>密码<input type="password" /></p>
    <!--电子邮件-->
    <p>邮箱<input type="email" /></p>
    <!--输入类型密码-->
    <p>性别<br />男<input type="radio" name="gender" />
            <!--男输入类型单选名性别-->
          <br />女<input type="radio" name="gender" />
    </p>    <!--女输入类型单选名性别-->
    <p>爱好
         <!--1输入类型复选框-->
       <dr />1<input type="checkbox" />
       <dr />2<input type="checkbox" />
       <dr />3<input type="checkbox" />
       <dr />4<input type="checkbox" />
       <dr />5<input type="checkbox" />
    </p>
    <p>城市
        <select>    <!--选择-->
            <option>上海</option>   
            <!--选择选项-->
            <option>武汉</option>
            <option>甘肃</option>
        </select>
        <!--选择多个尺寸10-->
        <select multiple size="10">    
            <option>上海</option>   
            <option>武汉</option>
            <option>甘肃</option>
        </select>
        <select>
            <!--选择组 标签-->
            <optgroup label="一线">
                <option>上海</option>   
                <option>武汉</option>
                <option>甘肃</option>
        </select>
    </p>
    <!--输入类型文件-->
    <p>文件 <input type="file"/></p>
    <p>备注 <textarea></textarea>
        <!--输入类型提交值提交-->
    <input type="submit" value="提交" />
        <!--输入类型按钮值按钮-->
    <input type="button" value="按钮" />
        <!--输入类型复位值复位-->
    <input type="reset" value="复位" />
    </div>
    </form>

checkbox

enctype="multipart/form-data" 编码多部分表单数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
    <input type="text" placeholder="用户名" />
    <!--placeholder是输入框中的提示符>
<!--<form action="https://www.sogou.com/web" method="get">--> 
<!--以get的方法提交-->
<!--    <form action="https://www.sogou.com/web" method="post">-->
<!--以post的方法提交-->
<!--以get的方法提交-->
<!--你要上传文件必须在 form 属性中加上enctype="multipart/form-data"-->
<form action="https://www.sogou.com/web" method="post" enctype="multipart/form-data">    
<!--&lt;!&ndash;action里面填写什么http就提交到哪的http&ndash;&gt;-->
<input type="text" name="query"/>       <!--name 是键-->
男<input type="radio" name="gender" value="1"/>   
<!--男输入类型单选名称性别值1-->
女<input type="radio" name="gender" value="0"/>   
<!--女输入类型单选名称性别值0-->
<p>文件：
<!--文件-->
<input type="file" name="fafafa" />
</p>
<p>
<select name="city">        
<!--发送的时候不许要有标签-->
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</p>
<p>
备注：<textarea name="extra"></textarea>
</p>
<input type="submit" value="提交" />
</form>
<hr/>    <!--横线-->
<form>
<input type="text"/>
<input type="submit" value="提交" />
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <!--ul方点-->
        <li>asldsdjfl</li>
        <li>asldsd ccl</li>
    </ul>
    <ol>
        <!--ul数字-->
        <li>asldsdjfl</li>
        <li>asldsd ccl</li>
    </ol>
    <dl>
        <dt>用于标题</dt>
        <dd>用于文章</dd>
        <dd>用于文章</dd>
    </dl>
    <table border="1">   <!--边境1-->          <!--表格-->
        <thead>        <!--表題-->
            <tr>       <!--代表一行-->
<!--                <td>第一列</td>    &lt;!&ndash;代表一列&ndash;&gt;-->
<!--                <td>第二列</td>-->
<!--                <td>第三列</td>-->
<!--                <td>第四列</td>-->
<!--                <th>第一列</th>    &lt;!&ndash;代表一列&ndash;&gt;-->
<!--                <th>第二列</th>    &lt;!&ndash;th加粗&ndash;&gt;-->
<!--                <th>第三列</th>-->
<!--                <th>第四列</th>-->
            <th>第1列</th>    
                <!--代表一列-->
            <th>第2列</th>    
                <!--th加粗-->
            <th colspan="2">第3列</th>    <!--合并左右單元格-->
        </tr>
    </thead>
    <tbody>
        <tr>       <!--代表一行-->
            <td>第一列</td>    
            <!--代表一列-->
            <td>第二列</td>
            <td>第三列</td>
            <td>第四列</td>
        </tr>
        <tr>       <!--代表一行-->
            <td>第一列</td>    
            <!--代表一列-->
            <td rowspan="2">第二列</td>    <!--合并上下單元格-->
            <td>第三列</td>
            <td>第四列</td>
        </tr>
        <tr>       <!--代表一行-->
            <td>第一列</td>    
            <!--代表一列-->
            <td>第三列</td>
        <td>第四列</td>
    </tr>
</tbody>
</table>
</body>
</html>

fieldset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
    <fieldset>
    <legend>登录</legend>
    <p>用户名：<input type="text" /></p>
    <p>密码：<input type="password" /></p>
    </fieldset>
    </div>
    <h1>人才辈出</h1>
    <iframe style ="width：100%;height: 2000px;" src="http://autohome.com.cn"></iframe>
</body>
</html>

2.css

储存位置：

单独css文件低

html头部

标签属性优先级高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--si dai ao 是当前页面都使用-->
    <!--在这里写上div以后使用div就可以不用写了-->
    <!--风格背景色红色白色-->
    <style>
    div{
        background-color: red;
        color: white;
    }
    </style>
</head>
<body>
    <!--风格背景色红色白色-->
    <div style="color: white;">88</div>
    <div>116+</div>
    <div>116+</div>
    <div>116+</div>
    <div>116+</div>
</body>
</html>

2.1 导入css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    /* 导入css文件就这么写,comm是文件名*/
	<link rel="stylesheet" href="comm.css" />
</head>
<body>
    
</body>
</html>

<htmml>
	<head>
	    <meta charset="UTF-8">
        <title></title>
        <style>
            /*标签选择器*/
            /*颜色红色*/
            /*找到所有的div使用*/
            div{
                color:green;
            }
            /*id选择器*/
            /*字体32像素*/
            /*只找到有id="il"使用*/
            #il{
                font-size: 32px;
            }
            /*ke la se class选择器*/
            /*找到所有有class="c1"使用*/
            .c1{
                background-color:red;
            }
        </style>
	</head>
    <body>
        <span class="c1">1</span>
        <div class="c1">2</div>
        <a class="c1">3</a>
        <a id="il">jjjj</a>
        <div>nini</div>
        <div>nini</div>
        <div>nini</div>
    </body>
</htmml>

2.2 head中的标签选择器

div选择器

/*颜色红色*/
/*找到所有的div*/
div{
    color:green;
}

id选择器

/*只找到有id="il"*/
/*字体32像素*/
#il{
    font-size: 32px;
}

class选择器

/*找到所有有class="c1"使用*/
.c1{
     background-color:red;
}

层级选择器

/*找到class="c2",div,p,class="c3"来使用*/
.c2 div p .c3{
	dackground-color:rcd;
}

组合选择器

/*找到class="c4",class="c5",class="c6"*/
.c4,.c5,.c6{
	background-color:aqua;
}

2.3 样式

字体颜色

/*ka le 字体颜色*/
color:red;

背景颜色

/*bai gu ruan de ke le 背景颜色，也可以按照rgb的方式显示颜色*/

background-color:rgb(1,2,3);

/*bai gu ruan de ke le 背景颜色，也可以按照rgb的十六进制显示颜色*/

background-color:#ffdab9;

/*bai gu ruan de ke le 背景颜色*/

background-color: aqua;

字体大小

/*fan sa ai si 字体大小是以像素做的*/
font-size:36px;

宽与高

/*定义高度为150像素 ,高度没有百分百怎么个说法*/
height:150px;

/*自定义宽度为100%，宽度可以百分百显示，按照父级相对占比*/
width:100%;

.c1{
	/*ka le 字体颜色*/
	color:red;
	/*bai gu ruan de ke le 背景颜色，也可以按照rgb的方式显示颜色*/
	background-color:rgb(1,2,3);
	/*bai gu ruan de ke le 背景颜色，也可以按照rgb的十六进制显示颜色*/
	background-color:#ffdab9;
    /*也可以用英文颜色来显示*/
    background-color:red;
	/*bai gu ruan de ke le 背景颜色*/
	background-color: aqua;
	/*fan sa ai si 字体大小是以像素做的*/
	font-size:36px;
	/*定义高度为150像素 ,高度没有百分百怎么个说法*/
	height:150px;
	/*自定义宽度为100%，宽度可以百分百显示，按照父级相对占比*/
	width:100%;

}
<body>
    <div class="c1">asdlj</div>
    <div style="width: 500px;">
/*设置背景宽度占500%的20%颜色为肉色，然他们堆起来*/             
        <div style="width: 20%;float: left">adjs</div>
/*设置背景宽度占500%的80%颜色为肉色，然他们堆起来*/       
/*float: left /fu lou te 是都往左飘*/
        <div style="width: 80%;float: left">adjs</div>
</body>

图片做背景显示和图片移动

/*按照url里的图片设置为背景图片 重复图片*/
/*bai gu ruan de yi mei zhi*/
background-image:url("QQ图片111.png")

/*按照url里的图片设置为背景图片 不重复图片*/
/*bai gu ruan de nou rui pei te*/
background-repeat:none；

/*position puo zei shen 坐标*/
background-position:0px,0px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .c1{
    width: 500px;
    height:790px;
	/*image yin mei zhi 按照url里的图片设置为背景图片 重复图片*/
	background-image:url("QQ图片20201129122134.png");
	/*按照url里的图片设置为背景图片 不重复图片*/
    background-repeat:no-repeat;
    }
    .c2{
    background-image:url("QQ图片20201129122134.png")
    width: 100px;
    height:100px;
    /*position puo zei shen 图片移动坐标*/
    background-position:0,0;
    }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

border

/*上右下左*/
/*solid 实体，dotted 虚线，dashed 跟虚了*/
.c1{
border-top-color: red;
border-top-style: solid;
border-top-width: 4px;
    
border-right-color: red;
border-right-style: solid;
border-right-width: 4px;
    
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 4px;
    
border-left-color: red;
border-left-style: solid;
border-left-width: 4px;
height:10px;
}
<div class="c1">
    
</div>

display

/*隐藏并且不留位置*/
display:none;
/*隐藏但是保留位置*/
visibility : hidden;
/*dei si pu lei /bu lao ke*/
/*将行内标签变成块级标签*/
display:block;
/*dei si pu lei /ying la ai */
/*将行块级标签变成行内标签*/
display:inline;
/*他是块级标签也是行内标签*/
display:inline-block;

cursor

<p>
/*ke se*/
/*pao ying te*/
<span style="cursor:printer;">dfas</span>
/*hai ao puo*/
<span style="cursor:help;">dfas</span>
/*wei te*/
<span style="cursor:wait;">dfas</span>
/*mu wu*/
<span style="cursor:move;">dfas</span>
/*kao si hai e*/
<span style="cursor:crosshair;">dfas</span>
<\p>

边距

/*外边距 （本身不增加）*/
<div style= "background-color: aqua; margin:12px">
/*内边距 （本身增加）*/
<div style= "background-color: aqua; padding:12px">

left和right飘

/*左飘*/
<div style="float:left"></div>
/*右飘*/
<div style="float:right"></div>

子标签无法满足边框就使用clear

/*如果div没有输入值，又想加上样式，就可以用这个*/
<div style="clear:both;"></div>

position

puo zei shen

relative ruai lei tei wu
absolute a buo si lu te
fixed fei si te

/*fixed fei ke si te*/
/*固定在一个位置滚动时也不动*/
<div fixed:right:200px:bottom:100px;>返回顶部</div> 
/*固定在一个位置滚动时会移动*/
<div absolute:right:200px:bottom:100px;>返回顶部</div>
/*relative和absolute，如果你要想让absolute放到一个固定框里面就可以把relative加到固定框的属性里面，把absolute写到任意位置就可以了*/

opacity

/*透明度，1是不透明*/
opacity:0.5
/*可以把颜色和透明度一起设置*/
rgba(0,0,0,0.6)

z-index

/*zei dai ke si*/
/*设置优先级，数字可以随便设置只要大于就可以*/
z-index：9

hide

hide /*隐藏*/

居中

margin:0 auto

图片的显示

<img src="2.jpg">

当鼠标换到标签上时自动执行

ul li:hover{
		background-color: blueviolet;
	    }

随机图片

https://www.dmoe.cc/random.php

3.以后写代码的规范

<html>
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>标题栏</title>
	<style>
	    body{
		/*它的边宽为0*/
	        margin:0;
	    }
	    ul{
	        margin:0;
		/*不显示小标*/
	        list-style-type:none;
	    }
	    ul li{
		/*左飘*/
		float:left;
		/*左边和右边的宽度为8px*/
		padding:0 8px 0 8px;
		/*加上字体颜色为白色*/
		color: while;
		cursor:pointer;
	    }
	    /*当鼠标移动到li标签上时，自动执行里面的样式*/
	    ul li:hover{
		background-color: blueviolet;
	    }
	    .pg-header{
		/*他的大小为44px*/
	        height:44px;
		/*它的颜色为十六进制的#2459a2*/
		background-color:#2459a2;
		/*lai hai te ,按照44放置里面的内容*/
		line-height:44px;
	    }
	    .w{
		/*它的宽度为980px*/
	        width:980px;
		/*它的边宽为0*/
		margin:0 auto;
		/*它的颜色为红色*/
		background-color:red;
	    }

	</style>	
	</head>
        <body>
		<div class="pg-header">
		    <div class="w">
			<ul>
			    <li>sadf</li>
			    <li>sadf</li>
			    <li>sadf</li>
			    <li>sadf</li>
			    <li>sadf</li>
			    <li>sadf</li>
			</ul>
		    </div>
		</div> 
		    
		<div class="pg-body"></div>
		<div class="pg-footer"></div>
    </body>
</html>

第2章 css_JavaScript基础

1.css

1.1.样式

让他在文本样式中居中

text-align:center;

图片的补充

src="xx.jpg" alt="图片"   /*alt是在你图片无法查看的时候，在旁边提示他是什么什么图片*/

默认值

/* value是默认加上123*/
<input value="123">
/*默认加上123*/
<textarea>123</textarea>
/*selected是设置默认选中的值*/
<select>
	<option>上海</option>
	<option selected="selected">广州</option>
	<option>北京</option>
</select>
/*checked是设置默认选中的*/
男:<input type="radio" name="v1">
女:<input type="radio" name="v1" checked="checked">
/*checked是设置默认选中的*/
<input type="checkbox" name="v1" checked="checked">
<input type="checkbox" name="v1">
<input type="checkbox" name="v1" checked="checked">
<input type="checkbox" name="v1">

优先级

/*不管你的优先级多高，只要见到！important都得先使用他的内容*/
!important;

1.2.选择器

属性选择器

<style>
	.c1[alex="a"]{
    	color:red;
	}
</style>
/*做筛选把有c1和a的加上样式*/
<div class="c1" alex="a">1</div>
<div class="c1" alex="b">2</div>
<div class="c1" alex="a">3</div>

1.3.文件的规范

html文件多可以创建一个文件夹来储存，名（app）
css文件也要创建文件夹，名（css）
插件，名（plugins）
图片，名（img）
脚本，名（js）

1.4.一些用法

插件

font awesome

伪类

/*鼠标放在上面时执行c1里面的样式*/
.c1:hover{
    background-color:red;
}
/*在调用的标签前面打印666*/
.c2:before{
    content:"666";
}
/*在调用的标签后面打印777*/
.c2:after{
    content:"777";
}

写个类撑起来

/*ke li er fei ke si*/
.clearfix:aftex{
    content:".";
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
}

<div class="clearfix" style="">
	<div style="height:1000px">
	</div>
</div>

透明

transparent 透明颜色

三角形

想要三角形可以用边宽

.c1{
    border-top-color: transparent solid 4px;
    border-right-color: transparent solid 4px
    border-bottom-color: transparent solid 4px;
    border-left-color: red solid 4px;
}

标准

顶部，名（pg-header）
中部，名（pg-body）
- 菜单，名（body-menu）
- 内容，名（body-content）
底部，名（pg-footer）

创建滚动条

overflow：auto；
创建滚动条，超出让内容滚动

2.JavaScript

编程语言，由浏览器编译并运行

www.cnblogs.com

/*头部写上也可以写在下面他就可以写JavaScript代码了*/
<script>
    /*创建局部变量 var wan*/
    var a="123";
	/*创建全局变量*/
	a="hello world";
	/*创建函数*/
	function f1(){
        var i=123;
    }
	/*弹出框 e le te*/
    alert(123);
	// 单行注释
	/*多行注释*/ 
</script>
/*导入JavaScript文件*/
<script src="commons.js"></script>

特殊的值
- null //nan 什么都不是
- undefined //未定义
- NaN //非数字

对于简单的代码可以在浏览器中的console里面写

2.1.数据类型

2.1.1数字（Number）

JavaScript中不区分整数和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换

parselnt（） //将某值转成数字，不成工则NaN
parseFloat（） //将某值转成浮点数，不成功则NaN

特殊值

NaN，非数字。可使用isNaN（num）来判断。
Infinity，无穷大。可使用isFinite(num)来判断。

2.1.2字符串（Srting）

obj.length()    //长度
obj.trim()	//移除空白
obj.trimleft()	//移除右空格
obj.trimright()	//移除左空格
obj.charAt(n)	//返回字符串中的第N个字符
obj.concat(value,)	//拼接
obj.indexOf()	//从前往后子序列位置
obj.lastlndexof()	//从后往前子序列位置
obj.substring()	//根据索引获取子序列
obj.slice()    //切片
obj.tolowercase()	//大写
obj.touppercase()	//小写
obj.split()    //分割
obj.search()    //从头开始匹配，返回匹配成功的第一个位置（g无效）

跑马灯实例

<div id=i1 style="color:white">欢迎你的到来</div>

<script>
    //是每一秒钟执行一次f1函数
	setlnterval("f1()",1000);
	//创建函数
	funcction f1(){
        //js获取某一个标签 id=i1
        var tag = document.getElementByld("i1");
        //获取标签的内容
        var text = tag.innerText;
        //获取第零位置的值
        var a = text.charAt(0);
        //获取第一项以后的所有值
        var sub = text.substring(1,text.length);
        var new_str = sub + a;
        //将其赋给标签
        tag.innerText = new_str;
    }
</script>

2.1.3布尔类型

布尔类型只包含真假，与Python不同的是其首字母小写。
== 比较值相等
！= 不等于
=== 比较值和类型相等
！=== 不等于
|| 或
&& 且

2.1.4数组

obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.UNshift(ele) 头部插入元素
obj.splice(start,deletecount,value,...) 插入，删除或替换数组的元素
- obj.splice(n,0,val) 指定位置插入元素
- obj.splice(n,1,val) 指定位置替换元素
- obj.splice(n,1) 指定位置删除元素
obj.slice() 切片
obj.reverse() 反转
obj.join(sep) 将数组元素链接起来以构建一个字符串
obj.concat(val,...) 链接数组
obj.sort() 对数组元素进行排序

2.2 JavaScript的命令

2.2.1 对数据做操作

序列化

json.stringify(obj) 序列化
json.parse(str) 反序列化

显示

然他在kan sou 里面显示

转义

encodeURL() URL中的转义字符
decodeURL() URL中未转义的字符
encodeURLComponent() 转义URL组件中的字符串（全部）
decodeURLCompoent() URL组件中的未转义字符
escape() 对字符串转义
unescape() 给转义字符串解码
URLError() 由URL的编码和解码方法抛出

eval

JavaScript中的eval是Python中eval和exec的合集，即可以编译也可以获取返回值。

eval()
EvalError 执行字符串中的JavaScript代码

时间处理

d = new Date() 获取当前时间
d.getfullyear() 获取年份
d.gethours() 获取小时
d.setminutes(45) 修改秒

2.2.2语句和异常

条件语句

if语句

if（条件）{
    
}
else if （条件）{
    
}
else {
    
}

switch语句

switch(name){ //name等于谁就执行谁 
    case "1":
        age = 123;
        break
    case "2":
        age = 456;
        break
    default:
        age = 777;
}

循环语句

第一种

var names = {"alex","tony","rain"};
//i是一个变量，nmaes.length是长度，i++是自加
for(var i=0;i<nmaes.length;i++){
    pass
}
//这个for循环，循环的是索引的值
for (var item in li){
    console.log(item,li[item]);
}
while(条件){}

异常处理

try {
    //这段代码从上往下执行，其中任何一个语句抛出异常该代码块就结束执行
}
catch (e){
    //如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //额是一个局部变量，用来指向error对象或者其他抛出的对象
}
finally{
    //无论try中代码是否抛出异常都会执行finally里面的命令
} 
//主动抛出异常
Python
	raise Exception （xxx）
JavaScript
	throw new Error("asdfasdf")

函数

//普通函数
	function func(arg){
        return true;
    }
//匿名函数
	var func = function(arg){
        return "tony";
    }
//自执行函数
    (function(arg){
        console.log(arg);
    })("123")

2.2.3 作用域的操作

JavaScript中无块级作用域

function Main{
    if (1==1){
        var name = "seven0";
    }
    console.log(name);
}

JavaScript采用函数作用域

function Main{
    var innerValue = "seven";
}

Main();

console.log(innerValue);

javaScript的作用域链

xo = "alex";

function Func(){
    var xo = "liang";
    function inner(){
        var xo = "asdf";
        console.log(xo);
    }
    inner();
}
Func();

javaScrip的作用域链执行前已创建

xo = "alex";

function Func(){
    var xo = "liang";
    function inner(){
        console.log(xo);
    }
    return inner;
}
var ret = Func();
ret();

2.3 面向对象

function Foo (name,age){
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name +arg;
    }
}
var obj = new Foo("alex",18); //想要创建对象必须加上new
var ret = obj.Func("sb");
console.log(ret)

第3章 DOM_JQuery基础

www.cnblogs.com/wupeiqi/articles/5643298.html

1.DOM

1.1 查找元素

直接查找

document.getElementById    根据ID获取一个标签
document.getElemensByName    根据name属性获取标签集合
document.getElementsByClassName    根据class属性获取标签集合
document.getElementsByTagName    根据标签签名获取标签集合

间接查找

#既包含元素有包含文本内容
parentNode        //父节点
childNodes        //所有子节点
firstChild        //第一个子节点
lastChild         //最后一个子节点
nextSibling       //下一个兄弟节点
previousSibling   //上一个兄弟节点
#只包含元素
parentElement     //父节点标签元素
children          //所有子标签
firstElementChild //第一个子标签元素
lastElementChild  //最后一个子标签元素
nextElementtSidling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素

1.2 操作

内容

immerText    文本
outerText
innerHTML    HTML内容
innerHTML    
value        获取值

onfocus="focuns();"    获取焦点，执行函数
onblur="Blur();"   失去焦点，执行函数
onclick="Modal();" 点击后执行函数

属性

attributes        //获取所有标签属性
setAttribute(key,value)  //设置标签属性
getAttribute(key) //获取指定标签属性 
t.removeAttribute()    //移除指定的值

class操作

className        //获取所有类
classList.remove(cls) //删除指定类
classLIst.add(cls)   //添加类

搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
	</head>	
	<body>
		<input ID ="v1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>
		<Script>
			function Focus(){
				var tag = document.getElementById("v1");
				if(tag.value == "请输入关键字"){
					tag.value = ""
				}
			}
			function Blur(){
				var tag = document.getElementById("v1");
				var val = tag.value;
				if(val.trim().length == 0){
					tag.value = "请输入关键字"
				}
			}
		</Script>
	</body>
</html>

小例子

<style>
.hide{
    display:none !important;
    }
.shade{
	position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,.6);
    z-index:1000;
}
    .modal{
        height:200px;
        width:400px;
        background-color:white;
        position:fixed;
        top:50%;
        left:50%;
        margin-left:-200px;
        margin-top: -100px;
        z-index:1001;
    }
</style>
<boody>
    <div style="height:2000px;backgrownd-color:#dddddd;">
        <input type="button" value="点我" onclick="ShowModal();">
        <div>
            <div id ="shade" class="shade hide"></div>
            <div id = "modal" class="modal hide">
            	/*javascript:void(0);什么也不做*/
                <a href="javascript:void(0);" onclick="HideModal();">取消</a>
            </div>
		<script>
		function ShowModal(){
            var t1 = document.getElementById("shade")
            var t2 = document.getElementById("shade")            t1.classList.remove("hide")
         t2.classList.remove("hide")            
        }
         function HideModal(){
                var t1 = document.getElementById("shade")
            var t2 = document.getElementById("shade")            t1.classList.add("hide")
         t2.classList.add("hide")
         }
            
            </script>
</boody>

修改样式

tag.style.xx = xx
在样式中写font-size:40px
在JavaScript中写tag.style.fontSize = "40px"

全选，取消，反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
	</head>	
	<body>
		<input type="button" value="全选" onclick = "CheckAll();"  />
		<input type="button" value="取消" onclick = "ReverseAll();" />
		<input type="button" value="反选" onclick = "c();"/>
		
		<table border="1" >
			<tbody id = "ba">
				<tr>
					<td><input type="checkbox" /></td>    
					<td>第二列</td>
					<td>第三列</td>
				</tr>
				<tr> 
					<td><input type="checkbox"  /></td>    
					<td>第二列</td> 
					<td>第三列</td>
				</tr>
				<tr>   
					<td><input type="checkbox" /></td>    
					<td>第二列</td> 
					<td>第三列</td>
				</tr>
			</tbody>
		</table>
		<Script>
		
			function CheckAll(){
				var tb = document.getElementById("ba")
				var trs = tb.children;
				for (var i=0;i<trs.length;i++){
					var current_tr = trs[i];
					var ck = current_tr.firstElementChild.firstElementChild
					ck.checked = true
					
				}
				
			}
			
			function ReverseAll(){
				var tb = document.getElementById("ba")
				var trs = tb.children;
				for (var i=0;i<trs.length;i++){
					var current_tr = trs[i];
					var ck = current_tr.firstElementChild.firstElementChild
					ck.checked = false
					
				}
			}
			
			function c(){
				var tb = document.getElementById("ba")
				var trs = tb.children;
				for (var i=0;i<trs.length;i++){
					var current_tr = trs[i];
					var ck = current_tr.firstElementChild.firstElementChild
					if (ck.checked){
						ck.checked = false
					}
					else{
						ck.checked = true
					
					}
					
					
				}
			}
		</Script>
	</body>
</html>

创建标签

//方式1对象方式
#创建标签
var tag = document.createElement("a")
#添加内容
tag.innerText = "wupeiqi"
#添加类
tag.className = "c1"
添加链接
tag.href = "http://www.baidu.com"

//方式2字符串方式 
var tag = "<a class = "c1" href = "http://www.cnblogs.com">wupeiqi</a>"

操作标签

//方式1
var obj = "<input type = 'text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);

//注意：第一个参数只能是“beforeBegin”是放到内部的上面“afterBegin”外部的最上面，beforeEnd内部的最下面“afterEnd”外部的最下面

//方式2
var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])


##########################################
//方式1
var obj = "<input type = 'text' />";
xxx.insertAdjacentText("beforeEnd",obj);
//把标签当做文本显示
//注意：第一个参数只能是“beforeBegin”是放到内部的上面“afterBegin”外部的最上面，beforeEnd内部的最下面“afterEnd”外部的最下面

//方式2
var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
		.item{
			padding:50px; 
			position:relative;
		}
	</style>
</head>
<body>
    <div class="item">
		<a onclick="Favor(this)";>赞</a>
		<!--this 是当前触发事件的标签-->
	</div>
	<div class="item">
		<a onclick="Favor(this)";>赞</a>
	</div>
	<div class="item">
		<a onclick="Favor(this)";>赞</a>
	</div>
	<script>
		function Favor(ths){
			var top = 49;
			var left = 71;
			var op = 1;
			var fontSize = 18;
			var tag = document.createElement("span");
			tag.innerText = "+1";
			tag.style.color="red";
			tag.style.position = "absolute";
			tag.style.top=top + "px";
			tag.style.left = left +"px";
			tag.style.opacity = op;
			tag.style.fontSize = fontSize + "px";
			ths.parentElement.appendChild(tag);
			var interval = setInterval(function(){
				top -= 10;
				left += 10;
				fontSize += 5;
				op -= 0.1;
				tag.style.color="red";
				tag.style.top=top + "px";
				tag.style.left = left +"px";
				tag.style.opacity = op;
				tag.style.fontSize = fontSize + "px";
				if(op <=0.1){
					clearInterval(interval);
					ths.parentElement.removeChild(tag);
				}
			},50);
		}
	</script>
</body>
</html>

1.this，当前触发事件标签 2.createElement 3.appendChild

定时器

setInterval    多次定时器
clearInterval    清除多次定时器
setTimeout    单次定时器
clearTimeout    清除单次定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
	</style>
</head>
<body>
    <div id="status" style="color:red;">
	</div>
    <input type="submit"onclick="DeleteStatus();"value="删除" />
	<script>
		function DeleteStatus(){
            var s = document.getElementById("status");
            s.innerText = "删除成功";
            setTimeout(function(){
                s.innerText = "";
            },5000);
			
		}
	</script>
</body>
</html>

高度

clientHeight    可见区域 height + padding
clientTop    border高度
offsetHeight    可见区域：height+ padding+ border
offsetTop    上级定位标签高度
scrollHeight    全文高：height+ padding
特别的：
	document.documentElement代指文档根节点
页面上自带的滚动条获取滚动条位置
document.body.scrollTop = 0

回到顶点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
	</style>
	.back{
        position:fixed;
        right:20px;
        bottom:20px;
        color:red;
    }
	.hide{
        display:none;
    }
</head>
<body>
    <div style="height:2000px;"></div>
	<div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
<script>
        function BackTop(){
        	document.body.scrollTop = 0;
    }
	function BodyScroll(){
        var s= document.body.scrollTop;
        var t = document.getElementById("back");
        if (s>=100){
            t.classlist.remove("hide");
        }
        else{
            t.classlist.add("hide");
        }
    }
        </script>
</body>
</html>

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="f1">
        <input type="text"/>
        <input type="submit" value="提交"/>
        <a onclick="Submit()">提交</a>
	</form>
<script>
        function Submit(){
        	var form = document.getElementById("f1");
            form.submit();
    }
	
    </script>
</body>
</html>

其他操作

comsole.log    输出框
alert    弹出框
confirm    确定框

//URL和刷新
location.href    获取URL
location.href = "url"    重定向
location.reload()    重新加载

事件

onabort        //图像的加载别中断。
onblur         //元素失去焦点。
onchange	  //域的内容被改变。
onclick 	  //当用户点击某个对象时调用的事件句柄。
ondblclick 	  //当用户双击某个对象时调用的事件句柄。
onerror		 //在加载文档或图像是发生错误。
onfocus	 	 //元素获取焦点。
onkeydown 	 //某个键盘按键被按下。
onkeypress	 //某个键盘按键被按下并松开。
onkeyup 	 //某个键盘按键被松开。
onload 		 //一张页面或图像完成加载。
onmousedown  //鼠标按钮被按下。
onmousemove  //鼠标被移动。
onmouseout   //鼠标从某元素移开。
onmouseover  //鼠标移到某元素之上。
onmouseup    //鼠标按键被松开。
onreset 	//重置按钮被点击。
onresize    //窗口或框架被重新调整大小。
onselect    //文本被选中。
onsubmit    //确定按钮被点击
onunload    //用户退出页面

监听键盘

<style>
.hide{
    display:none !important;
    }
.shade{
	position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,.6);
    z-index:1000;
}
    .modal{
        height:200px;
        width:400px;
        background-color:white;
        position:fixed;
        top:50%;
        left:50%;
        margin-left:-200px;
        margin-top: -100px;
        z-index:1001;
    }
</style>
<boody>
    <div style="height:2000px;backgrownd-color:#dddddd;">
        <input type="button" value="点我" onclick="ShowModal();">
        <div>
            <div id ="shade" class="shade hide"></div>
            <div id = "modal" class="modal hide">
            	/*javascript:void(0);什么也不做*/
                <a href="javascript:void(0);" onclick="HideModal();">取消</a>
            </div>
		<script>
		function ShowModal(){
            var t1 = document.getElementById("shade")
            var t2 = document.getElementById("shade")            t1.classList.remove("hide")
         t2.classList.remove("hide")            
        }
         function HideModal(){
                var t1 = document.getElementById("shade")
            var t2 = document.getElementById("shade")            t1.classList.add("hide")
         t2.classList.add("hide")
         }
           window.onkeydown = function(event){
               comsole.log(event);
               if(event.keyCode == 27){
                   HideModal();
               }
           }
            </script>
</boody>

用户验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="username"/>
        <input type="submit" value="提交"onclik="return SubmitForm();">
    </form>
	<script>
		function SubmitForm(){
            var user = documcnt.getElementById("username");
            if(user.value.length>0){
                return true;
            }
            else{
                alert("用户名输入不能为空")
                return false;
            }
        }
    </script>
</body>
</html>

2.JQuery

<script src="jquery-1.12.4.js"></script>
$(ths)    转换为jquery对象
$(ths)[0]    jquery对象转换为dom
14.01

2.1 查找

2.1.1 选择器

#id    id选择器
element    标签选择器
.class    类选择器
*    所有
#i1,#i2,#i3    组合
#i1 .c1    层级 找i1的子子孙孙
#i1>.c1    在儿子里面找
pcev+next
pcev~siblings    找兄弟

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

$("input:eq(1)")

小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1">
        <div class="item"></div>
        <div class="item">
            <div class="c1"></div>
		   <a>百度</a>
        </div>
        <div class="item"></div>
    </div>
    <script src="jquery-1.12.0.js">
	<script>
removeClass
    </script>
</body> 
</html>

基本筛选

:first    获取匹配的第一个元素
:not(selectos)    不是内个
:even     偶数
:odd	奇数
:eq(index)    第几个索引
:gt(index)    大于
:lt(index)    小于

$("input:eq(1)")

属性

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSei1][attrSei2][attrSei3]

表单

:input
:text
:password
:radio

表单对象属性

:enabled    所有可以操作
:disabled    所有不可以操作
:checked    选中
:selected    选中

2.1.2 筛选器

eq(1)    索引这里的都是方法
first()    第一个
last()    最后一个
hasClass(class)     是否有某个样式
filter()    某个里面筛选
is()    判断返回的是不是指定的标签
map()
has()

查找

children()    所有的孩子
find()    所有的子子孙孙
parent()    父亲的
parentAll()    父亲所有
parentUnti()    父亲一个的父亲一个知道找到
next()    下一个
nextAll()    下边所有
nextUnti()    下一个的下一个知道找到
pcev()    上一个
pcevAll()    上边所有
pcevUnti()    上一个的上一个知道找到
siblings()    找兄弟

菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</boody>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
		.hide{
			display:none;
		}
		.menu{
			width:200px;
			height:600px;
			border:1px solid #dddddd;
			overflow:auto;
		}
		.menu .item .title{
			height: 40px;
			line-height:40px;
			background-color:#2459a2;
			color:white;
		
		} 
		
	</style>

</head>
<body>
    <div class="menu" >
		<div class="item">
			<div class="title" onclick="ShowMenu(this);">菜单一</div>
			<div class="body">
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			</div>
		</div>
		<div class="item">
			<div class="title" onclick="ShowMenu(this)";>菜单二</div>
			<div class="body hide">
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			</div>
		</div>
		<div class="item">
			<div class="title" onclick="ShowMenu(this)";>菜单三</div>
			<div class="body hide">
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			</div>
		</div>
    </div>
	<script src="jquery-3.6.0.min.js"></script>
    <script>
		function ShowMenu(ths){
			$(ths).next().removeClass("hide") ;
			$(ths).parent().siblings().find(".body").addClass("hide");
		}
	</script>
</boody>
</html>

2.2 操作

2.2.1 css

属性

attr()    设置属性
removeAttr()     删除属性
prop()    写一个参数是获取值，写两个是赋值
removeProp()    删除

全选，反选，取消jquery版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
	</head>	
	<body>
		<input type="button" value="全选" onclick = "CheckAll();"  />
		<input type="button" value="取消" onclick = "ReverseAll();" />
		<input type="button" value="反选" onclick = "c();"/>
		
		<table border="1" >
			<tbody id = "ba">
				<tr>
					<td><input type="checkbox" /></td>    
					<td>第二列</td>
					<td>第三列</td>
				</tr>
				<tr> 
					<td><input type="checkbox"  /></td>    
					<td>第二列</td> 
					<td>第三列</td>
				</tr>
				<tr>   
					<td><input type="checkbox" /></td>    
					<td>第二列</td> 
					<td>第三列</td>
				</tr>
			</tbody>
		</table>
		<script src="jquery-3.6.0.min.js"><script>
		<Script>
		
			function CheckAll(){
				$("#tb input[type="checkbox"]").prop("checked",true);
			}
			
			function ReverseAll(){
				$("#tb input[type="checkbox"]").prop("checked",false);
			}
			
			function c(){
				$("#tb input[type="checkbox"]").each(function(i)){
					if($(this).prop("checked")){
						$(this).prop("checked",false);
					}
					else{
						$(this).prop("checked",true);
					}
				});
			}
		</Script>
	</body>
</html>

css类

addClass()    添加样式
removeClass()    删除样式
toggleClass()   单击一次添加，再点击一下删除

HTML代码/文本/值

HTML()    没有参数是获取内容，有参数是赋值，下面的都一样
TEXT()
VAL()

css

css()     一个参数是获取，两个是赋值

位置

offset()    获取标签的高度，宽度
position()    获取当前标签与父标签的距离
scrollTop()    与顶部的距离
scrollLeft()    与右边的距离

尺寸

height()    高度
width()    宽度
innerHeight()    包括边距不带边宽    
innerWdth()
outerHeight()    包括边距带边宽
outerWdth()

2.2.2 文档处理

内部插入

append()    最后边添加 
appendTo()    把什么翻到什么里面 
prepend()    子元素的最前边
prependTo()

外部插入

after()    当前标签的后边
before()    当前标签的前边
insertAfter()    把什么放到什么后边
insertBefore()

删除

empty()    清空所提供标签的内部
remove（）    清除所有提供的标签

复制

clone    复制

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
	<body>
		<div>
			<a>
				<a onclick="Add(this);">+</a>
				<input type="text" />
			</a>
		</div>
		<script src=""></script>
		<script>
			function Add(ths){
				var p= $(ths).parent().clone();
				p.find("a").text("-");
				p.find("a").attr("onclick","Remove(this)")
				$(ths).parent().parent().append(p); 

			}
			function Remove(ths){
				$(ths).parent().remove();
			}
        </script>
	</boody>
</html>

2.3 事件

jquery菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</boody>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
		.hide{
			display:none;
		}
		.menu{
			width:200px;
			height:600px;
			border:1px solid #dddddd;
			overflow:auto;
		}
		.menu .item .title{
			height: 40px;
			line-height:40px;
			background-color:#2459a2;
			color:white;
		
		} 
		
	</style>

</head>
<body>
    <div class="menu" >
		<div class="item">
			<div class="title"">菜单一</div>
			<div class="body">
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			</div>
		</div>
		<div class="item">
			<div class="title" ;>菜单二</div>
			<div class="body hide">
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			</div>
		</div>
		<div class="item">
			<div class="title";>菜单三</div>
			<div class="body hide">
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			<p>内容一</p>
			</div>
		</div>
    </div>
	<script src="jquery-3.6.0.min.js"></script>
    <script>
		$(".item .title").click(function(){
        //这里的this就是被点击的标签	
        $(this).next().removeClass("hide") ;
        $(this).parent().siblings().find(".body").addClass("hide");
    })
		
	</script>
</boody>
</html>

//绑定事件
		$(".item .title").bind("click",function(){
        //这里的this就是被点击的标签	
        $(this).next().removeClass("hide") ;
        $(this).parent().siblings().find(".body").addClass("hide");
    })
//当文档数加载完毕后，自动执行
$(function(){})

小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" onclick="Add();" />
    <ul>
        <li>123</li>
	<ul>
    <script src="xxx"></script>
	<script>
        $(function(){
        	$("li").click(function(){
                alert($(this).text());
            //先找到ul在找到li，在给li绑定事件，叫做延迟加载
            $("ul").delegate("li","click",function(){
                alert($(this).text());
    })
        function Add(){
            var tag = document.createElement("li");
            tag.innerText = "666";
            $("ul").append(tag);
        }
        
        </script>
</boody>
</html>

2.4 扩展

jquery的循环

each(function(i){    each是循环中间是函数，i是索引的第0 ，第1个，第2个自动给你加上
					this是当前正在循环的元素
                      $(this)当前标签的jquery对象
    
});

第4章 jQuery示例_前端插件

1.jQuery示例：

表单验证，jQuery扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
        .item{
            width:250px;
            height:60px;
            position:relative;
        }
		.item input{
            width:200px;
        }
		.item span{
            position:absolute;
            top:20px;
            left:20px;
            font-size:8px;
            background-color:indianred;
            color:while;
            display:inline-block;
            width:200px;
        }
    </style>
</head>
<body>
    <div>
    	<form>
        	<div class="item">
        		<input class="c1" type="text" name="username" label="用户名" />
        	</div>
		    <div class="item">
                <input class="c1" type="password" name="pwd" label="密码">
            </div>
			<input type="submit"value="提交" onclick="CheckValid();"/>
		</form>
    </div>
	<script>
	    function CheckValid(){
            $("form.item span").remove();
			var flag = true;
            $("form .c1").each(function(){
                var val = $(this).attr("label");
                var tag = document.createElement("span");
                tag.innerText = label+"不能为空"；
                $(this).after(tag);
                flag = false;
            })
                return flag;
            }
    </script>
</body>
</html>

jquery版本的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
        .item{
            width:250px;
            height:60px;
            position:relative;
        }
		.item input{
            width:200px;
        }
		.item span{
            position:absolute;
            top:20px;
            left:20px;
            font-size:8px;
            background-color:indianred;
            color:while;
            display:inline-block;
            width:200px;
        }
    </style>
</head>
<body>
    <div>
    	<form>
        	<div class="item">
        		<input class="c1" type="text" name="username" label="用户名" />
        	</div>
		    <div class="item">
                <input class="c1" type="password" name="pwd" label="密码">
            </div>
			<input type="submit"value="提交" onclick="CheckValid();"/>
		</form>
    </div>
	<script>
		function BindCheckValid(){
			$("form :submit").click(function(){
				var flag = true;
				$("form.item span").remove();
					
				$("form .c1").each(function(){
					var val = $(this).val();
					if(val.length<=0){
						var label = $(this).attr("label");
						var tag = document.createElement("span");
						tag.innerText = label + "不能为空";
						$(this).after(tag);
						flag = false;
					}
				})
				return flag;
						
			});
		
		}
	    
    </script>
</body>
</html>

jquery的for循环

function f1(){
    $.each([11,22,33,44],function(k,v){
        if(k==2){    //这里的k是索引的数v是值
            return; //这里的return只会返回里面的函数，就和Python中的继续一样，如果你想停止循环可以用“return false”
        }
    })
}

jquery扩展方法

jquery.fn.extend(object)
$.extend({
    "dalong":function(arg){
        console.log(arg);
    }
});
$("form").dalong("1234")    必须是用标签，这个里面有一个this代指这个标签

jquery.extend(object)    给jquery添加函数永久存在
$.extend({
    "dalong":function(arg){
        console.log(arg);
    }
});
$.dalong("1234")

文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
        .item{
            width:250px;
            height:60px;
            position:relative;
        }
		.item input{
            width:200px;
        }
		.item span{
            position:absolute;
            top:20px;
            left:20px;
            font-size:8px;
            background-color:indianred;
            color:while;
            display:inline-block;
            width:200px;
        }
    </style>
</head>
<body>
    <div>
    	<form>
        	<div class="item">
        		<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6" />
        	</div>
		    <div class="item">
                <input class="c1" type="password" name="pwd" label="密码" require="true" phone="true">
            </div>
			<input type="submit"value="提交" onclick="CheckValid();"/>
		</form>
    </div>
	<script src="jquery-xxx.js"</script>	
	<script>
        $(function(){
        	$.valid("#form1");
    })
     </script>
</body>
</html>

文件jquery1

(function(iq){
 	jq.extend({
    	valid:function(form){
            jq(form).find(":submit").click(function(){
                jq(form).find(".item span").remove();
                var flag = true;
                jq(form).find(":text,:password").each(function(){
                    var require = $(this).attr("tequire");
                    if (require){
                    	var val = $(this).val();

                        if (val.length<=0){
                            var lavel = $(this).attr("label");
                            ErrorMessage($(this),label + "不能为空");
                            flag= false;
                            return false;
                        }
                    var minLen = $(this).attr("min-len");\
                    if (minLen){
                        var minLenInt = parseInt(minLen);
                        if(val.lenth<minLenInt){
                            var label = $(this).attr("label");
                            ErrorMessage($(this),label + "长度最小为"+minLen);
                            flag = false;
                            return false;
                        }
                    }
                    }
                    }
                    var phone = $(this).attr("phone");
                    if(phone){
                        var phoneReg = /^[3|5|8]\d{9}$/;
                        if(!phoneReg.test(val)){
                            var lavel = $(this).attr("label");
                            ErrorMessage($(this),label + "格式错误");
                            flag = false;
                            return false;
                        }
                    }
                    })
                
                    return flag;
                }
            })
        }
        )}        
 })(jQuery);

JavaScript的正则表达式

定义正则表达式
/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配
js正则匹配时本身就是支持多行，此处行匹配只是影响正则表达式^$来匹配换行的内容
var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
匹配
JavaScript中支持正则表达式，其主要提供了连个功能：
text(string)   检查字符串中是否和正则匹配
exec(string)    获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
字符串中相关方法
obj.search(regexp)    获取索引位置，搜索整个字符串，返回匹配成功的第一个位置（g模式无效）
obj.match(regexp)    获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp,replacement)   替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&: 当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号

非全局模式
	获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素使正则子匹配（正则内容分组匹配）
	var pattern = /\bJava\w*\b/;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text)
	
	var pattern = /\b(Java)\w*\b/;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text)

全局模式
	需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
	var pattern = /\bJava\w*\b/g;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text)

	var pattern = /\b(Java)\w*\b/g;
	var text = "JavaScript is more fun than Java or JavaBeans!"
	result = pattern.exec(text)

2.前端插件

fontawsome、easyui、jqueryui、bootstrap、easyui、jqueryul、bxslider、jquerylazyload

标签：jquery,function,obj,color,标签,tag,Html,var,css
From： https://www.cnblogs.com/fxy1024/p/17002767.html

Html+css+js+jquery

第1章