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也有相同的方法

时间: 2024-10-10 11:02:24

juqery学习笔记(二)DOM操作的相关文章

【JS学习笔记】DOM操作应用-创建、插入和删除元素;文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

ExtJs学习笔记1—DOM操作

<div id="myDiv"><p>p标签</p></div> alert(document.getElementById("myDiv").childNodes[0]); //通过childNodes这种方式来获取节点

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

Caliburn.Micro学习笔记(二)----Actions

Caliburn.Micro学习笔记(二)----Actions 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions,看一下Caliburn.Micro给我们提供了多强大的支持 我们还是从做例子开始 demo的源码下载在文章的最后 例子1.无参数方法调用 点击button把textBox输入的文本弹出来 如果textbox里没有文本button不可点,看一下效果图 看一下前台代码 <Stac

小猪的数据结构学习笔记(二)

小猪的数据结构学习笔记(二) 线性表中的顺序表 本节引言: 在上个章节中,我们对数据结构与算法的相关概念进行了了解,知道数据结构的 逻辑结构与物理结构的区别,算法的特性以及设计要求;还学了如何去衡量一个算法 的好坏,以及时间复杂度的计算!在本节中我们将接触第一个数据结构--线性表; 而线性表有两种表现形式,分别是顺序表和链表;学好这一章很重要,是学习后面的基石; 这一节我们会重点学习下顺序表,在这里给大家一个忠告,学编程切忌眼高手低,看懂不代表自己 写得出来,给出的实现代码,自己要理解思路,自己

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

马哥学习笔记二十四——分布式复制快设备drbd

DRBD: 主从 primary: 可执行读.写操作 secondary: 文件系统不能挂载 DRBD: dual primay, 双主(基于集群文件系统的高可用集群) 磁盘调度器:合并读请求,合并写请求: Procotol:drbd数据同步协议 A: Async, 异步  数据发送到本机tcp/ip协议栈 B:semi sync, 半同步  数据发送到对方tcp/ip协议 C:sync, 同步  数据到达对方存储设备 DRBD Source: DRBD资源 资源名称:可以是除了空白字符外的任意

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

加壳学习笔记(二)-汇编基础

7.简单的汇编语法:   堆栈平衡  PUSH,POP功能: 把操作数压入或取出堆栈语法: PUSH 操作数 POP 操作数格式: PUSH r PUSH M PUSH data POP r POP mPUSHF,POPF,PUSHA,POPA功能: 堆栈指令群格式: PUSHF POPF PUSHA POPAADD,ADC功能: 加法指令语法: ADD OP1,OP2 ADC OP1,OP2格式: ADD r1,r2 ADD r,m ADD m,r ADD r,data影响标志: C,P,A,

Android学习笔记二

17. 在ContentProvider中定义的getType()方法是定义URI的内容类型. 18. SQLiteDatabase类中的insert/delete/update/query方法其实也挺好用的,我在EquipmentProvider类中做了实现 19. Android专门有个单元测试项目(Android Test Project),在这个项目中,可以新建一个继承AndroidTestCase类的具体测试类来单元测试某个功能.我新建了一个AndroidTestProject项目,在