jquery dom

1.节点操作

  1).创建节点

    * 传统的javascript方法、创建一个div节点：

        var node = document.createElement('div');

    * JQuery中创建一个节点：

        var node = $('<div></div>');


    * 传统的javascript方法、创建一个文本节点：

        var textNode = document.createTextNode('Hello World!');


    * JQuery中创建一个有文本的div节点：

        $('<div>Hello World!</div>');

 2).插入节点

    （1）append   在元素内部最后插入

        $('body').append(div1);//插到body内部最后

    （2）prepend 在元素内部最前插入

        $('body').prepend(div1);//插到body内部最前


    （3）appendTo    追加到指定的元素内部后

        div1.appendTo($('#box'));//把选择的元素div1追加到指定的元素内部后


    （4）after 插入内容到指定元素外部后面

        $('#wrap').after(div1);//插入内容到指定元素外部后面


    （5）before 插入内容到指定元素外部前面

        $('#wrap').before(div1);//插入内容到指定元素外部前面

    （6）insertAfter 在指定元素后面插入

    （7）insertBefore 在指定元素后面插入


3).克隆节点

    $(function(){
        //克隆节点
        var a = $('h2');
        var a_clone = a.clone();
        $('body').append(a_clone);
    });


4).替换节点

    $(function(){
        //替换节点

        // $('<p>嘻嘻嘻嘻嘻嘻！</p>').replaceAll($('#pp'));

        //可以使用$('#pp')、也可以直接使用选择器字符串'#pp'

        $('#pp').replaceWith($('<p>嘻嘻嘻嘻嘻嘻！</p>'));
    });


5).删除节点


    $(function(){
        //删除节点
        $('#aa').remove();//会将相应标签和标签中的内容删除
        $('#bb').empty();//会将标签中内容删除、不删除标签本身
    });

6).遍历节点

    （1）.children() 获得匹配元素集合中每个元素的所有子元素
    （2）.next() 获得匹配元素集合中每个元素紧邻的同辈元素
    （3）.siblings()获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）
    （4）.parent()获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）
    （5）.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）
    （6）.find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选
    （7）each()

    $(function(){

        //index是遍历的索引,val参数表示遍历的每个对象,是dom对象

        $('img').each(function(index,val) {
        $(this).attr({
            src: 'images/'+(+index+1)+'.jpg',
            width: '200px',
            height: '200px'
        });
        // val.src = 'images/'+(+index+1)+'.jpg';       
        });
    });
        

7).设置属性

    $(“#test1″).attr({ “class” : “test” , “title” : “TestDemo!” });
    $(“#test1″).attr(“class”);

    示例：

        $('a').attr({

           alt: '我是百度',
           title: '我是鼠标'
        });

8).属性操作

    （1）addClass() 像匹配的元素添加指定的类名
    （2）attr() 设置或返回匹配元素的属性和值
    （3）hasClass() 检查匹配的元素是否拥有指定的类
    （4）html() 设置或返回匹配的元素集合中的HTML内容
    （5）removeAttr() 从所有匹配的元素中移除指定的属性
    （6）removeClass() 从匹配的元素中删除全部或者指定的类
    （7）toggleClass() 从匹配的元素中添加或删除一个类
    （8）val() 设置或返回匹配而元素的值

    （9）text() 设置或返回匹配的元素集合中的text内容

9).css对象模型（样式操作）


    （1）css() 设置或返回样式的css属性
    （2）height() 设置或返回匹配元素的高度
    （3）offset() 返回第一个匹配元素相对于文档的位置
    （4）offsetParent() 返回最近的定位祖先元素
    （5）position() 返回第一个匹配元素相对于父元素的位置
    （6）scrollLeft() 设置或返回匹配元素相对于滚动条左侧的偏移
    （7）scrollTop() 设置或返回匹配元素相对于滚动条顶部的偏移
    （8）width() 设置会返回匹配元素的宽度


10).事件绑定

    （1）

        $('btn').bind('click', function() {

             alert("我是按钮！");
      });
     

    （2）

        $('btn').on('click', function() {

              alert("我是按钮！");

        });