jQuery
jQuery是一个优秀的JavaScript库,它凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作DOM、处理事件、执行动画和开发Ajax的操作。
jquery的引用
方法一：本地调用 <script src="./js/jquery-3.6.0.min.js"></script> 方法二：jquery官网 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 方法三：百度 <script src="http://libs.baidu.com/jquery/3.6.0/jquery.min.js"></script> 方法四：boot <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
入口小函数
$(document).ready(function(){}) 简写：$(function(){ })
window.onload | $(document).ready() | |
执行时机 | 必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码 | 必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码 |
执行次数 | 只能执行一次，如果第二次，那么 第一次的执行会被覆盖 | 可以执行多次，第N次都不会被上 一次覆盖 |
jQuery对象与dom对象转换
dom对象转化为jquery对象
$(dom对象)
jquery(dom对象)jquery对象转化为dom对象
jquery对象[索引号]
jquery对象.get(索引号)
操作样式
获取样式
jquery对象.css("属性名") 通过样式属性名获取属性值
设置样式
设置一条样式 jquery对象.css("属性名"，"属性值")
设置多条样式 jquery对象.css({"属性名":"属性值","属性名":"属性值"......})
选择器
层次选择器
$("E F")
选择E1下所有E2
$("E>F")
选择E1下的子E2,不包含E2下满足的元素
$("E+F")=$(E1).next(E2)
$("E").next( ) $("E").next("F") 往后查找，紧邻E选择器后的那一个F兄弟选择器
$("E").prev( ) $("E").prev("F") 往前查找，紧邻E选择器前的那一个F兄弟选择器$("E~F")=$(E1).nextAll(E2)
$("E").nextAll( ) $("E").nextAll("F") 往后查找，紧邻E选择器后的所有F兄弟选择器
$("E").prevAll( ) $("E").prevAll("F") 往前查找，紧邻E选择器前的所有F兄弟选择器$("E:eq(索引)")
基本过滤选择器
选择器
描述
返回
示例
:first
选择第1个元素
单个元素
$(“div:first”)选择第1个div元素
:last
选择最后1个元素
单个元素
$(“div:last”)选择最后1个div元素
:not(E1)
去除所有E1选择器匹配的元素
集合元素
$(“input:not(.my)”)选择class不是.my的所有input元素
:even
选择索引是偶数的所有元素，索引从0开始
集合元素
$(“tr:even”)选择表格中所有偶数的行
:odd
选择索引是奇数的所有元素，索引从0开始
集合元素
$(“tr:odd”)选择表格中所有奇数的行
:eq(index)
选择索引值是index的元素，index从0开始
单个元素
$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)
选择索引值大于index的元素,index从0开始
集合元素
$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)
选择索引值小于index的元素,index从0开始
集合元素
$(“tr:lt(1)”)选择表格行索引小于1的行
:header
所取所有的标题元素,h1~h6
集合元素
$(“:header”)选择网页中所有的<h1>,<h2>…<h6>
:animated
选择当前正在执行动画的所有元素
集合元素
$(“div:animated”)选择正在执行动画的div元素
内容过滤选择器
选择器
描述
返回值
示例
:contains(text)
选择含有text文本内容的元素
集合元素
$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty
选择不包含子元素或文本的空元素
集合元素
$(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1)
选择包含有(E1选择器匹配的元素)的所有元素
集合元素
$(“div:has(p)”)选择含有p元素的所有div元素
:parent
选择含有子元素或文本的元素
集合元素
$(“div:parent”)选择拥有子元素（包含文本）的所有div元素
可见性过滤选择器
$(":hidden") 选择所有不可见元素
$(":visible") 选择所有可见元素
属性过滤选择器
选择器
描述
返回值
示例
[attribute]
选择拥有此属性的元素
集合元素
$(“div[id]”)选择拥有id属性的div元素
[attribute=value]
选择属性值为value的元素
集合元素
$(“div[id=test]”)选择id属性值为test的div元素
[attribute!=value]
选择属性值不为value的元素
集合元素
$(“div[id!=test]”)选择id属性值不为test的div元素,没有id属性的div也会被选择
[attribute^=value]
选择属性值以value开始的元素
集合元素
$(“div[id^=test]”)选择id属性值以test开始的所有div元素
[attribute$=value]
选择属性以value值结束的元素
集合元素
$(“div[id$=test]”)选择id属性值以test结束的所有div元素
[attribute*=value]
选择属性中含有value的元素
集合元素
$(“div[id*=test]”)选择id属性值中含有test的所有div元素
[A1][A2]…A[N]
用属性选 择器合并成一个复合属性选择器。满足多个条件。
集合元素
$(“div[id][title$=test]”)选择拥有id属性,并且title属性以test结束的所有div元素
子元素过滤选择器
选择器
功能描述
返回值
简单示例
:nth-child(index/even/odd)
括号内为索引值
选取每个父元素下的第index个子元素或奇偶元素.(index从1开始）
集合元素
:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始.
:first-child
选择每个父元素的第1个子元素
集合元素
:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如:
$(“ul li:first-child”)选择每个ul下的第一个<li>
:last-child
选取每个父元素的最后1个子元素
集合元素
$(“ul li:last-child”)选择每个ul下的最后一个<li>
:only-child
如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配
集合元素
$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>
表单对象属性过滤选择器
选择器
描述
返回值
示例
:enabled
选择所有可用元素
集合元素
$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素
:disabled
选择所有不可用元素
集合元素
$(“#form1 :disabled”)选取id为form1的表单内所有不可用元素
:checked
选择忾有被选中的元素(单选框,复选框)
集合元素
$(“input:checked”)选择所有被选中的<input元素>
:selected
选择所有被选中的选项元素(下拉列表)
集合元素
$(“select :selected”)选取所有被选中的选项元素
表单选择器
选择器
描述
返回值
示例
:input
匹配所有<input> <textarea> <select> <button>元素
集合元素
$(“:input”) 同描述
:text
选择所有单行文本框
集合元素
$(“:text”)匹配所有
单行文本框
:password
选择所有密码框
集合元素
$(“:password”)
:radio
选择所有单选框
集合元素
$(“:radio”)
:checkbox
选择所有复选框
集合元素
$(“:checkbox”)
:submit
匹配所有提交按钮
集合元素
$(“:submit”)
:image
匹配所有图像按钮
集合元素
$(“:image”)
:reset
匹配所有重置按钮
集合元素
$(“:reset”)
:button
匹配所有按钮
集合元素
$(“:button”)
:file
匹配所有文件域
集合元素
$(“:file”)
:hidden
匹配所有不可见元素
集合元素
$(“:hidden”)
方法
方法
功能描述
show()
显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒
hide()
隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒
css(name,value)
给匹配的元素设置css样式
text(string)
获取或设置匹配元素的文本内容,不包含html标签
filter(expr)
筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
addClass(class)
为匹配的元素增加一个 类样式
removeClass(class)
为匹配的元素移除一个类样式
html()
获取或设置匹配元素的内容，包含html标签
siblings()
$(“.abc”).siblings()匹配得到class=abc的其它兄弟元素
设置单条样式 .css(“属性名”，”属性值”)
设置多条样式 .css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})
获取样式值 .css(“属性名”)
操作类 可增加/删除多个类
.addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开
.removeClass(“”) 括号里面不填值表示清空类
.toggleClass(“”) 括号里面不填值表示清空类
.toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的 布尔值
.html(),.text()和.val()的差异总结：
- 1 .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上
- 2.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
- 3 .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
- 4 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
show(speed,[callback])
hide( speed,[callback] )
toggle(speed,[callback])
参数：
speed： 设置显示/隐藏时的速度值，可为fast，slow或毫秒值
callback：显示或隐藏动作完成后调用的函数
toggle()方法：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）
slideUp(speed,[callback] )
slideDown(speed,[callback] )
slideToggle() 滑动
fadeIn(speed,[callback] ) 由看不见到看得见
fadeOut(speed,[callback] ) 由看得见到看不见
fadeToggle()
fadeTo(speed,opacity,[callback]) 设置淡入淡出效果到一定的不透明度
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
