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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
js有关元素内容操作小结
Dec 20 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JS中判断null的方法分析
Nov 21 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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
PHP生成随机数的方法实例分析
2015/01/22 PHP
php内嵌函数用法实例
2015/03/20 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
项目实践之javascript技巧
2007/12/06 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python实现的科学计算器功能示例
2017/08/04 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
建筑总经理岗位职责
2014/02/02 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
园艺师求职信
2014/04/27 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
经理聘任证明
2015/03/02 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书