欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

教程  jQuery教程——操作DOM对象

JQuery 本站 269 0评论

一、DOM操作的概念


Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。

DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。


关于jQuery对象与DOM对象的区别和转换请参考:http://ittxx.cn/view/302


二、jQuery关于节点的操作


DOM中有一个非常重要的功能,就是节点模型,也就是DOM中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的,只需要通过这些节点关系,可以创建、插入、替换、克隆、删除等等一系列的元素操作。

每一个网页都可以用DOM表示出来,每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树:

111.png

JQuery中的DOM操作主要对包括:建【新建】、增【添加】、删【删除】、改【修改】、查【查找】(像数据库操作。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。


1.查找节点


查找节点非常容易,使用选择器就能轻松完成各种查找工作。

例:查找元素节点p返回p内的文本内容$("p").text();

例:查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。

获取p节点:var $pDm=$("p");

输出p节点的title属性:alert($pDm.attr("title"));

获取第2个li节点:var $li_2=$("ul li:eq(1)");

输出第2个li节点的title属性:alert($li_2.attr("title"));

输出第2个li节点的文本内容:alert($li_2.html());


444.jpg


2.创建节点


为了使页面更加智能化,有时我们想动态的在html结构页面添加一个元素标签,那么在插入之前首先要做的动作就是创建节点。


1)创建元素节点

创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。先创建元素点,创建元素节点使用Jquery的工厂函数$()来完成,格式如下:$(html),该方法会根据传入的html字符串返回一个DOM对象,并将DOM对象包装成一个JQuery对象后返回。

创建一个元素节点JQuery代码如下:

$li1=$("<li></li>")

代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下:

$("ul").append($li1); 

添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号,下面创建文本节点。

提示:append()方法是添加DOM节点,方法详见下面的插入节点。 


2)创建文本节点

使用JQuery的工厂函数$()同样能够创建文本节点,创建文本节点的JQuery代码如下:

$li2=$("<li>苹果</li>");

代码返回$li2就是一个由DOM对象包装成JQuery对象,把新建的文本节点添加到DOM树中JQuery代码如下:

$("ul").append($li2);

添加后页面中能看到"·苹果",右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。


3)创建属性节点

创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数$()完成。创建属性节点的JQuery代码如下:

$li3=$("<li title='榴莲'>榴莲</li>"); 

代码返回$li3也是一个由DOM对象包装成JQuery对象,把新建的属性节点添加到DOM树中JQuery代码如下:

$("ul").append($li3);

添加后页面中能看到"·榴莲",右键查看页面源码发现新加的属性节点有title='榴莲'属性。

例:

$(function () {
    var box1 = $('<div id="box1">节点1</div>');//创建节点(在内存中)赋值给变量box1
    var box2 = $('<div id="box2">节点2</div>');//创建节点(在内存中)赋值给变量box2
    $('body').append(box1);                  //将节点插入到<body>元素内部
    $('body').append(box2);                  //将节点插入到<body>元素内部
    //也可以采用链式写法:$('body').append(box1).append(box2);
});

结果:

<body>
    <div id="box1">节点1</div>
    <div id="box2">节点2</div>
</body>


3.插入节点


动态创建的HTML元素不添加到HTML文档中没有实际意义,将新建的节点插入到文档中最简单的方法就是让它成为文档中某个节点的子节点,前面使用了一个插入节点的方法append();它会在元素内部追加新的内容。插入节点还有多个方法,如下:append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

555.jpg

例:

var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了!</li>");

· 元素内部插入子节点

666.jpg

· 元素外部插入同辈节点

666-1.jpg

例:

var$dm1=$("<lititle='葡萄44'>葡萄</li>");
var$dm2=$("<lititle='西瓜55'>西瓜</li>");
var$dm3=$("<lititle='香蕉66'>香蕉</li>");
var$ulDm=$("ul");
var$li_2=$("ulli:eq(1)");
//用2种方式来将创造的第1个节点添加到ul下的最后一个子节点
//$ulDm.append($dm1);
//$dm1.appendTo($ulDm);
//用2种方式来讲创造的第2个节点添加到ul下的第一个子节点
//$ulDm.prepend($dm2);
//$dm2.prependTo($ulDm);
//用2种方式将创造的li节点追加到第2个已经存在的li节点之后
//$li_2.after($dm3);
//$dm3.insertAfter($li_2);
//用2种方式将创造的li节点追加到第2个已经存在的li节点之前
//$li_2.before($dm3);
//$dm3.insertBefore($li_2);


