1. 元素属性操作
* 获取元素属性值 : attr(name)
var strAlt = $("img").attr("src"); //获取img元素的src属性的值
* 设置元素的属性
设置单个属性:attr(key,value)
设置多个属性:attr({key0:value0,key1:value1})
绑定函数:attr(key function(index)) 通过该函数返回值作为元素的属性值,index是当前元素的索引号
例子:
$("img").attr("src", "Images/img01.jpg");//设置src属性
$("img").attr("title", "这是一幅风景画");//设置title属性
$("img").attr({ src: "Images/img02.jpg", title: "这是一幅风景画" });//同时设置二个属性
$("img").attr("src", function() { return "Images/img0" + Math.floor(Math.random() * 2 + 1) + ".jpg" }); //设置src属性
* 删除元素的属性 :removeAttr(name)
例子:$("img").removeAttr(“src”)
2. 元素内容操作
操作方法:html()和text(),有参数表示设置内容,类似于javascript中的innerHTML和innerText,html()方法支持XHTML文档,不能用于XML文档,text()既支持HTML也支持XML 。
<div id="divShow"><b><i>Write Less Do More</i></b></div> <script type="text/javascript"> $(function() { var strHTML = $("#divShow").html();//获取HTML内容 <b><i>Write Less Do More</i></b> var strText = $("#divShow").text();//获取文本内容 Write Less Do More $("#divHTML").html(strHTML);//设置HTML内容 $("#divText").text(strText);//设置文本内容 }) </script>
3. 获取或设置元素的值
常用于获取和设置表单中对象的值的方法:val(value)
$(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(""); //清空文本框的值 }) })
4. 元素样式操作
* 直接设置元素样式 :css(name,value)
$(function() { $("p").click(function() { $(this).css("font-weight", "bold");//字体加粗 $(this).css("font-style", "italic");//斜体 $(this).css("background-color", "#eee");//增加背景色 }) })
* 增加css类别
addClass(class),增加多个class,用空格隔开addClass(class1 class2 class3…) ,addClass是追加类别。
.cls1{font-weight:bold;font-style:italic} .cls2{ border:solid 1px #666;background-color:#eee} $("p").click(function() { $(this).addClass("cls1 cls2"); //同时新增二个样式类别 })
* 类别切换
toggleClass(class),当元素中含有名称为class的CSS类别时,删除该类别,否则,新增该类别,简而言之,有就删,没就加。
$("img").click(function() { $(this).toggleClass("clsImg"); //切换样式类别 })
* 删除类别
removeClass([class]),class名称是可选项,当选该名称时,则删除名称是class的类别,有多个类别时,用空格隔开。如果不选名称,表示删除元素中的所有类别。
$("p").removeClass("clas0"); $("p").removeClass("clas0 clas1"); $("p").removeClass();//删除所有类别
5. 创建节点元素
$()用于动态创建页面元素,如果要创建一个div标记,操作如下:
var $div = $("<div id=’div1’ title=’divtitle’></div>");//创建DOM对象 $(".divR").show().append("sdfsdfsdfsdfsdfdsfds");//插入节点中
6. 插入节点
* 内部插入节点
append(content) 插入content到原有元素的内容的后面
append(function(index,html)) html是当前对象原有的html值
$("div").append(retHtml); //插入内容 function retHtml() { var str = " <b>Write Less Do More</b> "; return str; }
appendto(content) 将一个元素插入到另一个指定元素的内容中
$("span").appendTo($("div"));//将span标记插入到div标记中
* 外部插入节点
after(content)向所选择的元素外部后面插入内容
7. 复制节点
clone([true]),参数可选,如果没有参数true,仅复制元素本身,不复制元素行为。如果带有参数true,复制该元素的全部行为。
$(function() { $("img").click(function() { $(this).clone().appendTo("span"); }) })
8. 替换节点
replaceWith(content)将所有选择的元素替换成指定的内容content
replaceAll(selector)将所有选择的元素去替换指定的selector元素,selector是被替换的元素
二者区别在于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中所选择的元素。
$(function() { //用<span title='replaceWith'>陶国荣</span>替换Span1标签 $("#Span1").replaceWith("<span title='replaceWith'>陶国荣</span>"); //用<span title='replaceAll'>tao_guo_rong@163.com</span>替换Span2标签 $("<span title='replaceAll'>tao_guo_rong@163.com</span>").replaceAll("#Span2"); })
9. 包裹节点
wrap(html) 把所有选择的元素用其它字符串(html)代码包裹起来
$("p").wrap("<b></b>");//所有段落标记包裹在<b></b>中 如:<p>最喜爱的体育运动:<span>羽毛球</span></p> 结果:<b><p>最喜爱的体育运动:<span>羽毛球</span></p></b>
wrapInner(html) 把所有选择的元素的子内容包括文本节点用html代码包裹起来
$("span").wrapInner("<i></i>");//所有段落中的span标记斜体 如:<p>最爱看哪类型图书:<span>网络、技术</span></p> 结果:<p>最爱看哪类型图书:<span><i>网络、技术</i></span></p>
10. 遍历元素
函数:each(function(index))
$(function() { $("img").each(function(index) { //根据形参index设置元素的title属性 this.title = "第" + index + "幅风景图片,alt内容是" + this.alt; }) }) <p> <img src="Images/img05.jpg" alt="第0幅风景画" /> <img src="Images/img06.jpg" alt="第1幅风景画" /> <img src="Images/img07.jpg" alt="第2幅风景画" /> </p>
11. 删除元素
remove([expr])删除指定的元素
empty()清空元素内容,并不删除元素
$(function() { $("#Button1").click(function() { $("ul li").remove("li[title=t]");//删除指定属性的元素 $("ul li").remove();//删除ul 下的所有li元素 $("ul li:eq(1)").remove();//删除节点中第2个元素 }) })
12. 数据删除图片预览
功能:
- table表格样式
- 隔行变色
- 全选/全不选
- 删除元素
- 鼠标移动到图片,在图片右下角显示大图片,即图片的预览效果