锋利的jQuery读书笔记(三)

第三章 jQuery中的DOM操作
1 查找节点
var $para = $(“p”);
var p_txt = $para.attr(“title”);

2 创建节点
var $li_1=$("

");//创建第一个

元素
var $li_2=$("

");//创建第二个

元素
$("ul").append($li_1); //添加到ul节点中
$("ul").append($li_2);
等价写法： $("ul").append($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("");
结果：
你最不喜欢的水果是？
你最不喜欢的水果是？

扫描二维码关注公众号，回复： 5702022 查看本文章

$(“strong”).wrapAll("");
结果：
你最不喜欢的水果是？
你最不喜欢的水果是？
注意：如果被包裹的多个元素中有其他元素，其他元素会被放到包裹元素之后

$(“strong”).wrapInner("");
结果：你最不喜欢的水果是？

8 属性操作
1）获取属性与设置属性
var p_txt = $(“p”).attr(“title”);
var p_txt = $(“p”).attr(“title”,“aaa”);
2）删除属性
$(“p”).removeAttr(“title”);

9 样式操作

1. 获取样式与设置样式
   var p_class = $(“p”).attr(“class”);
   $(“p”).attr(“class”,“myclass”);
   2)追加样式
   
   3)移除样式
   $("p").removeClass("high").removeClass("another"); 等价于：$(“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()用于取得最近的匹配元素
$(e.target).closest("li").css("color","red"); 6）parent(),parents(),closes()的区别  12 css_dom操作 1）$(“p”).css(“color”);
$(“p”).css(“color”，“red”);
$("p").css({"color":“red”,"fontSize":"30px"}); 2）$(“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").position(); var left = position.left; var top = position.top; 3）$(“p”).scrollTop();//获取元素的滚动条距顶端的距离
$(“p”).scrollLeft();//获取元素的滚动条距左侧的距离
//滚动到指定位置
$(“p”).scrollTop();
$(“p”).scrollLeft();