jQuery操作DOM

标签：

1、html()

　　读取或修改节点的HTML内容

<div id=‘d1‘>
    <span>hello jQuery</span>
   </div>

   function f(){
    alert($(‘#d1‘).html());
   }

2、text()

　　读取或修改节点的文本内容

   <div id=‘d1‘>
    <span>hello jQuery</span>
   </div>

   function f(){
    alert($(‘#d1‘).text());
   }

3、val()

　　获取或修改节点的value属性值

<input name=‘uname‘/>

   function f(){
    alert($(‘:text‘).val(‘空白格‘));
   }

4、attr()

　　读取或者修改节点的属性

   <div id=‘d1‘>
    <span>hello jQuery<span>
   </div>

   function f(){
    $(‘#d1‘).attr(‘style‘,‘color:red;‘));
   }

5、创建DOM节点

　　$(html)

　　如创建一个div，并加在body的最后一个节点

　　代码如下：

    var $obj=$(‘<div>hello jQuery</div>‘);
    $(‘body‘).append($obj);

　　简写形式：

$(‘body‘).append(‘<div>...</div>‘);

6、插入DOM节点

　　append() 作为最后一个子节点添加进来
　　prepend() 作为第一个子节点添加进来
　　after() 作为下一个兄弟节点添加进来
　　before() 作为上一个兄弟节点添加进来

7、删除DOM节点

　　remove() 移除
　　remove(selector) 按选择器定位后删除
　　empty() 清空节点

8、复制DOM节点

　　clone()
　　clone(true):复制的节点也具有行为（将处理代码一块复制）

9、样式操作

　　attr("class","") 　　　　获取和设置
　　addClass("") 　　　　 追加样式
　　removeClass("") 　　　　 移除样式
　　removeClass() 　　　　 移除所有样式
　　toggleClass("") 　　　　 切换样式
　　hasClass("") 　　　　 是否有某个样式
　　css("") 　　　　 读取css的值
　　css("","") 　　　　 设置多个样式

10、遍历节点

　　children()/children(selector) 只考虑直接子节点
　　next()/next(selector) 下一个兄弟节点
　　prev()/prev(selector) 上一个兄弟节点
　　siblings()/siblings(selector) 其他兄弟
　　find(selector) 查找满足选择器的所有后代
　　parent() 父节点（没有选择器）

jQuery操作DOM

标签：

原文地址：http://www.cnblogs.com/Crow00/p/4589757.html