4.删除节点


如果文档中某一个元素多余需要删除,jquery提供了3种删除节点的方法,即remove(),detach()和empty()


1)remove()方法

remove()方法删除所有匹配的元素,传入的参数用于筛选元素,该方法能删除元素中的所有子节点,当匹配的节点及后代被删除后,该方法返回值是指向被删除节点的引用,因此可以使用该引用,再使用这些被删除的元素。

方法如下:$(element).remove();

例:

$span=$("span").remove();

$span.insertAfter("ul");

该示例中先删除所有的span元素,把删除后的元素使用$span接收,把删除后的元素添加到ul后面做为ul的兄弟节点。该操作相当于将所有的span元素以及后代元素移到ul后面。

777.jpg

·remove( )删除之后不保留原有位置


另外remove()也可以使用传递参数来选择性的删除元素。如:

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

$('div').remove('#box');      //只删除 id=box 的 div。


2)detach()方法

888.jpg

$(function () { 
    $('div').click(function () {
        alert('ittxx.cn');
    });
    $('div').detach().appendTo('body');     //保留事件行为的删除
});

注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。


3)empty()方法

empty()方法严格来讲并不是删除元素,该方法只是清空节点,它能清空元素中的所有子节点

方法如下:$(element).empty();

例:

$("ul li:eq(0)").empty();

该示例使用empty方法清空ul中第一个li的文本值。只能下li标签默认符号”·“。

·【empty( )只删除内容,但是保留原有位置


5.修改节点


修改文档中的元素节点可以使用多种方法: 复制节点、替换节点、包裹节点


1)复制节点$(element).clone()

复制节点方法能够复制节点元素,并且能够根据参数决定是否复制节点元素的行为。

方法如下:$(element).clone(true);

例:

$("ul li:eq(0)").clone().appendTo("ul");

该方法复制ul的第一个li元素,并将它追加到<ul>元素中。

$(function () { 
    $('div').click(function () {
        alert('ittxx.cn');                //事件处理点击div这个节点弹出ittxx.cn
    });
    $('div').clone(true).appendTo('body');//复制一个节点添加到HTML中
});

复制节点后第二个复制出来的节点也可以做到事件处理点击div这个节点弹出ittxx.cn。

注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上true参数的话,这个元素附带的事件处理行为也复制出来。


2)替换节点$(element).repalcewith()、$(element).repalceAll()

替换节点方法能够替换某个节点,有两种形式形式实现:replaceWith()和replaceAll()。使用replaceWith方法使用后面的元素替换前面的元素,replaceAll方法使用前面的元素替换后面的元素。

方法如下:$(oldelement).replaceWith(newelement); $(newelement).repalceAll(oldelement);

例: 

$("p").replaceWith("<strong>我要留下</strong>");   //该方法使用strong元素替换p元素。

$("<h3>替换strong</h3>").repalceAll("strong");   //该例使用h3元素替换所有的strong元素。

注意:节点被替换后,所包含的事件行为就全部消失了,需要重新绑定事件。

·【replaceWith( )和replaceAll( )两者的关系类似于append( )和appendTo( )


3)包裹节点$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()

包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等,并且该操作不会破坏原始文档的词义。包裹节点有三种实现形式:wrap(); wrapAll(); wrapInner();


· wrap()方法如下:$(dstelement).wrap(tag);

例:

$("p").wrap("<b></b>");  //该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。


a.wrap(html)向指定元素包裹一层html代码

第一种写法:

$(function () { 
    $('div').wrap('<strong class="xi"></strong>');   //在div外层包裹一层strong
});

结果:

<strong class="xi"><div>节点</div></strong>


第二种写法:自动转化成双标签把div节点包含在里面

$(function () { 
    $('div').wrap('<strong />');
});

结果:

<strong>
   <div>节点</div>
</strong>


第三写法:添加内容

$(function () { 
    $('div').wrap('<strong>西西</strong>');   //包裹的元素可以带内容
});

结果:

<strong>西西
  <div>节点</div>
</strong>


第四种写法多个节点包裹

$(function () { 
    $('div').wrap('<strong><em></em></strong>');
});

结果:

<strong>
  <em>
    <div>节点</div>
  </em>
</strong>


b.wrap(element)向指定元素包裹一层DOM对象节点

<body>
<strong></strong>
<div>节点</div>
</body>

