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