一.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>
所有方法的特点:既可以设置属性,又可以获取属性
二. 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>