jQuery对象-CSDN博客

本文链接：https://blog.csdn.net/m0_69962105/article/details/134238226

一、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：使用最广泛

2.x：不兼容IE678,很少有人使用

3.x：比兼容IE678，只支持最新的浏览器，我们使用3.x版本

四、jQuery对象

jQuery对象就通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。

一个对象如果是jQuery对象那么就可以使用jQuery里的方法

jQuery对象虽然是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法

同样DOM对象也不能使用jQuery里的方法

在jQuery中声明一个变量要在jQuery对象变量的时候在变量名前面加上$

例如：var $varible = jQuery对象

var varible = DOM对象

$varible[0] 将jQuery对象转换为DOM对象

jquery对象和DOM对象的使用

$（"#i1"）.html; //jQuery对象可以使用jQuery的方法

$（"#i1"）[0].innerhtml; //DOM对象使用DOM的方法

五、jQuery基础语法

$（selector）.action()

六、jQuery查找标签

1、id选择器

$("#id")

2、标签选择器

$("tahName")

3、class选择器

$(".className")

4、配合使用

$("div.c1") 找到c1 class类的div标签

$('div#d1')

5、所有元素选择器

$("*")

6、组合选择器

$("id，.className，tagName")

$('#d1，.c1，p') 并列+混用

$('div span') 后代

$('div>span') 儿子

$('div+span') 毗邻

$('div~span') 弟弟

7、层级选择器

$("x y")； x的所有后代y（子子孙孙）

$("x > y") ； x的所有儿子y（儿子）

$("x + y")；找到所有紧挨在x后面的y

$("x ~ y")； x之后所有的兄弟y

8、基本筛选器

：first 第一个

：last 最后一个

：eq(index) 索引等于index的那个元素

：even 匹配所有索引为偶数的元素，从0开始计数

：odd 匹配所有索引为计数的元素，从0开始计数

：gt(index) 匹配所有大于给定索引值得元素

：lt(index) 匹配所有小于给定索引值得元素

：not(元素选择器) 移除所有1满足not条件的标签

：has(元素选择器) 选取所有包含一个或多个标签在其内的标签（指的是从后代元素找）



例子：

                $('ul li:first') # 大儿子
$('ul li:last') # 小儿子
$('ul li:eq(2)')       # 放索引
$('ul li:even') # 偶数索引 0包含在内
$('ul li:odd') # 奇数索引
$('ul li:gt(2)') # 大于索引
$('ul li:lt(2)') # 小于索引
$('ul li:not("#d1")') # 移除满足条件的标签
$("div:has('h1')")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

9、属性选择器

[attribute]

[attribute=value] 属性等于

[attribute!=value] 属性不等于

例子：

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

10、表单筛选器

：text

：password

：file

：radio

：checkbox

：submit

：reset

：button

例子：

$(":checkbox") // 找到所有的checkbox
$('input[type="text"]')---------->$(':text')
$('input[type="password"]')---------->$(':password')

11、表单对象属性

：enabled

：disabled

：checked

：selected

例子：找到可用的标签

<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

$("input:enabled") // 找到可用的input标签

例子2：找到被选中的option

<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>

$(":selected") // 找到所有被选中的option

$(':checked') # 它会将checked和selected都拿到
$(':selected') # 它不会只拿selected
$('input:checked') # 自己加一个限制条件

12、筛选器方法

1、下一个元素

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

2、上一个元素

$("#id").prev()

$("#id").prevAll()

$("#id").prev.Until("#i2")

3、父亲元素

$("#id").parent()

$("#id")parents() 查找当前元素的所有父辈元素

$("#id").parentsUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

4、儿子和兄弟元素

$("#id").children()；儿子们

$("#id").silblings()；兄弟们

5、查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

$("div").find("p")-------------------------等价于$("div p")

6、筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

$("#div").filter(".c1") 从结果中过滤出有c1样式类的，等价于$("div.c1")

7、补充

.first() 获取匹配的第一一个元素

$('div span.first')----------$('div span').first()

.last() 获取匹配的最后一个元素

$('div span:last')----------$('div span').last()

.not() 从匹配元素的集合中删除与指定表达式匹配的元素

$('div span:not("#d3")')---------$('div span').not("#d3")

.has() 保留包含特定后代的元素，去掉那些不含有后代的元素

.eq() 索引值等于指定值得元素

七、操作标签

1、样式操作

样式类：

1、addClass()；添加指定的CSS类名

2、removeClass()；移除指定的类名

3、hasClass()；判断样式存不存在

4、toggleClass()；切换CSS类名，类名存在则删除，类名不存在则增加

2、位置操作

方法	概述
offset()	获取匹配元素在当前窗口的相对偏移量或设置元素位置
position()	获取匹配元素相对父元素的偏移
scrollTop()	获取匹配元素相对滚动条顶部的偏移
scrollLeft()	获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置

.offset和.position（）的差别在于：.position（）是相对于父级元素的位移

3、尺寸

方法
height()	高
width()	宽
innerHeight()	内高
innerWidth()	内宽
outerHeight()	外高
outerWidth()	外宽

