jquery小结3
1 层次选择器
<div id="divMid">
<span id="Span1">
<span id="Span2"></span>
</span>
</div>
<div title="AB">ID
Title AB</div>
<div title="ABC">Title ABC</div>
$(function(){ //显示所有含有id属性的元素
$("div[id]").show(3000);
})
$(function(){ //显示所有属性title的值是"A"的元素
$("div[title='A']").show(3000);
})
$(function(){ //显示所有属性title的值不是"A"的元素
$("div[title!='A']").show(3000);
})
$(function(){ //显示所有属性title的值以"A"开始的元素
$("div[title^='A']").show(3000);
})
$(function(){ //显示所有属性title的值以"C"结束的元素
$("div[title$='C']").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"的元素
$("div[title*='B']").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"且属性id的值
是"divAB"的元素
$("div[id='divAB'][title*='B']").show(3000);
})
4 子元素过滤选择器
Item 1-0
Item 1-1
Item 1-2
Item 1-3
Item 2-0
Item 2-1
Item 2-2
Item 2-3
Item 3-0
$(function(){ //增加每个父元素下的第2个子元素类别
$("li:nth-child(2)").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的第一个子元素类别
$("li:first-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的最后一个子元素类别
$("li:last-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下只有一个子元素类别
$("li:only-child").addClass("GetFocus");
})
5 设置元素的属性attr,比如：
$("img").attr("title", "hello"); //设置title属性
也可以在attr中设置function，比如；
$("img").attr("src", function() { return "Images/img0" + Math.floor
(Math.random() * 2 + 1) + ".jpg" }); //设置src属性
删除元素：$("img").removeAttr("src");
6 获得HTML及文本的值
$("#divhidd").html();$("#divhidd").text();
7 外部插入结点：after,before,insertAfter,insertBefore等都比较容易，重点看
clone()
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone(true).appendTo("span");
})
})
</script>
<span><img title="封面" src="Images/img04.jpg" /></span>
当clone(true)时，将该元素的全部行为也复制，比如这个例子中，可以不断点复制出
来的图片，不断的复制，
而如果$(this).clone()时，则只能点原来的图片
8 wrap和wrapInner
最喜爱的体育运动：<span>羽毛球</span>
最爱看哪类型图书：<span>网络、技术</span>
$(function() {
$("p").wrap("<b></b>");//所有段落标记字体加粗,在p的标签外面加B
$("span").wrapInner("<i></i>");//所有段落中的span标记斜体，在SPAN
标签内加I
})
9 遍历元素
each(callback),callback为一个 function函数，可以接受index序号从0开始，比如
$(function() {
$("img").each(function(index) {
//根据形参index设置元素的title属性
this.title = "第" + index + "幅风景图片，alt内容是" +
this.alt;
})
})
10 表格框中，实现全选框的功能
/**全选复选框单击事件**/
$("#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) {//如果有选中项
$("table tr td input[type=checkbox]:not('#chkAll')").each
(function(index) {//遍历除全选复选框外的行
if (this.checked) {//如果选中
$("table tr[id=" + this.value + "]").remove(); //
获取选中的值，并删除该值所在的行
}
})
}
})
11 事件冒泡
比如：
<script type="text/javascript">
$(function() {
var intI = 0; //记录执行次数
$("body,div,#btnShow").click(function(event) {//点击事件
intI++; //次数累加
$(".clsShow")
.show()//显示
.html("您好，欢迎来到jQuery世界!")//设置内容
.append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文
本
event.stopPropagation();//阻止冒泡过程
})
})
</script>
<div + index + ")").show()
.siblings().hide();
});
});
})
