js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
一、总结
一句话总结：closest()方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。offsetParent()获得用于定位的第一个父元素。
1、closest()和parents()的主要区别是什么？
1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤。
2、jquery中如何取出jquery对象中的dom对象？
get()方法，参数可有可无，有的话为索引
67 //通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素
68 // alert(arr.get())
69 //alert(arr.get(1))
70 //alert(arr.get().join('-'))
71 alert(arr.get().reverse())
3、map()方法是干什么的？
map() 把当前匹配集合中的每个元素传递给函数，返回值是 jQuery 封装的数组。
59 var arr=$('input').map(function(){
60 return $(this).val()
61 })
62
63 //alert(arr.length)
4、jquery中用什么表示定位？
offset
比如：offsetParent()获得用于定位的第一个父元素。即：返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
77 $('#btn6').click(function(){
78 $('span').offsetParent().css("border", "solid green 1px");
79 })
二、jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
1、相关知识
- add() 方法将元素添加到匹配元素的集合中。
- addBack()添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。
- end() 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
- map() 把当前匹配集合中的每个元素传递给函数，返回值是 jQuery 封装的数组。
- closest()方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤。
- offsetParent()获得用于定位的第一个父元素。即：返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{
margin-top: 5px;width: 150px;
}
</style>
</style>
</head>
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
<ol style="position: relative;">
<li>列表项0</li>
<li>列表项1</li>
<li>列表项2</li>
<li class="red">列表项3</li>
<li>列表项4</li>
<li>列表项5
<ol>
<li>列表项1.1</li>
<li><span>列表项1.2</span></li>
</ol>
</li>
</ol>
<input id="btn1" type="button" value='add'>
<input id="btn2" type="button" value='addBack'>
<input id="btn3" type="button" value='end'>
<input id="btn4" type="button" value='map'>
<input id="btn5" type="button" value='closest'>
<input id="btn6" type="button" value='offsetParent'>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
//这里的add()相当于和的意思
// $("p").css("color","red")
// $("li").css("color","red")
// $("p,li").css("color","red")
$("p").css("background","#ccc").add('li').css("color","red")
})
$('#btn2').click(function(){
$(".red").nextAll().addBack().css("background-color", "red");
})
$('#btn3').click(function(){
// $('li').filter(':even').css("background-color", "red");
// $('li').filter(':odd').css("background-color", "orange");
$('li').filter(':even').css("background-color", "red").end().filter(':odd').css("background-color", "orange");
})
$('#btn4').click(function(){
var arr=$('input').map(function(){
return $(this).val()
}) //alert(arr.length)
// var arr2=[1,2,3,'A','B','C']
// alert(arr)
//map()函数的返回值为jQuery类型
//通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素
// alert(arr.get())
//alert(arr.get(1))
//alert(arr.get().join('-'))
alert(arr.get().reverse())
})
$('#btn5').click(function(){
// $('span').parents('li').css("border", "solid green 1px");
$('span').closest('li').css("border", "solid green 1px");
})
$('#btn6').click(function(){
$('span').offsetParent().css("border", "solid green 1px");
})
})
</script>
</body>
</html>
js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素的更多相关文章
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 10-7 简单的伪类选择器可以干什么
js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 11-18 jquery中操作选择器的方法有哪些
js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...
随机推荐
- 43.c++指针类型转换
数据类型转换(static_cast) //数据类型转换 printf("%d\n", static_cast<int>(10.2)); 指针类型转换(reinterp ...
- 在Sql中将 varchar 值 '1,2,3,4,5,6' 转换成数据类型 int
--问题:将aa转换为Int类型失败 string aa="3,5,11,56,88,45,23"; select * from ERPBuMen where ID in(aa) ...
- go reflect 调用方法
package main import ( "fmt" "reflect" ) type A struct { } func (A) Test() { fmt. ...
- STL中erase()的陷阱
最近在刷stl源码剖析这本书时,对于vector的erase()函数引起了我的注意 在删除单个元素时是这样定义的: iterator erase(iterator position){ !=end() ...
- C++ 指针与引用 知识点 小结
[摘要] 指针能够指向变量.数组.字符串.函数.甚至结构体.即指针能够指向不同数据对象.指针问题 包含 常量指针.数组指针.函数指针.this指针.指针传值.指向指针的指针 等. 主要知识点包含:1. ...
- 发送 email 过程
发送 email 过程 SMTP基本命令集: 命令 描述 ---------- HELO 向服务器标识用户身份发送者能欺骗,说谎,但一般情况下服务器都能检测到. MAIL 初始化邮件传输 mail f ...
- amazeui学习笔记三（你来我往1）--常见问题FAQs
amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...
- matlab 局部特征检测与提取（问题与特征）
物体识别:SIFT 特征: 人脸识别:LBP 特征: 行人检测:HOG 特征: 0. 常见手工设计的低级别特征 manually designed low-level features 语音:高斯混合 ...
- PHP路由技术的原理与实践
0x00 路由实现原理 用户通过指定的URL范式对后台进行訪问.URL路由处理类进行处理后.转发到逻辑处理类,逻辑处理类将请求结果返回给用户. 约定URL范式和规则 约定一套自己喜欢的,对搜索引擎友好 ...
- AMBA标准
AMBA标准定义了三种不同的总线 高级高性能总线(AHB): 高级系统总线(ASB):-----用的比较少 高级外设总线(APB). 基于AMBA的典型微控制器: 典型的AMBA AHB系统设计包含以 ...