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>

更多相关文章

随机推荐