关闭

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

标签: jqueryjquery插件htmlinput测试工具javascript
555人阅读 评论(1) 收藏 举报
分类:

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节点操作函数的教程就分成两篇文章吧~敬请期待!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:400578次
    • 积分:4040
    • 等级:
    • 排名:第7647名
    • 原创:30篇
    • 转载:180篇
    • 译文:0篇
    • 评论:71条