jquery基础篇(三)— —DOM和事件

(一)、DOM节点创建

一、Js流程中涉及的一点方法：

 1、创建元素：document.createElement

 2、设置属性：setAttribute

 3、添加文本：innerHTML

 4、加入文档：appendChild

二、jQuery节点创建与属性的处理：

 1、创建元素节点：$(“html结构”)

如：$("<div></div>")

 2、创建为本节点：

$("<div>我是文本节点</div>")

 3、创建为属性节点：

$("<div id='test' class='aaron'>我是文本节点</div>")

(二)、DOM节点插入

一、内部插入append()与appendTo()

 append()前面是要选择的对象，后面是要在对象内插入的元素内容

 appendTo()前面是要插入的元素内容，而后面是要选择的对象

//参数是将要插入的内容。
$(".content").append('<div class="append">通过append方法添加的元素</div>')
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

【注意】 appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

二、外部插入after()与before()

 .after( content )。在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点

 .before( content )。据参数设定，在匹配元素的前面插入内容

$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

三、内部插入prepend()与prependTo()

1、prepend。向每个匹配的元素内部前置内容

2、prependTo。把所有匹配的元素前置到另一个指定的元素集合中

四、外部插入insertAfter()与insertBefore()

1、insertBefore。在目标元素前面插入集合中每个匹配的元素

2、insertAfter。在目标元素后面插入集合中每个匹配的元素

(三)、DOM节点删除

一、empty()的基本用法

 它只移除了 指定元素中的所有子节点，自己本身并没删除

//通过empty处理
$('.hello').empty()

二、remove()的有参用法和无参用法

 remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

//通过remove处理
$('.hello').remove()

empty和remove区别

 empty方法

1、严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

2、empty不能删除自己本身这个节点

 remove方法

1、该节点与该节点所包含的所有后代节点将同时被删除

2、提供传递一个筛选的表达式，用来指定删除选中合集中的元素

三、保留数据的删除操作detach()

 如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，即仅仅是显示效果没有了，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理。

body>
<p>P元素1，默认给绑定一个点击事件</p>
<p>P元素2，默认给绑定一个点击事件</p>
<button id="bt1">点击删除 p 元素</button>
<button id="bt2">点击移动 p 元素</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()
});

$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
</script>
</body>

(四)、DOM节点复制与替代

一、DOM拷贝clone()

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

二、DOM替换replaceWith()和replaceAll()

三、DOM包裹wrap()方法

//给p元素增加一个div包裹
$('p').wrap('<div></div>')

四、DOM包裹unwrap()方法

 调用unwarp方法，这样只会删除父辈元素

五、DOM包裹wrapAll()方法

//给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')

六、DOM包裹wrapInner()方法

//给所有p元素增加一个内部div包裹
$('p').wrapInner('<div></div>')

(四)、jquery遍历

一、children()方法

.children()方法选择性地接受同一类型选择器表达式
$("div").children(".selected")

二、find()方法

 children是父子关系查找，find是后代关系（包含父子关系）

三、parent()方法

四、parents()方法

 parent只会查找一级，parents则会往上一直查到查找到祖先节点

五、closest()方法

在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')

六、next()方法

七、prev()方法

八、siblings()

 siblings()方法选择性地接受同一类型选择器表达式

九、add()方法

十、each()

$("li").each(function(index, element) {
index 索引 0,1,...
element是对应的li节点 li,li
this 指向的是li
})

(六)、操作DOM元素

1、使用attr()方法控制元素的属性, 设置或者返回元素的属性
$("#a1").attr("href","www.imooc.com");//设置
var $url = $("#a1").attr("href");//返回
2、html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
3、addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。
$("#content").css({"background":"#ff0000","color":"White"});
4、removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名
5、使用append()方法向元素内追加内容
6、使用appendTo()方法向被选元素内插入内容，使用格式是：$(content).appendTo(selector)
7、使用before()和after()在元素前后插入内容，用格式分别为：
$(selector).before(content)和$(selector).after(content)
8、使用clone()方法复制元素，格式：$(selector).clone()
9、replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容
如： <span class="green" title="hi">我是屌丝</span>
<script type="text/javascript">
var $html = "<span class='red' title='hi'>我是土豪</span>";
$($html).replaceAll(".green");
</script>
10、使用wrap()和wrapInner()方法包裹元素和内容，前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
11、使用each()方法遍历元素，
例如，遍历页面中的<span>元素，当元素的序列号为2时，添加名为“focus”的样式，如下图所示：

12、使用remove()和empty()方法删除元素，remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

(七)、事件和应用

1、页面加载时触发ready()事件，ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：
$(document).ready(function(){})等价于$(function(){});
2、使用bind()方法绑定元素的事件，bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：
$(selector).bind(event,[data] function)
参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。
绑定多个事件的格式：.bind("click mouseout", function () {})
3、使用hover()方法切换事件。当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：
$(selector).hover(over，out);
4、toggle()方法控制元素的显示与隐藏。绑定多个函数的调用格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...)
5、使用unbind()方法移除元素绑定的事件
$(selector).unbind(event,fun)
6、使用one()方法绑定元素的一次性事件。one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：
$(selector).one(event,[data],fun)
7、调用trigger()方法手动触发指定的事件。
格式：$(selector).trigger(event)
$(function () {
$("div").bind("change-color", function () {
$(this).addClass("color");
});
$("div").trigger("change-color");
});
8、文本框的focus和blur事件。focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。
9、下拉列表框的change事件。当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。
10、调用live()方法绑定元素的事件。与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：
$(selector).live(event,[data],fun)

来源：http://www.imooc.com/learn/530