Jquery Dom操作

back>>  

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'>[e-mail]</span>替换Span2标签 
            $("<span title='replaceAll'>[e-mail]</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表格样式
- 隔行变色
- 全选/全不选
- 删除元素
- 鼠标移动到图片，在图片右下角显示大图片，即图片的预览效果