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 ...
随机推荐
- JS ajax 应用 (下拉列表联动)
<script language="javascript"> var http_request=false; function send_request( ...
- 根据点画线java
package com.yang; import java.awt.Color; import java.awt.Graphics; import java.util.ArrayList; impor ...
- CSRF Failed: Referer checking failed - no Referer
postman模拟登录出了这个错误,其实看标题就知道大概是怎么回事,网上大概找了办法,也没说到位,所以干脆自己找源码了. 问题很明显就是出在 CSRF 上,理所当然去查看 CsrfViewMiddle ...
- Unity5中的粒子缩放(附测试源码)
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/49363241 作者:car ...
- 【Codeforces Round #452 (Div. 2) A】 Splitting in Teams
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 贪心 1优先和2组队. 如果1没有了 就结束. 如果1还有多余的. 那么就自己3个3个组队 [代码] #include <bi ...
- 一次Linux磁盘损坏导致系统不可用恢复实例
Linux操作系统的server重新启动后.系统启动报错,系统无法正常使用. 1.报错信息 1.1.报错屏幕信息 1.2.报错信息提取关键信息 (1)/dev/sda3:File -(inode #1 ...
- PHP版本 D-Link 动态域名客户端
<?php /* * D-Link 动态域名客户端.主域名www.dlinkddns.com 和 www.dlinkddns.com.cn * 首先获取外网IP,若IP没有变化,则结束运行:否则 ...
- 几种基于Java的SQL解析工具的比较与调用
1.sqlparser http://www.sqlparser.com/ 优点:支持的数据库最多,除了传统数据库外还支持hive和greenplum一类比较新的数据库,调用比较方便,功能不错 缺点: ...
- 15、python学习手册之：python语句、赋值、表达式和打印
1.语句的另一个特殊规则是用一对括号把语句括起来就可以:括号().方括号[].字典的大括号{}.任何括在这些符号里的程序代码都可横跨好几行. 2.括号是可以包含一切的,因为任何表达式都可以包含在内,只 ...
- 【算法导论-36】并查集(Disjoint Set)具体解释
WiKi Disjoint是"不相交"的意思.Disjoint Set高效地支持集合的合并(Union)和集合内元素的查找(Find)两种操作,所以Disjoint Set中文翻译 ...