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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
小程序新版订阅消息模板消息
2019/12/31 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Python反射的用法实例分析
2018/02/11 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
个性大学生自我评价
2013/12/04 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
电台编导求职信
2014/05/06 职场文书
2014年教务处工作总结
2014/12/03 职场文书
写给老师的保证书
2015/05/09 职场文书
关爱空巢老人感想
2015/08/11 职场文书
礼貌问候语大全
2015/11/10 职场文书