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 相关文章推荐
js单向链表的具体实现实例
Jun 21 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
javascript调试说明
2010/06/07 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python线程、进程和协程详解
2016/07/19 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
详解python中list的使用
2019/03/15 Python
python 获取计算机的网卡信息
2021/02/18 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
2015年教师节广播稿
2015/08/19 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers