jQuery 对象的本质是什么?
jQuery对象是dom对象的数组+jQuery提供的一系列功能函数
prototype 原型
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”)) );
jQuery转dom
alert( $(document.getElementById(“testDiv”))[0]);
五、jQuery选择器
==========================================================================
基本选择器
#ID 选择器:根据 id 查找标签对象
.class 选择器:根据 class 查找标签对象
element 选择器:根据标签名查找标签对象
*选择器:表示任意的,所有的元素
selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回
实现的效果也比较简单,找到标签对象的时候,对它的css样式进行修改
层级选择器(重点)
ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器:在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素
实现的效果同上
过滤选择器
:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素,从 0 开始计数
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:它的作用就是过滤(在jquery中)
实现效果同上,找到目标对象,更改css样式
内容过滤器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
属性过滤器
[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
表单对象属性过滤器
: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等面试解析及知识点整理
Java分布式高级面试问题解析文档
其中都是包括分布式的面试问题解析,内容有分布式消息队列,Redis缓存,分库分表,微服务架构,分布式高可用,读写分离等等!
互联网Java程序员面试必备问题解析及文档学习笔记
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架构进阶视频解析合集