标签：式表 ble 没有 pre 指定 exe limit 动态效果 声明
空格：
大于号：>
小于号：<
参考网址：www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
无序标签
<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>
<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 style="height: 200px;width: 200px;display: inline-block"></span>
# 如果不加display:inline-block浏览器不会显示这个span这个200*200的蓝色区域
<label for="username">用户名：</label>
<input id="username" type="text" name="user"> # 点击用户名input获取光标
<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 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 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>
src属性：地址
alt属性：图片加载不出来时显示的名字
title属性：鼠标放上自动显示标题
注释： <!-- -->
PS：标签之间可以嵌套
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:
基础知识
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
标签：式表 ble 没有 pre 指定 exe limit 动态效果 声明
原文地址：https://www.cnblogs.com/xuedingwangluo/p/9781840.html