方式1:把<strong></strong>获取到包裹到div里面

$(function () { 
    $('div').wrap($('strong').get(0));
});

结果:

<strong></strong>
<strong>
  <div>节点</div>
</strong>

方式2:

$(function () { 
    $('div').wrap(document.createElement('strong'));  //临时的原生DOM
});


c.wrap(function (index) {})使用匿名函数向指定元素包裹一层自定义内容

$(function () { 
    $('div').wrap(function (index) {
        return '<strong>' + index + '</strong>'
    });
});

结果:

<strong>0
  <div>节点</div>
</strong>


d.unwrap() 移除一层指定元素包裹的内容

$(function () { 
    $('div').wrap('<strong><em></em></strong>');   //创建俩层
    $('div').unwrap();                             //移除一层
});

结果:

<strong>
  <div>节点</div>
</strong>


· wrapAll()方法如下:$(dstelement).wrapAll(tag);

例:

$("p").wrapAll("<b></b>");    //访示例方法使用b标签包裹所有的p元素,所有的p元素标签用一个b标签包裹。

注意:如果被包裹的多个元素之间有其他元素,其他元素会被放到包括元素之后。

<body>
<div>节点</div>
<div>节点</div>
</body>

把俩个<div>节点</div>包含在<strong></strong>里

$(function () { 
    $('div').wrapAll('<strong></strong>');   //所有div外面只包一层strong
});

结果:

<strong>
  <div>节点</div>
  <div>节点</div>
</strong>


· wrapInner()方法如下:$(dstelement).wrapInner(tag);

例:

$("strong").wrapInner("<b></b>");  //该示例使用b标签包裹每个strong元素的子元素


a.wrapInner(html)向指定元素的子内容包裹一层html

$(function () { 
    $('div').wrapInner('<strong></strong>');   ////包裹子元素内容
});

结果:

<body>
  <div>
    <strong>节点</strong>
  </div>
  <div>
    <strong>节点</strong>
  </div>
</body>


b.wrapInner(element) 向指定元素的子内容包裹一层DOM对象节点

$(function () { 
    $('div').wrapInner(document.createElement('strong'));
});

结果:

<body>
  <div>
    <strong>节点</strong>
  </div>
  <div>
    <strong>节点</strong>
  </div>
</body>


c.wrapInner(function (index) {})用匿名函数向指定元素的子内容包裹一层

$(function () { 
    $('div').wrapInner(function (index) {
        return '<strong>' + index + '</strong>'
    });
});

结果:

<body>
  <div>
    <strong>0节点</strong>
  </div>
  <div>
    <strong>1节点</strong>
  </div>
</body>


总结:.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。这两种都是在外层包含,而.wrapInner()在内层包含。


二、jQuery关于元素的操作


在具体设计页面时,经常需要与页面中的元素进行交互性操作。操作页面的元素包括以下几个部分:属性操作、样式操作、设置和获取HTML,文本和值、遍历节点操作、Css-Dom操作。

参考网址:http://www.w3school.com.cn/jquery/jquery_dom_get.asp         


1.属性操作


在jquery中,用attr()方法来获取和设置元素的属性,用removeAttr()方法来删除元素属性。


1)获取和设置属性

999.jpg


2)删除属性


2.样式操作


1)获取和设置样式attr()

10000.jpg


2)追加样式addClass()

jquery提供了专门的addClass()方法来追加样式。

$("p").addClass("anotherstyle");    //给<p>元素追加"anotherstyle"类

在CSS中有以下两条规定:

1)如果给一个元素添加了多个class值,那么相当于合并了它们的样式。

2)如果有不同的class设定了同一个样式属性,则后者覆盖前者。

10000-1.jpg

提示:addClass()和attr()方法设置样式的不同,attr方法把元素的属性名对应的属性值设为方法中的参数值,addClass()则把属性值添加到属性名对应的属性值中。例:已有元素<p class='class1'>元素样式</p>,使用attr()和addClass()分别添加新样式。

$("p").attr("class","another")   // 结果是<p class='another'>元素样式</>

$("p").addClass("class","another")    //结果是<p class='class1 another'>元素样式</p>


3)移除样式removeClass()

1111.jpg

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


4)切换样式toggleClass()

1112.jpg


5)判断是否含有某样式hasClass()

1113.jpg


3.设置和获取HTML,文本和值


1)html()方法

1114.jpg


2)text()方法

1115.jpg


