关闭

JQuery——DOM操作总结

标签: 操作bodydom元素div
216人阅读 评论(0) 收藏 举报
分类:

一.创建节点
1.创建元素

$( function(){
    var $div = $("<div></div>");   //创建div元素
    $("body").append($div);  //添加到body下
})

2.输入文本

$(function(){
    var $div = $("<div>DOM</div>");
    $("body").append($div);
})
//js下用
var txt = document.createTextNode("DOM");
div.appendChild(txt);...执行效率高

3设置属性

$(function(){
    var $div = $("<div title="盒子"></div>");
    $("body").append($div);
})
//可见jQuery简便,但效率低

二.插入内容
1.内部:

  • append():每个元素内部加内容content
  • appendTo():append用法的颠倒
  • prepend():每个元素内部前置内容
  • prependTo():prepend的颠倒

2.外部:

  • after():元素后面
  • before():元素前面
  • insertAfter():所有元素插入到另一个指定的元素集合后面
  • insertBefore():。。。前面

3.删除:

  • remove():从DOM中删除元素(不保留数据)
  • empty():删除所有匹配的元素的子元素
  • detach():从DOM中删除所有匹配元素(会保留数据,再移回DOM时用这个)

三.克隆内容

$(function(){
    $("b").click(function(){
        $(this).toggleClass("off");
    });
    $("b").clone(true).insertAfter("p");
})
//clone(true)复制<b>标签,并把它复制到<p>后,同时保留该标签默认的事件处理函数

四.替换内容

$(function(){
    $("button").click(function(){
        $(this).replaceWith("<div>"+$(this).text()+"</div>");
    });
})
//把当前按钮换成div元素+按钮
//replaceAll和replaceWith操作相反

五.包裹内容
1.外包:

$(function(){
    $("a").wrap("<li></li>");
})_
//<a>被一个<li>元素包裹

2.内包:

$(function(){
    $("a").wrap("<li></li>");
    $("body").wrapInner("<ul></ul>");
})_
//<a>被一个<li>元素包裹

3.卸包:

$(function(){
    $("button").toggle(function(){
         $("a").wrap("<li></li>");
    },function(){
            $("a").unwrap();
    });
})

六.设置属性
1.prop

$(function(){
    $("input").prop({
        disabled:true
     });
})
//prop大多用于设置disabled和checked等是或否的属性

2.attr

$(function(){
    $("img").attr("src",function(index){
        return "images/icon("+(index+1)".png";
    })
})

3.删除属性:
removeProp、removeAttr

七.类操作

  • addClass()、removeClass()
  • 切换类:toggleClass(…)
  • 判断类:hasClass(…)

八.读写文本和值

1.读写html

$(function(){
    var s = $("div").html();
    $("p").html(s);
})
//s保存div的值,再传给p

2.读写文本
(function(){  
    var s =
(“div”).text();
$(“p”).text(s);
})
//访问div内容,写入到p中

3.读写值

$(function(){
    $("input").focus(function(){
         if($(this).val()=="请输入文本")$(this).val("");
    })
})
//如果文本的值是。。。就设为空“”

九.定位:

offset就对定位
position相对定位

var o1 = $("div").eq(0).position();
//获取o1的相对偏移位置
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11144次
    • 积分:482
    • 等级:
    • 排名:千里之外
    • 原创:39篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章存档