一、标记的属性
1.each()遍历元素
each(callback)方法主要用于对选择器中的元素进行遍历,它接受一个函数作为参数,该函数接受一个参数,指代元素的序号,可以配合this关键字来使用。index为元素所处的序号(从零开始计数)。
2.获取属性的值
attr(name)方法可以得到某个对象的某个特定属性的值。还可以通过位置选择器来指定某个元素的属性值(:eq(0))。
3.设置属性的值
(1) attr(name,value) 通用表达式
(2) attr(name,fn) 函数
4.删除属性
removeAttr(name)方法将删除某属性值。$("button").romoveAttr("disabled");removeAttr(name)删除属性相当于HTML的标记中不设置该属性,并不是取消了该标记的这个特点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>each()方法</title> <style type="text/css"> <!-- img{ border:1px solid #003863; } .myClass1{ border:1px solid #750037; width:120px; height:80px; } .myClass2{ background-color:#ffcdfc; } p{ color:blue; cursor:help; font-size:13px; margin:0px; padding:5px; } .highlight{ background-color:#FFFF00; } --> </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> //1.each function each(){ $("img").each(function(index){ this.title = "这是第" + index + "幅图,id是:" + this.id; }); } //2.attr em eq function attr(){ var titleStr = $("em:eq(1)").attr("title"); $("span").text(titleStr); } //3.设置属性的值 function attrValue(){ $("button:gt(0)").attr("disabled","disabled"); } //4.设置属性的值 function attrEach(){ $("div").attr("id",function(index){ return index; }).each(function(){ $(this).find("span").html("(id=" + this.id + ")"); }); } </script> </head> <body> <img src="01.jpg" id="Tsinghua01"> <img src="02.jpg" id="Tsinghua02"> <img src="03.jpg" id="Tsinghua03"> <img src="04.jpg" id="Tsinghua04"> <img src="05.jpg" id="Tsinghua05"> <input type="button" value="1.each" οnclick="each();"> <input type="button" value="5.attrMany" οnclick="attrMany();"> <p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p> <p>在树林里面<em title="running">跑啊跑</em>...</p> <p>title属性的值是:<span></span></p> <input type="button" value="2.attr" οnclick="attr();"> <button οnclick="DisableBack()">第一个Button</button> <button>第二个Button</button> <button>第三个Button</button> <input type="button" value="3.attrValue" οnclick="attrValue();"> <div>第0项 <span></span></div> <div>第1项 <span></span></div> <div>第2项 <span></span></div> <input type="button" value="4.attrEach" οnclick="attrEach();"> </body> </html>
二、设置元素的样式
1.添加、删除CSS类别
addClass(names),类别之间可以用空格分离。
removeClass(names),类别之间可以用空格分离。
2.在类别间动态切换
用toggleClass()方法动态切换CSS类别,toggleClass()方法中,只能设定一种CSS类别,不能同时对多个CSS类别进行切换。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>each()方法</title>
<style type="text/css">
<!--
img{
border:1px solid #003863;
}
.myClass1{
border:1px solid #750037;
width:120px; height:80px;
}
.myClass2{
background-color:#ffcdfc;
}
p{
color:blue; cursor:help;
font-size:13px;
margin:0px; padding:5px;
}
.highlight{
background-color:#FFFF00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
//6.同时添加多个CSS类别
function addManyCSS(){
$("div").addClass("myClass1 myClass2");
}
//7.删除多个CSS类别
function removeManyCSS(){
$("div").removeClass("myClass1 myClass2");
}
//8.CSS类别切换
function toggleClass(){
$("p").toggleClass("highlight");
}
</script>
</head>
<body>
<p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
<p>在树林里面<em title="running">跑啊跑</em>...</p>
<p>title属性的值是:<span></span></p>
<div></div>
<input type="button" value="6.同时添加多个CSS类别" οnclick="addManyCSS();">
<input type="button" value="7.删除多个CSS类别" οnclick="removeManyCSS();">
<p>高亮?</p>
<input type="button" value="8.CSS类别切换" οnclick="toggleClass();">
</body>
</html>
eg:伸缩菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的菜单,用jQuery重写</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{ /* 隐藏子菜单 */
display:none;
}
/*
不再需要myShow样式
#navigation ul li ul.myShow{
display:block;
}
*/
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
/*
$(function(){
//找到所有li标记中包含的ul标记
//然后找到它的前一个标记(即<a>),并添加click()事件
$("li").find("ul").prev().click(function(){
//点击<a>时让它后面的兄弟(即<ul>)切换CSS样式
$(this).next().toggleClass("myHide");
});
});
*/
/*
//替换原来的例题
function change(){
$(this).parent().find("ul").toggleClass("myHide");
//通过父元素li,找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
$("li").find("ul").prev().click(change);
/*var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li,且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
oA.onclick = change; //动态添加点击函数
}
}
}*/
$(function(){
$("li").find("ul").prev().click(function(){
$(this).next().toggleClass("myHide");
});
});
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="myHide">
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="myHide">
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul class="myHide">
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
eg:隔行颜色交替变换的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>交替变幻的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名称边框 */
background-color:#00a40c; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行变色 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
$("table").mouseover(function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").mouseout(function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr>
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr>
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr>
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr>
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr>
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr>
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr>
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr>
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>
三、处理页面的元素
1.直接获取、编辑内容
hmtl()相当于获取节点的innerHTML属性,text()则用来获取元素的纯文本。
2.移动和复制元素
append()方法,可直接为某个元素添加新的子元素。如$("p").append($("a"));如果添加的目标<p>是唯一 的一个元素,那么$("a")将会被移动到该元素的后面 ,如果目标 <p>是多个元素 ,那么$("a")将会以复制 的形式,在每个<p>后面都添加一个子元素。
appendTo(target ),用来将元素添加为指定目标的子元素,和append()一样,目标为多个时复制,目标为一个时移动。
3.删除元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>text()与html()</title>
<style type="text/css">
<!--
p{
margin:0px; padding:5px;
font-size:15px;
border:1px solid #642d00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
//1.text and html
function textHtml(){
$("p").click(function(){
var str = $(this).text();
$(this).html(str);
});
}
//2.append
function appendHTML(){
//直接添加HTML代码
$("p:eq(0)").append("<b>啊~~~~</b>");
}
//3.添加多个目标
function appendMany(){
$("p").append($("a")); //复制
}
//4.appendTo添加到指定目标的子元素,把appendTo之前的内容添加到appendTo之后的内容
function appendTo(){
$("a:eq(0)").appendTo($("p"));
}
//5.appendTo复制及移动
function appendToCopyOrMove(){
$("img").appendTo("p");
}
//6.afterMany() 添加多个目标 在p:eq(1)之后添加a
function afterMany(){
$("p").after($("a:eq(0)"));//添加目标为多个<p> 复制
}
//7.after 添加目标是唯一的 在p之后添加a
function after(){
$("p:eq(0)").after($("a:eq(1)"));//添加目标是唯一的<p> 移动
}
//8.remove
function removeAllP(){
$("p").remove();
}
//9.remove contians remove过滤器
function removeContains(){
//$("p").remove(":contains('段 落1')");
$("p:contains('段 落1')").remove();
//两者效果一致,建议用后者
}
//10.删除子元素 empty
function empty(){
$("p").empty();//只是清空子元素,样式等还在
}
</script>
</head>
<body>
<p><b>文本</b>段 落1<em>示</em>例</p>
<p><b>文本</b>段 落2<em>示</em>例</p>
<a href="#">增加的链接1</a>
<a href="#">增加的链接2</a>
<input type="button" value="1.text and html" οnclick="textHtml();">
<input type="button" value="2.append" οnclick="appendHTML();">
<input type="button" value="3.appendMany" οnclick="appendMany();">
<input type="button" value="4.appendTo" οnclick="appendTo();">
<input type="button" value="6.afterMany" οnclick="afterMany();">
<input type="button" value="7.after" οnclick="after();">
<input type="button" value="8.removeAllP" οnclick="removeAllP();">
<input type="button" value="9.removeContains" οnclick="removeContains();">
<input type="button" value="10.empty" οnclick="empty();">
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>appendTo()方法</title>
<style type="text/css">
<!--
body{ margin:5px; padding:0px; }
p{ margin:0px; padding:1px 1px 1px 0px; }
img{
border:1px solid #003775;
margin:4px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
// 1.appendToCopyOrMove
function appendToCopyOrMove(){
$("img:eq(0)").appendTo($("p")); //添加目标为多个<p> 复制
$("img:eq(1)").appendTo($("p:eq(1)")); //添加目标是唯一的<p> 移动
}
function prependTo(){
$("img:eq(0)").prependTo($("p")); //添加到所有子元素之前 复制
}
function prepend(){
$("img:eq(0)").prepend($("p")); //添加到所有子元素之前 复制
}
//4.clone
function clone(){
$("img:eq(0)").clone().appendTo($("p")); //添加目标为多个<p> 复制
$("img:eq(1)").clone().appendTo($("p:eq(1)")); //添加目标是唯一的<p> 复制
}
function cloneEven(){
$("input[type=button]").click(function(){
//克隆自己,并且克隆点击的行为
$(this).clone(true).insertAfter(this);
});
}
</script>
</head>
<body>
<img src="08.jpg" title="08"> <img src="09.jpg" title="09">
<hr>
<p><img src="10.jpg" title="10"></p>
<p><img src="10.jpg" title="10"></p>
<p><img src="10.jpg" title="10"></p>
<input type="button" value="1.appendToCopyOrMove" οnclick="appendToCopyOrMove();">
<input type="button" value="2.prepend" οnclick="prepend();">
<input type="button" value="3.prependTo" οnclick="prependTo();">
<input type="button" value="4.clone" οnclick="clone();">
<input type="button" value="5.cloneEven" οnclick="cloneEven()">
</body>
</html>
remove()方法删除元素,可以在remove()方法中使用过滤器,但通常还是建议在选择器阶段就将要删除的对象确定,然后用remove()一次性删除。
empty()方法直接删除子元素(样式等保留,只删除内容)
4.克隆元素
上面提到的元素的复制和移动,这取决于目标的个数,有时希望如果目标只有一个,也可同样执行复制操作,clone()方法可以克隆元素。