jQuery基础教程之DOM操作-节点操作函数(一)

转载 2012年03月31日 14:54:16

jQuery作为Javascript的一个强大的库,其对DOM对象的操作之简化,让开发人员甚至于小白们都为之赞叹不已。
接着上一个系列的jQuery选择器的教程,接下来教大家的是jQuery中的DOM操作。为了方便大家更加容易对jQuery中的各种操作DOM对象的函数进行理解。今天我花了一天的时间自己构建了一个模仿W3C School的在线测试工具,梦三秋在线测试工具1.0版,感兴趣的可以试试。

关于jQuery DOM操作,我会分为几篇文章来介绍,尽量写细一点,让例子更加丰富点。今天先来说说jQuery关于DOM节点的一些操作函数的用法。
创建一个简单的页面,代码如下:(body之间的内容)

1 <h3>您目前最关注的技术是什么</h3>
2 <ul>
3 <li title="PHP">PHP</li>
4 <li title="jQuery">jQuery</li>
5 <li title="CSS">CSS</li>
6 </ul>
  1. 首先来看看如何查找元素节点的:
    jquery代码:

    1 var $li = $("ul li");//获取<ul>中的所有的li节点
    2 var $li2 = $("ul li:eq(1)");//获取<ul>中的第二个<li>节点
    3 var $li_2 = $li.eq(1);//同样也获取到<ul>中的第二个<li>节点
    4 alert($li2.text());//打印出jQuery
    5 alert($li_2.text());//同样打印出jQuery
    6 alert($li.text());//会打印出PHPjQueryCSS
    7 alert($li.html());//会打印出PHP
    jQuery元素节点在线实例

    注意:text函数是取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。

  2. 利用元素属性来查找节点:
    Jquery代码:

    1 var $li_title_jQuery = $("li[title=jQuery]");//获取title属性为‘jQuery’的<li>元素
    2 $li_title_jQuery.css("color","#FF0000");//将title属性为‘jQuery’的<li>元素的字体颜色设置为红色
    3 var $li_last = $("ul li:last");//获取<ul>中的最后一个<li>元素
    4 var li_last_title = $li_last.attr("title");//获取<ul>中的最后一个<li>元素的title属性
    5 alert(li_last_title);
    jQuery查找节点元素属性
  3. 创建节点:
    $(html)方法会根据传入的HTML标记字符串,首先创建一个DOM对象,并将这个DOM对象包装成jQuery对象后返回。也就是说$(html)方法返回的始终是个jQuery对象。
    记住必须要正确地传入HTML标记字符串,不然返回的对象虽然是jQuery对象,但是可以说是空jQuery对象(因为这个jQuery对象的length属性为0,所以我就认为它是空的对象,不一定准确,但是我是这么理解的 ^_^ )
    不相信你们可以试试:
    Jquery代码:

    1 alert($("这是个不正确的参数").length);//会打印出0
    2 alert($("<span>这是个正确的HTML标记字符串</span>").length);//会打印出1
    3 alert($("<span>这是个正确的HTML标记字符串</span><span>第二个span</span>").length);//会打印出2
    4 alert($("
    5 <div><span>这是个正确的HTML标记字符串</span><span>第二个span</span></div>
    6  
    7 ").length);//会打印出1
    $(HTML)测试传参的不同,返回的对象有什么不同

    现在我们再来细细地看看$(html)生成各种节点的样子,通过jquery的append方法,将$(html)生成的节点插入到DOM中去,你就可以清晰地看明白了。
    jQuery代码:

    1 var $li = $("<li>$lt;/li>");//为了兼容各大浏览器,请一定要用组合关闭标签
    2 var $input = $("<input />");//像input这样的元素,要写正规了<input />自关闭
    3 $("ul").append($li);//将新建的li节点插入到ul中去
    4 $li.append($input);//将新建的input节点插入到新建的li中去
    5 $li2 = $("<li title='jQuery插件'>jQuery插件</li>");//创建一个完整的元素
    6 $("ul").append($li2);//将新建的完整的li元素添加到ul元素中去
    jQuery创建元素节点并插入到DOM中去

额~~一下子都写了这么多内容了呢~~为了让大家看得更舒服点,jQuery节点操作函数的教程就分成两篇文章吧~敬请期待!

相关文章推荐

jQuery中的DOM节点的创建与多种插入方式

1jQuery节点创建与属性的处理 上一节介绍了通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程 创建元素节点: ...

jQuery基础教程之DOM操作-节点操作函数(二)

这一篇文章是接着jQuery教程基础篇之DOM操作-节点操作函数(一)这篇文章的,如果您还没看过,请不妨先读读上一篇,然后再来看这篇文章吧。 废话不多说,我们接着上一篇来吧~ 插入节点...

jQuery基础教程之DOM操作-节点操作函数(一)

jQuery基础教程之DOM操作-节点操作函数(一) 发表于 2011 年 01 月 20 日 由 梦三秋 jQuery作为Javascript的一个强大的库,其对DOM对象的操作之...

jQuery基础教程之DOM操作-遍历节点-closest()方法

.closest() 此方法获取第一个相匹配的祖先元素,注意:起始点包括自身元素。 另外这个方法是必须要传入一个选择器表达式参数的,如果不传入参数的话,就会返回一个空的jquery对象。 要...

jQuery基础教程之DOM操作-遍历节点-parents()方法

在上一章jQuery教程基础篇之DOM操作-遍历节点-parent()方法,我们讲到了如何获取元素的父元素的集合,有时候我们的需求可能会要查找元素的所有的祖先元素,那么.parents()方法将会满足...

jQuery基础教程之DOM操作-遍历节点-prev()方法

.prev([selector]) 此方法取得每个匹配的元素的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。 下面来...

jQuery基础教程之DOM操作-遍历节点-parent()方法

上一章我们说了jQuery教程基础篇之DOM操作-遍历节点-children()方法,那接下来,正好说说parent()方法。 .parent([selector])方法返回的是每一个匹配的元素...

jQuery基础教程之DOM操作-遍历节点-siblings()方法

在前面的两节教程中,我们分别知道了jquery如何取得当前元素的前一个同辈元素以及后一个同辈元素,他们分别是.prev()方法和.next()方法。 那么肯定的了,既然在jquery中能取得前一个和...

《jQuery基础教程》-- 操作DOM

1.操作属性 之前的css方法还有addClass、removeClass、toggleClass都是对DOM元素进行style属性的操作。而对于其他属性则可以使用attr和removeAttr来实...

jQuery基础教程之DOM操作-属性操作

jquery中,用attr()方法来获取和设置元素属性,对应地,removeAttr()方法是用来删除元素属性。 attr() 这个函数有四个用法: 用法 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)