jQuery——jquery的引用、 jQuery对象与dom对象转换、选择器、方法

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(索引)")      $("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() 方法将匹配元素集合缩减为匹配指定选择器的元素。