第三章 jQuery中的DOM操作
1 查找节点
var $para = $(“p”);
var p_txt = $para.attr(“title”);
2 创建节点
var
("
var ("
li_1); //添加到ul节点中
li_2);
等价写法: li_1).append($li_2);
3 插入节点的方法
4 删除节点
1)var $li = $(“ul li:eq(1)”).remove();
$li.appendTo(“ul”);
当某个节点用remove删除后,该节点的子节点都会被删除。该方法返回值是一个指向已被删除节点的引用,因此可以在以后使用这些元素
2) var $li = $(ul li:eq(1)).detach();//删除元素
$li.appendTo(“ul”);//重新追加此元素,发现之前绑定的事件还在,如果使用remove()方法删除的话,那么之前的绑定将会失效
3) empty方法
$(“ul li:eq(1)”).empty();//获取第二个li元素后,清空此元素里的内容不包括元素本身
5 复制节点
$(“ul li”).click(function(){
$(this).clone(true).appendTo(“ul”);//复制单击的节点,并将他追加到
-
元素中
})
$(this).clone(true).appendTo(“ul”);
在clone方法中传递了一个参数true,它的含义是复制元素的同时复制元素中的绑定事件,因此该元素的副本也具有复制功能
6 替换节点
$(“p”).replaceWith(“你最不喜欢的水果是?”);
等价写法:
$(“你最不喜欢的水果是?”).replaceAll(“p”);
7 包裹节点
$(“strong”).wrap("");
示例代码:
你最不喜欢的水果是?
你最不喜欢的水果是?
$(“strong”).wrap("");
结果:
你最不喜欢的水果是?
你最不喜欢的水果是?
$(“strong”).wrapAll("");
结果:
你最不喜欢的水果是?
你最不喜欢的水果是?
注意:如果被包裹的多个元素中有其他元素,其他元素会被放到包裹元素之后
$(“strong”).wrapInner("");
结果:你最不喜欢的水果是?
8 属性操作
1)获取属性与设置属性
var p_txt = $(“p”).attr(“title”);
var p_txt = $(“p”).attr(“title”,“aaa”);
2)删除属性
$(“p”).removeAttr(“title”);
9 样式操作
- 获取样式与设置样式
var p_class = $(“p”).attr(“class”);
$(“p”).attr(“class”,“myclass”);
2)追加样式
3)移除样式
(“p”).removeClass(“high another”);
$(“p”).removeClass(“high another”);//移除p元素的所有class
4)切换样式
$toggleBtn.toggle(function(){
//显示元素
},function(){
//隐藏元素
})
示例代码:
aaaaaaaa
$("p").toggleClass("another");//class的值会在myClass和myClass another中重复切换 5)判断是否含有某个样式 $("p").hasClass("another");10 设置和获取HTML、文本和值
1)var p_html = $(“div”).html();
$(“div”).html(“
aaa
”);2)var p_text = $(“p”).text();
$(“p”).text(“aaa”);
3)val()的用法
示例代码:
选择一号 选择二号 选择三号 选择1号 选择2号 选择3号 选择4号 操作: $("#single").val("选择二号"); $("#muliple").val("选择2号","选择3号"); $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); 等价写法: $("#single option:eq(1)").attr("selected",true); $("[value=radio2]:radio").attr("checked",true);
11遍历节点
1)children()方法只考虑子元素而不考虑其它后代元素
2)var $p1 = $(“p”).next();//取出紧邻
元素后的同辈元素,包括该元素的子元素
3)var $ul = $(“ul”).prev();//取出紧邻
-
元素前的同辈元素
4)siblings()用于取得元素前后所有的同辈元素
5)closest()用于取得最近的匹配元素
(“p”).css(“color”);
$(“p”).css(“color”,“red”);
(“p”).height();
$(“p”).height(100);
$(“p”).height(“10em”);
与height对应的方法有width()
13 CSS_DOM常用的方法
1) offset(),获取元素在当前窗口的相对偏移,其中返回的对象包含两个属性,即top和left
var offset = $(“p”).offset();
var left = offset.left;
vat top = offset.top;
2)position()方法
var position = (“p”).scrollTop();//获取元素的滚动条距顶端的距离
$(“p”).scrollLeft();//获取元素的滚动条距左侧的距离
//滚动到指定位置
$(“p”).scrollTop();
$(“p”).scrollLeft();