1、通过vai()可以获取select中的多个选项的值,语法格式:val().join(",");
2、增加CSS类别:通过addClass()方法增加元素类别,可同时添加多个类别;
3、类别切换:通过toggleClass()方法切换不同的类别。其功能是当元素中含有名称为class的CSS类别是,删除给类别,否则添加一个该类别的CSS类别。
实现类别之间的切换,单击是发生切换 再次单击又会恢复到原有的类别。
4、创建节点元素:如果要在页面中添加某个元素,只需要找到元素的上级借点 通过$(HTML)完成元素的创建后,添加到给节点中。
例如动态的创建一个DIV标记,并设置内容与属性可按如下步骤:
5、节点复制:页面设计的时候有时需要将节点复制到另外一个节点后,例如购物车的设计,可以通过方法clone()轻松实现
<style type="text/css">
img{border:solid 1px #ccc;padding:3px;margin:5px}
</style>
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone(true).appendTo("span");
})
})
</script>
</head>
<body>
<span><img title="封面" src="Images/img04.jpg" /></span>
</body>
6、遍历元素:each(callback);callback是一个function函数该函数可以接受一个形参index此形参是遍历元素的开始(以0开始);
eg:设置几幅图片通过each()来遍历全部的图片,并且设置不同的title
<style type="text/css">
body{font-size:13px}
img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
</style>
<script type="text/javascript">
$(function() {
$("img").each(function(index) {//index以0开始
//根据形参index设置元素的title属性
this.title = "第" + (index+1) + "幅风景图片,alt内容是" + this.alt;
})
})
</script>
</head>
<body>
<p>
<img src="Images/img05.jpg" alt="第1幅风景画" />
<img src="Images/img06.jpg" alt="第2幅风景画" />
<img src="Images/img07.jpg" alt="第3幅风景画" /></p>
</body>
阶段自测:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>数据管理</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<style type="text/css">
body{font-size:12px}
table{width:360px;border-collapse:collapse}
table tr th,td{border:solid 1px #666;text-align:center}
table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand}
table tr td span{float:left;padding-left:12px;}
table tr th{background-color:#ccc;height:32px}
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px; background-color:#eee;display:none}
.btn {border:#666 1px solid;padding:2px;width:50px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript" >
$(function() {
$("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色
/**全选复选框单击事件**/
$("#chkAll").click(function() {
if (this.checked) {//如果自己被选中
$("table tr td input[type=checkbox]").attr("checked", true);
}
else {//如果自己没有被选中
$("table tr td input[type=checkbox]").attr("checked", false);
}
})
/**删除按钮单击事件**/
$("#btnDel").click(function() {
var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项
if (intL != 0) {//如果有选中项
var r=confirm("确定要删除数据吗?");
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {//遍历除全选复选框外的行
if (this.checked&&r==true) {//如果选中
$("table tr[id=" + this.value + "]").remove(); //获取选中的值,并删除该值所在的行
//location.reload();
}else{
return false;
}
})
}else {
alert("请选择要删除的数据");
return false;
}
})
/**小图片鼠标移动事件**/
var x = 5; var y = 15;//初始化提示图片位置
$("table tr td img").mousemove(function(e) {
$("#imgTip")
.attr("src", this.src)//设置提示图片scr属性
.css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })//设置提示图片的位置
.show(3000);//显示图片
})
/**小图片鼠标移出事件**/
$("table tr td img").mouseout(function() {
$("#imgTip").hide();//隐藏图片
})
})
</script>
</head>
<body>
<table>
<tr>
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr id="0">
<td><input id="Checkbox1" type="checkbox" value="0"/></td>
<td>1001</td>
<td><img src="Images/img03.jpg" alt="" /></td>
<td>李小明</td>
<td>男</td>
<td>35.60 元</td>
</tr>
<tr id="1">
<td><input id="Checkbox2" type="checkbox" value="1"/></td>
<td>1002</td>
<td><img src="Images/img04.jpg" alt="" /></td>
<td>刘明明</td>
<td>女</td>
<td>37.80 元</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="Images/img08.jpg" alt="" /></td>
<td>张小星</td>
<td>女</td>
<td>45.60 元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span><input id="chkAll" type="checkbox" />全选</span>
<span><input id="btnDel" type="button" value="删除" class="btn" /></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Images/img03.gif"/>
</body>
</html>