jQuery作为Javascript的一个强大的库,其对DOM对象的操作之简化,让开发人员甚至于小白们都为之赞叹不已。
接着上一个系列的jQuery选择器的教程,接下来教大家的是jQuery中的DOM操作。为了方便大家更加容易对jQuery中的各种操作DOM对象的函数进行理解。今天我花了一天的时间自己构建了一个模仿W3C School的在线测试工具,梦三秋在线测试工具1.0版,感兴趣的可以试试。
关于jQuery DOM操作,我会分为几篇文章来介绍,尽量写细一点,让例子更加丰富点。今天先来说说jQuery关于DOM节点的一些操作函数的用法。
创建一个简单的页面,代码如下:(body之间的内容)
4 | < LI title = jQuery >jQuery</ LI > |
- 首先来看看如何查找元素节点的:
jquery代码:
2 | var $li2 = $( "ul li:eq(1)" ); |
注意:text函数是取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。
- 利用元素属性来查找节点:
Jquery代码:
1 | var $li_title_jQuery = $( "li[title=jQuery]" ); |
2 | $li_title_jQuery.css( "color" , "#FF0000" ); |
3 | var $li_last = $( "ul li:last" ); |
4 | var li_last_title = $li_last.attr( "title" ); |
- 创建节点:
$(html)方法会根据传入的HTML标记字符串,首先创建一个DOM对象,并将这个DOM对象包装成jQuery对象后返回。也就是说$(html)方法返回的始终是个jQuery对象。
记住必须要正确地传入HTML标记字符串,不然返回的对象虽然是jQuery对象,但是可以说是空jQuery对象(因为这个jQuery对象的length属性为0,所以我就认为它是空的对象,不一定准确,但是我是这么理解的 ^_^ )
不相信你们可以试试:
Jquery代码:
1 | alert($( "这是个不正确的参数" ).length); |
2 | alert($( "<SPAN>这是个正确的HTML标记字符串</SPAN>" ).length); |
3 | alert($( "<SPAN>这是个正确的HTML标记字符串</SPAN><SPAN>第二个span</SPAN>" ).length); |
5 | <DIV><SPAN>这是个正确的HTML标记字符串</SPAN><SPAN>第二个span</SPAN></DIV> |
现在我们再来细细地看看$(html)生成各种节点的样子,通过jquery的append方法,将$(html)生成的节点插入到DOM中去,你就可以清晰地看明白了。
jQuery代码:
1 | var $li = $( "<li>$lt;/li>" ); |
2 | var $input = $( "<input />" ); |
5 | $li2 = $( "<li title='jQuery插件'>jQuery插件</li>" ); |
额~~一下子都写了这么多内容了呢~~为了让大家看得更舒服点,jQuery节点操作函数的教程就分成两篇文章吧~敬请期待!