JQuery 学习笔记 选择器之二

艺海拾贝0829

艺海拾贝0829

2016-02-19 15:43

今天图老师小编要跟大家分享JQuery 学习笔记 选择器之二,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

代码如下:
!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"
ul1/ul
ul2/ul
ul3/ul
ul4/ul
/li
li id="l2"
ul一/ul
ul二/ul
ul三/ul
ul四/ul
/li
labelLabel1/label
input id="input1" value="input1" /
input /
labelLabel2/label
labelLabel4/label
/div
div
labelLabel3/label
div style="border:1px solid #000" /div
input id="input2" value="input2"/
/div
labelLabel4/labelbr /
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.$("Selectorchild")
描述:此方法与上一个方法类似,主要区别就是上个方法能获取所有的子孙节点,而这方法只能获取奇直属的子节点(多个“”号就代表是直属的嘛^^),在此就不多说了,哈,其它都跟上一个一样
返回值: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);

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

JQuery 学习笔记 选择器之二

Web开发
JQuery 学习笔记 选择器之二

JQuery 学习笔记 选择器之三

Web开发
JQuery 学习笔记 选择器之三

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery 学习笔记 选择器之一

Web开发
JQuery 学习笔记 选择器之一

JQuery 学习笔记 选择器之六

Web开发
JQuery 学习笔记 选择器之六

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 学习笔记 选择器之五

Web开发
JQuery 学习笔记 选择器之五

JQuery 学习笔记 选择器之四

Web开发
JQuery 学习笔记 选择器之四

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10打开本地安全策略的方法

Win10打开本地安全策略的方法

如何让windows 7下"用户文件夹"设在非系统盘

如何让windows 7下"用户文件夹"设在非系统盘
下拉加载更多内容 ↓