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

锋利的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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值