二、jQuery对象
1.jQuery 对象和 DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的 :
用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
注意:只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。
示例
语法:$(“h1”);
//返回的对象并不是原生的dom对象,而是jquery封装的dom对象,但是可以通过索引值获取原生的dom对象
2. jQuery 对象和 DOM 对象相互转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
// 1.DOM对象转换成jQuery对象,方法只有一种
var d1 = document.querySelector(“#d1”); // 获取DOM对象
var jQobj = $(d1);// 把DOM对象转换为 jQuery 对象
//可以简写为
$(“#d1”)
// 2.jQuery 对象转换为 DOM 对象有两种方法:
// 2.1 jQuery对象[索引值]
var domObject1 = $(‘div’)[0]
// 2.2 jQuery对象.get(索引值)
var domObject2 = $(‘div’).get(0)
示例:DOM对象转换成jQuery对象
示例:jQuery 对象转换为 DOM 对象
示例:相互转化
//jquery对象转化为原生对象
var a = $(“h1”)[0];
console.log(a)
//封装为jquery对象
console.log( jQuery(a));
实际开发比较常用的是把DOM对象转换为jQuery对象,这样能够调用功能更加强大的jQuery中的方法。
三、jQuery 选择器
原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。
1.基础选择器
$(“选择器”)//里面选择器直接写 CSS 选择器即可,但是要加引号
2.层级选择器
层级选择器最常用的两个分别为:后代选择器和子代选择器
3.筛选选择器
常见如下:
示例: eq()
$(“h1”).eq(5).css(“background”,“orange”);
$(“h1:eq(5)”).css(“color”,“#fff”);
//给索引值为5的标签设置背景颜色
内容1
内容2
内容3
内容4
内容5
内容6
内容7
内容8
内容9
内容10
示例:children(),find(),siblings()
var li = d1.find(“li”);
var child = d1.children(“ol”);
var brother = d1.find(“li”).eq(3).siblings().css(“background”,“pink”);
//给li的第三个索引值的所有兄弟标签设置属性,不包含他本身
- 有序列表
- 有序列表
- 有序列表
- 有序列表
- 有序列表
- 有序列表
- 有序列表
- 有序列表
- 有序列表
- 有序子列表
- 有序子列表
- 有序子列表
- 有序子列表
- 有序子列表
示例:odd(),even()
//奇数
$(“ul li:odd”).css(“backgroundColor”, “skyblue”);
//偶数
$(“ul li:even”).css(“backgroundColor”, “pink”);
Document - 1
- 2
- 3
- 4
- 5
-
案例
Document 头条新闻
娱乐新闻
周边新闻
1sasdxsaascascsdsa2sadsaxdsaxsadxa3asdsaxasxdasdxsaxd四、jquery的属性操作
html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()
1.jquery操作样式
jQuery中常用的样式操作有两种:css() 和 设置类样式方法
1.css() 和 设置类样式
// 1.参数只写属性名,则是返回属性值
var color = $(this).css(‘color’);
// 2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(‘‘color’’, ‘‘pink’’);
// 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ “color”:“pink”,
“font-size”:“20px”
});
//css() 多用于样式少时操作,多了则不太方便。
2.设置类样式
// 1.添加类
$(“div”).addClass(“active”);
// 2.删除类
$(“div”).removeClass(“active”);
// 3.切换类
$(“div”).toggleClass(“active”);
示例:css 方法
Document 怦然心动如往昔,笑颜灿烂如春天。静看光阴荏苒,喑哑无言
2.类方法设置样式
示例:类方法
Document 切换显示
addClass(),removeClass(),toggleClass()
$(‘div’).addClass(“box”);//追加一个类名到原有的类名
$(‘div’).addClass(“box box2”);//追加多个类名
$(‘div’).removeClass(‘box’);移除指定的类(一个或多个)
$(‘div’).removeClass(); 移除全部的类
$(this).toggleClass(‘active’)
//如果存在(不存在)就删除(添加)一个类
原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。
2.html属性操作
attr()
获取:
$(‘div’).attr(‘id’)
设置
$(‘div’).attr(‘class’,‘box’)
设置多个值,键值对存储
$(‘div’).attr({name:‘hahaha’,class:‘happy’})
removeAttr()
//删除单个属性
$(‘#box’).removeAttr(‘name’);
$(‘#box’).removeAttr(‘class’);
//删除多个属性
$(‘#box’).removeAttr(‘name class’);
3.DOM属性操作
prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时,则返回第一个匹配元素的值。当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。
注意:prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等。
返回属性的值
$(selector).prop(property)
设置属性和值
$(selector).prop(property,value)
设置多个属性和值
$(selector).prop({property:value, property:value,…})
//在使用单双选框的时候
//使用attr获取checked的值
console.log($(‘input’).eq(0).attr(‘checked’));
//使用prop获取checked的值
console.log($(‘input’).eq(0).prop(‘checked’));
这里是引用
4.值操作
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等。返回属性的值
$(selector).prop(property)
设置属性和值
$(selector).prop(property,value)
设置多个属性和值
$(selector).prop({property:value, property:value,…})
//在使用单双选框的时候
//使用attr获取checked的值
console.log($(‘input’).eq(0).attr(‘checked’));
//使用prop获取checked的值
console.log($(‘input’).eq(0).prop(‘checked’));
这里是引用
4.值操作
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-Ij69d8HP-1715535996749)]
[外链图片转存中…(img-tF11uk6p-1715535996750)]
[外链图片转存中…(img-vT7Kl9Ee-1715535996750)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!