JQuery 学习笔记 选择器之二


Posted in Javascript onJuly 23, 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script src="js/jquery-1.3.2.js" ></script> 
<script type="text/javascript"><!-- 
$(function(){ 
$("#aDescendant").click(function(){ 
$("#Result").html(""); 
$("#div1 ul").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html() + "," ); 
}) 
}) 
$("#aChild").click(function(){ 
$("#Result").html(""); 
$("#div1 > li").each(function(){ 
$("#Result").html($("#Result").html() + $(this).attr("id") + "," ); 
}) 
}) 
$("#aNext").click(function(){ 
$("#Result").html(""); 
$("label + input").each(function(){ 
$("#Result").html($("#Result").html() + $(this).attr("value") + ","); 
}) 
}) 
$("#aSibling").click(function(){ 
$("#Result").html(""); 
$("#input1 ~ label").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html() + ","); 
}) 
}) 
}) 
// --></script> 
</head> <body> 
<div id="div1"> 
<li id="l1"> 
<ul>1</ul> 
<ul>2</ul> 
<ul>3</ul> 
<ul>4</ul> 
</li> 
<li id="l2"> 
<ul>一</ul> 
<ul>二</ul> 
<ul>三</ul> 
<ul>四</ul> 
</li> 
<label>Label1</label> 
<input id="input1" value="input1" /> 
<input /> 
<label>Label2</label> 
<label>Label4</label> 
</div> 
<div> 
<label>Label3</label> 
<div style="border:1px solid #000" ></div> 
<input id="input2" value="input2"/> 
</div> 
<label>Label4</label><br /> 
<a href="#" id="aDescendant">显示DIV的后序结点ID</a> 
<a href="#" id="aChild">显示DIV的子LI结点</a> 
<a href="#" id="aNext">显示位于Label下一个input元素的value值</a> 
<a href="#" id="aSibling">显示于input1元素同级的label元素内容</a> 
<br /> 
Result: 
<br /> 
<div id="Result"> 
</div> 
</body> 
</html>

先对上面代码中的课外知识点说明下
1.element.attr("attributeName")
描述:此方法用户获取某element元素的某个属性值,如例子中
$("#div1 > li").each(function(){
$("#Result").html($("#Result").html() + $(this).attr("id") + "," );
})
功能就是获取当前遍历到的element对象的id值;
好了,现在开始来介绍本章的内容吧。本章主要讲的就是JQuery里如果去选择某个结点的子结点、兄弟结点等,不浪费时间啦,哈,现在进入正题
1.$("Selector descendant")
描述:此方法主要用于获取“Selector”选择器(注:此选择器为上一章讲的几个的任意一种)选择的Element对象或集合的子孙结点,就像例子中
$("#aDescendant").click(function(){
$("#Result").html("");
$("#div1 ul").each(function(){
$("#Result").html($("#Result").html() + $(this).html() + "," );
})
})
功能就是获取id为div1元素的子孙节点里"ul"节点的HTMl内容,若“Selector”选择器返回的是个集合,则获取的子孙结点就是这个集合里,每个element匹配的子孙节点的集合
返回值:Array(Element);
2.$("Selector>child")
描述:此方法与上一个方法类似,主要区别就是上个方法能获取所有的子孙节点,而这方法只能获取奇直属的子节点(多个“>”号就代表是直属的嘛^^),在此就不多说了,哈,其它都跟上一个一样
返回值:Array(Element);
3.$("Selector + next")
描述:用于获取所有位于Selector后面的next元素,如例子中
$("#aNext").click(function(){
$("#Result").html("");
$("label + input").each(function(){
$("#Result").html($("#Result").html() + $(this).attr("value") + ",");
})
})
获取所有位于label元素后面的input元素,在例子中,只有input1位于Label1下个节点,input2与Label3两者隔了个div节点,所以不配合。
返回值:Array(Element);
4.$("Selector ~ Sibling")
描述:与上一个方法类似,主要区别是此方法匹配的是位于Selector之后的所有同级的Sibling结点,无论中间是否有隔其它结点,在这也不明说啦,呵
返回值:Array(Element);
Javascript 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
浅谈Angular7 项目开发总结
Dec 19 Javascript
详解vue中移动端自适应方案
May 05 Javascript
JQuery 学习笔记 选择器之一
Jul 23 #Javascript
javascript IFrame 强制刷新代码
Jul 23 #Javascript
jQuery TextBox自动完成条
Jul 22 #Javascript
JavaScript 动态生成方法的例子
Jul 22 #Javascript
模仿jQuery each函数的链式调用
Jul 22 #Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 #Javascript
javascript Base类 包含基本的方法
Jul 22 #Javascript
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php获取参数的几种方法总结
2014/02/18 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
ThinkPHP模型详解
2015/07/27 PHP
php 可变函数使用小结
2018/06/12 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
违反工作纪律检讨书
2014/02/15 职场文书
詹天佑教学反思
2014/04/30 职场文书
本科应届生自荐信
2014/06/29 职场文书
2014年安全生产责任书
2014/07/22 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
交通事故协议书范本
2016/03/19 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python