jQuery操作DOM节点（一）

浏览器中 什么是BOM？是什么DOM？

BOM：Browser Object Model 浏览器对象模型，提供一些对浏览器的操作的对象，比如：window对象,window.open,alert....

DOM: Document Object Model 文档对象模型，HTML页面看作一个文档，文档中的每个标签元素都看作一个对象（DOM节点），每个DOM节点有一定的关系（父子、兄弟）。

形成一颗DOM树，可以根据一定的关系，找到指定的节点，可以称为DOM编程吧。

DOM编程，我们可以对每个DOM节点进行增删改查操作。

一：查找

使用选择器：ID选择器，类选择器，标签选择器，后代选择器，属性选择器等等 可以很快便捷的查询到指定的DOM节点。

基础的js知识在这里就不写了。

需要注意：每次使用 $()查询DOM节点，都会生成一个新的jQuery对象,是一个查询表达式.  $(expression)。

二：创建元素（DOM节点）

创建DOM节点 jQuery（节点字符串）  该方法会根据传入的节点字符串（html标签）转成一个DOM对象。并返回一个当前节点的jQuery对象。

var $div = $("<div></div>");   var $div = $("<div id='xx'></div>");

三：添加DOM节点。

我们创建好了DOM节点，将其添加到指定的节点中去。使得节点之间有一定的关系，方便查找。

1.append()方法   

  $(target).append(element);    向指定元素内部尾部追加节点。

$("div#div1").append("<a></a>");     该方法先查找出id位div1的div元素，再向其节点内部尾部插入新创建的a元素。

2.appendTo()  添加元素到指定节点中去。

                $(element).appendTo(target)    与append()方法用法相反

3.prepend() 向指定元素内部头部添加节点。 和append添加方式相反。

4.prependTo() 同理2

5.after() 方法 向指定元素后面添加节点，相邻（兄弟）节点 不是内部， siblings()查找兄弟节点.    $("span").after("a...")  

        6.insertAfter()方法，与5用法相反   $("<a></a>").insertAfter("span...")

7.before() 

8.insertBefore() ...

四：删除DOM节点

1.remove()方法 删除所有匹配的元素,并返回被删除的DOM节点

$(target).remove()

2.empty()方法 清空节点

$(target).empty();

五：修改DOM节点

1.DOM节点属性操作

·attr(属性名,属性值) 多个 attr({"name":value,"id":value}...)

·removeAttr 移除指定属性

2.DOM节点样式操作

·addClass()添加样式

·removeClass()移除样式

·toggleClass()切换样式

`hasClass() 判断元素是否使用指定样式

·css() 设置css样式 $("p").css({name:value,name:value.....})

3.DOM节点复制

·clone(bool)  参数标识是否也同时赋值元素的行为。

4.替换DOM节点

·$(element).replaceWith(target);  将查询到的节点替换为新的节点

·$(element).replaceAll(target)  指定元素替换所有的目标元素 

六：获取DOM节点内容、值

1.设置/获取HTML元素值

·$("#div1").html()  获取div1内的html值

·$("#div1").html("<a>test</a>"); 设置div1内的html值

2.设置/获取HTML内容文本

·$("#div1").text()

·$("#div").text("hello world");

3.设置/获取某元素的值(input,select,radio,checkbox....)

·$("#input1").val();

·$("#input").val(123);

七：DOM节点寻找 

  HTML文档可以看作一个DOM树，每个节点之前有一定的关系。

·children()获取匹配元素的的子元素集合，只匹配子元素，不匹配任何后代元素。

·next() 获取元素的下一个兄弟节点

·prev()获取元素的上一个兄弟节点

·siblings()获取元素的所有兄弟节点

节点集合遍历

$.each(节点集合,function(index,item) { } ); 或

节点集合.each(function(index) { } );