jQuery篇
jQuery相关
jQuery相当于Python中的第三方模块。
注意：jQuery对象保存到变量的时候，变量名前加$，为了在自我编码过程中与DOM对象进行区分。
层级选择器
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 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked
:selected
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <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 p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1"); // 从结果集中过滤出有c1样式类的等价于 $("div.c1")
补充
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作标签
样式操作
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS css("color","red")//DOM操作：tag.style.color="red" 示例： $("p").css("color", "red"); //将所有p标签的字体设置为红色
多个CSS属性的操作：
$(this).css({"color":"red","font-size":20})
<style> *{padding:0px;margin:0px;} .d1,.d2,.d3{color:red;} .c1{display:none;} </style> <body> <div class="menu-list-left"> <div class="d1">菜单1</div> <div class="menu-list"> <ul> <li><a href="">内容1</a></li> <li><a href="">内容2</a></li> <li><a href="">内容3</a></li> </ul> </div> <div class="d1">菜单2</div> <div class="menu-list c1"> <ul> <li><a href="">内容4</a></li> <li><a href="">内容5</a></li> <li><a href="">内容6</a></li> </ul> </div> <div class="d1">菜单3</div> <div class="menu-list c1"> <ul> <li><a href="">内容7</a></li> <li><a href="">内容8</a></li> <li><a href="">内容9</a></li> </ul> </div> </div> </body>
<script src="jquery-3.2.1.min.js"></script> <script> //第一种 // $(".d1").click(function(){ // $(this).next().siblings(".menu-list").addClass("c1"); // $(this).next().toggleClass("c1"); // }) //第二种方法 $(".d1").click(function(){ var $thsNext=$(this).next(); $(".menu-list").not($thsNext).addClass("c1"); $(this).next().toggleClass("c1"); }) </script>
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset({top:100,left:100});：设置位置
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。与 .position()的差别在于： .position()是相对于相对于父级元素的位移。
<style> *{padding:0px;margin:0px;} .abc{height:1000px;width:100px;background-color: green;} .reback{width:50px;height:50px;background-color: blue;display:none;position:fixed;bottom:100px;right:100px;} </style> <body> <div class="abc">我是div</div> <div class="reback">返回顶部</div> </body> <script src="jquery-3.2.1.min.js"></script> <script> $(window).scroll(function(){ if ($(window).scrollTop()>100) { $(".reback").css("display","block"); }else{ $(".reback").css("display","none"); } $(".reback").click(function(){$(window).scrollTop(0);}) }) </script>
尺寸
height():content高度
width():content宽度
innerHeight():content+padding高度
innerWidth():content+padding宽度
outerHeight():content+padding+border高度
outerWidth():content+padding+border宽度
文本操作
HTML代码
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容
文本值
text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
值
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
注意：当出现多选时，使用select可以一次取多个值，而用CheckBox一次只能取一个值，必须通过循环才可以多次取值。
<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">
js:
$("input[name='gender']:checked").val()
<style> *{padding:0px;margin:0px;} .waring{color:red;} </style> <body> <form action=""> <label>用户名: <input class="need" type="text" name="usn"> <span class="waring"></span> </label><br><br> <label>密 码： <input class="need" type="password" name="pwd"> <span class="waring"></span> </label><br><br> <input type="submit" value="登录"> </form> </body> <script src="jquery-3.2.1.min.js"></script> <script> $("input[value='登录']").click(function(){ var $need=$(".need"); for (var i=0;i<$need.length ;i++ ) { var sp_t=$($need[i]).parent().text().trim().slice(0,-1); if ($($need[i]).val().trim().length==0){ if ($($need[i]).next().text()=="") { $($need[i]).next().text(sp_t+"为空"); } }else{ $($need[i]).next().text(""); } } return false; }) </script>
属性操作
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
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。
例子：
<body>
<table border="2">
<thead>
<tr>
<th>选项</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="c1"></td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td><input type="checkbox" class="c1"></td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td><input type="checkbox" class="c1"></td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
</table>
<input type="button" value="全选">
<input type="button" value="反选">
<input type="button" value="取消">
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("input[value='全选']").click(function(){
$(".c1").prop("checked",true);
})
$("input[value='取消']").click(function(){
$(".c1").prop("checked",false);
})
$("input[value='反选']").click(function(){
var $c1Ele=$(".c1");
for (var i=0;i<$c1Ele.length ;i++ )
{
if ($($c1Ele[i]).prop("checked"))
{
$($c1Ele[i]).prop("checked",false);
}else{
$($c1Ele[i]).prop("checked",true);
}
}
})
</script>
文档处理
添加到指定元素内部的后面.
$(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()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
克隆示例：
<!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> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>
事件
常用事件
click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})
/* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */
<!DOCTYPE html> <html lang="en"> <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>实时监听input输入值变化</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.2.1.min.js"></script> <script> $("#i1").on("input propertychange", function () { alert($(this).val()); }) </script> </body> </html>
事件绑定
.on(event,function(){}) .on(event,selector,function(){})//尽量绑定的元素离选择器近一点，且在HTML加载后就生成的。 适用于给未来的元素(页面生成后没有，通过js添加的元素)绑定事件。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件
off() 方法移除用 .on()绑定的事件处理程序。
阻止后续事件执行
- e.preventDefault();
- return false;//常见阻止表单提交。(查看上方的登录校验示例)
注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用".on()"方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
阻止事件冒泡
e.stopPropagation();
与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是每次循环的具体元素。 })
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
return false;
.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对应的数据
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <style> *{padding:0px;margin:0px;} .cover{background-color: rgba(0,0,0,0.5); position:absolute;top:0;left:0;bottom:0;right:0; } .modal{ width:400px;height:200px;background-color: #fff;position:relative;z-index:998;left:50%;top:50%;margin-left:-200px;margin-top:100px;} .hide{display:none;} </style> <body> <table border="1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> <th>模式</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小明</td> <td>篮球</td> <td> <input class="edit" type="button" value="编辑"> <select name="" id="s1"> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小红</td> <td>足球</td> <td> <input class="edit" type="button" value="编辑"> <select name="" id="s1"> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小蓝</td> <td>排球</td> <td> <input class="edit" type="button" value="编辑"> <select name="" id="s1"> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> </tbody> </table> <input class="addinfo" type="button" value="新增一条"> <div class="cover hide"></div> <div class="modal hide"> <label style="position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-20px;">姓名:<input type="text" name="usn" ></label><br> <label style="position:absolute;left:50%;top:50%;margin-left:-100px;">爱好:<input type="text" name="hobby"></label> <input class="sub" type="submit" value="提交" style="width:40px;height:30px;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:40px;"> <input class="cancel" type="button" value="取消" style="width:40px;height:30px;position:absolute;left:50%;top:50%;margin-top:40px;" > </div> </body> </html>
<script src="jquery-3.2.1.min.js"></script>
<script>
var flag1=null;//设置一个标志flag1;用来区分是新增还是编辑。
//点击新增时的操作
$(".addinfo").on("click",function(){
$(".cover,.modal").removeClass("hide");
flag=false;
return flag;
})
$(".cancel").on("click",function(){
$(".cover,.modal").addClass("hide");
//获取模态框中的新值
var $valueModal=$(".modal").children(":has(input[type='text'])").children();
for (var i=0;i<$valueModal.length;i++ )
{
$($valueModal[i]).val("");
}
})
//点击编辑按钮时的操作
$(".edit").on("click",function(){
$(".cover,.modal").removeClass("hide");
$(this).addClass("e1");//通过类e1来区分那个被编辑。
flag=true;
return flag;
})
//点击提交时：
$(".sub").on("click",function(){
//获取到原始值所在标签
var $valueGroup=$(".e1").parent().parent().children(":not(:has(input))");
//获取模态框中的新值
var $valueModal=$(".modal").children(":has(input[type='text'])").children();
if (flag1)
{
for (var i=0;i<$valueGroup.length;i++ )
{
$($valueGroup[i]).html($($valueModal[i]).val());
}
}else{
trEle=document.createElement("tr");
html="<td><input type='checkbox'></td>"+
"<td>"+$($valueModal[0]).val()+"</td>"+
"<td>"+$($valueModal[1]).val()+"</td>"+
"<td>"+
"<input class='edit' type='button' value='编辑'>"+
"<select name='' id='s1'>"+
"<option value='0'>上线</option>"+
"<option value='1'>下线</option>"+
"<option value='2'>离线</option>"+
"</select>"+
"</td>";
trEle.innerHTML=html;
$("tbody").append(trEle);
}
$(".e1").removeClass("e1");
$(".cover,.modal").addClass("hide");
for (var i=0;i<$valueModal.length;i++ )
{
$($valueModal[i]).val("");
}
})
//通过按住shift键实现选中的设置为同一种状态。
var keyvalue=0;
var flag2=null;//设置一个标志flag2;用来区分是否已经按下shift键。
$(window).on("keydown",function(event){
if (event.keyCode===16)
{
flag2=true;
}
})
$(window).on("keyup",function(event){
if (event.keyCode===16)
{
flag2=false;
}
})
$("select").on("change",function(event){
//获取所有选中的checkbox:$("input:checked")
//获取当前所选择的select值
var $curval=$(this).val();
//所有选中的checkbox对应的select标签
var $seled=$("input:checked").parent().siblings(":has('select')");//数组
if (flag2 && $seled)
{
for (var i=0;i<$seled.length ;i++ ){
$($seled[i]).children("select").val($curval);
}
}
})
</script>
