JQuery -- Dom操作， 示例代码
2014-02-14 09:27
543 查看
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对象返回.
注意:
•动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;
•当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.例如创建一个<p>元素,可以使用$(“<p/>”)或$(“<p></p>”),但不能使用$(“<p>”)或$(“</P>”)或$(“p”)
创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建
5.删除节点
remove(): 从
DOM 中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.
empty(): 清空节点
– 清空元素中的所有后代节点(不包含属性节点).
6.复制节点
clone(): 克隆匹配的
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()方法来完成.
追加样式: addClass()
移除样式: removeClass() ---从匹配的元素中删除全部或指定的class
切换样式: toggleClass() ---控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它.
判断是否含有某个样式: hasClass() ---判断元素中是否含有某个class,如果有,则返回true;
否则返回 false
9. 设置和获取 HTML, 文本和值
读取和设置某个元素中的 HTML
内容: html(“<p></p>”) .该方法可以用于XHTML,
但不能用于 XML
文档
读取和设置某个元素中的文本内容:text().该方法既可以用于XHTML
也可以用于 XML文档.
读取和设置某个元素中的值:
val() --- 该方法类似JavaScript中的
value 属性.对于文本框,下拉列表框,单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组
alert($("#b1")[0].defaultValue);
示例1： append 追加， 还是在 <li></li> 里面
示例2：after 出了<li></li>
示例3：
示例4：
示例5：
示例6：
示例7：
示例8：
示例9：
案例一： checkbox选项框，全选 反选 。。。
案例2：
* 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对象返回.
注意:
•动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;
•当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.例如创建一个<p>元素,可以使用$(“<p/>”)或$(“<p></p>”),但不能使用$(“<p>”)或$(“</P>”)或$(“p”)
创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建
5.删除节点
remove(): 从
DOM 中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.
empty(): 清空节点
– 清空元素中的所有后代节点(不包含属性节点).
6.复制节点
clone(): 克隆匹配的
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()方法来完成.
追加样式: addClass()
移除样式: removeClass() ---从匹配的元素中删除全部或指定的class
切换样式: toggleClass() ---控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它.
判断是否含有某个样式: hasClass() ---判断元素中是否含有某个class,如果有,则返回true;
否则返回 false
9. 设置和获取 HTML, 文本和值
读取和设置某个元素中的 HTML
内容: html(“<p></p>”) .该方法可以用于XHTML,
但不能用于 XML
文档
读取和设置某个元素中的文本内容:text().该方法既可以用于XHTML
也可以用于 XML文档.
读取和设置某个元素中的值:
val() --- 该方法类似JavaScript中的
value 属性.对于文本框,下拉列表框,单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组
alert($("#b1")[0].defaultValue);
示例1： append 追加， 还是在 <li></li> 里面
<!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：after 出了<li></li>
<!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(跨)iframe操作DOM(示例代码)
- 同域jQuery(跨)iframe操作DOM(示例代码)
- JQuery -- Dom操作， 示例代码
- java中操作xml几种方式的比较和代码示例(DOM,SAX,JDOM,DOM4J)
- java中操作xml几种方式的比较和代码示例(DOM,SAX,JDOM,DOM4J)
- jQuery的DOM操作之删除节点示例
- java中操作xml几种方式的比较和代码示例(DOM,SAX,JDOM,DOM4J)
- jQuery的DOM操作之删除节点示例
- Jquery操作js数组及对象示例代码
- ava中(DOM,SAX,JDOM,DOM4J)操作xml方式的比较和代码示例
- java中操作xml几种方式的比较和代码示例(DOM,SAX,JDOM,DOM4J)
- JQuery在页面中添加和除移DOM示例代码
- jquery 操作DOM案例代码分享
- 你真的了解jQuery的ready函数吗？当 DOM（文档对象模型） 已经加载，就执行ready里的代码。DOM何时加载完毕？jQuery对html局部操作，DOM为什么不重新加载？
- java中(DOM,SAX,JDOM,DOM4J)操作xml方式的比较和代码示例
- jquery 操作DOM案例代码分享
- jQuery的DOM操作之删除节点示例
- JQuery在页面中添加和除移DOM示例代码
- php DOMElement 操作xml 文档的示例代码
- 使用jQuery操作DOM：10条有用的代码