3)val()方法

此方法类似于JavaScript中的value属性,可以用来设置和获取元素的值。无论元素是文本框、下拉框还是单选框,它都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。

方法如下:$(selector).val();

例:

<input type="text" id="userName" value="请输入用户名" />

$("#userName").val();    //获得input元素的值。

$("#userName").val('响马');    //设置input元素的值为'响马'。


$( this). val ("");      //清空需要添加引号,如果val方法括号中不添加任何内容,是获取val值

$(#search). focus ( );     //获得焦点的事件

$(#search). blur ( );      //失去焦点的事件


val()方法的不仅能操作input,最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。

例:在下拉框下的多选赋值应用

<select id="fruits" multiple="multiple">
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</select>

$("#fruits").val(['苹果','香蕉']);    //该示例使select中苹果和香蕉两项被选中。


4.遍历节点操作

参考网址:http://www.w3school.com.cn/jquery/jquery_traversing.asp 

参考手册:http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp 


1)遍历子元素

children()方法:用于取得匹配元素的子元素集合,只匹配子元素不考虑任何后代元素方法如下:$(selector).children();

例:

$("$("body").children().length;    //该示例获得body元素的子元素个数


如果想快速查找DOM树中的这些元素的后代元素,此时可以用find()方法,这也是开发使用频率很高的方法。这里要注意 children与find方法的区别,children是父子关系查找,find是后代关系(包含父子关系)

例:

<script type="text/javascript">
    $("button:first").click(function() {
        //在class="left"的元素中找到后代元素li中的最后一个
        //并加上红色的边框
        var $li = $('li');
        $(".div").find("li:last").css('border','3px solid red')
    })
</script>

<script type="text/javascript">
    $("button:last").click(function() {
        //找到所有p元素,然后筛选出子元素是span标签的节点
        //改变其字体颜色
        var $spans = $('span');
        $("p").find("span").css('color', 'red');
    })
</script>


2)遍历兄弟元素

next()方法:用于匹配元素的下一个兄弟节点,紧邻的同辈元素。方法如下:

$(selector).next();

例:

$("p").next().html();   //该示例获得p元素的下一个兄弟节点的html内容


nextAll()方法:返回被选元素的所有跟随的同胞元素。

例:

$(document).ready(function(){
  $("h2").nextAll();
});    //返回 <h2> 的所有跟随的同胞元素:


nextUntil()方法:返回介于两个给定参数之间的所有跟随的同胞元素。

例:

$(document).ready(function(){
  $("h2").nextUntil("h6");
});   //返回介于 <h2> 与 <h6> 元素之间的所有同胞元素


prev()方法:用于匹配元素的上一个兄弟节点,紧邻的同辈元素。方法如下:

$(selector).prev();

例:

$("ul").prev().text();    //该示例获得ul元素的上一个兄弟节点的文本内容


prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。


siblings()方法:用于匹配目标元素的所有兄弟元素,匹配元素前后所有的同辈元素方法如下:

$(selector).siblings();

例:

 $("p").slibings();    //示例获得p元素的所有兄弟节点元素


3)遍历前辈元素

parent():获取元素的父级元素。

parents():获取元素的祖先元素(所有父级元素)。

例:

$("li:eq(1)").parent().addClass("orange");     //为前辈元素添加样式

$("li:eq(1)").parents().addClass("orange");   //为所有前辈节点添加样式


parentsUntil()方法:返回介于两个给定元素之间的所有祖先元素。

例:

$(document).ready(function(){
  $("span").parentsUntil("div");
});   //返回介于 <span> 与 <div> 元素之间的所有祖先元


5)遍历最近匹配

closest()方法:用来取得最近的匹配元素,首先检查当前元素是否匹配如果匹配则直接返回,否则继续向上查找父元素中符合条件的元素返回,如果没有匹配的元素则返回空JQuery对象。

例:

$("div").closet("li');      //在div元素中,往上查找所有的li元素


parent(),parents()和closet()的区别:

parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了。

· 起始位置不同:.closest开始于当前元素, .parents开始于父元素。

· 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合。

· 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象。

11116.jpg

6)其他遍历

add():为匹配的元素合集添加新的元素。

jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的,如果后期需要再往这个合集中添加一新的元素要如何处理?jQuery为此提供add方法,用来创建一个新的jQuery对象 ,元素添加到匹配的元素集合中。

add()的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用。

例:选择所有的li元素,之后把p元素也加入到li的合集中

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>

