锋利的Jquery【读书笔记】 -- 第三章 jQuery中的DOM操作

最新推荐文章于 2019-03-28 23:20:22 发布
最新推荐文章于 2019-03-28 23:20:22 发布
阅读量776 收藏 2
点赞数
分类专栏： 锋利的jQuery【读书笔记】 文章标签： jquery dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherishlyf/article/details/48416951
版权

锋利的Jquery【读书笔记】 – 第三章 jQuery中的DOM操作

jQuery中的DOM操作

查找节点
  • 查找元素节点
var $li = $("ul li:eq(1)");       //获取<ul>里第二个<li>节点
var li_txt = $li.text();       //获取第2个<li>元素节点的文本内容
alert(li_txt);                  //打印文本内容
  • 查找属性节点

使用attr()方法 来获取他的各种属性的值。attr()方法的参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字，例如：

var $para = $("p");                     //获取<p>节点
var p_txt = $para.attr("title");        //获取<p>节点属性"title"
alert(p_txt);                           //打印出title属性
创建节点
  • 创建元素节点

$(html)方法 会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象返回。
创建两个<li> 元素：

var $li_1 = $("<li></li>");     //创建第一个<li>元素
var $li_2 = $("<li></li>");     //创建第二个<li>元素

将连个元素插入文档，使用 append()等方法：

$("ul").append($li_1);     //添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2);     //可以采用链式写法：$("ul").append($li_1).append($li_2)
  • 创建文本节点
var $li_1 = $("<li>香蕉</li>");       //创建一个<li>元素，包括元素节点和文本节点
                                    //香蕉就是文本节点
var $li_1 = $("<li>雪梨</li>");       //创建一个<li>元素，包括元素节点和文本节点
                                    //雪梨就是文本节点
$("ul").append($li_1);             //添加到<ul>节点中，使之显示
$("ul").append($li_1);                //添加到<ul>节点中，使之显示

