一、HTML标签
1. head标签中
-
-
- <meta> — 编码，跳转，刷新，关键字，描述，IE兼容
- <title> — 加标题显示内容
- <link> — 加小图标
- <style> — 写css样式
- <script> — 写js动态效果
-
2. body标签中
1）特殊符号：
空格： 大于号：> 小于号：< 参考网址：www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
2）常用标签（块级标签/行内标签）：
# 块级标签：
-
-
-
- 换行：<br>
- 段落：<p></p>
- h标签：<h1></h1> — <h6></h6>
- div标签：<div></div>
- form标签：<form></form>
- 列表标签：ul ol dl
-
-
无序标签 <ul> <li></li> <li></li> </ul> 有序标签 <ol> <li></li> <li></li> </ol>
错位标签 <dl> <dt>1</dt> <dd>1.1</dd> <dd>1.2</dd> <dd>1.3</dd> </dl> <dl> <dt>2</dt> <dd>2.1</dd> <dd>2.2</dd> <dd>2.3</dd> </dl>
-
-
-
- 表格标签：thead tbody tr td th colspan rowspan
-
-
<table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>第二行，第一列</td> <td>第二行，第二列</td> <td>第二行，第三列</td> </tr> <tr> <td rowspan="2">第三行，第一列，纵向合并单元格</td> <!--删除纵向多的个数--> <td colspan="2">第三行，第二列，横向合并单元格</td> <!--删掉横向多的个数--> </tr> <tr> <td>第四行，第二列</td> <td>第四行，第三列</td> </tr> </tbody> </table>
# 行内标签：
-
-
-
- span标签：<span></span>（行内标签设置高度宽度没有用，要用display：inline-block）
-
-
<span style="height: 200px;width: 200px;display: inline-block"></span> # 如果不加display:inline-block浏览器不会显示这个span这个200*200的蓝色区域
-
-
-
- lable标签：for
-
-
<label for="username">用户名：</label> <input id="username" type="text" name="user"> # 点击用户名input获取光标
-
-
-
- 多行文本标签：<textarea >默认值</textarea> # 有name属性，后台拿name，默认值直接写内容
- fieldset标签：
<fieldset> <legend>登录</legend> </fieldset>
-
input标签：<input> 包含的属性中含有name供后台获取的，所有的name和值是以字典形式表现的
-
-
常用的属性 <input type="text"> # 普通文本框 <input type="password"> # 密码框 <input type="button" value="登录1"> <input type="submit" value="登录2"> <input type="reset" value="重置"> # 重置还原 <input type="file"> # 文件上传，依赖form表单的一个属性enctype="multipart/form-data" 单选属性 男：<input type="radio" name="gender" value="1"> # name相同，后台拿其中一个value值 女：<input type="radio" name="gender" value="2"> 多选属性 <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1"> # name相同，后台获取value变为列表 足球：<input type="checkbox" name="favor" value="2"> # 默认选中加属性checked="checked" 排球：<input type="checkbox" name="favor" value="3"> 网球：<input type="checkbox" name="favor" value="4"> <p>技能</p> 撩妹：<input type="checkbox" name="skill" value="1"> 写代码：<input type="checkbox" name="skill" value="2">
-
-
-
- select标签：
-
-
单选下拉框 <select name="city" size="3"> <option value="1">北京</option> <option value="1">上海</option> <option value="1">广州</option> </select> 另： <select> <optgroup label="山东省"> # 只能选择到下面的option <option>济南</option> <option>德州</option> <option>泰安</option> </optgroup> <optgroup label="河南省"> <option>郑州</option> <option>商丘</option> <option>新郑</option> </optgroup> </select> 复选下拉框 <select name="city" multiple> <option value="1">北京</option> <option value="1">上海</option> <option value="1">广州</option> </select>
-
-
-
- a标签：<a></a>
-
-
跳转 <a href="http://www.baidu.com" target="_blank">百度</a> # target属性有多个 锚 <a href="#i1">第一章</a> # 点击直接跳到第一章内容的顶部 <a href="#i2">第二章</a> <a href="#i3">第三章</a> <div id="i1" style="height: 600px">第一章内容</div> <div id="i2" style="height: 600px">第二章内容</div> <div id="i3" style="height: 600px">第三章内容</div>
-
-
-
- img标签：
-
-
src属性：地址 alt属性：图片加载不出来时显示的名字 title属性：鼠标放上自动显示标题
3. 其他事项：
注释： <!-- -->
PS：标签之间可以嵌套
二、css样式
1、在标签上设置style属性： height: 48px; ··· 2、编写css样式： 1.标签的style属性 2.写在head里面，style标签中写样式 -标签选择器 div{ background-color: blue; } -id选择器 #id名称{ background-color: blue; } -class选择器 .class名称{ background-color: blue; } -层级选择器 span div{ background-color: blue; } # span标签下的div标签，中间加空格，用id和class都可 -组合选择器 #i1,#i2,#i3{ background-color: blue; } # 中间用逗号 -属性选择器 input[type=‘text‘]{ background-color: blue; } # 注意用[]，也可以用自定义属性 PS：标签css样式的优先级按就近原则，先标签内，后style中的顺序 3.css样式写在单独文件中 在head标签中引入<link rel="stylesheet" href="css文件名">
3、注释：/* */ 4、边框和文本 # 边框样式 - border: 1px dotted red; - height: 48px; - width: 80%; - border-top/right/left/bottom # 文本内容样式 - color: blue; - font-size: 20px; - font-weight: bolder; - text-align: center; /* 水平居中 */ - vertical-align: middle; /* 垂直居中 */ - line-height: 48px; /* 同是垂直居中，常用这个，需要和height一样 */ 5、float 让标签飘起来，让块级标签堆叠起来 <div style="width: 20%;float: left">1</div> <div style="width: 80%;float: right">2</div> 对比上下两个 <div style="float: left">1</div> <div style="float: right"> <a>登录</a> <a>注册</a> </div> 当父标签边框未撑起来是，在父标签内加入这个属性 <div style="clear:both;"></div> 示例： <div style="width: 300px;border: 1px solid red;"> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="clear:both;"></div> </div> 6、display display:inline; # 变为行内标签 display:block # 变为块级标签 display:inline-block; # 具有inline，默认自己与多少占多少 # 具有block，可以设置高度，宽度，padding，margin display:none; # 隐藏标签 <div style="display: inline">asdf</div> <span style="display: block">asdf</span> ****** 行内标签：无法设置高度，宽度，padding，margin 块级标签：可以设置高度，宽度，padding，margin 7、padding margin 边距： padding：内边距 （自动生长） <div style="border: 1px red solid;height: 70px;width: auto"> <div style="height: 50px;width: auto;padding-top: 10px"></div> </div> margin：外边距 （自动移动） margin:0 auto;—> 表示上下为0，左右居中 <div style="border: 1px red solid;height: 70px;width: auto"> <div style="height: 50px;width: auto;margin-top: 10px"></div> </div>
8、position a、fixed 翻页保持原处 positon:fixed; 固定在当前浏览窗口的右下角 bottom:0px; right:0px b、relative + absolute 混合使用 用于相对位置的设置 <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;left: 0;bottom: 0;height: 30px;width: 30px"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;right: 0;bottom: 0;height: 30px;width: 30px"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;left: 0;top: 0;height: 30px;width: 30px"></div> </div>
c、通过使用z-index和以上功能设置模态对话框（未加js） <div style="z-index:9;position: fixed;top: 0;bottom: 0;left: 0;right: 0; opacity:0.3;"></div> /*建立遮罩层*/ <div style="z-index:10;position:fixed;top:50%;left:50%; margin-top: -100px;margin-left: -250px; /*使用这两个功能把对话框调整到中间*/ height: 200px;width: 500px;"></div> 9、overflow 对比使用： <div style="height: 100px;width: 100px;"> <img src="1.jpg"> </div>
<div> <img src="1.jpg" style="height: 500px;width:500px;"> </div>
<div style="height: 100px;width: 100px;overflow: auto"> <img src="1.jpg"> </div>
<div style="height: 100px;width: 100px;overflow: hidden"> <img src="1.jpg"> </div> 10、hover 使用方式： .pg-header .menu:hover{
cursor: pointer; /* 鼠标移到标签上变为小手 */ } 使用示例： <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; top: 0; left: 0; right: 0; height: 48px; background-color: #2459a2; line-height: 48px; } .pg_body{ margin-top: 50px; } .w{
width: 980px; margin: 0 auto; } .pg-header .menu{ color: white;
display: inline-block; /* 这个属性可以使标签上下充满 */ padding: 0 10px; /* 上下为0 ，左右边距为10*/ } {#当鼠标移动到当前标签上时，以下css属性才生效#} .pg-header .menu:hover{ background-color: blue; cursor: pointer; /* 鼠标移到标签上变为小手 */ } </style> </head> <body>
<div class="pg-header"> <div class="w"> <a class="menu">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg_body"> <div class="w">222</div> </div>
</body> </html>
11、background-image <div style="background-image: url(10.jpg);height: 2000px"> # 注意这里的路径url，参考https://blog.csdn.net/qq_37811638/article/details/78353409 </div> # 默认，div大，图片重复铺垫
<div style="background-image: url(10.jpg);height: 2000px; background-repeat: no-repeat/repeat-x/repeat-y/"></div> # 不重复；横向重复；垂直重复 以下两个属性是扣洞，让图片的位置变换 background-position-x: background-positon-y:
三、js动态效果
基础知识 1、编程语言 独立的编程语言，浏览器具有js解释器 存在于html中
2、JavaScript代码存在形式： - 在head中 <script> </script> - 保存中文件中 <script src=‘js文件路径‘></script>
PS：js代码需要放置在<body>标签内部的最下方 也可临时在浏览器的终端console中写
3、注释： 单行注释：// 多行注释：/* */
4、语法 1) 变量： python： name= ‘alex‘ JavaScript: name = ‘alex‘ # 全局变量 var name = ‘alex‘ # 局部变量
2)基本数据类型： 数字 <script> age = 18; // 数字类型 age = ‘18‘; // 字符串类型 i = parseInt(age); // 字符串转换成数字 </script> 字符串 a = ‘alex‘ a.charAt(索引位置) a.substring（起始位置,结束位置） a.length 获取当前字符串长度 a.concat(value,...) 拼接 a.indexOf(substring,start) 子序列位置 a.lastIndexOf(substring,start) 子序列位置 a.substring(from,to) 根据索引获取子序列 a.slice(start,end) 切片 a.toLowerCase() 大写 a.toUpperCase() 小写 a.split(delimiter,limit) 分割 数组（类似python中的列表） l = [11,22,33] l.push(ele) 尾部追加元素 l.pop() 尾部获取一个元素 l.unshift(ele) 头部插入元素 l.shift() 头部移除元素 l.splice(start,deleteCount,value) 插入、删除或替换数组的元素 l.splice(n,0,val) 指定位置插入元素 l.splice(n,1,val) 指定位置替换元素 l.splice(n,1) 指定位置删除元素 l.slice() 切片 l.reverse() 反转 l.join(sep) 将数组元素连接起来以构建一个字符串 l.sort() 对数组元素进行排序 字典 dict = {‘k1‘:‘v1‘,‘k2‘:‘v2‘} 布尔类型 true false
3)条件语句 if(条件){
}else if(条件){
}else{
} 特殊： if(1 === 1) # 值和类型都相等 if(1 !== 1) && and || or
4)for循环 1、循环时，循环的元素是索引 a = [11,22,33,44] for (var item in a){ console.log(item); // 取值用a[item] }
a = {‘k1‘:‘v1‘,‘k2‘:‘v2‘} for (var item in a){ console.log(item) // 取值用a[item] } 2、循环次数限定的循环 for(var i=0;i<10;i++){
} 此时不支持字典的循环
5)函数：
普通函数： function 函数名(a,b,c){
} 函数名(1,2,3) 匿名函数： setInterval(function(){ console.log(‘123‘) },5000) 自执行函数（创建函数并且自动执行）： (function(){ console.log(arg) })(123)
6)序列化： JSON.stringify() # 将对象转换为字符串 JSON.parse() # 将字符串还原成对象类型 li = [11,22,33,44] >>(4) [11, 22, 33, 44] new_li = JSON.stringify(li) >>"[11,22,33,44]" new_li >>"[11,22,33,44]" li = JSON.parse(new_li) >>(4) [11, 22, 33, 44] li >>(4) [11, 22, 33, 44]
7)转义： encodeURL() # URL将字符进行转义(将汉字转义) decodeURL() # URL恢复字符转义 encodeURLComponent() # 转义URL组件中的字符（将汉字、特殊字符都转义） decodeURLComponent() # 给转义字符解码 escape() # 对字符串转义 unescape() # 给转义字符串解码 URLerror() # 由URL的编码和解码方法抛出
encodeURI(‘https://www.sogou.com/web?query=理解‘) >>"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3" new_url = encodeURI(‘https://www.sogou.com/web?query=理解‘) >>"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3" new_url >>"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3" url = decodeURI(new_url) >>"https://www.sogou.com/web?query=理解"
encodeURIComponent(‘https://www.sogou.com/web?query=理解‘) >>"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E7%90%86%E8%A7%A3" new_url = encodeURIComponent(‘https://www.sogou.com/web?query=理解‘) >>"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E7%90%86%E8%A7%A3" url = decodeURIComponent(new_url) >>"https://www.sogou.com/web?query=理解"
8)eval： python： val = eval(表达式) exec(执行代码) JavaScript： eval(表达式\执行代码)
9)时间: 需要用Date类 var d = new Date() d.get××× # 获取××× d.set××× # 设置×××
10)作用域： # 其他语言：以代码块为作用域 public void Func(){ if(1==1){ string name = ‘Java‘; } console.writeline(name); } Func() // 报错 # python：以函数为作用域 情况一： def func(): if 1 == 1: name = ‘python‘ print(name) func() // 成功 情况二： def func(): if 1 == 1: name = ‘python‘ func() print(name) // 报错 # JavaScript： 1.在JavaScript中是以函数作为作用域（除let） function func(){ if(1==1){ var name = ‘js‘ } console.log(name) } func()
2.函数的作用域在函数未被调用之前，已经创建 3.函数的作用域存在作用域链，也是在被调用之前创建 示例一： xo = ‘Alex‘ function func(){ var xo = ‘Eric‘ function inner(){ var xo = ‘Tony‘ console.log(xo) } inner() } func()// console.log由内向外找xo的值
示例二： xo = ‘Alex‘ function func(){ var xo = ‘Eric‘ function inner(){ console.log(xo) } return inner; } var ret = func() // 返回的是inner地址 ret() // 执行的是inner() 打印的是Eric
示例三： xo = ‘Alex‘ function func(){ var xo = ‘Eric‘ function inner(){ console.log(xo) } var xo = ‘Tony‘ return inner; } var ret = func() // 返回的是inner地址 ret() // 执行的是inner() 打印的是Tony 4.函数内部局部变量提前声明（解释过程中只声明，不赋值，执行时才赋值） 示例一： function func(){ console.log(xxoo) } func() // 程序直接报错 示例二： function func(){ console.log(xxoo) var xxoo = ‘alex‘ } // 解释过程中：先在func()中找到所有的局部变量声明但是不会赋值，即var xxoo； func() // undefined
11)JavaScript面向对象 情况一： function Foo(n){ this.name = n this.sayName = function(){ console.log(this.name) } } var obj1 = new Foo(‘we‘); // 创建对象 obj1.name obj1.sayName()
var obj2 = new Foo(‘wee‘); obj2.name obj2.sayName()
1.this代指对象，相当于python中的self 2.创建对象时，用new关键字 以上this.SayName为对象中的函数，但是此时两个对象调用时都自身创建同一个函数， 不如把函数直接封装在类中，对象调用时直接用类中的方法，由此引出情况二
情况二： 原型的引入 function Foo(n){ this.name = n; } Foo.prototype = { ‘sayName‘:function(){ console.log(this.name) } } # Foo的原型 obj1 = new Foo(‘we‘) obj1.sayName() obj2 = new Foo(‘wee‘)
Dom（注意节点和元素两个概念） 1、找到标签 1）直接找： 获取单个元素 document.getElementById(‘i1‘) 获取多个元素(数组形式返回) document.getElementsByTagName(‘div‘) document.getElementsByClassName(‘cls‘) 2）间接找： parentElement 父节点标签元素 children 所有子标签(以元组形式返回) firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素 2、操作标签
a. innerText（仅文本） 获取标签中的文本内容 tag.innerText 对标签内部文本进行重新赋值 tag.innerText = ‘‘ b. innerHTML（全部内容） 可以获取嵌套标签的内的标签 obj.innerHTML = (‘<a href=‘http://www.baidu.com‘>百度</a>‘)
示例： document.getElementById(‘i2‘) >><div id=?"i2">?我是i2?</div>? document.getElementById(‘i2‘).innerText >>"我是i2" document.getElementById(‘i2‘).innerText = ‘新内容‘ >>"新内容" document.getElementsByTagName(‘a‘) >>HTMLCollection(3) [a, a, a] document.getElementsByTagName(‘a‘)[1] >><a>?hjkl?</a>? document.getElementsByTagName(‘a‘)[1].innerText >>"hjkl" document.getElementsByTagName(‘a‘)[1].innerText = ‘换新内容‘ >>"换新内容" li = document.getElementsByTagName(‘a‘) >>HTMLCollection(3) [a, a, a] for (var i=0;i<li.length;i++){li[i].innerText = ‘循环换新内容‘} >>"循环换新内容" c. value 用于input、select、textarea 可以获取内部值 select还有一个selectIndex
搜索框示例（类似placeholder=""）：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <button onclick="f1()">确定</button>
9 <div id="ni" style="color: red">你好</div>
10
11 <input id="i1" onfocus="f2()" onblur="f3()" type="text" value="请输入关键字">
12
13
14 <script>
15 function f1() {
16 alert(123)
17 }
18
19 function f2() {
20 var tag = document.getElementById(‘i1‘);
21 var vl = tag.value;
22 if (vl == "请输入关键字"){
23 tag.value = ‘‘
24 }
25 console.log(1)
26 }
27 function f3() {
28 var tag = document.getElementById(‘i1‘);
29 var val = tag.value;
30 if (val.length == 0){
31 tag.value = ‘请输入关键字‘
32 }
33 console.log(2)
34 }
35 </script>
36
37 </body>
38 </html>
d. className 操作class属性名称 tag.className = ‘c1‘ // 直接命名和修改class样式名(以字符串返回) tag.classList // 获取class样式名（以数组返回） tag.classList.add(‘c2‘) // 增加class样式名 tag.classList.remove(‘c1‘) // 删除class样式名 f. style ① 直接在标签内部或head中写 ② 在script中获取标签后写入 var obj = document.getElementById(‘i1‘) obj.style.fontSize = 16px;(把原生style中的属性改为驼峰式) obj.style.backgroundColor = ‘red‘; obj.style.color = red; g. 属性操作 var obj = document.getElementById(‘i1‘) obj.setAttribute(‘name‘,‘Alex‘) obj.removeAttribute(‘value‘) obj.attributes h. 创建标签 其一：以字符串形式 其二：以对象的方式 示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <p><button onclick="addEle1()">+</button></p>
9 <p><button onclick="addEle2()">+</button></p>
10
11 <div id="i1">
12 <p><input type="text"></p>
13 </div>
14
15 <script>
16
17 function addEle1() {
18 // 创建一个标签
19 // 将标签添加到i1里面
20 var tag = "<p><input type=‘text‘></p>";
21 document.getElementById(‘i1‘).insertAdjacentHTML(‘beforeEnd‘,tag);
22 // 注意：第一个参数有四个：‘beforeBegin‘、‘afterBegin‘、‘beforeEnd‘、‘afterEnd‘
23 }
24
25 function addEle2() {
26 var tag = document.createElement(‘input‘)
27 tag.setAttribute(‘type‘,‘text‘)
28 tag.style.border = ‘1px solid red‘;
29
30 var p =document.createElement(‘p‘);
31 p.appendChild(tag);
32
33 document.getElementById(‘i1‘).appendChild(p)
34 }
35
36
37 </script>
38
39
40 </body>
41 </html>
i. checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true j. 提交表单(通过DOM) 在DOM中任何标签都可以提交数据 document.getElementById(‘i1‘).submit() k. 其他 console.log() alert() confirm() location.href # 获取当前url location.href = ‘‘ # 设置当前url location.reload() # 页面刷新
------------ setInterval(funciton(){},5000) # 设置定时器
var obj = setInterval(funciton(){ console.log(1) clearInterval(obj) # 清除定时器 },5000) ------------- setTimeout(function(){ console.log(‘timeout‘) },5000) # 表示5秒钟后执行一次就结束 clearTimeout() 示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div id="i1"></div>
9 <input type="button" onclick="func()" value="删除">
10
11 <script>
12
13 function func() {
14 var tag = document.getElementById(‘i1‘);
15 tag.innerText = ‘已删除‘;
16 setTimeout(function () {
17 tag.innerText = ‘‘;
18 },3000)
19 }
20
21
22 </script>
23
24 </body>
25 </html>
事件
1、常用事件： onclick、onblur、onfocus、onmouseover、onmouseout等
2、绑定事件： 方式一：直接标签绑定（初级程序员事件绑定） <div onclick="函数()"></div> <script> function 函数(){ ... } </script> 方式二：先获取Dom对象，然后绑定（中级程序员事件绑定） document.getElementById(‘i1‘).onclick = function(){ console.log(123) } 示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <table border="1px" width="300px">
9 <tr>
10 <th>1</th>
11 <th>1</th>
12 <th>1</th>
13 </tr>
14
15 <tr>
16 <th>2</th>
17 <th>2</th>
18 <th>2</th>
19 </tr>
20
21 <tr>
22 <th>3</th>
23 <th>3</th>
24 <th>3</th>
25 </tr>
26 </table>
27
28
29 <script>
30 var mytags = document.getElementsByTagName(‘tr‘)
31 // console.log(mytags)
32 for (var i=0;i<mytags.length;i++){
33 mytags[i].onmouseover = function () {
34 this.style.backgroundColor = ‘red‘;
35 }
36 }
37
38 for (var i=0;i<mytags.length;i++){
39 mytags[i].onmouseout = function () {
40 this.style.backgroundColor = ‘‘;
41 }
42 }
43
44
45
46
47 </script>
48
49
50 </body>
51 </html>
方式三：多事件绑定（高级程序员事件绑定） document.getElementById(‘i1‘).addEventListener(‘click‘,function(){console.log(‘aaa‘),false}) document.getElementById(‘i1‘).addEventListener(‘click‘,function(){console.log(‘bbb‘),false})
示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <button id="bt">确定</button>
10
11 <script>
12 document.getElementById(‘bt‘).addEventListener(‘click‘,function () {console.log(‘aaa‘)},false);
13 document.getElementById(‘bt‘).addEventListener(‘click‘,function () {console.log(‘bbb‘)},false)
14
15
16 </script>
17
18
19 </body>
20 </html>
示例（注意冒泡[false]和捕捉[true]）：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <div id="main" style="height: 400px;width: 300px;background-color: red">
10 <div id="content" style="height: 200px;width: 150px;background-color: blue"></div>
11 </div>
12
13 <script>
14 var mymain = document.getElementById(‘main‘);
15 var mycontent = document.getElementById(‘content‘);
16 mymain.addEventListener(‘click‘,function () {console.log(‘mian‘)},false); // 此时为冒泡，从下到上
17 // mymain.addEventListener(‘click‘,function () {console.log(‘mian‘)},true); // 此时为捕捉，从上到下
18 mycontent.addEventListener(‘click‘,function () {console.log(‘content‘)},false)
19 // mycontent.addEventListener(‘click‘,function () {console.log(‘content‘)},true)
20 </script>
21
22 </body>
23 </html>
注意：this的使用，当前触发事件的标签 a. 第一种绑定方式 <input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(this)‘> function ClickOn(self){ // self 当前点击的标签 } 示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <div onclick="f1(this)">确定</div>
10
11 <script>
12 function f1(self) {
13 self.innerText = ‘取消‘;
14 self.style.backgroundColor = ‘red‘;
15 }
16
17 </script>
18 </body>
19 </html>
b. 第二种绑定方式 <input id=‘i1‘ type=‘button‘> document.getElementById(‘i1‘).onclick = function(){ // this 代指当前点击的标签 }
c. JavaScript词法分析 <script> function func(age){ console.log(age); var age = 27; console.log(age); function age(){ console.log(age); } } func(3); </script> 调用函数前有个活动对象（active object）按以下规则进行分析： 1.形式参数 2.局部变量 3.函数声明表达式 拿以上为例： 1.形式参数 未调用之前 AO.age = undefined; 调用之后 AO.age = 3; 2.局部变量 AO.age = undefined; 3.函数声明表达式 AO.age = funciton()
3、示例： 模态对话框、多选、反选：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .shade{
8 position: fixed;
9 top: 0;
10 bottom: 0;
11 right: 0;
12 left: 0;
13 background-color: black;
14 opacity: 0.5;
15 z-index: 10;
16 }
17 .hide{
18 display: none;
19 }
20 .module{
21 height: 300px;
22 width: 500px;
23 background-color: white;
24 position: fixed;
25 top: 50%;
26 left: 50%;
27 margin-left: -250px;
28 margin-top: -150px;
29 z-index: 11;
30 }
31 </style>
32 </head>
33 <body>
34 <h1>实现模态对话框和全选、反选、取消功能</h1>
35 <hr>
36 <br>
37 <br>
38 <div>
39 <span><button onclick="AddShade()">添加</button></span>
40 <span><button onclick="ChooseAll()">全选</button></span>
41 <span><button onclick="CancelAll()">取消</button></span>
42 <span><button onclick="ReverseAll()">反选</button></span>
43 </div>
44
45 <div>
46 <table border="1">
47 <thead>
48 <tr>
49 <th>主机名</th>
50 <th>地址</th>
51 <th>选择</th>
52 </tr>
53 </thead>
54 <tbody>
55 <tr>
56 <td>业务一</td>
57 <td>192.1</td>
58 <td><input class="ck" type="checkbox"></td>
59 </tr>
60 <tr>
61 <td>业务二</td>
62 <td>192.2</td>
63 <td><input class="ck" type="checkbox"></td>
64 </tr>
65 <tr>
66 <td>业务三</td>
67 <td>192.3</td>
68 <td><input class="ck" type="checkbox"></td>
69 </tr>
70
71 </tbody>
72 </table>
73 </div>
74
75 <div id="i1" class="shade hide">
76 <div class="module">
77 <button>确定</button>
78 <button onclick="RemoveShade()">取消</button>
79 </div>
80 </div>
81
82 <script>
83 function AddShade() {
84 var tag = document.getElementById(‘i1‘)
85 tag.classList.remove(‘hide‘) // 加强这里的标签内容和属性操作语句
86
87 }
88 function RemoveShade() {
89 var tag = document.getElementById(‘i1‘)
90 tag.classList.add(‘hide‘) // 加强这里的标签内容和属性操作语句
91 }
92
93 function ChooseAll() {
94 var tags = document.getElementsByTagName(‘input‘);
95 for (var i=0;i<tags.length;i++){
96 tags[i].checked = true
97 }
98 }
99
100 function CancelAll() {
101 var tags = document.getElementsByClassName(‘ck‘);
102 for (var i=0;i<tags.length;i++){
103 tags[i].checked = false;
104 }
105 }
106 function ReverseAll() {
107 var tags = document.getElementsByClassName(‘ck‘);
108 for (var i=0;i<tags.length;i++){
109 if(tags[i].checked==true){
110 tags[i].checked = false
111 }else if(tags[i].checked == false) {
112 tags[i].checked = true;
113 }
114 }
115 }
116 </script>
117
118 </body>
119 </html>
定时器的制作：
1 <script>
2 setInterval("alert(123)",2000) // setInterval("函数名",时间间隔)
3 // 每两秒执行alert语句（可以放函数）
4 </script>
5
6 用定时器做跑马灯：
7 <head>
8 <meta charset="UTF-8">
9 <title>Title</title>
10 </head>
11 <body>
12
13 <div id="i1">-欢迎老男孩莅临指导-</div>
14
15
16 <script>
17
18 function func() {
19 var tag = document.getElementById(‘i1‘)
20 content = tag.innerText;
21 f = content.charAt(0);
22 l = content.substring(1,content.length)
23 var new_content = l + f;
24 tag.innerText = new_content;
25 }
26
27 setInterval(‘func()‘,500)
28
29 </script>
左侧菜单折叠、展开：
1 <!DOCTYPE html>
2
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 .header{
9 height: 38px;
10 background-color: blue;
11 color: white;
12 line-height: 38px;
13 border-bottom: 0.5px solid white;
14 }
15 .hide{display: none}
16 </style>
17 </head>
18 <body>
19 <h1>实现左侧菜单折叠、展示功能</h1>
20 <hr>
21 <br>
22 <br>
23
24
25 <div>
26 <div class="item">
27 <div id="i1" class="header" onclick="ChangeMenu(‘i1‘);">菜单1</div>
28 <div class="content">
29 <div>内容1</div>
30 <div>内容1</div>
31 <div>内容1</div>
32 </div>
33 </div>
34
35 <div class="item">
36 <div id="i2" class="header" onclick="ChangeMenu(‘i2‘);">菜单2</div>
37 <div class="content">
38 <div>内容2</div>
39 <div>内容2</div>
40 <div>内容2</div>
41 </div>
42 </div>
43
44 <div class="item">
45 <div id="i3" class="header" onclick="ChangeMenu(‘i3‘);">菜单3</div>
46 <div class="content">
47 <div>内容3</div>
48 <div>内容3</div>
49 <div>内容3</div>
50 </div>
51 </div>
52
53 <div class="item">
54 <div id="i4" class="header" onclick="ChangeMenu(‘i4‘);">菜单4</div>
55 <div class="content">
56 <div>内容4</div>
57 <div>内容4</div>
58 <div>内容4</div>
59 </div>
60 </div>
61 </div>
62
63
64 <script>
65 function ChangeMenu(nid) {
66 var tag = document.getElementById(nid);
67 var item_list = tag.parentElement.parentElement.children;
68 /*
69 for (var i in item_list){
70 item_list[i].children[1].classList.add(‘hide‘)
71 }
72
73 */
74
75
76
77 for (var i=0;i<item_list.length;i++){
78 var current_tag = item_list[i].children[1]
79 current_tag.classList.add(‘hide‘)
80 }
81
82 tag.nextElementSibling.classList.remove(‘hide‘)
83
84
85 }
86 </script>
87 </body>
88 </html>
jQuery
基础知识： 模块 《===》 类库 DOM/BOM/JavaScript的集成类库 http://jquery.cuishifeng.cn
作用： 一、查找元素 # 选择器 1.id <div id=‘i1‘></div> $(‘#i1‘) 2.class <div class=‘c1‘></div> $(‘.c1‘) 3.标签 <div></div> $(‘div‘) 4.组合 <div> <a id=‘a1‘></a> </div> <div> <a id=‘a2‘></a> <div class=‘c1‘></div> </div> $(‘#a1,#a2,.c1‘) 5.层级 <div id=‘c1‘> <p> <a class=‘c1‘></a> </p> </div> $(‘#c1 p .c1‘) $(‘parent>child‘) # 只找儿子 6.属性 <a ale=‘123‘></a> <a ale=‘456‘></a> $(‘[alex]‘) # 具有alex属性的所有标签 $(‘[alex="123"]‘) # alex属性等于123的标签 7.表单 <input type=‘text‘/> <input type=‘password‘/> <input type=‘file‘/> $("input[type=‘text‘]") $(‘:text‘) # 等同于上面 8. 绑定事件 $(‘.header‘).click(function(){}) # 筛选器 $(‘#i1‘).next() # 后一个标签 $(‘#i1‘).nextAll() # 下面所有的 $(‘#i1‘).nextUntill(‘#i2‘) # 向下找到截止到id=i2的标签 $(‘#i1‘).prev() # 上一个标签 $(‘#i1‘).prevAll() # 上面所有的 $(‘#i1‘).prevUntill(‘#i1‘) # 向上找到截止到id=i1的标签 $(‘#i1‘).parent() # 父标签 $(‘#i1‘).parents() # 找到父亲、爷爷等到祖宗 $(‘#i1‘).parentsUntill(‘#i3‘) # 找到祖宗辈的id=i3 $(‘#i1‘).children() # 孩子标签 $(‘#i1‘).siblings() # 兄弟标签 $(‘#i1‘).find(‘‘) # 找id=i1的子子孙孙中的符合要求的标签
:first :last :even :odd ;eq(index) :gt(index)
# 转换： jQuery对象[0] ==》 Dom对象 Dom对象 ==》 $(Dom对象)
二、操作元素 # 内容操作 $(‘#i1‘).text() # 获取文本内容 $(‘#i1‘).text(‘asdf‘) # 设置文本内容 $(‘#i1‘).html() $(‘#i1‘).html(‘<p>asdf</p>‘) # 会解析标签 <input id=‘i2‘ type=‘text‘ value=‘请输入关键字‘/> $(‘#i2‘).val() # 获取值 $(‘#i2‘).val(‘你好‘) # 设置值
# 样式操作 $(‘#i1‘).addClass(‘hide‘) $(‘#i1‘).removeClass(‘hide‘) $(‘#i1‘).toggleClass(‘hide‘) # 有就去掉hide，没有就加上hide，不用判断语句了
# 属性操作 attr：专门用于做自定义属性 $(‘.c1‘).attr(‘type‘) # 获取当前标签的类型 $(‘.c1‘).attr(‘id‘,‘i1‘) # 设置当前标签的id=i1 $(‘.c1‘).removeAttr(‘value‘) # 删除标签内vlue属性 prop：专门用于checkbox，radio $(‘#i1‘).prop(‘checked‘,true) # 选中 $(‘#i1‘).prop(‘checked‘,false) # 取消选中
PS； index获取索引位置
# 文档处理 $(‘#u1‘).append() # 在id=u1标签的孩子标签后添加 $(‘#u1‘).prepend() # 在id=u1标签的孩子标签前添加 $(‘#u1‘).after() # 在id=u1标签后添加 $(‘#u1‘).before() # 在id=u1标签前添加 $(‘#i1‘).remove() # 删除当前标签
empty # 清空内容，但标签还保留 remove # 标签内容全部删除 clone # 复制克隆
# CSS处理 $(‘t1‘).css(‘样式名称‘,‘样式值‘) 点赞示例： - $(‘t1‘).append() - setInterval() - 透明度由强变弱 - position - 字体大小 位置： $(window).scrollTop() # window代表浏览器窗口，此时代表获取滑轮高度 $(window).scrollTop(345) # 设置滑轮高度 $(window).scrollLeft() # 左右滑动的滑轮 $(‘div‘).scrollTop() # 某个div标签内设置overflow属性时，获取此时div内的滑轮高度 $(‘#i1‘).offset() # 获取指定标签在html中的坐标 $(‘#i1‘).offset().left $(‘#i1‘).offset().top position() # 在position中应用offset时，时指定标签（absolute）相对父标签（relative）的位置
尺寸： $(‘#i1‘).height() # 获取标签的高度 纯高度 $(‘#i1‘).innerheight() # 获取边框 + 纯高度 + ？（待测） $(‘#i1‘).outerheight() # 获取边框 + 纯高度 + ？（待测） $(‘#i1‘).outerheight(true) # 获取边框 + 纯高度 + ？（待测） 纯高度、边框、外边距、内边距
# 事件及绑定 第一种： $(‘.c1‘).click() 第二种： $(‘.c1‘).bind(‘click‘,function(){}) # 绑定click事件 $(‘.c1‘).unbind(‘click‘,function(){}) # 解除绑定click事件 第三种： $(‘.c1‘).delegate(‘a‘,‘click‘,function(){}) # 给clss=c1标签下的a标签绑定click事件 $(‘.c1‘).undelegate(‘a‘,‘click‘,function(){}) # 给clss=c1标签下的a标签解除绑定click事件 委托绑定事件，当标签新创建后并不能立即产生原来的效果时，可以用此函数绑定事件 第四种： $(‘.c1‘).on(‘click‘,function(){}) $(‘.c1‘).off(‘click‘,function(){}) 阻止事件发生： return false 示例： DOM操作下要在绑定函数的标签内加return关键字 jQuery操作下直接在函数中加return即可
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <a onclick="return clickOn()" href="http://www.baidu.com">走你1</a>
9 <a id="i1" href="http://www.baidu.com">走你2</a>
10
11
12 <script src="jquery-3.1.0.js"></script>
13 <script>
14 function clickOn() {
15 alert(123);
16 // return false;
17 return true;
18 }
19
20 $(‘#i1‘).click(function () {
21 alert(456);
22 return false;
23 })
24 </script>
25 </body>
26 </html>
当页面框架加载完成之后，自动执行 $(function(){})
扩展方法： - $.extend $.方法 - $.fn.extend $(‘#i1‘).方法 (function(){ var status = 1; // 避免有全局变量冲突，最好用自定义函数包裹 })(jQuery) 示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <script src="jquery-3.1.0.js"></script>
10 <script>
11
12 /* 第一种扩展方法的建立和调用 */
13 $.fn.extend({
14 ‘f1‘:function () {
15 return ‘db‘;
16 }
17 })
18 var v = $(‘#i1‘).f1();
19 alert(v)
20
21 /* 第二种扩展方法的建立和调用 */
22 $.extend({
23 ‘func‘:function () {
24 return ‘sb‘;
25 }
26 })
27 var v = $.func();
28 alert(v);
29 </script>
30 </body>
31 </html>
实例： 一、删选器功能: - prop属性（select和checkbox中的属性） $(:checkbox).prop(‘checked‘); 获取值 $(:checkbox).prop(‘checked‘,true); 设置值 - 批量操作 jQuery方法内置循环： $(‘:checkbox‘).xxx - 循环功能 $(:checkbox).each(function(k){ // k为当前索引 // this是Dom对象，代指当前循环的对象 // $(this) 变为jQuery对象 }) - 三元运算 var v=条件?真值:假值
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <h1>删选器功能</h1>
9 <hr>
10 <table id="tb" border="1 px" width="200px">
11 <div>
12 <input onclick="chooseAll()" type="button" value="全选">
13 <input onclick="reverseAll()" type="button" value="反选">
14 <input onclick="cancelAll()" type="button" value="取消">
15 </div>
16 <thead>
17 <tr>
18 <th>业务线</th>
19 <th>端口</th>
20 <th>选择</th>
21 </tr>
22 </thead>
23
24 <tbody>
25 <tr>
26 <td>开发部</td>
27 <td>192.1</td>
28 <th><input type="checkbox"></th>
29 </tr>
30 <tr>
31 <td>测试部</td>
32 <td>192.2</td>
33 <th><input type="checkbox"></th>
34 </tr>
35 <tr>
36 <td>销售部</td>
37 <td>192.3</td>
38 <th><input type="checkbox"></th>
39 </tr>
40 </tbody>
41 </table>
42
43
44
45 <script src="jquery-3.1.0.js"></script>
46 <script>
47 function chooseAll() {
48 $(‘#tb :checkbox‘).prop(‘checked‘,true);
49 }
50 function cancelAll() {
51 $(‘#tb :checkbox‘).prop(‘checked‘,false);
52 }
53 function reverseAll() {
54 $(‘#tb :checkbox‘).each(function () {
55
56 /* 第一种情况：通过Dom执行
57 // this 代指当前循环的每一个元素
58 // this 是Dom的对象
59 if (this.checked) {
60 this.checked = false; // 由于是Dom对象，所以用这种语句
61 }else {
62 this.checked = true;
63 }
64 */
65
66
67 /* 第二种情况：通过jQuery转换实现
68 if ($(this).prop(‘checked‘)){
69 $(this).prop(‘checked‘,false);
70 } else {
71 $(this).prop(‘checked‘,true);
72 }
73 */
74
75
76 /* 第三种情况：三元运算
77 var v = 条件?真值:假值 */
78 var v = $(this).prop(‘checked‘)?false:true;
79 $(this).prop(‘checked‘,v);
80
81 })
82 }
83
84 </script>
85 </body>
86 </html>
二、左侧菜单折叠、展开功能：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .header{
8 background-color: blue;
9 color: white;
10 }
11 .content{
12 min-height: 50px;
13 }
14 .hide{
15 display: none;
16 }
17 </style>
18 </head>
19 <body>
20
21 <div style="height: 400px;width: 200px;border: 1px solid gray">
22 <div class="item">
23 <div class="header">标题一</div>
24 <div class="content">内容</div>
25 </div>
26 <div class="item">
27 <div class="header">标题二</div>
28 <div class="content hide">内容</div>
29 </div>
30 <div class="item">
31 <div class="header">标题三</div>
32 <div class="content hide">内容</div>
33 </div>
34
35 </div>
36
37
38 <script src="jquery-3.1.0.js"></script>
39 <script>
40 $(‘.header‘).click(function () {
41 // console.log(this);
42 // 获取某个标签的下一个标签
43 // 获取当前标签的父标签
44 // 获取所有的兄弟标签
45 // 添加样式和移除样式 $(‘#i1‘).addClass(‘hide‘) $(‘#i1‘).removeClass(‘hide‘)
46 $(this).next().removeClass(‘hide‘);
47 $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘);
48 // 以上两句可以合成一句，即jQuery支持链式编程
49
50 })
51 </script>
52 </body>
53 </html>
三、模态对话框功能：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .shade{
8 position: fixed;
9 top: 0;
10 left: 0;
11 right: 0;
12 bottom: 0;
13 background-color: black;
14 opacity: 0.6;
15 z-index: 9;
16 }
17 .modal{
18 position: fixed;
19 top: 50%;
20 left: 50%;
21 width: 500px;
22 height: 400px;
23 background-color: white;
24 margin-top: -250px;
25 margin-left: -200px;
26 z-index: 10;
27 line-height: 400px;
28 text-align: center;
29 }
30 .hide{
31 display: none;
32 }
33 </style>
34 </head>
35 <body>
36 <input type="button" id="bt" value="添加" onclick="addShade();">
37 <table border="1px solid gray" width="300px">
38 <thead>
39 <tr>
40 <th>业务线</th>
41 <th>端口</th>
42 <th>操作</th>
43 </tr>
44 </thead>
45 <tbody>
46 <tr>
47 <td>开发部</td>
48 <td>192.1</td>
49 <th><a class="edit">编辑</a>|<a>删除</a></th>
50 </tr>
51 <tr>
52 <td>测试部</td>
53 <td>192.2</td>
54 <th><a class="edit">编辑</a>|<a>删除</a></th>
55 </tr>
56 <tr>
57 <td>销售部</td>
58 <td>192.3</td>
59 <th><a class="edit">编辑</a>|<a>删除</a></th>
60 </tr>
61 </tbody>
62 </table>
63
64 <div class="shade hide"></div>
65
66 <div class="modal hide">
67 <div>
68 <input type="text" id="modal_i1">
69 <input type="text" id="modal_i2">
70
71 <input type="button" value="确定">
72 <input type="button" onclick="cancel()" value="取消">
73
74
75 </div>
76 </div>
77
78 <script src="jquery-3.1.0.js"></script>
79 <script>
80 function addShade() {
81 $(‘.shade,.modal‘).removeClass(‘hide‘);
82 // $(‘.modal‘).removeClass(‘hide‘)
83 }
84 function cancel() {
85 $(‘.shade,.modal‘).addClass(‘hide‘);
86 // $(‘.modal‘).addClass(‘hide‘)
87 }
88
89 $(‘.edit‘).click(function () {
90 $(‘.shade,.modal‘).removeClass(‘hide‘);
91 // console.log($(this).parent().prevAll()[0]);
92 var tds = $(this).parent().prevAll();
93 var v1 = $(tds[0]).text();
94 var v2 = $(tds[1]).text();
95 // console.log(v1,v2);
96 $(‘#modal_i1‘).val(v2);
97 $(‘#modal_i2‘).val(v1);
98
99 })
100
101 </script>
102 </body>
103 </html>
四、tab切换功能：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .menu{
8 height: 48px;
9 width: 700px;
10 background-color: gray;
11 line-height: 48px;
12 margin: 0 auto;
13 }
14 .menu_item{
15 float: left;
16 border-left: 1px solid red;
17 border-right: 1px solid red;
18 padding: 0 10px;
19 }
20 .content{
21 margin: 0 auto;
22 height: 600px;
23 width: 700px;
24 border: 1px solid gainsboro;
25
26 }
27 .hide{
28 display: none;
29 }
30 .active{
31 background-color: saddlebrown;
32 }
33 </style>
34 </head>
35 <body>
36
37 <div class="menu">
38 <div class="menu_item active" a="1">菜单一</div>
39 <div class="menu_item" a="2">菜单二</div>
40 <div class="menu_item" a="3">菜单三</div>
41 </div>
42
43 <div class="content">
44 <div b="1">内容一</div>
45 <div class="hide" b="2">内容二</div>
46 <div class="hide" b="3">内容三</div>
47 </div>
48
49 <script src="jquery-3.1.0.js"></script>
50 <script>
51 $(‘.menu_item‘).click(function () {
52 $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
53
54
55 var target = $(this).attr(‘a‘);
56 var a = ‘[b="‘;
57 var b = ‘"]‘;
58 var n = a + target + b;
59 // console.log(n)
60 $(‘.content‘).children(n).removeClass(‘hide‘).siblings().addClass(‘hide‘)
61
62 })
63 </script>
64
65 </body>
66 </html>
五、文档处理添加删除功能：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input type="text" id="in">
9 <input type="button" id="i1" value=‘添加‘>
10 <input type="button" id="i2" value=‘删除‘>
11 <input type="button" id="i3" value=‘复制‘>
12 <ul id="u1">
13 <li>1</li>
14 <li>2</li>
15 </ul>
16 <script src="jquery-3.1.0.js"></script>
17 <script>
18 $(‘#i1‘).click(function () {
19 var v = $(‘#in‘).val();
20 var temp = ‘<li>‘+ v + ‘</li>‘;
21 $(‘#u1‘).append(temp);
22 // $(‘#u1‘).prepend(temp);
23 // $(‘#u1‘).after(temp);
24 // $(‘#u1‘).before(temp);
25 })
26
27 $(‘#i2‘).click(function () {
28 var index = $(‘#in‘).val();
29 $(‘#u1 li‘).eq(index).remove();
30 // $(‘#u1 li‘).eq(index).empty(); // 标签还存在，内容已经删除
31 })
32
33 $(‘#i3‘).click(function () {
34 var index = $(‘#in‘).val();
35 var v = $(‘#u1 li‘).eq(index).clone();
36 $(‘#u1‘).append(v);
37 })
38
39 </script>
40 </body>
41 </html>
六、点赞：s6代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .item{
8 height: 200px;
9 border-bottom: 1px solid gainsboro;
10 }
11 .zan{
12 position: relative;
13 bottom: 40px;
14 left: 100px;
15 }
16 </style>
17 </head>
18 <body>
19
20 <div class="item">
21 <div class="zan">
22 <span>赞</span>
23 </div>
24 </div>
25 <div class="item">
26 <div class="zan">
27 <span>赞</span>
28 </div>
29 </div>
30 <div class="item">
31 <div class="zan">
32 <span>赞</span>
33 </div>
34 </div>
35
36 <script src="jquery-3.1.0.js"></script>
37 <script>
38 $(‘span‘).click(function () {
39 addTag(this);
40 })
41 function addTag(self) {
42 // console.log(self)
43 var fontSize = 15;
44 var top = 0;
45 var left = 15;
46 var opacity = 1;
47
48 var tag = document.createElement(‘span‘);
49 // tag.innerText = ‘+1‘;
50 $(tag).text(‘+1‘);
51 $(tag).css(‘color‘,‘green‘);
52 $(tag).css(‘position‘,‘absolute‘);
53 $(tag).css(‘fontSize‘,fontSize+‘px‘);
54 $(tag).css(‘top‘,top+‘px‘);
55 $(tag).css(‘left‘,left+‘px‘);
56 $(tag).css(‘opacity‘,opacity);
57 $(self).append(tag);
58
59 var obj = setInterval(function () {
60 fontSize = fontSize + 5;
61 top = top - 10;
62 left = left + 2;
63 opacity = opacity - 0.2;
64
65 $(tag).css(‘fontSize‘,fontSize+‘px‘);
66 $(tag).css(‘top‘,top+‘px‘);
67 $(tag).css(‘left‘,left+‘px‘);
68 $(tag).css(‘opacity‘,opacity);
69
70 if (opacity<0){
71 clearInterval(obj); // 要清除setInterval，否则会一直跑下去
72 $(tag).remove(); // 还要将此标签清除，因为有标签会占用内容
73 }
74
75 },100)
76 }
77
78 </script>
79
80 </body>
81 </html>
七、表单提交：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <form action=‘s4.html‘ method="POST">
9 <input type="text">
10 <input id="bt" type="submit" value="提交">
11
12 </form>
13
14 <script src="jquery-3.1.0.js"></script>
15 <script>
16 $(‘#bt‘).click(function () {
17 var v = $(this).prev().val();
18 if (v.length > 0){
19 return true;
20 }else {
21 alert(‘请输入内容‘);
22 return false;
23 }
24 })
25 </script>
26 </body>
27 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .error{
8 color:red;
9 }
10 </style>
11 </head>
12 <body>
13 <form id="f1" action="s4.html" method="POST">
14 <div><input type="text"></div>
15 <div><input type="password"></div>
16 <div><input type="text"></div>
17 <div><input type="text"></div>
18 <div><input type="text"></div>
19 <input type="submit" value="提交">
20 </form>
21
22 <script src="jquery-3.1.0.js"></script>
23 <script>
24 $(‘:submit‘).click(function () {
25 $(‘.error‘).remove();
26 var flag = true;
27 $(‘#f1‘).find(‘input[type="text"],input[type="password"]‘).each(function () {
28 var v = $(this).val();
29 if (v.length<=0){
30 var tag = document.createElement(‘span‘);
31 tag.className = ‘error‘;
32 tag.innerText = ‘必填‘;
33 $(this).after(tag);
34 flag = false;
35 // return false; 这个语句是打断当前循环，直接从循环中跳出
36 }
37 });
38 return flag
39 })
40
41
42 </script>
43 </body>
44 </html>
四、前端进阶
一、JS正则 1.定义正则表达式 /.../ # 用于定义正则表达式 /.../g # 表示全局匹配 /.../i # 表示不区分大小写 /.../m # 表示多行匹配 2.匹配 - test 判断字符串是否符合规定的正则 rep = /\d+/; >>/\d+/ rep.test(‘asdf89ghk‘) >>true rep.test(‘asdfghk‘) >>false rep = /^\d+$/; >>/^\d+$/ rep.test(‘asdf45‘); >>false rep.test(‘12asdf‘); >>false rep.test(‘12asdf45‘); >>false rep.test(‘1245‘); >>true - exec 获取匹配的数据 rep = /\d+/; >>/\d+/ str = ‘wagn_67_sdf_20‘; >>"wagn_67_sdf_20" rep.exec(str); >>["67", index: 5, input: "wagn_67_sdf_20", groups: undefined] // 以数组形式返回 3.示例 单个单词的一级匹配和二级匹配：/\bJava\w*\b/;和/\bJava(\w*)\b/; str = ‘JavaScript is more fun than Java or JavaBeans!‘ >>"JavaScript is more fun than Java or JavaBeans!" var pattern = /\bJava\w*\b/; // \b...\b 表示进行单个单词的匹配 >>undefined pattern.exec(str); // 只拿到JavaScript >>["JavaScript", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] var pattern = /\bJava(\w*)\b/; // 和上面差一个括号 >>undefined pattern.exec(str); // 拿到两个匹配了JavaScript后还把Script拿出来 >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] 全局单词的一级匹配：/\bJava\w*\b/g; str = ‘JavaScript is more fun than Java or JavaBeans!‘ >>"JavaScript is more fun than Java or JavaBeans!" var pattern = /\bJava\w*\b/g; // 加g是表示全局匹配 >>undefined pattern.exec(str); // 拿到第一个JavaScript >>["JavaScript", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] pattern.exec(str); // 拿到第二个Java >>["Java", index: 28, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] pattern.exec(str); // 拿到第三个JavaBeans >>["JavaBeans", index: 36, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] pattern.exec(str); // 为空 >>null pattern.exec(str); // 再从头循环 >>["JavaScript", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] 全局单词的一级匹配和二级匹配：/\bJava(\w*)\b/g; str = ‘JavaScript is more fun than Java or JavaBeans!‘ >>"JavaScript is more fun than Java or JavaBeans!" var pattern = /\bJava(\w*)\b/g; // 加括号的\w* >>undefined pattern.exec(str); >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] pattern.exec(str); >>(2) ["Java", "", index: 28, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] pattern.exec(str); >>(2) ["JavaBeans", "Beans", index: 36, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] pattern.exec(str); >>null pattern.exec(str); >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than Java or JavaBeans!", groups: undefined] 多行匹配应用 str = ‘JavaScript is more fun than \nJava or JavaBeans!‘; >>"JavaScript is more fun than >>Java or JavaBeans!" var pattern = /^Java(\w*)/g; // 无论有几行，只匹配一个字符串开头的Java >>undefined pattern.exec(str); >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than ?Java or JavaBeans!", groups: undefined] pattern.exec(str); >>null var pattern = /^Java(\w*)/gm; // 加上m后可以匹配多行以Java开头的字符串 >>undefined pattern.exec(str); >>(2) ["JavaScript", "Script", index: 0, input: "JavaScript is more fun than ?Java or JavaBeans!", groups: undefined] pattern.exec(str); >>(2) ["Java", "", index: 29, input: "JavaScript is more fun than ?Java or JavaBeans!", groups: undefined] 4.JS验证（验证时会使用正则） 总体验证： JS验证：包含各种验证，如注册时用户名、手机号、两次密码输入、验证码等（如果用JS实现代码量很大） 后端验证：进行服务器数据库等验证 二、模板使用 EasyUI（功能齐全，学习繁杂，主要做后台管理） - css - js jQueryUI（推荐使用，功能少，主要做后台管理） - css - js BootStrap（适用全栈） - css - js
原文地址：https://www.cnblogs.com/xuedingwangluo/p/9781840.html
时间： 2024-10-08 19:27:13