jQuery 选择器 (基础恶补之二)
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值:
实例
$("p").css("background-color");
设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值:
实例
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size:
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
下面的例子返回指定的 <div> 元素的宽度和高度:
实例
$("button").click(function(){var txt="";txt+="Width: " + $("#div1").width() + "</br>";txt+="Height: " + $("#div1").height();$("#div1").html(txt); });
jQuery - 更多的 width() 和 height()
下面的例子返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:
实例
$("button").click(function(){var txt="";txt+="Document width/height: " + $(document).width();txt+="x" + $(document).height() + "\n";txt+="Window width/height: " + $(window).width();txt+="x" + $(window).height();alert(txt); });
什么是遍历?
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
图示解释:
- <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
- <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞(拥有相同的父元素)。
- 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
提示:祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
- parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素:
实例
$(document).ready(function(){$("span").parent(); });
亲自试一试
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先:
实例
$(document).ready(function(){$("span").parents(); });
亲自试一试
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:
实例
$(document).ready(function(){$("span").parents("ul"); });
亲自试一试
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
实例
$(document).ready(function(){$("span").parentsUntil("div"); });
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children()
- find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素:
实例
$(document).ready(function(){$("div").children(); });
亲自试一试
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:
实例
$(document).ready(function(){$("div").children("p.1"); });
亲自试一试
jQuery find() 方法
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素:
实例
$(document).ready(function(){$("div").find("span"); });
亲自试一试
下面的例子返回 <div> 的所有后代:
实例
$(document).ready(function(){$("div").find("*"); });
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 <h2> 的所有同胞元素:
实例
$(document).ready(function(){$("h2").siblings(); });
亲自试一试
您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素:
实例
$(document).ready(function(){$("h2").siblings("p"); });
亲自试一试
jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 <h2> 的下一个同胞元素:
实例
$(document).ready(function(){$("h2").next(); });
亲自试一试
jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 <h2> 的所有跟随的同胞元素:
实例
$(document).ready(function(){$("h2").nextAll(); });
亲自试一试
jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素:
实例
$(document).ready(function(){$("h2").nextUntil("h6"); });
亲自试一试
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
缩写搜索元素的范围
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
jQuery first() 方法
first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素:
实例
$(document).ready(function(){$("div p").first(); });
亲自试一试
jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素:
实例
$(document).ready(function(){$("div p").last(); });
亲自试一试
jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
实例
$(document).ready(function(){$("p").eq(1); });
亲自试一试
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 <p> 元素:
实例
$(document).ready(function(){$("p").filter(".intro"); });
亲自试一试
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 <p> 元素:
实例
$(document).ready(function(){$("p").not(".intro"); });
jQuery 选择器 (基础恶补之二)相关推荐
- Java宣言的时候,Java基础恶补——宣言及访问控制
Java基础恶补--声明及访问控制 [SCJP Sun Certified Programmer for Java 6 Study Guide (Exam 310-065)] chapter 1 一 ...
- Java基础恶补——内存泄露、内存溢出
Java基础恶补--内存泄露.内存溢出 (2010-09-15 15:56:26) 转载 标签: 杂谈 要点 内存泄露是指程序中间动态分配了内存,但在程序结束时没有释放这部分内存,从而造成那部分 ...
- thinkphp5,android混合开发基础恶补篇
} 2.在route/route.php或者application\route.php添加路由规则,如下: <?php /*----------------------------------- ...
- 【基础恶补】JavaScript数组的一些方法,reduce,filter,reverse,map等
reduce reduce方法会对数组中的每个元素按序执行由你提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值. 用法,两个参数cal ...
- java基础恶补1(基础)(内容来自牛客网Java宝典)
1.java代码为什么可以实现一次编写,到处运行 参考答案: JVM(java虚拟机)是java跨平台的关键. 在程序运行前,java源代码(.java)需要经过编译器编译成字节码(.class).在 ...
- [转] jQuery 选择器
jQuery选择器(Selectors,或译为选择符?)可以说是甚为强大,jQuery能够得以如此之名气,选择器的功劳是功不可没的.利用 CSS和XPath选择符的能力,加上自己的"自定义选 ...
- jQuery选择器代码详解(一)——Sizzle方法
对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明 ...
- python代码大全和用法用量_python零基础入门命令方式汇总大全,快速恶补你的Python基础...
原标题:python零基础入门命令方式汇总大全,快速恶补你的Python基础 无意中浏览到这篇来自大牛的分享,总结的很全面,我重新排版下放在这里,希望能帮助到大家.在此十分感谢原作者! 在开始之前还是 ...
- python基础代码大全-python零基础入门命令方式汇总大全,快速恶补你的Python基础...
原标题:python零基础入门命令方式汇总大全,快速恶补你的Python基础 无意中浏览到这篇来自大牛的分享,总结的很全面,我重新排版下放在这里,希望能帮助到大家.在此十分感谢原作者! 在开始之前还是 ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
最新文章
- mySql比较并获取当前时间x分钟之前的数据(时间是字符串类型)
- Spring 基于构造函数的依赖注入
- hadoop2.7.3+spark2.1.0+scala2.12.1环境搭建(3)http://www.cnblogs.com/liugh/p/6624491.html
- 第37课 thinkphp5添加商品基本信息及通过前置钩子上传商品主图 模型事件(勾子函数)...
- python runtimeeeror_Python3基础 raise 产生RuntimeError 异常
- Python 浅拷贝和深拷贝 - Python零基础入门教程
- Mathematica .nb程序运行不下去的原因
- while 循环的理解
- paypal创建订单后怎么获得id_新支付无国界:PayPal注册教程
- [FZYZOJ 1002] 雨天
- 英特尔® 处理器显卡
- 荒野大镖客ol 服务器位置,荒野大镖客OL盗贼据点分布位置
- 使用Matplotlib美化和修饰图形
- 要学习使用 calib3D 模块在图像中创建 3D 效果-姿势估计
- 铁道部新客票系统设计
- ssm基于Android的签到系统APP(ssm+uinapp+Mysql)
- css缩2个字,首行缩排2字元怎么设定 css
- 美就在你身边201209开学第一课
- 苹果应用商店审核指南
- 视频教程-内功修炼之数据结构与算法-Java