首页 前端知识 JavaWeb--快速入门jQuery

JavaWeb--快速入门jQuery

2025-03-01 12:03:10 前端知识 前端哥 296 679 我要收藏

jQuery 对象的本质是什么?


jQuery对象是dom对象的数组+jQuery提供的一系列功能函数

prototype 原型

image-20211218102418718

image-20211218102446781

image-20211218103148806

jQuery对象和Dom对象使用区别


jQuery对象不能使用DOM对象的属性和方法

DOM对象也不能使用jQuery对象的属性和方法

// Dom对象的方法

document.getElementById(“testDiv”).innerHTML = “这是dom对象的属性InnerHTML”;

// jQuery对象也不能用Dom对象的方法

$(“#testDiv”).innerHTML = “这是dom对象的属性InnerHTML”;//不能用

$(“#testDiv”).click(function () {

alert(“click()是jQuery对象的方法”);

});

document.getElementById(“testDiv”).click(function () {

alert(“click()是jQuery对象的方法”);

});//不能用

Dom 对象和 jQuery 对象互转


dom转jQuery

alert( $(document.getElementById(“testDiv”)) );

image-20211218121519881

jQuery转dom

alert( $(document.getElementById(“testDiv”))[0]);

image-20211218121546370

image-20211218121612807

五、jQuery选择器

==========================================================================

基本选择器


#ID 选择器:根据 id 查找标签对象

.class 选择器:根据 class 查找标签对象

element 选择器:根据标签名查找标签对象

*选择器:表示任意的,所有的元素

selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回

实现的效果也比较简单,找到标签对象的时候,对它的css样式进行修改

image-20211219173503025

层级选择器(重点)


ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器:在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素

prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

实现的效果同上

image-20211219173756108

过滤选择器


:first 获取第一个元素

:last 获取最后个元素

:not(selector) 去除所有与给定选择器匹配的元素

:even 匹配所有索引值为偶数的元素,从 0 开始计数

:odd 匹配所有索引值为奇数的元素,从 0 开始计数

:eq(index) 匹配一个给定索引值的元素

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

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

:header 匹配如 h1, h2, h3 之类的标题元素

:animated 匹配所有正在执行动画效果的元素

:它的作用就是过滤(在jquery中)

实现效果同上,找到目标对象,更改css样式

image-20211219173958855

内容过滤器


:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素

:has(selector) 匹配含有选择器所匹配的元素的元素

image-20211219174223936

属性过滤器


[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1] [attrSel2] [attrSelN] 复合属性选择器,需要同时满足多个条件时使用。

表单过滤器


:input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有 文本输入框

:password 匹配所有的密码输入框

:radio 匹配所有的单选框

:checkbox 匹配所有的复选框

:submit 匹配所有提交按钮

:image 匹配所有 img 标签

:reset 匹配所有重置按钮

:button 匹配所有 input type=button 按钮

:file 匹配所有 input type=file 文件上传

:hidden 匹配所有不可见元素 display:none 或 input

image-20211219174646395

表单对象属性过滤器


:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有选中的单选,复选,和下拉列表中选中的 option 标签对象

:selected 匹配所有选中的 option

$(“#btn1”).click(function(){

// val()可以操作表单项的value属性值

// 它可以设置和获取

$(“:text:enabled”).val(“我是万能的程序员”);

});

//2.对表单内 不可用input 赋值操作

$(“#btn2”).click(function(){

$(“:text:disabled”).val(“管你可用不可用,反正我是万能的程序员”);

});

//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数

$(“#btn3”).click(function(){

alert( $(“:checkbox:checked”).length );//checkbox复选框的意思,checked是选中的意思

});

//4.获取多选框,每个选中的value值

$(“#btn4”).click(function(){

// 获取全部选中的复选框标签对象

var $checkboies = $(“:checkbox:checked”);

// 老式遍历

// for (var i = 0; i < $checkboies.length; i++){

// alert( $checkboies[i].value );

// }

// each方法是jQuery对象提供用来遍历元素的方法

// 在遍历的function函数中,有一个this对象,这个this对象,就是当前遍历到的dom对象

$checkboies.each(function (){

alert(this.value);

})

});

//5.获取下拉框选中的内容

$(“#btn5”).click(function(){

// 获取选中的option标签对象

var $options = $(“select option:selected”);

// 遍历,获取option标签中的文本内容

$options.each(function () {

// 在each遍历的function函数中,有一个this对象。这个this对象是当前正在遍历到的dom对象

alert(this.innerHTML);

});

});

最后

Java架构进阶面试及知识点文档笔记

这份文档共498页,其中包括Java集合,并发编程,JVM,Dubbo,Redis,Spring全家桶,MySQL,Kafka等面试解析及知识点整理

image

Java分布式高级面试问题解析文档

其中都是包括分布式的面试问题解析,内容有分布式消息队列,Redis缓存,分库分表,微服务架构,分布式高可用,读写分离等等!

image

互联网Java程序员面试必备问题解析及文档学习笔记

image

Java架构进阶视频解析合集
/4.获取多选框,每个选中的value值

$(“#btn4”).click(function(){

// 获取全部选中的复选框标签对象

var $checkboies = $(“:checkbox:checked”);

// 老式遍历

// for (var i = 0; i < $checkboies.length; i++){

// alert( $checkboies[i].value );

// }

// each方法是jQuery对象提供用来遍历元素的方法

// 在遍历的function函数中,有一个this对象,这个this对象,就是当前遍历到的dom对象

$checkboies.each(function (){

alert(this.value);

})

});

//5.获取下拉框选中的内容

$(“#btn5”).click(function(){

// 获取选中的option标签对象

var $options = $(“select option:selected”);

// 遍历,获取option标签中的文本内容

$options.each(function () {

// 在each遍历的function函数中,有一个this对象。这个this对象是当前正在遍历到的dom对象

alert(this.innerHTML);

});

});

最后

Java架构进阶面试及知识点文档笔记

这份文档共498页,其中包括Java集合,并发编程,JVM,Dubbo,Redis,Spring全家桶,MySQL,Kafka等面试解析及知识点整理

[外链图片转存中…(img-YXJMVMlJ-1719263975371)]

Java分布式高级面试问题解析文档

其中都是包括分布式的面试问题解析,内容有分布式消息队列,Redis缓存,分库分表,微服务架构,分布式高可用,读写分离等等!

[外链图片转存中…(img-I34N0cLU-1719263975372)]

互联网Java程序员面试必备问题解析及文档学习笔记

[外链图片转存中…(img-Z8RecmM8-1719263975373)]

Java架构进阶视频解析合集

转载请注明出处或者链接地址:https://www.qianduange.cn//article/22077.html
标签
评论
发布的文章

算法002——复写零

2025-03-02 13:03:05

github上传代码(自用)

2025-03-02 13:03:59

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!