目录
jQuery
jQuery是js的一个库，方便我们使用，提高开发效率
jQurey的特点
1.链式编程
2.隐式迭代：在方法的内部进行循环便利，不用我们自己在进行循环
jQurey的优点
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
基本选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .className, tagName")
层级选择器
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器
基本选择器
# 根据标签名查
$('ul')
# 查询标签内部的子节点
$('ul li')
# 查询标签内部的第一个节点--first
$('ul li:first')
# 查询标签内部的第一个节点--last
$('ul li:last')
# 按索引号查询--eq
$('ul li:eq(1)')
# 查询索引为偶数的节点--even # 此时0为偶数
$('ul li:even')
# 查询索引为奇数的节点--odd
$('ul li:odd')
# 查询大于索引的节点--gt
$('ul li:gt(索引号)')
# 查询小于索引号的节点--lt
$('ul li:lt(索引号)')
# 不显示不需要的节点
$('div span:has(".c1")') # 表示在查询 div 中的结果中不显示c1
# 筛选后代中是否有查询的节点
$('div:has(".c1")') # 判断div中有没有 c1 的节点
# 总结：" : " 后边跟的是判断条件，查询出来的结果是数组的行式
属性选择器
可以根据自己定义的属性来进行查找，查找的方式是使用 [ ] 来查找
# 基础版
$('[username]') # 查询全局中含有username的节点
# 升级版
$('[username="wang"]') # 查询全局中username='wang'的节点
# 豪华版
$('span[username="wang"]') # 查询span中username='wang'的节点
表单选择器
# 表单元素：需要用户输入选择的部分，就是HTML中的表单
# 常见的表单标签：input，select，label，textarea
$(':text') # 查询type类型是test的节点
$(':password') # 查询type类型是password的节点
$(':file') # 查询type类型是文件的节点
$(':radio') # 查询含有radio属性的节点
$(':checkbox') # 查询含有checkbox属性的节点 checkbox默认选中
$(':submit') # 查询type类型是sumbit类型的节点
$(':reset') # 查询type类型是reset类型的节点
$(':button') # 查询含有button类型的节点
注意：使用表单筛选器进行查询的时候，使用$(':checkbox')的时候会将selece也找到，这是在使用的时候的一个bug，所以在查询select的时候需要使用$(':select')
下一个元素：
$("#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() // 索引值等于指定值的元素
筛选器方法
直接通过锁定需要进行操作的标签下，直接对这个标签内的内容进行查询
# 先查找到需要进行操作的标签对象
> var $spanEle = $('span')[0] # 注意：此时拿到的是标签对象
> $($spanEle) # 此时是一个jQuery对象
常用的筛选器方法
注意：在使用筛选器的时候要注意区分是jQuery对象还是标签对象
左侧菜单栏
<!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>左侧菜单示例</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
80%;
height: 100%;
}
.menu {
color: white;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid #23282e;
}
.items {
background-color: #181c20;
}
.item {
padding: 5px 10px;
border-bottom: 1px solid #23282e;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".title").click(function (){ // jQuery绑定事件
// 隐藏所有class里有.items的标签
// $(".items").addClass("hide"); //批量操作
// $(this).next().removeClass("hide");
// jQuery链式操作
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
});
</script>
操作标签
样式操作
标签操作
位置操作
实例：当滚动条滑动到某一个位置的时候会自动执行某一指令
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
返回顶部实例
文本操作
jQuery的文本操作与js的文本操作实现的方法上是一样的
获取文本框值的操作：
$('div').val() # 查询值
$('div').val('wang') # 添加值
自定义登录校验实例
<!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 action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#btn").click(function () {
var username = $("#input-name").val();
var password = $("#input-password").val();
if (username.length === 0) {
$("#input-name").siblings(".error").text("用户名不能为空");
}
if (password.length === 0) {
$("#input-password").siblings(".error").text("密码不能为空");
}
})
</script>
</body>
</html>
属性操作
用于ID等或自定义属性：
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, false/true)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
prop和attr的区别：
attr所指的属性是HTML标签属性可以认为attr是显式的。
prop所指的是DOM对象属性，而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()// 参数
克隆实例
jQurey事件
与js中的事件相同，当进行某些操作的时候会触发某些动作
jQurey常见的事件
click(function(){...}) # 点击事件
hover(function(){...}) # 悬浮事件
blur(function(){...}) # 移除事件
focus(function(){...}) # 聚焦事件
change(function(){...}) # 内容与变化
keyup(function(){...}) # 键位上下操作
按住shift实现批量操作实例
jQurey绑定事件语法
1.$(选择器).事件名(function(){事件代码}）
2.$(选择器).on('事件名',function(){事件代码} ) # 用处更广，事件委托用
input实时监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input实时监控</title>
</head>
<body>
<script src="jQuery.js"></script>
<input type="text" id="i1">
<script>
$("#i1").on("input propertychange",function(){
alert($(this).val());
})
</script>
</body>
阻止标签默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jQuery.js"></script>
<script>
$("#b1").click(function(e){
alert(123);
e.preventDefault();
})
</script>
</body>
</html>
阻止冒泡事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
我是div
<p>我是p
<span>点我</span>
</p>
</div>
<script src="jQuery.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function (e) {
alert("p");
e.stopPropagation()
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
事件委托
事件委托 将特定的事件 委托给标签内部指定的元素 (标签即可以是提前写的 也可以是后期动态添加的)