jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件
目录
jQuery
jQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器，jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery版本
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
简单来说推荐使用3.x版本
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
jQuery内容：
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
下载链接：jQuery官网
中文文档：jQuery AP中文文档
引入方式分为两种：
- 第一种引入方式：
进入jQuery官网。
有两种下载模式，第一种 压缩过后下载 第二种 没有压缩下载，我们选择压缩过后下载。
注意: 选择压缩过后的包下载，因为压缩过后的容量较小，网页请求速度更快。
页面全部复制 ctrl + a，ctrl + c。
Pycharm新建js文件，将复制的代码放进去并保存即可。若要使用jQuery则在打开的HTML中引入
<script src="自定义文件名.js"></script>
- 第二种引入方式：
借助于pycharm自动初始化代码功能完成自动添加
第一步: File 第二步: Settings 第三步: Editor 第四步: file and code template
注意: 作用以后创建HTML文件，自动添加JQuery语句
- 第三种引入方式：
直接引入jQuery提供的CDN服务(基于网络直接请求加载)
前端免费的cdn网站: https://www.bootcdn.cn/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
注意: 使用CDN的jQuery前提必须要有网络
jQuery对象
jQuery对象就是通过jQuery包装DOM对象产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值i1的元素的html代码。其中html()是jQuery里的方法。
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0] //jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
举例：
> document.getElementById('d1').style.color = ('red') //原生js改变id=d1的颜色
< "red"
> $('#d1').css('color','black') //使用jQuery改变id=d1标签颜色
< k [<p id="d1">] (1)
jQuery基础语法
查找标签
基本选择器
id选择器：
$('#id')
标签选择器：
$('tagName')
class选择器：
$('.className')
配合使用：
<body>
<div id="d2">
<p id="d1">你试试</p>
<div id="d3"></div>
</div>
<div id="d4" class="c1">jjjj</div>
</body>
> var a = $('div#d4.c1')
< undefined
> a
< k [<div id="d4">] (1)
层级选择器：
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:first') //第一个div标签
< k [<div id="d1">] (1)
> $('div:last') //最后一个div标签
< k [<div id="d11">] (1)
> $('div:eq(0)') //显示索引为0的div标签
< k [<div id="d1">] (1)
> $('div:even') //从div开始为偶数的div标签
< k [<div id="d1">, <div id="d6">] (2)
> $('div:odd') //从div开始为奇数的div标签
< k [<div id="d2">, <div id="d11">] (2)
> $('div:gt(0)') //匹配索引大于0的div标签
< k [<div id="d2">, <div id="d6">, <div id="d11">] (3)
> $('div:lt(1)') //匹配索引小于1的div标签
< k [<div id="d1">] (1)
> $('div:not(p)') //移除div里的p标签
< k [<div id="d1">, <div id="d2">, <div id="d6">, <div id="d11">] (4)
> $('div:has(p)') //选取出包含p标签的div标签
< k [<div id="d2">, <div id="d6">] (2)
练习：
自定义模态框，使用jQurey实现弹出和隐藏功能。
点击查看代码
<!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>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
z-index: 999;
}
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="弹" id="i0">
<div class="cover hide"></div>
<div class="modal hide">
<label for="i1">姓名</label>
<input id="i1" type="text">
<label for="i2">爱好</label>
<input id="i2" type="text">
<input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var tButton = $("#i0")[0];
tButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
};
var cButton = $("#i3")[0];
cButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).addClass("hide");
$(modalEle).addClass("hide");
}
</script>
</body>
</html>
jQuery版自定义模态框
属性选择器
[attribute] //[属性]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
举例：
> $('[username]')
< k [<input type="text">, <input type="text">, <p>] (3)
> $('p[username]')
< k [<p>] (1)
> $('[username="第一个input标签"]')
< k [<input type="text">] (1)
> $('p[username="第一个p标签"]')
< k [<p>] (1)
也可以使用标签自带的属性比如input标签自带type属性。
注意：单引号和双引号。
表单筛选器
:text >>>普通文本
:password >>>密码展示
:file >>>上传文件
:radio >>>单选
:checkbox >>>多选
:submit >>>提交按钮
:reset >>>重置按钮
:button >>>普通按钮
举例：
> $('input[type="text"]') //找到表单为text的标签
< k [<input type="text">, <input type="text">, <input type="text">] (3)
> $('input[type="password"]') //找到表单为password的标签
< k [<input type="password">] (1)
> $(':text') //使用表单筛选器等同于第一个
< k [<input type="text">, <input type="text">, <input type="text">] (3)
> $(':password') ////使用表单筛选器等同于第二个
< k [<input type="password">] (1)
表单对象属性
:enabled >>>启用
:disabled >>>禁用
:checked >>>checkbox内默认
:selected >>>option内默认选择
举例：
checked与selected的特殊情况
注意: checked与selected在一起时筛选，checked任意出现错误，这也不能叫bug，是jQuery的规律。
1.它会将checked和selected都拿到
$(':checked')
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
2.它不会 只拿selected
$(':selected')
w.fn.init [option, prevObject: w.fn.init(1)]
3.自己加一个限制条件
$('input:checked')
w.fn.init [input, prevObject: w.fn.init(1)]
<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() // 索引值等于指定值的元素
点击查看代码，左侧菜单
<!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;
width: 20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
width: 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>
左侧菜单栏
操作节点标签
样式操作：
js 版本 jQurey版本
# classList.add() addClass();// 添加指定的CSS类名。
# classList.remove() removeClass();// 移除指定的CSS类名。
# classList.contains() hasClass();// 判断样式存不存在
# classList.toggle() toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS
语法格式： css('属性名','属性值')
css("color","red")//DOM操作：tag.style.color="red"
jQurey示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
jQuery的链式操作，使用jQuery可以做到一行代码操作很多标签。
jQuery对象调用jQurey方法之后返回的还是当前jQuery对象，也就可以继续调用其他方法。
位置操作：
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移，了解
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
scrollTop()
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
点击查看回到顶部代码
<!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>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top:200});
});
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
返回顶部示例
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
$('p').height() //文本
$('p').width()
$('p').innerHeight() //文本+padding
$('p').innerWidth()
$('p').outerHeight() //文本+padding+border
$('p').outerWidth()
文本操作
HTML代码：
等同与：innerHTML()
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值：
等同于：innertext()
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值：
value()
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
括号内不写参数就是获取值 写参数就是设置值
上传文件files：
$('#id')[0].files[索引]
设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
示例：
<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">
获取被选中checkbox或radio的值
$('input[name="gander"]:checked').val()
属性操作
| js | jQurey | 描述 |
|---|---|---|
| setAttribute() | attr(name,value) | 设置标签 |
| getAttribute() | attr(name) | 获取标签 |
| removeAttribute() | removeAttr | 移除标签 |
注意：在使用变量存储对象的时候推荐使用$xxx
> $('div').attr('id') // 获取
< "d1"
> $('div').attr('class','.c1') //设置，同时可以设置自定义属性：attr('password','junjie')
< k (1) = $5
0
<div id="d1" class=".c1">
<input type="text">
"username:"
</div>
> $('div').removeAttr('class') //移除
< k [<div id="d1">] (1)
针对与选择按钮（checkbox，radio，option是否被选中用prop）：
使用prop()，并且同样通过(name,value)可以获取值和设置，
attr() # setAttribute()
'''适用于属性为静态的情况(不经常修改动态变化的)'''
prop()
$($(':checkbox')[1]).prop('checked',true)
"""适用于动态变化的情况 尤其是选择类标签"""
文档处理：
创建标签：
$('<p>')
append() # 内部的尾部追加元素
prepend() # 内部的头部追加元素
after() # 同级别下面添加元素
before() # 同级别上面添加元素
remove() # 移除当前元素
empty() # 清空当前元素内部所有的数据
clone() # 克隆标签 括号内可以加布尔值来明确是否克隆事件
示例：
> $('#d3').append($('<div>').text('新建').attr('class','c1'))
< k [<div id="d3">] (1)
> $('#d3').prepend($('<div>').text('新建').attr('class','c1'))
< k [<div id="d3">] (1)
> $('#d5').after($('<div>').text('新建').attr('class','c1'))
< k [<span id="d5">] (1)
> $('#d5').before($('<div>').text('新建').attr('class','c1'))
< k [<span id="d5">] (1)
> $('#d5').remove($('<div>').text('新建').attr('class','c1'))
事件
- 第一种方式
</button>
<button id="d1" style="font-size: 20px">脱衣服</button>
<script>
//事件
$('#d1').click(function (){
alert('开始')
})
</script>
- 第二种方式，功能强大：
<button id="d2" style="font-size: 20px">脱衣服</button>
<script>
$('#d2').on('click',function (){
alert('结束')
})
</script>
来个克隆示例：
clone()克隆默认情况值克隆html和css，不克隆事件
<button id="d2" style="font-size: 20px;height: 100px;width: 100px;background-color: darkmagenta;border: 1px solid blue">
点击美女脱衣
</button>
<script>
//事件
$('#d2').on('click',function (){
$(this).clone().insertAfter($('body'))
})
</script>
克隆事件：
clone(ture)括号内加true即可克隆事件
<button id="d2" style="font-size: 20px;height: 100px;width: 100px;background-color: darkmagenta;border: 1px solid blue">
点击美女脱衣
</button>
<script>
//事件
$('#d2').on('click',function (){
$(this).clone(true).insertAfter($('body'))
})
</script>
常用事件：
click(function(){...}) //单击
hover(function(){...}) //悬浮
blur(function(){...}) //失去焦点
focus(function(){...}) //聚焦
change(function(){...})//文本域改变
keyup(function(){...}) //按键抬起
keydown(function(){...}) //按键按下
回到顶部
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery代码.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.hide {display: none;}
#d1 {
position: fixed;
background-color: black;
right: 20px;
bottom: 20px;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: blue"></div>
<div style="height: 500px;background-color: yellowgreen"></div>
<div style="height: 500px;background-color: palevioletred"></div>
<a href="#d1" class="hide">回到顶部</a>
<script>
$(window).scroll(function (){
if($(window).scrollTop() > 300){
$('#d1').removeClass('hide')
}else {
$('#d1').addClass('hide')
}
})
</script>
</body>
</html>
