DOM操作和节点操作

一 样式操作

    
    
    
    
    


切换
判断

    
111111
    
222222
    
333333
    
444444
    
555555
    
666666
    
777777
    
888888

总结
添加样式

$("li").addClass("divItem");

移除样式

$("li").eq(2).removeClass("divItem");

判断有无样式

$("li").eq(0).hasClass("divItem"); 返回值为布尔类型

二 tab切换栏案例

    
    
    
    
    



    

        
国际大牌
        
国妆名牌
        
清洁用品
        
男士精品
    
    

        

        ![](imgs/guojidapai.jpg)
        
        

        ![](imgs/guozhuangmingpin.jpg)
        
        

        ![](imgs/qingjieyongpin.jpg)
        
        

        ![](imgs/nanshijingpin.jpg)
        
    

总结
1 样式书写

• div布局
• 导航栏，内容书写
• 清空样式
• div大小定位
• 导航栏边框设置，大小，颜色，边框宽度，去掉下边框
• 导航栏样式设置，左浮动，大小，文字行高，文字位置，光标样式，上边距以及颜色，定位
• 设置内容div的大小，边框宽度以及颜色
• 设置子内容div属性为左浮动，且块级不显示
• 设置主内容页属性为块级显示（元素前后会带有换行符）
  2 jQuery实现效果

$(function () {
           $(".tab li").mouseenter(function () {
               //给当前元素添加active这个样式
               //给当前这个元素的所有兄弟元素移除active这个样式  siblings
               $(this).addClass("active").siblings().removeClass("active");
               //让下面的div内容，根据上面tab栏菜单展示相应的内容
               //index（）获取当前元素序号
               var index=$(this).index();
               $(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
           }) ;
        });

三 常用DOM操作（属性和值的内容）

总结

设置属性： $(this).attr("title","动态设置属性");
获取属性：var st=$("input[type='button']").eq(0).attr("title");
删除属性： $("input[type='button']").eq(0).removeAttr("title");
设置值：$("#txt").val("动态设置的值");
获取值：var txt1=$("#txt").val();
设置html： $("div").html("

我是p元素

");
获取html：alert($("div").html());
设置文本内容：$("div").text("动态创建的文本内容");
获取文本内容：alert($("div").text());

四 节点操作

    
    
    
    



append 追加
appendTo 追加
prepend 往前面添加节点
prependTo 往前面添加节点
after 往后面添加节点
before 往前面添加节点
insertBefore
insertAfter




remove 删除选中元素
empty 清空子元素
clone 复制节点
warp 单个包裹
warpAll 所有包裹在一个node中
replaceWidth 替换


    
标题标题
    
标题1标题

我是外面的p元素，不是冬天添加的
小小小span
    
小小span


replaceWidth替换

append追加节点：

$("div").append("

我是动态创建的p元素

");

appendTo把前面这个元素追加给$("div")元素：

$("

我是动态创建的p元素

").appendTo($("div"));

prepend把前面这个元素在所有子元素的前面添加一个子元素:

$("div").prepend("

我是动态prepend创建的p元素

");

prependTo把前面这个元素添加给后面这个$("div")元素的所有子元素的前面

$("

我是动态prepend创建的p元素

").prependTo($("div"));

after往div的后面添加元素，他们是兄弟关系

$("div").after("

我是div后面的p元素

");

before往div前面添加元素，他们是兄弟关系

$("div").before("

我是div前面的p元素

");

insertBefore把前面的元素放到后面div元素的前面，他们是兄弟节点关系

$("

我在哪？

").insertBefore($("div"));

insertBefore把前面的元素放到后面div元素的后面，他们是兄弟节点关系

$("

我在哪？

").insertAfter($("div"));

remove删除节点

//$("div").remove();
$(this).remove();//自杀

empty清空节点元素

// $("div").html("");清空子元素 推荐使用方法
$("div").empty();

clone复制

//参数如果为true的话，那么之前的时间也会复制一份
$("div").append($("p").clone());

wrap包裹元素

$("span").wrap($("div"));

wrapAll包裹所有节点

$("span").wrapAll($("div"));

replaceWith替换节点

$("span").replaceWith("#d");