jQuery遍历节点树方法分析

2024-04-10 21:42:47

本文实例讲述了jQuery遍历节点树方法。分享给大家供大家参考，具体如下：

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  var $body = $("body").children();
  var $p = $("p").children();
  var $ul = $("ul").children();
  alert( $body.length ); // <body>元素下有2个子元素
  alert( $p.length ); // <p>元素下有0个子元素
  alert( $ul.length ); // <p>元素下有3个子元素
  for(var i=0;i< $ul.length;i++){
    alert( $ul[i].innerHTML );
  }
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图：

demo2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  var $p1 = $("p").next();
  alert( $p1.html() ); // 紧邻<p>元素后的同辈元素
  var $ul = $("ul").prev();
  alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素
  var $p2 = $("p").siblings();
  alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图：

demo3.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $(document).bind("click", function (e) {
    $(e.target).closest("li").css("color","red");
  })
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery遍历算法与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

JQuery遍历DOM节点的方法

本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();
jQuery遍历DOM节点操作之filter()方法详解

本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添
Jquery节点遍历next与nextAll方法使用示例

Jqeruy节点遍历 <!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> <title></title
jQuery循环遍历子节点并获取值的方法

本文实例讲述了jQuery循环遍历子节点并获取值的方法.分享给大家供大家参考,具体如下: Html代码部分: <div class="left_tree_ad_btn_container"> <ul> <li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /> </li> </ul>
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=&qu
jQuery遍历DOM元素与节点方法详解

本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,
JQuery中节点遍历方法实例

本文实例讲述了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&
jQuery遍历节点方法汇总(推荐)

1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span>Hello Again</span> <p class="box">您好!</p> </div> <p>And Again</p> <script type="text/javascript&q
jQuery遍历节点树方法分析

本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&
jQuery遍历json的方法分析

本文实例分析了jQuery遍历json的方法.分享给大家供大家参考,具体如下: 复制代码代码如下: var obj = {"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"]}{"status&quo
jQuery遍历节点元素方法介绍

一.遍历子元素 children()方法可以用来获取元素的所有子元素,语法如下: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me
jquery 遍历数组 each 方法详解

JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="
JQuery控制Radio选中方法分析

本文实例讲述了JQuery控制Radio选中方法.分享给大家供大家参考.具体如下: 方法1: $(function () { $("#spanNan").click(function () { $("#Radio1").attr("checked", true); $("#Radio2").attr("checked", false); }); $("#spanNv").click(fu
JQuery常见节点操作实例分析

本文实例讲述了JQuery常见节点操作.分享给大家供大家参考,具体如下: 插入节点 append()和appengTo():在现存元素内部,从后面插入 prepend()和prependTo():在现存元素外部,从前面插入 after()和insertAfter():在现存元素外部,从后面插入 before()和insertBefore():在现存元素外部,从前面插入新建节点的插入 <!DOCTYPE html> <html lang="en"> <he
jQuery滑动效果实现方法分析

本文实例讲述了jQuery滑动效果实现方法.分享给大家供大家参考,具体如下: jQuery 滑动方法: 1.slideDown()方法:用于向下滑动元素语法: $(selector).slideDown(speed,callback); 2.slideUp()方法:用于向上滑动元素语法: $(selector).slideUp(speed,callback); 3.slideToggle()方法:可以在slideDown()与slideUp()方法之间进行切换. 语法: $(selector
jQuery遍历json的方法(推荐)

var obj = {"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"]}{"status":1,"bkmsg":"\u6210\u529f",&qu

jQuery遍历节点树方法分析

相关推荐

随机推荐