处理一:传递选择器

$('li').add('p')

处理二:传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

还有一种方式,就是动态创建P标签加入到合集,然后插入到指定的位置,但是这样就改变元素的本身的排列了

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)


each( ) :规定为每个匹配元素规定运行的函数。

语法:$(selector).each(function(index,element)) ;

Index:选择器的位置

Element:当前的元素

例:

$("img").click(function(){     //给图片添加点击事件
    $("li").each(function(){   //遍历每一个li元素
          var str=$(this).text()+"<br>";   //获取当前li元素中的内容
          $("section").append(str);   //把内容追加到section后面
     })   
});


end( ):结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。

例:

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");   //使用链式操作,检索第一个元素,并且把颜色设置成蓝色;end()方法将对象还原为调用first()之前的状态,之后的last()方法调用的是.gameList li中的元素,而不是调用了first()之后的元素

$(".gameList li:last").css("border","none");


7)遍历 - 过滤

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。


first()方法:返回被选元素的首个元素。

例:

$(document).ready(function(){
  $("div p").first();
});  //选取首个 <div> 元素内部的第一个 <p> 元素


last()方法: 返回被选元素的最后一个元素。

例:

$(document).ready(function(){
  $("div p").last();
});  //选择最后一个 <div> 元素中的最后一个 <p> 元素


eq()方法: 返回被选元素中带有指定索引号的元素。

例:

$(document).ready(function(){
  $("p").eq(1);
});  //索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1)


filter()方法:允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

例:

$(document).ready(function(){
  $("p").filter(".intro");
});  //返回带有类名 "intro" 的所有 <p> 元素


not()方法: 返回不匹配标准的所有元素。与 filter() 相反。

例:

$(document).ready(function(){
  $("p").not(".intro");
});  //返回不带有类名 "intro" 的所有 <p> 元素


5.Css-Dom操作


css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值,语法:

css("propertyname");

例:

将返回首个匹配元素的 background-color 值:

$("p").css("background-color");


设置元素的一个或多个属性。方法如下:

$(selector).css();

例:

$("p").css("color","red");//该示例用于设置元素的颜色属性为红色;
$("p").css("color");     //该示例用于获得元素的color样式值;
$("p").css({"font-size":"30px","backgroundColor","#888888"});//该示例用于设置元素的多个样式。

111-7.jpg

height()对应的还有另外一个方法width(),用法类似。

补充:height() 方法返回元素的实际高度,不包括边框、内边距和外边距。innerHeight() 方法返回元素的高度(包括内边距)。outerHeight() 方法返回元素的高度(包括内边距和边框)。outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。


offset()方法用于获取元素相对当前窗体的偏移量,其返回对象包括两个属性:top和left。方法如下:$(selector).offset()

例:

var offset= $("p").offset(); 
var left=offset.left;
var top=offset.top;    //该示例用于获得元素p的偏移量。

注:offset()只对可见元素有效。


position()方法用于获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖交节点的相对偏移量。与offset一样,其返回对象包括两个属性:top和left。方法如下:

$(selector).position();

例:

var postion = $("p").positon();
var left=positon.left;
var top=positon.top;    //该示例用于获得元素p的位置。


scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法如下:

$(selector).scrollTop();

$(selector).scrollLeft();

例:

var scrollTop=$("p").scrollTop();
var scrollLeft=$("p").scrollLeft();    //该示例用于获得元素的滚动条的位置。

也可以添加参数将元素滚动到指定的位置。

例:

$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);


jQuery中对节点的样式操作,有2种实现方案:

第一种是将节点的样式作为节点的一个属性来进行整体操作

$dm.attr("class","myClass");

第二种方案通过节点的CSSDOM来控制节点的样式

$dm.css("background","red");

$dm.css("background");


总结:

0000.jpg


参考网址:

https://www.cnblogs.com/zyh-club/p/4784006.html 

https://www.cnblogs.com/duan2/p/7894765.html

https://www.cnblogs.com/xixi18/p/8681673.html 

https://blog.csdn.net/wanxue0804/article/details/78453698

https://blog.csdn.net/baidu_29343517/article/details/82709332 

https://blog.csdn.net/qq_17635843/article/details/77348902 

https://segmentfault.com/a/1190000016340631


转载请注明: ITTXX.CN--分享互联网 » jQuery教程——操作DOM对象

最后更新:2019-07-23 13:21:40

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