Jquery Dom操作

最新推荐文章于 2025-04-10 19:29:14 发布

lchyz89

最新推荐文章于 2025-04-10 19:29:14 发布

阅读量555

点赞数

分类专栏： jquery 文章标签： jquery function html class input div

jquery 专栏收录该内容

12 篇文章

订阅专栏

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 。

    Js代码   
    
  
 <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)

    Js代码   
    
  
 $(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)

    Js代码   
    
  
 $(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是追加类别。

    Js代码   
    
  
 .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类别时，删除该类别，否则，新增该类别，简而言之，有就删，没就加。

    Js代码   
    
  
 $("img").click(function() {   
             $(this).toggleClass("clsImg"); //切换样式类别   
 })   

    * 删除类别
    removeClass([class])，class名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时，用空格隔开。如果不选名称，表示删除元素中的所有类别。

    Js代码   
    
  
 $("p").removeClass("clas0");   
 $("p").removeClass("clas0 clas1");   
 $("p").removeClass();//删除所有类别   

5. 创建节点元素

$()用于动态创建页面元素，如果要创建一个div标记，操作如下：

    Js代码   
    
  
 var $div = $("<div id=’div1’ title=’divtitle’></div>");//创建DOM对象   
 $(".divR").show().append("sdfsdfsdfsdfsdfdsfds");//插入节点中   

6. 插入节点

    * 内部插入节点
    append(content) 插入content到原有元素的内容的后面
    append(function(index,html)) html是当前对象原有的html值

    Js代码   
    
  
 $("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，复制该元素的全部行为。

    Js代码   
    
  
 $(function() {   
             $("img").click(function() {   
                 $(this).clone().appendTo("span");   
             })   
 })   

8. 替换节点

    replaceWith(content)将所有选择的元素替换成指定的内容content
    replaceAll(selector)将所有选择的元素去替换指定的selector元素，selector是被替换的元素
    二者区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。

    Js代码   
    
  
 $(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)代码包裹起来

    Js代码   
    
  
  $("p").wrap("<b></b>");//所有段落标记包裹在<b></b>中   
 如：<p>最喜爱的体育运动：<span>羽毛球</span></p>   
 结果：<b><p>最喜爱的体育运动：<span>羽毛球</span></p></b>   

wrapInner(html) 把所有选择的元素的子内容包括文本节点用html代码包裹起来

    Js代码   
    
  
 $("span").wrapInner("<i></i>");//所有段落中的span标记斜体   
 如：<p>最爱看哪类型图书：<span>网络、技术</span></p>   
 结果：<p>最爱看哪类型图书：<span><i>网络、技术</i></span></p>   

10. 遍历元素

函数：each(function(index))

    Js代码   
    
  
 $(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()清空元素内容，并不删除元素

    Js代码   
    
  
 $(function() {   
                 $("#Button1").click(function() {   
                 $("ul li").remove("li[title=t]");//删除指定属性的元素   
 $("ul li").remove();//删除ul 下的所有li元素   
                $("ul li:eq(1)").remove();//删除节点中第2个元素   
             })   
 })   