老师的博客：https://www.cnblogs.com/liwenzhou/p/8178806.html
jQuery简介见老师的博客
jQuery的使用约定：我们在声明一个jQuery对象变量的时候在变量名前面加上$。
var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象
HTML对象和jQuery对象的区别
1. jQuery对象转换成DOM对象,用索引取出具体的标签
2. DOM对象转换成jQuery对象,$(DOM对象)
注意:
jQuery对象保存到变量的时候,变量名要加$前缀
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。但是可以通过特殊的方法啊来转换。
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
基本选择器
id选择器
$("#id") //
标签选择器
$("TagName")
类选择器
$(".class")
配合使用
$("div.c1")
// 表示div标签且class为c1的标签 不能加上空格
所有元素选择器
$("*")
组合选择器
$(".class, TagName,#id") // 表示选择对个不同种类的标签。不同于配合使用
层级选择器
x和Y可以为任何的基础的选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
层级选择器可以在内部加上空格来美化
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 即eq中的0 2 4 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 即eq的1 3 5 :gt(index)// 匹配所有大于给定索引值的元素 英语greater than :lt(index)// 匹配所有小于给定索引值的元素 lower than :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
特别注意：has 后面是值前面的后代元素所包含的属性
例如
html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="p1">4</li>
<li>5</li>
$("ul li:first");
$("ul li:end");
$("ul li:eq[0]");
$("ul li:gt(3)");
$("ul li:not(#p1)");
$("ul li:has(#p1)");
属性选择器
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
例子
$("form input[type='text']") // 在form标签下的input标签且type为text
$("form input[type!='text']") // 在form标签下的input标签且type不等于text
表单选择器（form）
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例子
$(":checkbox") // 找到所有的checkbox
$("form input:password") // 在form标签下的input的password
表单对象属性
:enabled // 可以更改
:disabled // 不可更改
:checked //默认选项 实际选中的
:selected // 默认选项 实际选中的
例子
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> // 现在 selected 表示默认的选择
<option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
筛选器的方法
下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
这个也是支持批量操作，但是此时的上一个下一个必须是同一个级别的。如果没有，就会找不到。
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父类元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找
搜索所有于指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
注意后代元素的选择，表示前面那个元素的后代的选择出来的元素，与下面的筛选区别
$("div").find("p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
这个就是表示前面的元素满足后面条件的元素
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
补充
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
这个好眼熟有没有，但是这步操作与上面的基本筛选器的语法一样但是位置不一样。
操作标签
样式操作
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
// 里面的类名不同添加.
这些都是表示类的操作
示例
css
css("color","red")//DOM操作：tag.style.color="red"
jQuery
$("p").css("color", "red"); //将所有p标签的字体设置为红色
记住是所有，而不是一条一条的添加。确实省去了好多的麻烦。
换背景的操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景颜色换色</title>
<style>
.d1{
width: 90px;
height: 90px;
border-radius: 50%;
}
.c1{
background: red;
}
.c2{
background:green;
}
</style>
<script src="jQuery.js"></script>
</head>
<body>
<div class="d1 c1 "></div>
<script>
var $d1=$(".d1");
$d1.click(function(){
console.log($d1[0]);
$d1.toggleClass('c2');
console.log(this);
})
// 我去为啥this变成bom对象了
</script>
</body>
</html>
在函数里面的操作不要用this，因为此时的this不是$的变量的对象，而是BOM对对象了，如果想用this只能用BOM的语法了。
可以用，不过的这样
$(this).addClass()
动态框的示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态框</title>
<script src="jQuery.js"></script>
<style>
.cover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index:999;
}
.modal {
position: absolute;
width: 300px;
height: 200px;
top :50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
z-index:1000;
background: white;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<input id="start_button" type="button" value="屠龙宝刀，点击就送">
<div class="cover hidden"></div>
<div class="modal hidden">
<form>
<p><label>user:
<input type="text" placeholder="输入你的密码">
</label></p>
<p><label>password:
<input type="password"></label></p>
<p><input type="submit" value="提交"> <input id="cancel_button" type="button" value="取消"> </p>
</form>
</div>
<script>
<!--弹出动态框-->
$("#start_button").click(function(){
$('.modal').removeClass('hidden');
$('.cover').removeClass('hidden')
});
$("#cancel_button").click(function(){
$('.modal').addClass('hidden');
$('.cover').addClass('hidden')
})
</script>
</body>
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
还可以通过offset等来设置当前元素的位置，注意设置数字不要带单位，默认是px
点击换位置
$("#b1").click( function () {
$(".c1").offset({left: 200, top:200});
});
点击返回顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<script src="jQuery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.fix {
width:60px;
height: 60px;
position: fixed;
background: red;
bottom:0;
right: 5px;
}
.c1{
height:200px;
}
.top1 {
height: 30px;
width: 60px;
color: rgba(111,121,11,0.4);
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="top1">这是顶点</div>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div>这是底部</div>
<div class="fix ">点我返回顶部</div>
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 200){
$(".fix").removeClass('hidden')
}
else{$(".fix").addClass('hidden')}
});
$(".fix").click(function(){
($(window).scrollTop(0))
});
</script>
</body>
</html>
尺寸
height() // content
width()
innerHeight() // content+padding
innerWidth()
outerHeight() //content +paddilng +border
outerWidth()
同上可以设置其的大小，直接数字即可，默认单位是px
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>尺寸</title>
<script src="jQuery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
border:5px solid red ;
padding: 50px;
margin: 50px;
width: 60px;
height: 60px;
background: #959525;
}
</style>
</head>
<body>
<div class="c1"></div>
<p>border:5px solid red ;</p>
<p>padding: 50px;</p>
<p>margin: 50px;</p>
<p> width: 60px;</p>
<p> height: 60px;</p>
<p> background: #959525;</p>
<p></p>
<script>
var $c1=$('.c1');
console.log("width()",$c1.width());
console.log("height()",$c1.height());
console.log("innerHeight()",$c1.innerHeight());
console.log("innerWidth()",$c1.innerWidth());
console.log("outerHeight()",$c1.outerHeight());
console.log("outerWidth()",$c1.outerWidth());
$c1.click(function(){
$(this).width(100);
$(this).height(100);
})
</script>
</body>
</html>
文件操作
HTLML代码
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容
文本值
text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML与文本值</title>
<script src="jQuery.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
#d1{
color:red;
}
#d2 {
color:green;
}
</style>
</head>
<body>
<div id="d1"><span>点我改变HTML的,跳转的小米</span></div>
<div id="d2"><span>点我改变文本值的</span></div>
<script>
var $d1=$("#d1");
var $d2=$('#d2');
console.log("$d1的html：",$d1.html());
console.log("$d2的文本值的：",$d2.text());
// 点击改变其值
$d1.click(function(){
$d1.html("<a href='https://www.mi.com/'>点我</a>")
});
$d2.click(function(){
$d2.text('改变了值')
})
</script>
</body>
</html>
元素的值（value）
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
示例
var $input1=$(":input"); console.log($input1.length); for (var i=0;i < $input1.length;i++){ console.log(i,$($input1[i]).val()); }
.val().只能取第一个值，但是对于多选择的值可以一下显示出来，上面是通过for把所有的值给取出来。如果是id取值的话，会返回所有的多选的值
修改值：
<input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球 <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
获取被选中的checkbox或radio的值：
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">
可以使用：
$("input[name='gender']:checked").val()
自定义登录校验示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素的值</title>
<script src="jQuery.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.check{
}
.redcolo{
color:red;
}
</style>
</head>
<body>
<form>
<p>
<label>用户名：
<input type="text" placeholder="输入你的名字" class="check">
<span class="redcolo"></span>
</label>
</p>
<p>
<label>密码：<input type="password" placeholder="请输入你密码：" class="check">
<span class="redcolo"></span>
</label>
</p>
<p>性别:
<label>男
<input type="radio" name="sex" value="1">
</label>
<label>女
<input type="radio" name="sex" value="2">
</label>
<label>保密
<input type="radio" name="sex" value="3">
</label>
</p>
<p>
<label>地址:
<select name="where" >
<option value="1">北京</option>
<option value="2">重庆</option>
<option value="3">上海</option>
<option value="4">广东</option>
</select>
<span class="redcolo"></span>
</label>
</p>
<label>自我介绍：
<textarea rows="block" cols="60" class="check"></textarea>
<span class="redcolo"></span>
</label>
<p>
<input type="submit" value="提交" id="sub">
<input type="button" value="取消">
</p>
</form>
<script>
var $input1=$(":input");
console.log($input1.length);
for (var i=0;i < $input1.length;i++){
console.log(i,$($input1[i]).val());
}
// 登录为空校验
var $checkele=$(".check");
$("#sub").click(function(){
console.log(1);
for (var i=0 ;i < $checkele.length;i++){
console.log($($checkele[i]).val().trim());
if ($($checkele[i]).val().trim().length === 0){
console.log(1);
var labelName=$($checkele[i]).parent().text().trim().slice(0,-1);
var content=labelName+"不能为空";
console.log(i,content);
$($checkele[i]).siblings('.redcolo').text(content);
}
};
return false;
})
</script>
</body>
</html>
属性操作
用于ID等或自定义属性：
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性 removeProp() // 移除属性
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true); </script>
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码，
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
小练习：全选，反选，取消
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小练习</title>
<script src="jQuery.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<table border="1">
<thead>
<th>选择</th>
<th>姓名</th>
<th>职业</th>
<th>hobby</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>alex</td>
<td>teacher</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>egon</td>
<td>前端</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>jin</td>
<td>jishi</td>
<td>男</td>
</tr>
</tbody>
</table>
<input type="submit" value="全选">
<input type="submit" value="反选">
<input type="submit" value="取消">
</body>
<script>
// 全选
$(":submit[value='全选']").click(function(){
$(":checkbox").prop('checked',true)
});
// 取消
$(":submit[value='取消']").click(function(){
$(":checkbox").prop('checked',false)
});
// 反选
$(":submit[value='反选']").click(function(){
var $checkele=$(":checkbox");
for (var i = 0;i<$checkele.length;i++){
if ($($checkele[i]).prop('checked')==false){
($($checkele[i]).prop('checked',true))
}
else{($($checkele[i]).prop('checked',false))}
}
})
</script>
</html>
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
.添加到指定元素外部且同级的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部且同级的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
上面的所有的元素只能存在一个地方，如果移动了，那就只在新的地方了，原来的地方法已经不在了。
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>点击增加删除行数</title>
<script src="jQuery.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.dele{
}
</style>
</head>
<body>
<table border="1">
<thead>
<th>选择</th>
<th>姓名</th>
<th>职业</th>
<th>hobby</th>
<th>删除</th>
</thead>
<tbody id="table_body">
<tr class="tr ">
<td><input type="checkbox"></td>
<td>alex</td>
<td>teacher</td>
<td>男</td>
<td><button class="dele">删除</button></td>
</tr>
<tr class="tr ">
<td><input type="checkbox"></td>
<td>egon</td>
<td>前端</td>
<td>男</td>
<td><input type="button" value="删除" class="dele"></td>
</tr>
<tr class="tr ">
<td><input type="checkbox"></td>
<td>jin</td>
<td>jishi</td>
<td>男</td>
<td><button class="dele">删除</button></td>
</tr>
</tbody>
</table>
<p><input type="button" value="点击增加一条数据源"></p>
<input type="submit" value="全选">
<input type="submit" value="反选">
<input type="submit" value="取消">
</body>
<script>
// 全选
$(":submit[value='全选']").click(function(){
$(":checkbox").prop('checked',true)
});
// 取消
$(":submit[value='取消']").click(function(){
$(":checkbox").prop('checked',false)
});
// 反选
$(":submit[value='反选']").click(function(){
var $checkele=$(":checkbox");
for (var i = 0;i<$checkele.length;i++){
if ($($checkele[i]).prop('checked')==false){
($($checkele[i]).prop('checked',true))
}
else{($($checkele[i]).prop('checked',false))}
}
});
// 删除
$("tbody").on("click",".dele",function(){
$(this).parent().parent().remove()
});
// 增加数据
$(":button[value='点击增加一条数据源']").on("click",function(){
var addele=document.createElement('tr');
addele.innerHTML="<td><input type=\"checkbox\"></td>"
+" <td>study</td>"
+"<td>not</td>" +
"<td>not</td>"
+"<td><button class=\'dele\'>删除</button></td>";
$("#table_body").append(addele);
console.log(addele)
})
</script>
</body>
</html>
替换
replaceWith() replaceAll()
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="i" class="c1 c2">我是div</div>
<div id="2" class="c1">我是div2</div>
<script>
var ele1=document.createElement('p');
$(ele1).text('我是新产生的');
console.log("ele1",ele1);
console.log('$(ele1)',$(ele1));
$(".c1").replaceWith( $(ele1));
</script>
</body>
</html>
克隆
clone()// 参数
示例（变态版的贪玩蓝月可好玩了）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>变态版的贪玩蓝月</title>
<script src="jQuery.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="i" class="c1 c2">我是div</div>
<div id="2" class="c1">我是div2</div>
<button id="il" class="il">贪玩蓝月，你值得拥有</button>
<script>
var ele1=document.createElement('p');
$(ele1).text('我是新产生的');
console.log("ele1",ele1);
console.log('$(ele1)',$(ele1));
$(".c1").replaceWith( $(ele1));
$("button").on("click",function(){
var $ele=$(this).clone(true);
$ele.insertAfter($(".il"));
console.log($ele.attr('id'))
})
</script>
</body>
</html>
克隆的元素不知为啥JQuery不能查找标签，但是原生的BOM可以查找的标签。完全复制是id也被复制了，但是操作的时候只能选中一个。
事件
常用事件
click(function(){...}) // 单击
hover(function(){...}) // 光标
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // 内容改变
keyup(function(){...}) // 键盘按下
keydown(function(){..}) //键盘抬起
对比原生的BOM
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
事件绑定
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等- e.preventDefault();
示例
keydown和keyup事件组合示例(进行批量操作)：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>监听键盘批量复制</title> <script src="jQuery.js"></script> <style> * { padding: 0; margin: 0; } </style> </head> <body> <table border="1"> <thead> <th>选择</th> <th>姓名</th> <th>职业</th> <th>hobby</th> <th>删除</th> <th>状态</th> </thead> <tbody id="table_body"> <tr class="tr "> <td><input type="checkbox"></td> <td>alex</td> <td>teacher</td> <td>男</td> <td><button class="dele">删除</button></td> <td><select class="table_select"> <option value="1" >上线</option> <option value="2">离线</option> <option value="3">休息</option> </select> </td> </tr> <tr class="tr "> <td><input type="checkbox"></td> <td>egon</td> <td>前端</td> <td>男</td> <td><input type="button" value="删除" class="dele"></td> <td><select class="table_select"> <option value="1" >上线</option> <option value="2">离线</option> <option value="3">休息</option> </select> </td> </tr> <tr class="tr "> <td><input type="checkbox"></td> <td>jin</td> <td>jishi</td> <td>男</td> <td><button class="dele">删除</button></td> <td><select class="table_select"> <option value="1" >上线</option> <option value="2">离线</option> <option value="3">休息</option> </select> </td> </tr> </tbody> </table> <p><input type="button" value="点击增加一条数据源"></p> <input type="submit" value="全选"> <input type="submit" value="反选"> <input type="submit" value="取消"> </body> <script> // 全选 $(":submit[value='全选']").click(function(){ $(":checkbox").prop('checked',true) }); // 取消 $(":submit[value='取消']").click(function(){ $(":checkbox").prop('checked',false) }); // 反选 $(":submit[value='反选']").click(function(){ var $checkele=$(":checkbox"); for (var i = 0;i<$checkele.length;i++){ if ($($checkele[i]).prop('checked')==false){ ($($checkele[i]).prop('checked',true)) } else{($($checkele[i]).prop('checked',false))} } }); // 删除 $("tbody").on("click",".dele",function(){ $(this).parent().parent().remove() }); // 增加数据 $(":button[value='点击增加一条数据源']").on("click",function(){ var addele=document.createElement('tr'); addele.innerHTML="<td><input type=\"checkbox\"></td>" +" <td>study</td>" +"<td>not</td>" + "<td>not</td>" +"<td><button class=\'dele\'>删除</button></td>"+"<td><select class=\"table_select\">\n" + " <option value=\"1\" >上线</option>\n" + " <option value=\"2\">离线</option>\n" + " <option value=\"3\">休息</option>\n" + " </select>\n" + " </td>"; $("#table_body").append(addele); console.log(addele) }); // 键盘监听 var mode = false; // 找到整个窗口或者body var $windo=$(window); var $tbod=$("tbody"); // 键盘按下mode变ture $windo.on('keydown',function(event){ if (event.keyCode ===17){ mode = true; } }); // 键盘抬起 false $windo.on('keyup',function(event) { if (event.keyCode === 17) { mode = false; } }); // 找状态那栏并绑定事件 $tbod.on("change",".table_select",function(){ //状态的值 var value=$(this).val(); //找到自己多选的标签 var $checkboxele=$(this).parent().siblings().first().find(":checkbox"); // 判断是否按下ctrl 并且是否被选中 if ($checkboxele && mode){ // 找到所有被选中的标签的checkbox项 var $checkedele=$(this).parent().parent().siblings().children().find(":checkbox"); $checkedele.each(function () { if ($(this).prop("checked")){ $(this).parent().siblings().last().find("select").val(value); } }) } }); </script> </body> </html>
阻止form按钮会刷新
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>阻止事件</title> <script src="jQuery.js"></script> <style> * { padding: 0; margin: 0; } </style> </head> <body> <form> <button id="d1">点我</button> </form> <script> // 第一种方法 // $("#d1").on("click",function(){ // return false // }) // 第二种方法 $("#d1").on("click",function(event){ event.preventDefault() }) </script> </body> </html>
其他示例见老师的博客
注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <span>点我</span> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("span").click(function (e) { alert("span"); e.stopPropagation(); }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> </body> </html>
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
与window.onload的区别
- window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
动画效果
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn])
点赞效果示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>点赞动画示例</title> <style> div { position: relative; display: inline-block; } div>i { display: inline-block; color: red; position: absolute; right: -16px; top: -5px; opacity: 1; } </style> </head> <body> <div id="d1">点赞</div> <script src="jquery-3.2.1.min.js"></script> <script> $("#d1").on("click", function () { var newI = document.createElement("i"); newI.innerText = "+1"; $(this).append(newI); $(this).children("i").animate({ opacity: 0 }, 1000) }) </script> </body> </html>
补充
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出：
0 10 1 20 2 30 3 40
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
跳过此次循环
return
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
示例：
模态框编辑的数据回填表格
插件(了解即可)
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
<script>
jQuery.extend({
min:function(a, b){return a < b ? a : b;},
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script>
jQuery.fn.extend({
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
单独写在文件中的扩展：
(function(jq){
jq.extend({
funcName:function(){
...
},
});
})(jQuery);
老师有两个示例
。
浙公网安备 33010602011771号