jquery dom 兄弟节点怎么获取当前页面的全部DOM节点

如何判断页面中是否存在某个元素呢?比如判断当前页面源代码中是否存在一个id=&example&的元素,通常如果按照Js的写法,则如下:
if(document.getElementById('example'))&{&&&&&&}&else&{&&&&&&}&
使用Jquery时,则应按照如下写法:
if($('#example').length)&{&&&&&&}&else&{&&&&&&}&
注意不能直接写作 if($('#example')) ,因为这个将会永远返回 true。
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)oDOM(Document Object Model—文档对象模型):一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件
oDOM 操作的分类:
–DOMCore: DOM Core 并不专属于 JavaScript,任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
–HTMLDOM: 使用 JavaScript和 DOM为 HTML文件编写脚本时, 有许多专属于 HTML-DOM的属性
–CSS-DOM:针对于 CSS操作,在 JavaScript中,CSS-DOM 主要用于获取和设置 style对象的各种属性
o查找节点:
–查找属性节点:通过 jQuery 选择器完成.
–操作属性节点:查找到所需要的元素之后,可以调用 jQuery对象的attr()方法来获取它的各种属性值
–操作文本节点:通过 text()方法
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&Untitled Document&/title&
&script type=&text/javascript& src=&js/jquery-1.7.2.js&&&/script&
&script type=&text/javascript&&
//测试使用 jQuery 操作文本节点, 属性节点.
//及查找元素节点
$(function(){
//1. 操作文本节点: 通过 jQuery 对象的 text() 方法
alert($(&#bj&).text());
$(&#bj&).text(&hi&);
//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法.
//注: 直接操作 value 属性值可以使用更便捷的 val() 方法.
alert($(&:text[name='username']&).attr(&value&));
$(&:text[name='username']&).attr(&value&, &world&);
&p&你喜欢哪个城市?&/p&
&ul id=&city&&&li id=&bj& name=&BeiJing&&北京&/li&
&li&上海&/li&
&li id=&dj&&东京&/li&
&li id=&se&&首尔&/li&
&p&你喜欢哪款单机游戏?&/p&
&ul id=&game&&
&li id=&rl&&红警&/li&
&li&实况&/li&
&li&极品飞车&/li&
&li&魔兽&/li&
&input type=&radio& name=&gender& value=&male&/&Male
&input type=&radio& name=&gender& value=&female&/&Female
name: &input type=&text& name=&username& value=&hello&/&
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&Untitled Document&/title&
&script type=&text/javascript& src=&js/jquery-1.7.2.js&&&/script&
&script type=&text/javascript&&
$(function(){
//1. 点击所有的 p 节点, 能够弹出其对应的文本内容
1. jQuery 对象可以进行隐式迭代: $(&p&).click(function(){...});
为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个
DOM 对象的数组
2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法
需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来.
3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为
属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val())
$(&p&).click(function(){
alert($(this).text());
$(this).text(&^^& + $(this).text());
//alert(this.firstChild.nodeValue);
//2. 使第一个 table 隔行变色
$(&table:first tr:even&).css(&background&, &#ffaacc&);
//3. 点击 button, 弹出 checkbox 被选中的个数
$(&button&).click(function(){
alert($(&:checkbox:checked&).length);
&p&段落1&/p&
&p&段落2&/p&
&p&段落3&/p&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&td&第一行&/td&&td&第一行&/td&
&input type=&checkbox& name=&test& /&
&input type=&checkbox& name=&test& /&
&input type=&checkbox& name=&test& /&
&input type=&checkbox& name=&test& /&
&input type=&checkbox& name=&test& /&
&input type=&checkbox& name=&test& /&
&button&您选中的个数&/button&
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:143870次
积分:4820
积分:4820
排名:第5111名
原创:317篇
转载:28篇
评论:115条
(15)(26)(40)(27)(13)(1)(3)(1)(54)(34)(13)(4)(2)(1)(2)(5)(2)(2)(3)(15)(40)(4)(15)(29)(1)jQuery遍历DOM元素与节点方法详解
作者:wzq981264
字体:[ ] 类型:转载 时间:
这篇文章主要介绍了jQuery遍历DOM元素与节点方法,结合实例形似详细分析了jQuery遍历DOM父级节点,子级节点及兄弟节点的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考,具体如下:
一、向上遍历--祖先元素
① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素。
② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点。
备注:parent与parents的区别,parent返回直接父节点,parents返回所有的祖先节点,另外$("html").parent()返回document节点,而$("html").parents()则返回空。
③ $(selector).parentUntil([ancestorSelector][,filter]):返回匹配节点与ancestorSelector之间的所有祖先节点,注意不包括ancestorSelector匹配的几点,方法可以接受一个过滤selector来过滤返回的祖先节点,如果ancestorSelector为空或者在其祖先节点中没有找到匹配ancestorSelector的元素则返回所有祖先节点等同于parents()方法。
$(selector).parentUtil(element[,ancestorSelector]):用法及含义同上。
④ $(selector).offsetParent():返回匹配元素的最近的一个定位的祖先元素,所谓定位祖先元素是指其CSS position属性设置为relative,absolute,fixed,主要在动画演示过程中计算元素的偏移及位置具有很大的作用。
⑤ $(selector).closest(ancestorSelector[,context]):获取最近的一个匹配ancestorSelector的祖先元素,方法可以接受一个参数context来控制搜索的范围。同parents方法有如下区别:
a.closest从来当前元素本身开始向上搜索
parents则从父节点元素开始。
b.closest沿DOM树向上遍历,直到找到匹配ancestorSelector的一个元素位置
parents沿DOM树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选
c.closest返回包含0个或者一个元素的jQuery对象
parents返回包含0个、一个或多个元素的jQuery对象
其它变形用法:
$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)
二、向下遍历--子孙元素
① .children([childrenSelector]):返回元素的直接子元素,方法可以接受一个参数来过滤返回的子元素。
② .find(descendantSelector):返回元素的匹配decendantSelector的所有后代元素,一直向下知道最后一个后代。
其它变形用法:
.find(jQuery object);
.find(element);
③ .contents():返回元素的所有子元素,同children的区别是contents包含text节点及comment节点。
三、同级遍历--兄弟元素
① .siblings([selector]):返回当前元素的所有兄弟元素,方法可以接收一个可选参数来过滤返回的兄弟元素。
② .next([selector]):返回当前元素的下一个兄弟元素,方法可以接受一个可选参数来过滤返回的兄弟元素。
③ .nextAll([selector]):返回当前元素后面的所有兄弟元素,方法可以接受一个可选参数来过滤返回的兄弟元素。
④ .nextUntil([selector][,filter]):返回当前元素的所有兄弟元素直到遇到匹配selector条件的兄弟元素,方法可以接受一个可选参数filter来过滤返回的兄弟元素。
⑤ .prev/prevAll/prevUntil与next/nextAll/nextUntil用法相同,作用相近,只是搜索的方向相反。
① .filter(selector):从当前匹配的元素集合中筛选中符合selector条件的子集合,用的用来减少匹配的范围。
.filter(function(index)):根据回调函数来过滤当前匹配的元素集合,回调函数传入参数index是指元素在集合中的索引,在函数体内可用this来代表元素,函数返回true/false,如果返回true,则保留子元素,否则排除子元素。
其它变形用法:
.filter(element|jQueryObject)
② .first():返回当前匹配元素集合中的第一个元素。
③ .last():返回当前匹配元素集合中的最后一个元素。
④ .eq(index/-index):返回当前匹配元素集合指定位置的元素,索引从0开始,负数表示从尾到头的顺序进行排序。
⑤ .has(selector/element):从当前元素集合中返回具有特定子元素的元素集合,排除不具备对应子元素的元素。子元素可以用参数selector或者元素对象来进行匹配。
⑥ .is(selector|function(index)|element|jQueryObject):根据一个选择器或者回调函数或者元素或者jQuery对象来检验元素集合,如果其中至少包含一个符合给定表达式的元素则返回true,否则返回false,另外如果当前元素集合为空或者表达式为空,则返回false。这个方法一般用在回调函数中例如事件处理handler里面,来判断this是否为某个特定元素
⑦ .map(callback(index,domElement)):将当前匹配的元素数组通过回调函数返回值转化为另外一个对象数组(不管是否为dom元素),如果想转化普通jQueryObject数组可以使用jQuery.map(array,callback(objectOfArray,indexOfArray))方法来实现。
⑧ .not(selector|elements|function(index)|jQuery object):从当前匹配的元素数组中删除符合参数调节的元素,参数可以是selector、DOM element、普通的jQuery对象以及一个返回布尔变量的回调函数。
⑨ .slice(start[,end]):从当前匹配的元素集合中获取指定范围的一个子集,start及end如果为负数则获取元素方向从尾到头。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery怎么获取dom对象上的节点 - JavaScript当前位置:& &&&jquery怎么获取dom对象上的节点jquery怎么获取dom对象上的节点&&网友分享于:&&浏览:84次jquery如何获取dom对象下的节点例如:
&div&id="id1"&
&&li&class="dd"&
&span&&div&id="ddd"&&/div&&/span&
&span&class="dddddddd"&&/span&
&div&class="d"&&/div&
&div&class="ed"&dddddd&div&class="a"&&/div&&/div&
&var&id1=$("#id1");
现在我要获取id1下的&class&为a的节点
只有这种&$("#id1&.a")
但是我现在只是有id1&对象并不知道这个id1对象的id属性是多少,甚至这个id1对象&可能根本没id或者class属性
------解决方案--------------------$("div&.a")
12345678910
12345678910
12345678910 上一篇:下一篇:文章评论相关解决方案 12345678910 Copyright & &&版权所有

我要回帖

更多关于 jquery添加dom节点 的文章

 

随机推荐