JQuery -- Dom操作， 示例代码
1.内部插入节点
* append(content) :向每个匹配的元素的内部的结尾处追加内容
* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
* prepend(content):向每个匹配的元素的内部的开始处插入内容
* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
2.外部插入节点
* after(content) :在每个匹配的元素之后插入内容
* before(content):在每个匹配的元素之前插入内容
* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
3.查找节点
•查找属性节点:通过jQuery选择器完成.
•查找属性节点:查找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种属性值
4.创建节点
创建节点: 使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建一个DOM
对象,并把这个DOM对象包装成一个jQuery
对象返回.
对象,并把这个DOM对象包装成一个jQuery
对象返回.
注意:
•动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;
•当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.例如创建一个<p>元素,可以使用$(“<p/>”)或$(“<p></p>”),但不能使用$(“<p>”)或$(“</P>”)或$(“p”)
创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建
5.删除节点
remove(): 从
DOM 中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.
DOM 中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.
empty(): 清空节点
– 清空元素中的所有后代节点(不包含属性节点).
– 清空元素中的所有后代节点(不包含属性节点).
6.复制节点
clone(): 克隆匹配的
DOM 元素,返回值为克隆后的副本.但此时复制的新节点不具有任何行为.
DOM 元素,返回值为克隆后的副本.但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件
7.替换节点
replaceWith(): 将所有匹配的元素都替换为指定的HTML或DOM元素
replaceAll(): 颠倒了的replaceWith()方法.
注意: 若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失
8.属性操作 样式操作
attr(): 获取属性和设置属性
•当为该方法传递一个参数时,即为某元素的获取指定属性
•当为该方法传递两个参数时,即为某元素设置指定属性的值
jQuery 中有很多方法都是一个函数实现获取和设置.如: attr(), html(), text(), val(), height(), width(), css()等.
removeAttr(“属性名”):删除指定元素的指定属性
获取 class 和设置class : class
是元素的一个属性,所以获取
class 和设置
class 都可以使用attr()
方法来完成.
是元素的一个属性,所以获取
class 和设置
class 都可以使用attr()
方法来完成.
追加样式: addClass()
移除样式: removeClass() ---从匹配的元素中删除全部或指定的
class
class
切换样式: toggleClass() ---
控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它.
控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它.
判断是否含有某个样式: hasClass() ---判断元素中是否含有某个
class,如果有,
则返回true;
否则返回 false
class,如果有,
则返回true;
否则返回 false
9. 设置和获取 HTML, 文本和值
读取和设置某个元素中的 HTML
内容: html(“<p></p>”) .该方法可以用于
XHTML, 但不能用于
XML 文档
内容: html(“<p></p>”) .该方法可以用于
XHTML, 但不能用于
XML 文档
读取和设置某个元素中的文本内容:text().该方法既可以用于
XHTML 也可以用于
XML文档.
XHTML 也可以用于
XML文档.
读取和设置某个元素中的值:
val() --- 该方法类似JavaScript
中的 value
属性.对于文本框,下拉列表框,
单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组
alert($("#b1")[0].defaultValue);
val() --- 该方法类似JavaScript
中的 value
属性.对于文本框,下拉列表框,
单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组
alert($("#b1")[0].defaultValue);
示例1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head> <body>
<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> <div id="foo1">Hello1</div> </body>
<script language="JavaScript">
//* append(content) :向每个匹配的元素的内部的结尾处追加内容
//append后面的元素插入到append前面的元素的后面
// $("#bj").append($("#fk")); //* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
//appendTo前面的元素插入到appendTo后面的元素的后面
// $("#bj").appendTo($("#fk")); //* prepend(content):向每个匹配的元素的内部的开始处插入内容
//prepend后面的元素插入到prepend前面的元素的前面
$("#bj").prepend($("#fk")); //* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
//prependTo前面的元素插入到prependTo后面的元素的前面
// $("#bj").prependTo($("#fk"));
</script> </html>
示例2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head> <body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <p id="p3">I would like to say: p3</p> <p id="p2">I would like to say: p2</p> <p id="p1">I would like to say: p1</p> </body>
<script language="JavaScript">
//* after(content) :在每个匹配的元素之后插入内容
//after后面的元素插入到after前面的元素的后面
// $("#bj").after($("#p2")); //* before(content):在每个匹配的元素之前插入内容
//before后面的元素插入到before前面的元素的前面
$("#bj").before($("#p2")); //* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面
//insertAfter前面的元素插入到insertAfter后面的元素的后面
// $("#bj").insertAfter($("#p2")); //* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
//insertBefore前面的元素插入到insertBefore后面的元素的前面
// $("#bj").insertBefore($("#p2")); </script> </html>
示例3：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>
<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/>
<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/>
<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/> <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div
</div> <ul>
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li> </ul> </body>
<script language="JavaScript">
//获取"北京"
var $bjElement = $("#bj"); alert($bjElement.attr("name")); //在这里相当于DOM操作里的getAttribute() /*
* jquery中的attr()方法相当于DOM操作里的getAttribute和setAttribute
* * 对应DOM操作里getAttribute是attr(name)
* * name：属性名称
* * 对应DOM操作里setAttribute是attr(name,value)
* * name：属性名称
* * value：属性的值
*/ </script> </html>
示例4：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body> <ul id="city">
<li id="bj" name="beijing">北京</li>
</ul> </body>
<script language="JavaScript">
//在city下增加<li id="tj" name="tianjin">天津</li>节点
//1 创建<li id="tj" name="tianjin">天津</li>
/*
* 1 创建<li></li>
*
* * 标签的闭合
* * 开始标签和截止标签：<li></li>
* * <li />
*
* * 以下几种方式是不正确的：
* * <li>
* * $("li")获取对应标签
*/
var $li = $("<li></li>"); //document.createElement("li"); //2 设置属性
$li.attr("id","tj");
$li.attr("name","tianjin"); //3 创建文本节点
//4 插入
/*
* text()：同时也具备get和set两种属性
* * 如果是get的话，text()无参数形式
* * 如果是set的话，text(name)传入文本内容
*/
$li.text("天津"); //2 获取city标签
var $city = $("#city"); //3 插入
$city.append($li); </script> </html>
示例5：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script language="JavaScript">
//删除<li id="bj" name="beijing">北京</li>
$("#bj").remove(); //删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#tj").empty(); alert($("#tj").attr("name")); </script> </html>
示例6：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<button>保存</button>
<br> <br> <br>
<p>段落</p>
</body>
<script language="JavaScript">
//button增加事件
$("button").click(function(){
alert("yyy");
}); //克隆button 追加到p上 ,但事件不克隆
//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
// $("button").clone().appendTo($("p")); //克隆button 追加到p上 ,但事件也克隆
//clone(true): 复制元素的同时也复制元素中的的事件
$("button").clone(true).appendTo($("p")); </script>
</html>
示例7：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<button>保存</button>
</body>
<script language="JavaScript">
//$("button")用 <p>tttttttt</P>替换
//replaceWith前面的元素是被替换的，replaceWith后面的元素是替换后的
$("button").replaceWith($("<p>tttttttt</P>")); // p 用 <button>保存</button> 替换
//replaceAll前面的元素是替换后的，replaceAll后面的元素是要被替换的
$("<button>保存</button>").replaceAll($("p")); //replaceWith与replaceAll，效果刚好相反 </script>
</html>
示例8：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 40px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="采用属性增加样式" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" hasClass" id="b5"/> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <br>
<div id="mover">
动画
</div>
<br>
<span class="spanone"> span
</span> </body>
<script language="JavaScript">
//<input type="button" value="采用属性增加样式" id="b1"/>
$("#b1").click(function(){
$("#mover").attr("class","one");
}); //<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#mover").addClass("mini");
}); //<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
/*
* removeClass()
* * 删除样式
* * 如果不带任何参数，removeClass()可以删除任何样式
* * 如果带参数的话，removeClass()只能删除指定样式
*/
$("#mover").removeClass("one");
}); //<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function(){
/*
* toggleClass();
* * 切换样式
* * 该方法只能接受一个参数
* * 所谓的切换样式，是在指定样式和没有样式(只是把指定样式删除)之间切换
*/
$("#mover").toggleClass("mini");
}); //<input type="button" value=" hasClass" id="b5"/>
$("#b5").click(function(){
/*
* hasClass()
* * 判断是否含有某个样式，并不是判断是否含有样式
* * 该方法要指定样式名称
* * 如果有多个样式存在，hasClass()方法依然只判断是否含有该方法指定的样式
*/
alert($("#mover").hasClass("one"));
}); </script>
</html>
示例9：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="使单选下拉框的'2号'被选中"/><br>
<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/> <select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select> <select id="many" multiple="multiple" style="height:120px;">
<option selected="selected">1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option selected="selected">6号</option>
</select> <br/>
<br/> <input type="checkbox" name="c" value="check1"/> 复选1
<input type="checkbox" name="c" value="check2"/> 复选2
<input type="checkbox" name="c" value="check3"/> 复选3
<input type="checkbox" name="c" value="check4"/> 复选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
<script language="JavaScript">
//<input type="button" value="使单选下拉框的'2号'被选中"/><br>
$("input[type=button]:eq(0)").click(function(){
/*
* <select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select>
*/
//方法一：普通方法
//$("#one option:eq(1)").attr("selected","selected"); //方法二
$("#one").val("2号"); }); //<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
$("input[type=button]:eq(1)").click(function(){
/*
* <select id="many" multiple="multiple" style="height:120px;">
<option selected="selected">1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option selected="selected">6号</option>
</select>
*/
//方法一：普通方法
// $("#many option").each(function(index,domEle){
// $(domEle).attr("selected",null);
// if(index==1||index==4){
// $(domEle).attr("selected","selected");
// }
// }); //方法二
$("#many").val(["2号","5号"]); }); //<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
$("input[type=button]:eq(2)").click(function(){
/*
* <input type="checkbox" name="c" value="check1"/> 复选1
<input type="checkbox" name="c" value="check2"/> 复选2
<input type="checkbox" name="c" value="check3"/> 复选3
<input type="checkbox" name="c" value="check4"/> 复选4
*/
//方法一：普通方法
// $("input[type=checkbox]").each(function(index,domEle){
// if(index==1||index==3){
// $(domEle).attr("checked","checked");
// }
// }); //方法二：利用val()方法为多选框赋值，传入的参数是多选框的value属性的值
$("input[type=checkbox]").val(["check2","check4"]); }); //<input type="button" value="使单选框的'单选2'被选中"/><br>
$("input[type=button]:eq(3)").click(function(){
/*
* <input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
*/
//方法一：普通方法
// $("input[type=radio]").each(function(index,domEle){
// if(index==1){
// $(domEle).attr("checked","checked");
// }
// }); // $("input[type=radio]:eq(1)").attr("checked","checked"); //方法二
//利用val()方法为多选框和单选框赋值的时候，无论赋值是多个还是一个，都需要利用"[]"包裹起来
$("input[type=radio]").val(["radio2"]); }); //<input type="button" value="打印已经被选中的值"><br>
$("input[type=button]:eq(4)").click(function(){
$("select option:selected").each(function(index,domEle){
alert($(domEle).text());
}); //多个属性过滤选择器使用时，是交集，不是并集
// $("input[type=checkbox][type=radio]") $("input:checked").each(function(index,domEle){
alert($(domEle).val());
}); }); </script>
</html>
案例一： checkbox选项框，全选 反选 。。。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<form method="post" action="">
请选择您的爱好!
<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/> <input type="button" id="send" value="提 交"/>
</form>
</body>
<script language="JavaScript">
//<input type="button" id="CheckedAll" value="全 选"/>
$("#CheckedAll").click(function(){
/*
* <input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
*/
// $("input[name=items]").each(function(index,domEle){
// $(domEle).attr("checked","checked");
// }); $("input[name=items]").attr("checked","checked"); }); //<input type="button" id="CheckedNo" value="全不选"/>
$("#CheckedNo").click(function(){
// $("input[name=items]").attr("checked",null); $("input[name=items]").removeAttr("checked");
}); //<input type="button" id="CheckedRev" value="反 选"/>
$("#CheckedRev").click(function(){
$("input[name=items]").each(function(index,domEle){
if($(domEle).attr("checked")){
$(domEle).attr("checked",null);
}else{
$(domEle).attr("checked","checked");
}
});
}); //<input type="checkbox" id="checkedAll_2"/>全选/全不选
$("#checkedAll_2").click(function(){
if($(this).attr("checked")){
$("input[name=items]").attr("checked","checked");
}else{
$("input[name=items]").attr("checked",null);
}
}); </script>
</html>
案例2：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<title>无标题文档</title> <style type="text/css">
<!-- BODY
{
font-family:Courier;;
font-size: 12px;
margin:0px 0px 0px 0px;
overflow-x:no;
overflow-y:no;
background-color: #B8D3F4;
}
td
{
font-size:12px;
}
.default_input
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.default_input2
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.nowrite_input
{
border:1px solid #849EB5;
height:18px;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.default_list
{
font-size:12px;
border:1px solid #849EB5;
}
.default_textarea
{
font-size:12px;
border:1px solid #849EB5;
} .nowrite_textarea
{
border:1px solid #849EB5;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
} .wordtd5 {
font-size: 12px;
text-align: center;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
} .wordtd {
font-size: 12px;
text-align: left;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color:#fff;
}
.wordtd_2{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd
{
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2
{
text-align: center;
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg
{
font-size:12px;
} .tb{
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
border-right-width:0px;
border-left-width:0px;
border-top-width:0px;
border-bottom-width:1px;} .tb td{
font-size: 12px;
border: 2px groove #ffffff;
} .noborder {
border: none;
} .button {
border: 1px ridge #ffffff;
line-height:18px;
height: 20px;
width: 45px;
padding-top: 0px;
background:#CBDAF7;
color:#000000;
font-size: 9pt;
font-family:Courier;;
} .textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color:transparent;
text-align: left
}
-->
</style></head> <body> <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//<input name="add" id="add" type="button" class="button" value="-->" />
$("#add").click(function(){
$("#first option:selected").appendTo($("#second"));
}); //<input name="add_all" id="add_all" type="button" class="button" value="==>" />
$("#add_all").click(function(){
$("#first option").appendTo($("#second"));
}); //<input name="remove" id="remove" type="button" class="button" value="<--" />
$("#remove").click(function(){
$("#second option:selected").appendTo($("#first"));
}); //<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
$("#remove_all").click(function(){
$("#second option").appendTo($("#first"));
}); //双击
$("#first").dblclick(function(){
$("#first option:selected").appendTo($("#second"));
}); $("#second").dblclick(function(){
$("#second option:selected").appendTo($("#first"));
}); </script>
</html>
JQuery -- Dom操作， 示例代码的更多相关文章
- jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- 事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- jquery DOM操作（一）
上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...
- Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
- JQuery dom 操作总结
DOM 操作之获取值 获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...
- lua连接数据库操作示例代码
lua连接数据库可以使用resty.mysql库 示例代码如下: local mysql = require "resty.mysql" local db, err = mysql ...
- Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
随机推荐
- Leetcode-Permuation Sequence
The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...
- [LintCode] 用栈实现队列
class Queue { public: stack<int> stack1; stack<int> stack2; Queue() { // do intializatio ...
- vue+node+mongoDB 火车票H5（四）---完成静态页面
各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的部分可以提取出来的,统一放到components组件文件夹中 header头部文件夹放一些头部常用组件,如首页的banner切 ...
- 基于minikube的kubernetes集群部署及Vitess最佳实践
简介 minikube是一个可以很容易在本地运行Kubernetes集群的工具, minikube在电脑上的虚拟机内运行单节点Kubernetes集群,可以很方便的供Kubernetes日常开发使用: ...
- 如何基于Go搭建一个大数据平台
如何基于Go搭建一个大数据平台 - Go中国 - CSDN博客 https://blog.csdn.net/ra681t58cjxsgckj31/article/details/78333775 01 ...
- 指定文件夹 指定文件后缀名 删除整个文件夹 git 冲突解决 create a new repository on the command line push an existing repository from the command line
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001375840038939c2 ...
- <2014 05 09> 程序员：从C++转到Java需注意的地方
最近想玩玩Android的APP开发,从C++角度来学习Java.Java可以说是一个优化精简版的C++,去除了底层C的很多特性.找了这篇文章. --------------------------- ...
- 使用jQuery重用form表单并异步提交到其它action
在做页面开发的时候,有时候要重用表单的数据,并异步请求提交到其它的链接中,这个时候就能够使用jquery去改动表单的action值(记得使用后改动回来).并调用submit方法,当然后台的链接acti ...
- springMvc获取特殊值
1.获取数组
- Mysql学习笔记—视图
1.什么是视图 视图(View)是一种虚拟存在的表.其内容与真实的表相似,包含一系列带有名称的列和行数据.但是视图并不在数据库中以存储的数据的形式存在.行和列的数据来自定义视图时查询所引用的基本表,并 ...