为什么要用jQuery?
写起来简单，省事，开发效率高，兼容性好(write less,do more).
什么事jQuery?
jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块),
如何使用jQuery?
导入： <script src="jquery-3.2.1.js"></script>
<script src="jquery-3.2.1.min.js"></script>
语法规则:$("")
JS和jQuery的区别?
jQuery就是用JS写的
js是基础，jQuery是工具
选择器
基本选择器
ID选择器 $("#id的值")
类选择器(class) $(".class的值")
标签选择器(html标签) $("标签的名字")
所有标签 $("*")
组合选择器 $("xx,xxx")
层级选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
jQuery对象
用jQuery选择器查出来的就是jQuery对象
jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法
DOM对象和jQuery对象的转换:
-- $(".c1")[0] ---> DOM对象
-- $(DOM对象) -----> jQuery对象
筛选器
基本筛选器
: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标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.1.js"></script> </head> <style> .c2{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(128,128,128,0.45); z-index: 999; } .model{ position: fixed; height: 200px; width: 400px; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; background-color: #eeeeee; z-index: 1000; } .hidden{ display: none; } </style> <body> <div class="c1"> 我是最底层的 <button id="i1">登录</button> </div> <div class="c2 hidden " > </div> <div class="model hidden"> <p>用户名:<input type="text"></p> <p>密码:<input type="text"></p> <button id="i2">cancle</button> </div> <script> var b1Ele = $("#i1")[0]; b1Ele.onclick = function () { var coverEle = $(".c2")[0]; var modelEle = $(".model")[0]; $(coverEle).removeClass("hidden"); $(modelEle).removeClass("hidden"); } var b2Ele = $("#i2")[0]; b2Ele.onclick = function () { var coverEle = $(".c2")[0]; var modelEle = $(".model")[0]; $(coverEle).addClass("hidden"); $(modelEle).addClass("hidden"); } </script> </body> </html>
属性选择器
[attribute] [attribute=value] //属性等于 [attribute!=value] //属性不等于
例：
//示例 <input type="text"> <input type= "password"> <input type="checkbox"> $("input[type='checkbox']"); //取到checkbox类型的input标签 $("input[type!='text']"); //取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例：
$(":checkbox") //找到所有的checkbox
表单对象属性：
:enabled
:disabled
:checked
:selected
例：找到可用的Input标签
<form>
<input name="email" disabled="disabled"/>
<input name="id"/>
</form>
$("input:enabled") //找到可用的input标签
找到被选中的option:
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai ">上海市</option>
</select>
$(":selected") //找到所有被选中的option
一个特殊的例子：
<form action="">
<p>username:<input type="text" ></p>
<p>password:<input type="password"></p>
<input type="submit">
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby" checked>足球
<input type="checkbox" name="hobby">肉球
<select name="" >
<option value="">11</option>
<option value="" selected>22</option>
<option value="">33</option>
</select>
</form>
//这里的 $(':checked') 会查找到checked和selected 这是一个小Bug
//所以我们需要 $('input:checked')
筛选器的方法
下一个元素:
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素
$("#id").prev()
$("#id").preAll()
$("#id").preUntil("#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() //索引值等于指定值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
margin: 0;
}
.left{
height: 100%;
20%;
position: fixed;
background-color: #4e4e4e;
text-align: center;
}
.right{
height: 100%;
80%;
}
.title{
margin: 10px 20px;
background-color: #181c20;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title"> 菜单一
<div class="item">11</div>
<div class="item">22</div>
<div class="item">33</div>
</div>
<div class="title"> 菜单二
<div class="item">11</div>
<div class="item">22</div>
<div class="item">33</div>
</div>
<div class="title"> 菜单三
<div class="item">11</div>
<div class="item">22</div>
<div class="item">33</div>
</div>
</div>
</div>
<div class="right"></div>
<script>
$('.title').click(function () {
$('.item').addClass('hide');
$(this).children().removeClass('hide');
})
</script>
</body>
</html>
操作标签
样式操作
样式类
addClass(); //添加指定的css类名 removeClass();//移除指定的CSS类名 hasClass(); //判断样式存不存在 toggleClass(); //切换CSS类名，-如果有就移除，没有就添加.
示例：开关等和模态框
CSS
$("p").css('color','red'); //将所有p标签的字体设置为红色
位置操作
offset() //获取匹配元素在当前窗口的相对偏移或设置元素位置 position() //获取匹配元素相对父元素的偏移 scrollTop() //获取匹配元素相对滚动条顶部的偏移 scrollLeft() //获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。
和.position()的差别在不: .position()是相对于父级元素的移位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .d1{ background-color: aqua; bottom: 10px; right: 10px; width: 60px; position: fixed; } .hide{ display: none; } </style> </head> <body> <div style="background-color: pink; height: 800px; 100%"></div> <div style="background-color: orange; height: 800px; 100%"></div> <div style="background-color: seagreen; height: 800px; 100%"></div> <div class="d1 hide" >返回顶部</div> <script> $(window).scroll(function () { if ($(window).scrollTop()>100){ $(".d1").removeClass('hide'); }else { $('.d1').addClass('hide'); } }); $('.d1').on('click',function () { $(window).scrollTop(0); }) </script> </body> </html>
尺寸：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
HTML代码：
html() //取得第一个匹配元素的html内容 html(val) //设置所有匹配元素的Html内容
文本值
text() //取得所有匹配元素的内容 text(val) //设置所有匹配元素的内容
值
val() //取得第一个匹配元素的当前值 val(val) //设置所有匹配元素的值 val([val1,val2]) //设置多选的checkbox,多选select的值
例如：
<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()
属性操作
用于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全称atribute(属性)
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。
接下来看一下针对自定义属性,atr和prop又有什么区别:
<input type="checkbox" value="1" id="i1" me="自定义属性"> $("#i1").attr("me") //”自定义属性“ $("#i1").prop("me") //undefined
可以看到prop不支持获取标签自定义属性。
总结以下：
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值比如checkbox,radio和option的是否被选中都用prop
文档处理
添加到指定元素内部
=======添加到内部后面=======
$(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="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.c1{
background-color: orange;
}
</style>
</head>
<body>
<button class="c1">多重影分身之术</button>
</body>
<script>
$('.c1').on('click',function () {
$(this).clone(true).insertAfter(this)
})
</script>
</html>
事件
常用事件
click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})
keydown和keyup事件组合示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script src="jquery-3.3.1.js"></script>
<script>
var flag = false;
// shift按键被按下的时候
$(window).keydown(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = true;
}
});
// shift按键被抬起的时候
$(window).keyup(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = false;
}
});
// select标签的值发生变化的时候
$("select").change(function (event) {
// 如果shift按键被按下，就进入批量编辑模式
// shift按键对应的code是16
// 判断当前select这一行是否被选中
console.log($(this).parent().siblings().first().find(":checkbox"));
var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
console.log(isChecked);
if (flag && isChecked) {
// 进入批量编辑模式
// 1. 取到当前select选中的值
var value = $(this).val();
// 2. 给其他被选中行的select设置成和我一样的值
// 2.1 找到那些被选中行的select
var $select = $("input:checked").parent().parent().find("select")
// 2.2 给选中的select赋值
$select.val(value);
}
});
</script>
</body>
</html>
hover事件示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p>
<script src="jQuery-3.3.1.js">
</script>
<script>
$('p').hover(
function () {
alert('来啦，老弟')
},
function () {
alert('慢走哦～')
}
)
</script>
</body>
</html>
实时监听input输入值变化示例
<!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> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input propertychange", function () { alert($(this).val()); }) </script> </body> </html>
事件绑定
.on(events,[.selector],function(){}) events:事件 selector:选择器(可选的) function:事件处理函数
同理 移除事件将 on 换成 off
阻止后续事件执行
1.return false; //常见阻止表单提交
2.e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
阻止事件冒泡
<!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>
除了e.stopPropagation()还可以使用 return false
页面载入
当DOM载入就绪可以查询及操作时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大提高web应用程序的响应速度。
两种写法:
$(document).ready(function(){ // 在这里写你的JS代码... }) 简写： $(function(){ // 你在这里写你的代码 })
还有一种直接写在body内最下方
文档加载完绑定事件，并且阻止默认事件发生
<!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> .error { color: red; } </style> </head> <body> <form id="myForm"> <label for="name">姓名</label> <input type="text" id="name"> <span class="error"></span> <label for="passwd">密码</label> <input type="password" id="passwd"> <span class="error"></span> <input type="submit" id="modal-submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="s7validate.js"></script> <script> function myValidation() { // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树 var $myForm = $("#myForm"); $myForm.find(":submit").on("click", function () { // 定义一个标志位，记录表单填写是否正常 var flag = true; $myForm.find(":text, :password").each(function () { var val = $(this).val(); if (val.length <= 0 ){ var labelName = $(this).prev("label").text(); $(this).next("span").text(labelName + "不能为空"); flag = false; } }); // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件 return flag; }); // input输入框获取焦点后移除之前的错误提示信息 $myForm.find("input[type!='submit']").on("focus", function () { $(this).next(".error").text(""); }) } // 文档树就绪后执行 $(document).ready(function () { myValidation(); }); </script> </body> </html>
与window.onload的区别
window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用。
jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用(建议使用此函数)
事件委托
$(body).on("click","button",function(){
alert(123);
})
动画效果
// 基本 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])
补充：
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是每次循环的具体元素。 }) 输出： 010 120 230 340
.each(function(index,Element)):
描述:遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each()方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字this总是指向这个元素。
//为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
可以直接写 $("li").addClass("c1")
终止each循环
return false;
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key,value):
描述:在匹配的元素上存储任意相关数据
$('div').data("k",100); //给所有div标签都保存一个名为k 值为100
$('div').data('k'); //返回第一个div标签中保存的"k"的值
$('div').removeData("k"); //移除元素上存放k对应的数据