`

juqery操作dom元素

阅读更多
一、添加节点

$(selector).append()  

     向selector选择的元素的里面插入参数参数所指定的dom元素,插入的位置在最后面。参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

     如:$(selector).append(“<b>你好</b>”);

     或   $dom=$(“<b>你好</b>”);   $(selector).append($dom);


$(HTML).appendTo(selector)

     向selector选择的元素里面插入$(HTML)创建的DOM元素,插入的位置在最后面


$(selector).prepend()

    向selector选择的元素的里面插入参数参数所指定的dom元素,插入的位置在最前 面。参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

     如:$(selector).prepend(“<b>你好</b>”);

     或   $dom=$(“<b>你好</b>”);   $(selector).prepend($dom);



$(HTML).prependTo(selector)

     向selector选择的元素里面插入$(HTML)创建的DOM元素,插入的位置在最前面



$(selector).after()

   在selector选择的元素后面(而不是里面)插入参数所指定的dom元素,参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

   如:$(selector).after(“<b>你好</b>”);

  或   $dom=$(“<b>你好</b>”);   $(selector).after($dom);



$(HTML).insertAfter(selector)

   在selector选择的元素后面插入$(HTML)创建的DOM元素



$(selector).before()

   在selector选择的元素前面(而不是里面)插入参数所指定的dom元素,参数可以是直接的HTML字符串,也可以是由$()函数创建的DOM元素

   如:$(selector).before(“<b>你好</b>”);

  或   $dom=$(“<b>你好</b>”);   $(selector).before($dom);



$(HTML).insertBefore(selector)

   在selector选择的元素前面插入$(HTML)创建的DOM元素

-----------------------------------------------------------------------------------------


二、删除节点

  $(selector).remove()

   删除selector选择的元素,remove()里还可以用另外的selector作为参数来再次过滤要删除的元素

----------------------------------------------------------------------------------------



三、清空节点

  $(selector).empty()

清空selector选择的元素里面的所有内容



-------------------------------------------------------------------------------------------



四、复制节点

  $(selector).clone()

复制selector选择的元素,如果在这个元素上注册的事件也要一并复制,则使用$(selector).clone(true)

--------------------------------------------------------------------------------------------


五、替换节点

  $(selector).replaceWith(HTML)

   把selector选择的元素替换成指定的HTML,或是由$()创建的DOM元素

  $(HTML).replaceAll(selector)

   把selector选择的元素替换成$(HTML)创建的元素

-----------------------------------------------------------------------------------------------------



六、包裹节点

    $(selector).wrap(HTML)

    用HTML所创建的节点把selector选择的元素包裹起来

   如:$("p").wrap("<div></div>")        结果为<div> <p></p> </div>

   

    $(selector).wrapInner(HTML)

    用HTML所创建的节点把selector选择的元素的后代元素包裹起来

-------------------------------------------------------------------------------------------------------------



七、节点属性获取或设置


   $(selector).attr("attribute")

    获取selector选择的元素的attribute属性

   $(selector).attr("attribute","value")

   将selector选择的元素的attribute属性设为value

   $(selector).removeAttr("attribute")

   移除selector选择的元素的attribute属性



--------------------------------------------------------------------------------



八、样式操作

   $(selector).addClass("classname")

   在selector选择的元素的原有的基础上追加一个calss样式

   $(selector).removeClass("classname")

   在selector选择的元素上移除classname样式,如果要移除该元素上的所有class样式,则使用$(selector).removeClass()


  $(selector).toggleClass("classname")

  在selector选择的元素上交替的增加classname样式或删除classname样式,每触发一次,就交替一次

  

  $(selector).hasClass("classname")

  判断在selector选择的元素上是否有classname样式,有则返回true,否则返回false



-----------------------------------------------------------------------------------------------

九、设置或获取HTML和文本的值

  $(selector).html()

  获取selector选择的元素的innerHTML的值

  $(selector).html("HTML")

将selector选择的元素的innerHTML的值设为HTML



$(selector).text()

获取selector选择的元素的innerText/contentText的值

$(selector).text("TEXT")

将selector选择的元素的innerText/contentText的值设为TEXT



$(selector).val()

获取selector选择的元素(一般为文本框、下拉列表、单选框等)的值

$(selector).val("value")

将selector选择的元素的值设为value



---------------------------------------------------------------

十、遍历节点



$(selector).children()

获取selector选择的元素的子元素的集合,注意该方法不会考虑后代元素

$(selector).next()

获取selector选择的元素的下一个兄弟节点

$(selector).prev()

获取selector选择的元素的前一个兄弟节点

$(selector).siblings()

获取selector选择的元素的前后的所有兄弟节点

$(selector).closet("html标签")

例如:$(selector).closet("li")  ,如果li匹配selector则返回selector,否则逐级向selector的父级查找直到找到匹配的元素,没找到则返回一个空jquery对象

……



------------------------------------------------------------------------

十一、CSS操作



$(selector).css("style")

获取selector选择的元素的style样式,不论是内联的还是外部的样式都可以获取,注意style最好写成驼峰的形式,以下也一样

$(selector).css("style","value")

设置selector选择的元素的css样式

$(selector).css({"style1":"value1","style2":"value2",……})

设置多个css样式

可以使用css(opacity[,value])来获取和设置透明度,范围为0~1


$(selector).height()

获取selector的高度,单位为PX

$(selector).height(value)

设置selector的高度,如果不带单位则默认为PX,也可以带上单位

width也有相同的方法



$(selector).offset()

获取selector的offsetLeft和offsetTop的值,结果是两个值,$(selector).offset().left  、  $(selector).offset().top分别来引用这两个值

$(selector).position()

获取selector相对于最近一个设置了动态定位的left和top值,结果有两个值,引用方法同上

$(selector).scrollTop()

获取selector的scrollTop值

$(selector).scrollTop(value)

设置selector的scrollTop值



scrollLeft也有相同的方法
分享到:
评论

相关推荐

    JQuery操作DOM元素

    该文档包含了样式操作,内容及Value属性值操作,节点操作,节点属性操作,节点遍历操作的基础知识,也许不够详细,但内容也应该足够平时操作了,希望能帮到大家

    JQuery DoM和ajax 操作

    4. **$.load()**: 用于从服务器加载HTML片段,并将其插入到指定的DOM元素中。 5. **AJAX事件**: `beforeSend()`, `success()`, `error()`, `complete()`等,允许我们在请求的不同阶段进行自定义操作。 6. **全局...

    探析在jQuery框架下操作HTMLDOM元素.pdf

    探析在jQuery框架下操作HTML DOM元素 ... ...它将网页中的各个元素都看作一个个对象,从而使网页中的元素也可以被...jQuery操作HTML DOM元素能够极大地提高开发效率和开发体验,使得开发者能够更方便地实现复杂的功能。

    Jquery+dom+easyUI教程

    2. DOM 操作:jQuery 提供了一整套方法来操作 DOM 元素,包括添加、删除和修改元素。例如,`append()`用于在元素内部追加内容,`remove()`用于删除元素,而`attr()`则用来设置或获取元素的属性值。此外,`html()`和`...

    jQuery操作DOM解析

    **jQuery操作DOM解析** 在Web开发中,DOM(Document Object Model)是HTML或XML文档的结构化表示,它允许程序和脚本动态更新、添加、删除和改变元素。jQuery库简化了JavaScript对DOM的操作,提供了丰富的API来处理...

    jQuery 实现DOM元素拖拽交换位置的实例代码

    ### jQuery 实现 DOM 元素拖拽交换位置的原理和技术点 在网页中实现 DOM 元素的拖拽功能能够让用户通过直观的方式进行元素的排序、移动等操作,从而提升网站的交互性和用户体验。本文介绍利用 jQuery 库来实现 DOM ...

    使用jQuery监听DOM元素大小变化

    在JavaScript和jQuery的世界里,有时候我们需要监听DOM元素的尺寸变化,以便在元素尺寸改变时执行特定的操作。jQuery的`resize`事件通常用于监听窗口大小的变化,但jQuery还提供了一种扩展,使得我们可以将`resize`...

    jQuery鼠标拖动旋转DOM元素插件

    **jQuery鼠标拖动旋转DOM元素插件——Propeller.js** Propeller.js是针对jQuery的一款高效插件,专门用于实现用户可以通过鼠标拖动来旋转页面上的DOM元素,为交互设计提供了更多的可能性。这款插件的核心功能在于它...

    jQuery 创建Dom元素

    "jQuery 创建Dom元素" jQuery 是一个流行的 JavaScript 库,提供了许多有用的功能来操作 DOM 元素。在这篇文章中,我们将讨论如何使用 jQuery 创建 DOM 元素。 什么是 DOM 元素? 在 HTML 文档中,每个元素都是...

    《jQuery权威指南》学习笔记之第3章 jQuery操作DOM

    在深入探讨jQuery操作DOM的详细知识点之前,先简要介绍一下jQuery。jQuery是一个高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,特别是在处理HTML文档对象模型(DOM)、事件处理、动画效果以及Ajax...

    jQuery DOM节点操作源码

    2. **链式操作**:jQuery对象返回的是一个包含零个或多个DOM元素的集合,这个集合支持链式调用,使得多步操作可以紧凑地写在一起,如 `$("#myDiv").html("Hello").css("color", "red")`。 3. **DOM遍历**:jQuery...

    Jquery方式获取iframe页面中的 Dom元素

    需要注意的是,使用jQuery操作iframe中的DOM时,必须确保iframe已经完全加载完毕,否则可能无法正确获取其内部的DOM元素。为了处理这种情况,通常我们会将相关操作放在iframe的“load”事件中或者在window的“load”...

    jQuery基础DOM和CSS操作源码

    DOM(Document Object Model)是HTML和XML文档的结构化表示,jQuery提供了简便的方法来操作DOM元素。例如,`$()`函数是jQuery的核心,它可以用来选择DOM元素,如`$("#elementID")`选择ID为"elementID"的元素,`$("....

    jQuery一个非常流行的操作Dom的JavaScript库

    - **选择器(Selectors)**:jQuery支持CSS1-CSS3的选择器,以及特有的如`:eq()`, `:first`, `:last`, `:even`, `:odd`等,使得选取DOM元素变得极其简单。 - **链式调用(Chaining)**:jQuery对象是可链式的,...

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统,使得开发者能够更加高效地选取和操作...

    JQuery进阶.docx

    以下代码示例展示了如何使用jQuery操作DOM元素: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JQuery DOM操作 &lt;script src="js/jquery-3.4.1.min.js"&gt; $(function () { // 在每个段落之后插入一个新的段落 $(...

    jQuery创建DOM元素实例解析

    在实际开发中,使用jQuery创建和操作DOM元素是一种常见的操作,它帮助开发人员快速完成页面的动态交互。例如,动态地添加元素到页面中,或者根据用户的操作更改页面内容等。通过上述提到的方法,可以轻松地实现这些...

    jquery教学ppt课件

    4. **DOM操作**:通过实例展示如何使用jQuery操作DOM元素,如添加、删除、查找和修改元素。 5. **事件处理**:演示如何绑定和解绑事件,以及使用事件冒泡和事件委托。 6. **动画与效果**:讲解如何创建和组合动画...

    jQuery纸牌游戏

    5. 用户界面:利用jQuery操作DOM元素,动态更新游戏界面,如计分板、提示信息等。 四、重构与扩展 作为学习和实践的项目,这个jQuery纸牌游戏提供了丰富的拓展空间: 1. 美观性提升:可以使用CSS3改进样式,增加...

Global site tag (gtag.js) - Google Analytics