1). 获取元素的属性
$(function() { var strAlt = $("img").attr("src"); //属性值一 strAlt += "" + $("img").attr("title"); //属性值二 $("#divAlt").html(strAlt); })
2). 设置元素的属性
$(function() { $("img").attr("src", "Images/img01.jpg");//设置src属性 $("img").attr("title", "这是一幅风景画");//设置title属性 $("img").attr({ src: "Images/img02.jpg", title: "这是一幅风景画" });//同时设置二个属性 $("img").addClass("clsImg");//增加样式 $("span").html("加载完毕");//显示加载状态 })
3). 设置元素的属性(二)
$(function() { $("img").attr("src", function() { return "Images/img0" + Math.floor(Math.random() * 2 + 1) + ".jpg" }); //设置src属性 $("img").attr("title", "这是一幅风景画"); //设置title属性 $("img").addClass("clsImg"); //增加样式 })
4). 获取或设置元素的内容
$(function() { var strHTML = $("#divShow").html();//获取HTML内容 var strText = $("#divShow").text();//获取文本内容 $("#divHTML").html(strHTML);//设置HTML内容 $("#divText").text(strText);//设置文本内容 })
5). 获取或设置元素的值
$(function() { $("select").change(function() { //设置下拉列表框change事件 var strSel = $("select").val().join(","); //获取下拉列表框所选中全部选项值 $("#p1").html(strSel); //显示下拉列表框所选中全部选项值 })
$("input").change(function() { //设置文本框focus事件 var strTxt = $("input").val(); //获取文本框的值 $("#p2").html(strTxt); //显示文本框所输入的值 })
$("input").focus(function() { //设置文本框focus事件 $("input").val(""); //清空文本框的值 })
})
6). 直接设置元素样式值
$(function() { $("p").click(function() { $(this).css("font-weight", "bold");//字体加粗 $(this).css("font-style", "italic");//斜体 $(this).css("background-color", "#eee");//增加背景色 })
})
7). 增加CSS类别
$(function() { $("p").click(function() { $(this).addClass("cls1 cls2"); //同时新增二个样式类别 })
})
8). 类别切换
$(function() { $("img").click(function() { $(this).toggleClass("clsImg"); //切换样式类别 })
})
9). 动态插入节点方法
$(function () { $("div").append(" Write Less Do More "); //插入内容 $("div").append(retHtml); //插入内容 function retHtml() { var str = " Write Less Do More ";
return str;
}
})
$(function() { $("img").appendTo($("span")); //插入内容 })
$(function() { $("span").after(retHtml); //插入内容 function retHtml() { var str = "Write Less Do More"; return str;
}
})
10).复制元素节点
$(function() { $("img").click(function() { $(this).clone(true).appendTo("span"); })
})
11). 替换元素节点
$(function() { $("#Span1").replaceWith("陶国荣"); $("tao_guo_rong@163.com").replaceAll("#Span2"); })
12). 包裹元素节点
$(function() { $("p").wrap("");//所有段落标记字体加粗 $("span").wrapInner("");//所有段落中的span标记斜体 })
13). 遍历元素
$(function() { $("img").each(function(index) { //根据形参index设置元素的title属性
this.title = "第" + index + "幅风景图片，alt内容是" + this.alt;
})
})
14). 删除元素
$(function() { $("ul li:first").css("font-weight", "bold");//设置首行 $("#Button1").click(function() { $("ul li").remove("li[title=t]");//删除指定属性的元素 $("ul li:eq(1)").remove();//删除节点中第2个元素 })
})