4、文本操作

1、HTML代码

html（）取得第一个匹配元素的html内容

html（val）设置所有匹配元素的html内容

2、文本值

text（）取得所有匹配元素的内容

text（val）设置所有匹配元素的内容

3、值

val（）取得第一个匹配元素的当前值

val（val）设置所有匹配元素的值

val（[val1，val2]）设置多选的checkbox、多选select的值

4、设置值

$("[name='hobby']").val(['basketball'，'footabll'])；

$("#s1").val(["1"，"2"])

5、属性操作

1、用于ID或自定义属性

方法	解释说明
attr(attrName)	返回第一个匹配元素的属性值
attr(attrName，attrValue)	为所有匹配元素设置一个属性值
attr({k1：v1，k2：v2})	为所有匹配元素设置多个属性值
removeAttr()	从每一个匹配的元素中删除一个属性

2、用于checkbox和radio

方法	解释说明
prop（）	获取属性
removeProp（）	移除属性

注意事项：在3.x版本之前的jQuery使用attr对checkbox进行赋值操作会出现bug，3.x版本就没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()方法，不要使用attr（）

prop和attr的区别：

1、attr全称attribute（属性）

2、prop全称property（属性）

虽然都是属性，但是他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以人为attr是显式的，而prop是隐式的

attr获取属性：没有就返回undefined，有就返回获取的属性

prop获取属性：没有就返回false，有就返回true

prop不支持获得标签的自定义的属性，而attr可以得到

总结：

1、对于标签有的能看到的属性和自定义属性都用attr

2、对于返回布尔值的，如checkbox、radio和option的是否被选中都用prop

6、文档处理

1、添加到指定元素内部的后面

创建一个标签：$("<div>")

将标签添加到某个标签中：append（）

内部尾部追加：

        $(A).append(B) 把B追加到A

        $(A).appendTo(B) 把A追加到B

2、添加到指定元素内部的前面

$(A).prepend(B) 把B前置到A

$(A).prependTo(B) 把A前置到B

3、添加到指定元素外部的后面

$(A).after(B) 把B放到A的后面

$(A).insertAfter(B) 把A放到B的后面

4、添加到指定元素外部的前面

$(A).before(B) 把B放到A的前面

$(A).insertBefore(B) 把A放到B的前面

5、移除和清空元素

remove（）从DOM中删除所有匹配的元素

empty（）删除匹配的元素集合中所有的子节点

6、克隆

clone（）参数

7、替换

replaceWith()

replaceAll()

八、事件

1、常用事件

常用事件	解释说明
click（function（）{...}）	鼠标点击事件
hover（function（）{...}）	鼠标移动
blur（function（）{...}）	失去焦点
focus（function（）{...}）	获得焦点
change（function（）{...}）	文本框中的内容被改变
keyup（function（）{...}）	键盘按键被松开
input（function（）{...}）	监控

2、事件绑定

1、 .on(events[,selector]，function(){})

events：事件

selecttor：选择器（可写可不写）

function：事件处理函数

注意：

像click，keydown等DOM中定义的事件，可以使用.on()方法来绑定事件，但是像hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

如果想用事件委托的方式绑定hover事件处理函数，可以参照下面代码分步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});

3、移除事件

1、 .off(events[,selector][,function(){}])



        off()方法移除用.on()绑定的事件处理程序



        events：事件

selector：选择器（可写可不写）

function：事件处理函数

4、阻止后续事件执行

1、return false；常见阻止表单提交等

2、e.preventDefault()；

以上两种方法都可以阻止后续事件执行

5、阻止事件冒泡

方法：形参.stopPropagation()；

示例：

<script>

<div>

<p>

<span>点击</span>

</p>

</div>

$("span").onclick(function(e){

alert("span")

})

$("p").onclick(function(e){

alert("p")

e.stopPropagation()；

})

$("div").onclick(function){

alert("div")

}

</script>

6、页面载入

当DOM载入就绪可以查询及操纵时绑定以一个要执行的函数。可以极大的提高web应用程序响应速度

两种写法：
//第一种写法

$("document").ready(function(){
    //要执行的代码
})




//第二种写法:简写

$(function(){
    //要执行的代码
})
用法和JS中的onload()事件类似，先执行完页面中的所有代码在执行里面的代码

两者的区别：

1、window.onload()函数有覆盖现象，必须等待图片资源加载完成之后才能调用

2、jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用

7、事件委托

事件为委托就是通过事件冒泡的原理，利用父标签捕获子标签的事件

方法：.on()

九、补充

1、.each()循环

jQuery.each(collection，callback（indexInArray，valueOfElement）)：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1.其它对象通过其属性名进行迭代

示例：
li = [10,20,30,40]

$.each(li,function(i,v){
    console.log(i,v)    //i是索引位置，v是索引值
})

//each通俗的讲就是循环







2、对每个标签加一个class类名

$("#d1").each(function(){
    //$("#d1").addClass("c1");
    $(this).addClass("c1");
})


注意事项：
    在循环的过程中可以使用return false;来提前结束each循环