三、JQuery中的DOM操作

1、DOM简介
    DOM是文档对象模型，它是一种标准，与浏览器、平台、语言无关，通过这个接口可以轻松的访问DOM树的各个节点。
    不同的DOM语言，可以用来解析不同的DOM树。如：javascript可以访问html-dom、jdom可以访问xml-dom 等等。

2、DOM操作的分类
    1）DOM Core（核心DOM）：它不专属与任何语言，它是一组标准的接口，提供了比如：getElementById()、getElementsByTagName()、
        getAttribute()、setAttribute()等方法，通过它可以访问DOM。
    2）HTML DOM ：要访问html_dom可以使用javascript语言，它提供了访问html_dom的方法，如：document.forms、element.src 等等，
        使用它比使用DOM Core的接口更简便，但它只能用于解析html。
    3）CSS DOM ：针对css操作，javascript提供了如下接口，element.style.color="red"
   
3、JQuery中的DOM操作
    1）查找节点
        (1)查找元素，可以使用JQuery选择器快速的找到目标元素
            var $li = $('ul li:eq(1)');    // ul 的第二个 li 元素
            var li_txt = $li.text();    // 获取 li 的内容
        (2)查找属性节点，找到目标元素后，使用attr()访问指定的属性或为指定属性赋值
            $('p').attr('title','橘子');            // 设置p的title属性值
            var p_title = $('p').attr('title'); // 获取p的title属性值
    2）创建节点
        var $ul = $('ul');
        var $li1 = $('<li title="香蕉">香蕉</li>');    // 创建JQuery元素，可以使用$()工厂函数
        var $li2 = $('<li title="柚子">柚子</li>');    // 这种方法会根据传入的html构造一个dom对象，然后再包装成JQuery的dom对象。
    3）插入节点
        (1)$('p').append('<b>橘子</b>');             // 向每个匹配的元素内部追加内容。<p>你最喜欢的水果是?<b>橘子</b></p>
        (2)$('<b>橘子</b>').appendTo($('p'));         // 与append()相反。<p>你最喜欢的水果是?<b>橘子</b></p>
        (3)$('p').prepend('<b>请问</b>');            // 向每个匹配的元素内部前置内容。<p><b>请问</b>你最喜欢的水果是?</p>
        (4)$('<b>请问</b>').prependTo($('p'));        // 与prepend()相反。<p><b>请问</b>你最喜欢的水果是?</p>
        (5)$('p').after('<b>苹果</b>');              // 向每个匹配的元素之后插入内容 。<p>你最喜欢的水果是?</p><b>苹果</b>
        (6)$('<b>苹果</b>').insertAfter($('p'));        // 与after()相反。<p>你最喜欢的水果是?</p><b>苹果</b>
        (7)$('p').before('<b>嗨！</b>');                // 向每个匹配的元素之前插入内容。<b>嗨！</b><p>你最喜欢的水果是?</p>
        (8)$('<b>嗨！</b>').insertBefore($('p'));    // 与before()相反。<b>嗨！</b><p>你最喜欢的水果是?</p>
        (9)移动节点,例子：
            var $two_li = $('ul li:eq(1)');
            var $three_li = $('ul li:eq(2)');
            $two_li.insertAfter($three_li);
    4）删除节点
        (1)remove() 删除节点以及后代节点   
            a、删除匹配的节点，返回被删除的节点。
                var $remove_obj = $('ul li:eq(1)').remove();
                $('ul').append($remove_obj);    // 将被删除的节点追加到ul
            b、结果与上面相同，将删除的节点追加到ul.
                $('ul li:eq(1)').remove().prependTo($('ul'));
            c、给remove()添加参数，过滤要删除的元素。
                var $ul = $('ul');
                $ul.append('<li>其他</li>');
                $('ul li').remove('li[title!=菠萝]');
        (2)empty() 清空后代节点
            $('ul li:eq(1)').empty();
    5）复制节点
        $('ul li').click(function() {
            $(this).clone().appendTo('ul');     // 只复制节点，不复制行为
            $(this).clone(true).appendTo('ul'); // 即复制节点，也复制行为
        });
    6）替换节点
        $('p').replaceWith('<strong>我最不喜欢的水果!</strong>');    // 将所有匹配的元素替换成指定的元素
        $('<strong>我最不喜欢的水果!</strong>').replaceAll('p');        // 与replaceWith相反()，效果相同
        注意：被替换后新元素含任何事件，需要重新绑定。
    7）包裹节点
        $('strong').wrap('<div></div>');    // 给每个匹配的strong都包裹一个<div> 如：<div><strong>喜欢?</strong></div>
        $('li').wrapAll('<ul></ul>');        // 给所有匹配的li包裹一个<ul> 如：<ul><li>苹果</li><li>鸭梨</li></ul>
        $('strong').wrapInner('<i></i>');    // 给每个匹配的strong的内容都包裹一个<b> 如：<strong><i>喜欢?</i></strong>
    8）属性操作
        $('p').attr("title");    // 获取或设置属性,也可以一次设置多个属性,如：$('p').attr({title:'title', content:'content'});
        $('p').removeAttr("title");    // 删除属性
    9）样式操作
        (1) 获取和设置样式
            $('p').attr('class');
            $('p').attr('class', 'font_style');
        (2) 追加样式
            $('p').addClass('append');
        (3) 移除样式
            $('p').removeClass('abc a b'); // 多个样式用空格分割
            $('p').removeClass();          // 删除所有class
        (4) 切换样式
            // 可以用来执行一组交替动作
            $('#btn').toggle(function() {
                $('p').addClass('display');
            }, function() {
                $('p').removeClass('display');    
            });
            // 可以用来切换样式，当指定样式存在时则删除，不存在则添加
            $('#btn').click(function() {
                $('p').toggleClass('display');
            });
        (5) 判断是否含有某个样式
            $('p').hasClass('display');
            $('p').is('.display');     // $('p').is('.' + class);
    10）设置和获取html、文本和值
        (1) 获取和设置元素内部的html，只对html有效
            $('p').html();
            $('p').html('<strong>你确定？</strong>');
        (2) 获取和设置元素内部的文本，对html和xml都有效
            $('p').text();
            $('p').text('确定');
        (3) 获取和设置元素的值
            i) 文本框例子：
                $('#address').focus(function() {
                    var val = $(this).val();
                    if (val == this.defaultValue) {        // this.defaultValue是当前文本框默认值
                        $(this).val("");
                    }
                });
                $('#address').blur(function() {
                    var val = $(this).val();
                    if (val == "") {
                        $(this).val(this.defaultValue); // this.defaultValue是当前文本框默认值
                    }
                });
            ii) 下拉列表、多选框、单选按钮、多选按钮，例子：
                $('#single').val('选择1号'); // $('#single').val('one'); 指定text或者value都可以
                $('#multiple').val(['选择2号','选择4号']);
                $(':checkbox').val(['check2','check3']);
                $(':radio').val(['radio2']);
    11）遍历节点
        (1) children() 获取子元素，不包含后代元素
        (2) next() 用于获取后面紧邻的同辈元素
        (3) prev() 用于获取前面紧邻的同辈元素
        (4) siblings() 用于获取同辈元素
        (5) closest() 获取最近匹配的元素
        (6) find() 找出正在处理的元素的后代元素
        (7) filter() 筛选出与指定表达式匹配的元素集合,用于缩小匹配的范围,多个表达式用逗号分隔
    12）css-dom操作
        (1) css() 用来获取和设置元素的样式,使用方式与attr()一样
        (2) height()、width() 获取和设置元素的高度或宽度
        (3) offset() 获取元素在当前视窗的相对偏移
            var $ul = $('ul').offset();
            console.info($ul.left);
            console.info($ul.top);
        (4) position() 获取元素在父元素的相对偏移
            var $ul = $('ul').position();
            console.info($ul.left);
            console.info($ul.top);
        (5) scrollTop()、scrollLeft() 获取或设置当前元素的滚动条距滚动条顶端和左端的距离