JQuery对DOM的操作【三】

一．jQuery的DOM操作方法
所有方法的特点：既可以设置属性，又可以获取属性

二. html代码/文本/值：html()、text()、val()
1. 语法：
1) html() js对象中的innerHTML
2) text() 类似于js对象中innerText
3) val() 相于js对象中的value

2. 示例：获取"张三"，获得"标题标签"的文本，获得mydiv的标签体内容
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
<input type="button" id="b1" value="设置值、文本" />
<input type="button" id="b2" value="设置HTML" />
//设置/获取值、文本
$("#b1").click(function(){
    //得到文本
    //alert($("#mydiv").text());
    $("#mydiv").text("我们是米虫");
    //得到值
    //alert($("#myinput").val());
});
            
//设置/获取HTML和text
$("#b2").click(function(){
    //alert($("#mydiv").html());
    $("#mydiv").html("<font color='red'>我们是害虫</font>");
});

三. html属性操作：attr()、removeAttr()/   prop()、removeProp()
1. 语法：
1) attr()的作用：用于设置属性值，得到属性值
2) 选用attr()或是prop(): 如果要操作属性返回的是boolean类型，使用prop()
3) removeAttr()/removeProp(): 删除属性

2. 示例：
<ul>
<li id="gz" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>

//获取北京节点的name属性值
    $("#b1").click(function(){
        alert($("#bj").attr("name"));
    });

//设置北京节点的name属性的值为dabeijing
    $("#b2").click(function(){
        $("#bj").attr("name","dabeijing");
    });     

//新增北京节点的discription属性 属性值是didu
   $("#b3").click(function(){
        $("#bj").attr("discription","didu");
    });     


//删除北京节点的name属性
$("#b4").click(function(){
        $("#bj").removeAttr("name");
    });   

//获得hobby的选中状态
$("#b5").click(function(){
    //prop方法返回true/false
        alert($("#hobby").prop("checked"));
    });   


四. html的class属性操作：addClass()、removeClass()、toggleClass()
1. 语法：
1) 相当于：attr("class","类样式名")
2) addClass(类样式名)   添加一个类样式
3) removeClass(类样式名)  删除一个类样式
4) toggleClass(类样式名) 添加/删除类样式

五. html的样式的操作：css()
1. 语法：
1) 相当于：设置style样式，行内样式
2) 在CSS中和JS中样式名的写法:
"background-color"或"backgroundColor"

2. 示例：
// 采用属性增加样式(改变id=one的样式)，样式名为second
$("#b1").click(function(){
    $("#one").attr("class","second");
});

// addClass
$("#b2").click(function(){
            $("#one").addClass("second");
        });
        
// removeClass
$("#b3").click(function(){
            $("#one").removeClass("second");
        });
        
// 切换样式
$("#b4").click(function(){
            $("#one").toggleClass("second");
        });
   
// 通过css()获得id为one背景颜色
$("#b5").click(function(){
           //alert( $("#one").css("background-color"));
           alert( $("#one").css("backgroundColor"));
        });
        
  // 通过css()设置id为one背景颜色为绿色
  $("#b6").click(function(){
           $("#one").css("background-color","green");
        });

六. html的创建和插入：append() 、prepend()
1. 语法：
创建标签： $("<div id='a'>我们是米虫</div>")
append():  将一个元素追加成另一个元素的最后一个子元素(父子元素)
prepend()：将一个元素追加成另一个元素的第一个子元素(父子元素)
before()：将一个元素添加到另一个元素的前面(兄弟元素)
after(): 将一个元素添加到另一个元素的后面(兄弟元素)

2. 示例：
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
  <ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
 
//将反恐放置到city的后面
$("#b1").click(function(){
    //父子关系
    $("#city").append($("#fk"));
});

//将反恐放置到city的最前面
$("#b2").click(function(){
            //父子关系
            $("#city").prepend($("#fk"));
        });

//将反恐放在天津前面
$("#b3").click(function(){
            //兄弟关系
            $("#tj").before($("#fk"));
        });

//将反恐放在天津后面
$("#b4").click(function(){
            //兄弟关系
            $("#tj").after($("#fk"));
        });

//创建一个广州的节点，加到城市中：<li id="gz" name="guangzhou">广州</li>
  $("#b5").click(function(){
            $("#city").append($("<li id=\"gz\" name=\"guangzhou\">广州</li>"));
        });


七. html元素的删除操作：remove()，empty()
1. 语法：
remove(): 删除自己，自杀
empty()：删除所有的子元素，他杀

2. 示例：
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<script type="text/javascript">
   //从city中删除<li id="bj" name="beijing">北京</li>节点
   $("#b1").click(function(){
       $("#bj").remove();
   });
   
   //删除city中所有的子节点，观察city本身有没有删除
    $("#b2").click(function(){
           $("#city").empty();
       });
</script>