注意无论$(html) 中的HTML多么复杂，都可以用相同的方式创建。
例如：$("<li><em>这是</em><b>一个</b><a href="#">复杂的组合</a></li>")

  • 创建属性节点
var $li_1 = $("<li title='香蕉'>香蕉</li>");       //创建一个<li>元素，包括元素节点和文本节点
                                                //香蕉就是文本节点
                                                //其中title='香蕉' 就是创建的属性节点
var $li_1 = $("<li title='雪梨'>雪梨</li>");       //创建一个<li>元素，包括元素节点和文本节点
                                                //雪梨就是文本节点
                                                //其中title='雪梨'，就是创建的属性节点
$("ul").append($li_1);                //添加到<ul>节点中，使之显示
$("ul").append($li_1);                //添加到<ul>节点中，使之显示
插入节点

插入节点的方法：

append()方法

向每个匹配的元素内部追加内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").append("<b>你好</b>");

结果：

<p>我想说：<b>你好</b></p>
appendTo()方法

将所有匹配元素追加到指定的元素中。$(A).appendTo(B) 将A追加到B

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>")appendTo("p");

结果：

<p>我想说：<b>你好</b></p>
prepend()方法

向每个匹配的元素内部前置内容。

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").prepend("<b>你好</b>");

结果：

<p><b>你好</b>我想说：</p>
prependTo()方法

将所有匹配元素前置到指定的元素中。$(A).prependTo(B) 将A前置到B
HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>")prependTo("p");

结果：

<p><b>你好</b>我想说：</p>
after()方法

在每个匹配的元素之后插入内容。
HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").after("<b>你好</b>")

结果：

<p>我想说：</p><b>你好</b>
after()方法

在每个匹配的元素之后插入内容。
HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").after("<b>你好</b>")

结果：

<p>我想说：</p><b>你好</b>
insertAfter()方法

将所有匹配的元素插入到指定元素的后面。
HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").insertAfter("p")

结果：

<p>我想说：</p><b>你好</b>
before()方法

在每个匹配的元素之前插入内容。
HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").before("<b>你好</b>")

结果：

<b>你好</b><p>我想说：</p>
insertBefore()方法

将所有匹配的元素插入到指定元素的前面。
HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").insertBefore("p")

结果：

<b>你好</b><p>我想说：</p>
删除节点

jQuery提供了3种删除节点的方法：remove()，detach()和 empty()。

  • remove()方法

    作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
    例如：

$("ul li:eq(1)").remove();     //获取第2个<li>标签，并删除

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法返回值是一个指向已被删除的节点的引用，因此可以在以后使用这些元素。

比如：

var $li = $("ul li:eq(1)").remove();         //获取第2个<li>元素节点后，并删除
$li.appendTo("ul");                            //把刚才删除的节点又重新添加到<ul>元素里

直接使用appendTo()方法可以简化以上代码：

$("ul li:eq(1)").appendTo("ul");
// appendTo()方法也可以用来移动元素
// 移动元素时首先从文档上删除这个元素，然后又将这个元素插入到文档中的指定节点

另外，remove()方法也可以通过传递参数来选择性得删除元素：

$("ul li").remove("li[title!=菠萝]");
        // 将<li>中属性不等于“菠萝”的<li>元素删除
  • detach()方法

detachf()方法和remove()一样，也是从DOM中去掉所有的元素。但是，这个方法不会把匹配的元素从jQuery对象中删除，因此将来可以再使用这些匹配元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

  • empty()方法

该方法是清空节点，它能清空元素中所有的后代节点

复制节点

如果单击<li> 元素后需要再复制一个<li> 元素，可以使用clone()方法：

$("ul li").click(function(){
    $(this).clone().appendTo("ul");    //复制当前单击的节点，并将它追加到<ul>元素中
})

复制节点后，被复制的节点并不具备任何行为。如果需要新元素也具有复制功能(如:单击事件),可以：

$(this).clone(true).appendTo("body");      //注意参数ture

在clone()方法中添加参数true，它的含义是复制元素的同时复制元素的绑定事件。

替换节点

replaceWith()方法和replaceAll()
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。比如

将<p title="请选择你喜欢的水果">你最喜欢的水果</p>
替换成
<strong>你最不喜欢的苹果是</strong>

$("p").replaceWith("<strong>你最不喜欢的苹果是</strong>");

replaceAll()方法与replaceWith()方法操作相反：

$("<strong>你最不喜欢的苹果是</strong>").replaceAll("p");

注意：如果在替换前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

包裹节点

如果想要把某个节点用其它标记包裹起来，jQuery提供了相应的方法，wrap()方法：

$("strong").wrap("<b></b>");   //用<b></b>把<strong></strong>元素包裹起来

得到的结果：

<b><strong>你最喜欢的水果</strong></b>;
  • wrapAll()方法

HTML元素如下：

<strong>你最欢的水果？</strong>
<strong>你最欢的水果？</strong>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</i>
</ul>

用wrap()方法包裹，代码：

$("strong").wrap("<b></b>");

得到的结果是：

<b><strong>你最欢的水果？</strong></b>
<b><strong>你最欢的水果？</strong></b>

使用 wrapAll()方法包裹元素：

$("strong").wrapAll("<b></b>");

得到的结果是：

<b>
    <strong>你最欢的水果？</strong>
</b>
  • wrapInner()方法

该方法将每个匹配的元素的子内容（包括文本节点）用其它结构化的标记包裹起来。比如：

$("strong").wrapInner("<b></b>");

结果：

<strong><b>你最喜欢的水果是？</b></strong>
属性操作

attr()方法来获取属性和设置元素属性，removeAttr()方法来删除元素属性。

  • 获取属性和设置属性
var $para = $("p");        //获取<p>节点
var p_txt = $para.attr("title");   //获取<p>元素节点属性title

设置属性，使用同样的方法，只是传递两个参数，即属性名和对应的值。

$("p").attr("title","your title");     //设置单个属性值

一次性为同一个元素设置多个属性，可以使用：

$("p").attr({
"title" : "your title" ,
"name" : "test"
});         //将一个“名/值”形式的对象设置为匹配元素的属性
  • 删除属性
    删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。
    删除<p> 元素的title属性：
$("p").removeAttr("title");        //删除<p>元素的属性title
样式操作
获取样式和设置样式

使用attr()方法来获取元素的class

var p_class = $("p").attr("class");        //获取<p>元素的class

设置p元素的class属性：

$("p").attr("class","high");       //设置<p>元素的class为"high"
  • 追加样式
    addClass()方法来追加样式
$("p").addClass("another");        //给<p>元素追加"another"类

CSS中有两条规定：

  • 如果给一个元素添加多了class值，那么久相当于合并了他们的样式。
  • 如果有不同的class设定了同一样式，在后者覆盖前者
移除样式

上面为<p> 追加了anther样式。此时代码变成：

<p class="high another">你最喜欢的水果是？</p>

移除其中的值为”high”的class

$("p").removeClass("high");        //移除其中的“high”class

输出结果为：

<p class="another">你最喜欢的水果是？</p>

两个class都删除，就要使用两次removeClass()：

$("p").removeClass("high").removeClass("another");

或者：

$("p").removeClass("high another");

如果不带参数，就是将class的值全部移除

$("p").removeClass();      //移除<p>元素的所有class
切换样式

toggle()方法：

$toggleBtn.toggle(function(){  //toggle(),交替一组动作
    //显示元素   代码③
}，function(){
    //隐藏元素   代码④
})

toggle()方法 的作用是交替执行代码③和代码④两个函数，
如果元素原来是显示的，则隐藏它；
如果原来是隐藏的，则显示它。

toggleClass()方法，控制样式上的重复切换。
如果类名存在则删除它，如果类名不存在则添加它。

判断是否含有某个样式

hasClass()方法可以判断元素中是否含有某个class，如果有，返回true，否则返回false。

$("p").hasClass("another");

等价于：

$("p").is(".another");
设置和获取HTML、文本和值
html()方法

此方法类似于JavaScript中的 innerHTML属性，可以用来读取或设置某个元素中的HTML内容。

<p><strong>你最喜欢的水果是？</strong></p>

用html()方法 对p元素进行操作：

var p_html = $("p").html();
alert(p_html);

也可以用html()方法 设置某元素的HTML代码，需要传递婴参数，参数为HTML代码：

$("p").html("<strong>你最喜欢的水果？</strong>")
text()方法

类似于JavaScript中的innerText属性，读取或者设置某个元素中的文本内容。
使用方法和 html()方法类似。

val()方法

类似JavaScript中的value属性，可以用来设置和获取元素的值。
无论是元素或者是文本框，下拉列表还是单选框，都是返回。
HTML代码：

    <input type="text" id="address" value="请输入邮箱地址">
    <input type="text" id="password" value="请输入邮箱密码">
    <input type="button" value="登录">

当鼠标获取鼠标焦点时，如果地址框的值为“请输入邮箱地址”，则将地址框中的值清空：

$("#address").focus(function(){
    var txt_value = $(this).val();    //获取文本框的值
    if(txt_value == "请输入地址"){
        $(this).val("");
    }
})

当地址失去鼠标焦点时，如果地址为空，将地址框的值设为“请输入邮箱地址”：

$("#address").blur(function(){
    var txt_value = $(this).val();
    if(txt_value == ""){
        $(this).val("请输入邮箱地址");
    }
})

注意：focus() 相当于JavaScript中的 onfocus() 方法，作用是处理获得焦点时的事件。
blur() 相当于JavaScript中 的 onblur()方法，作用是处理失去焦点时的事件。

表单元素可以使用 defaultValue属性来实现同样的功能：

$("#address").focus(function(){
    var txt_value = $(this).val()
    if(txt_value == this.defaultValue){
        $(this).val("");   
    }
})

this指向当前文本框，“this.defaultValue”就是当前文本框的默认值。

遍历节点
children()方法

获取匹配元素的子元素集合

只考虑子元素，不考虑其它后代元素

next()方法

获取匹配元素后面紧邻的同辈元素

prev()方法

取得匹配元素前面紧邻的同辈元素

siblings()方法

取得匹配元素前后所有的同辈元素

closest()

取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配直接返回元素本身，如果不匹配向上查找父元素，逐级向上直到找到匹配元素。

parent()方法和parents()方法

parent()方法 获取集合中每个匹配元素的父级元素
parent()方法从指定类型的直接父级节点开始寻找，返回一个元素节点

parents()方法 获取集合中每个匹配元素的祖先元素
parents()方法，找到第一个父节点时并没有停止，而是继续寻找，最后返回多个父节点

CSS-DOM操作

读取和设置style对象的各种属性。
获取元素的样式属性：

$("p").css("color");       //获取<p>元素的样式颜色

设置某个元素的单个样式，

$("p").css("color","red");

设置多个样式属性：

$("p").css({"fontSize" : "30px", "backgroundColor" : "#888888"});

透明度的设置：

$("p").css("opacity","0.5");       //设置为半透明

设置某个元素的 height属性：

$("element").css("height");
或者：
$("element").height();

height()方法，如果传递的值是一个数字，则默认单位为px；
如果要用其它单位，必须传递字符串：

$("p").height(100);            //设置<p>元素的高度值为100px
$("p").height("10em");     //设置<p>元素的高度为 10em

width()方法和height()方法类似

$("p").width();
$("p").width("400px");

元素定位有以下几种常见的方法：

offenset()方法

他的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left

var offset = $("p").offset();      //获取offset值
var left = offset.left;             
var right = offset.right;
position()方法

获取元素相对于最近一个position样式属性设置为 relative 或者absolute祖父节点的相对偏移,返回的对象也包含两个属性,top和left

var position = $("p").position();      //获取offset值
var left = position.left;               
var right = position.right;
scrollTop()方法和scrollLeft()方法

两个方法分别获取元素的滚动条距顶端的距离和距离左侧的距离

var $p = $("p");
var scrollTop = $p.scrollTop();            //获取元素的滚动条距离顶端的距离
var scrollLeft = $p.scrollLeft();      //获取元素的滚动条距离左侧的距离

这两个方法可以指定一个参数，控制元素的滚动条滚动到指定位置。

$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);
CherishLyf
关注
专栏目录
Jquery实战_读书笔记1—选择jQuery
10-29
近期公司积极组织我们这些开发人员学习进步，督促我们学习更多的技术来提高自己。为此我选择了jQuery作为我学习的方向，同时我也是想将我的学习心得分享给大家，以后我会不断的更新一系列jQuery方面的学习纪要，帮助大家学习。
jQuery学习笔记[1] jQuery中的DOM操作
12-11
在jQuery中，DOM操作更是核心功能之一，使得开发者能更加方便地操作网页元素。这篇学习笔记主要探讨了DOM的三个方面：DOM Core、HTML-DOM和CSS-DOM，并且介绍了jQuery如何简化这些操作。 1. DOM Core是DOM的基础...
jquery读书笔记（一）
liNewman的博客
09-21 114
jquery读书笔记（一） JQuery对象与DOM对象之间的转换 一般我们把JQuery对象的变量前面用$,DOM对象则不用。 var $div = $('#abc'); // jQuery对象 //返回：[&lt;div id="abc"&gt;...&lt;/div&gt;]...
《锋利的jQuery》的读书笔记 -- jQuery应用实例
我飞故我在的专栏
11-12 1033
jQuery应用实例
jQuery读书笔记
励志的蜗牛
09-15 902
一、选择符1.选择所有带title属性的链接：$('a[@title]')。2.取得包含一个ol的元素的所有div元素：$('div[ol]')。3.属性选择符允许以类似正则表达式的语法标识字符串的开始（^）和结尾（$）,使用星号（*）表示字符串中的任意位置。4.取得所有电子链接：$('a[@href^="mailto:"]')。5.取得所有指向PDF文件的链接：$('a[@href$=".pdf"]')。6.取得所有内部链接：$('a[@href*="mysite,com"]')。7.从匹配的带有myDi
jQuery学习笔记之jQuery的DOM操作
10-28
样式操作在jQuery中同样便捷，能够通过jQuery方法轻松地获取和设置元素的CSS样式。 1. 获取和设置样式 使用`.css()`方法可以获取和设置元素的CSS样式。例如，获取`p`元素的`color`样式为`$("p").css("color")`，...
jQuery学习笔记之DOM对象和jQuery对象
12-03
在上面的示例代码中，`$(document).ready(function() {...})`确保了在DOM加载完成后执行内部的函数，这是jQuery中确保DOM就绪的常见方法。在该函数内部，`var domObj = document.getElementsByTagName("h3")[0]`获取...
jquery 学习笔记源码 1-3章
04-06
"3jquery常规选择器1-4"深入介绍了jQuery的各种选择器，这些选择器使得选取DOM元素变得更加灵活和精确。基本选择器（ID选择器、类选择器、标签选择器）已经提及，更进一步，还有层次选择器（如后代选择器、子元素...
锋利的jQuery读书笔记(一)
musi_m的博客
03-28 191
第一章 认识Jquery 1 $(document).ready(function(){ alert(“hello world”); }); 简化写法： $(function(){ }); 2 $("#table>tbody>tr:has(td:has(:checkbox:enabled))").css(“background”,“red”); 解释：在一个id为table的表格的tb...
锋利的jquery读书心得
jiaxiaofeng521016的专栏
07-26 690
$(document).ready(function(){ $(".has_children").click(function(){ $(this).addClass("hover") //为当前的元素增加hover类 .children("a").show("").end() //获取当前元素的子节点并且显示；重新定位到上次操作的元素； .siblings().removeClass
读书笔记_锋利的jQuery
trace的技术备忘专栏
10-03 1406
代码风格:1.同一对象2.较多操作建议每行写一个3.较多操作或按功能块换行 区分:JQ对象和DOM对象1.JQ对象是通过JQ包装DOM对象后产生的对象2.变量定义风格:JQ:$variable  ; DOM: variable3.JQ对象转换为DOM对象   1)JQ对象是一个数组对象,可以通过[index]得到DOM      $("#A")[0];  
编程学习读书笔记之jQuery函数应用学习心得（图）
minemi的博客
07-23 166
编程学习读书笔记之jQuery函数应用学习心得（图） jQuery.extend() 函数 用于将一个或多个对象的内容合并到目标对象。  1.当提供两个或多个对象给.extend()，对象的所有属性都添加到目标对象（target参数）;2.如果只为.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuer...
我的读书心得
u012348692的博客
04-24 2437
其实这一篇是去年世界读书日那一天写的日记。因为感觉近段时间博文写的太少啦，所以把这篇发上来充个数，也顺便应个景，毕竟昨天是今年的世界读书日嘛，嘻嘻^^。最近读书仿佛开窍了一样，觉得好像掌握了些门道，较之以往更能发挥书的价值，于是忍不住反思了一下自己过往的读书经历。（现在想想，其实也不算开窍，只是稍稍变得有经验有技巧了一点而已，人啊，总喜欢把好的事情夸大化哦）以往接触的书好像也不少，许多好书草草的读过
JQuery获取与设置HTML元素的值value
dashuaizhu6400的博客
05-07 802
JQuery获取与设置HTML元素的值value 作者：简明现代魔法图书馆 发布时间：2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查询，努力地为您提供了提供了这个页面。 val()方法 此方法类似于JavaScript中的value属性，可以用来设置和获取元索的值。无论元素是文本框，下拉列表还足单选...
jQuery基础之jQuery的DOM操作
wustrive_2008的博客
03-16 1413
为了能全面地讲解DOM操作，首先需要构建一个网页。因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树。  HTML:       dom            你最喜欢的水果是?              苹果        橘子        菠萝               一，查找节点 a,查找元素节点 var $l
第3章 ,jQuery中的DOM操作
weixin_30848775的博客
08-21 240
3.1 DOM操作的分类 一般来说，DOM操作分为3个方面，即DOM Core(核心)、HTML-DOM和CSS-DDM. 1.DOM Core DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。 JavaScript中的getElme...
JQuery学习心得
奋斗的小青年
06-28 6623
用了一周左右的时间学习完了JQuery。怎么说呢，感觉挺简单的，再加上学习的时候都是以例子来作为引子，感觉很有意思，学习起来也带劲。 JQuery是一个轻量级的JavaScript库，极大地简化了JavaScript编程，而且也很容易学习。JQuery的宗旨是“用最少的代码来做更多的事情”。从这个宗旨里面也可以感受到它的简洁明了，易用的特点。 JQuery通过对JavaScript进行了封装，
jQuery学习笔记：DOM操作与选择器
"jQuery 学习笔记" jQuery 是一个流行的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果和Ajax交互等多个方面的工作。以下是对 jQuery 的详细讲解： 1. **选择器与对象** - `$()` 和 `jQuery()` 是等价的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值