1. jQuery中的DOM操作
1)查找节点
通过jQuery选择器来完成
2)创建节点
创建元素节点:var newTd = $("<td></td>")
创建文本节点:在创建元素节点时直接把文本内容写出来。var newTd = $("<td>文本内容</td>")
3)插入节点:
append()
在每个匹配元素里面的末尾处插入参数内容。作为它的最后一个子元素。
参数 一个或多个DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象,用来插在每个匹配元素里面的末尾。
【注意】如果将页面上一个元素A插入到另一个元素B,元素A会被从老地方移走
appendTo(target)
颠倒了 $(A).append(B)的效果,$(A).appendTo(B)将A追加到B中,将匹配的元素插入到目标元素的最后面
prepend()
将参数内容插入到每个匹配元素的前面(元素内部)。也就是当前元素中的第一个子元素
prependTo(target)
颠倒了 $(A).prepend(B)的效果.
after()
在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点插在每个匹配元素的后面
insertAfter(target)
在目标元素后面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。颠倒了 $(A).after(B)的效果
before()
在匹配元素的前面插入内容(外部插入)作为其兄弟节点插在集合中每个匹配元素前面。
insertBefore(target)
颠倒了 $(A).before(B)的效果
4)删除节点
remove([selector])
从DOM中删除所有匹配的元素,返回值是一个指向已经被删除的节点的引用,可以在以后再使用这些元素。该方法会移除元素,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据
包括节点本身
参数:对已选中的dom节点进行删选
detach( [selector ] )
.detach() 方法和.remove()类似, 但是.detach()保存所有jQuery数据和被移走的元素相关联事件。
empty()
无参数。从DOM中移除集合中匹配元素的所有后代节点。
5)复制节点
$("#id").clone(false)
深复制
该方法返回的是一个节点的引用,参数默认为false,clone()方法中传递了一个参数true,含义是复制元素的同时复制元素中所绑定的事件
6)替换节点
replaceWith(newContent):
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。该方法会删除与节点相关联的所有数据和事件处理程序
参数 用来插入的内容,可能是HTML字符串,DOM元素,或者jQuery对象。
replaeAll(target ) :
用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果
7)包裹节点
wrap([wrappingElement])
在每个匹配的元素外层分别包上一个html元素。
wrapAll([wrappingElement]) :
将所有匹配的元素用一个元素来包裹,在所有匹配元素外面包一层HTML结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。
匹配到的其他项位置移到第一个匹配项后,再被整体包裹。
wrapInner([wrappingElement]):
每个匹配元素里面内容(子元素)分别都会被这种结构包裹。
8)节点遍历
注意:使用这些方法去解析html文档和xml文档都是可以的,因为html文档和xml文档都可以转换为dom模型.(也就是说在ajax中,如果后台传过来的是xml文档,那么我们使用jquery也可以用下面方法解析)
children([selector])
用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素)
$(".content>.inner")
=>
$(".content").children(".inner");
不加参数,则为所有的直接子代元素
find(selector)
在当前元素对象中的后代元素中查找,和参数选择器所匹配的所有的后代元素集合。
获得当前匹配元素集合中每个元素的后代,由选择器进行筛选
$("body").find("span:nth-first(2)")
next([selector])
取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。
.next()
nextAll([selector])
查找当前元素之后所有的同辈元素。
prev([selector])
取得匹配元素前面紧邻的兄弟元素
prevAll([selector])
查找当前元素之前所有的同辈元素。
siblings([selector])
取得匹配元素前后所有的兄弟元素
前面这些都可以不加参数选择器进行匹配
closest( selector)
取得和参数匹配的最近的祖先元素,如果匹配不上继续向上查找父元素(从当前元素开始向上找,即自己可以是(优先是)自己的最近的closest父元素)
parent([selector])
取得匹配元素集合中,每个元素的父元素(从父元素开始,不包含自己(换句话说自己不是自己的父元素))
parents([selector])
获得集合中每个匹配元素的祖先元素,
filter(selector)
把当前所选择的所有元素再进行筛选过滤
9)jQuery中属性设置函数
attr( key|key,val|{key:val,key2:val2} )
获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。
removeAttr( attributeName )
为匹配的元素集合中的每个元素中移除一个属性(attribute)。
10)css属性设置
css( key|key,val|{key:val,key2:val2} )
获取匹配元素集合中的第一个元素的样式属性的计算值 或设置每个匹配元素的一个或多个CSS属性。
addClass( className )
为每个匹配的元素添加指定的样式类名
hasClass( className )
确定任何一个匹配元素是否有被分配给定的(样式)类。
removeClass([className ])
移除集合中每个匹配元素上一个,多个或全部样式。
toggleClass(className):
如果有,就移除,如果,没有就添加
11)jQuery中的html() text() val() 方法
val([value])用来读取或修改【表单元素】的value属性的值。
参数:
无参 获取value值
参数 value,设置value的值
参数 function(index,oldVal) 回调函数,index索引,oldVal当前val,return值为设置的value值
html([html])用为读取和修改元素的HTML标签
参数:(innerHTML)
无参 获取html的值
参数 html,设置html的值
参数 function(index,oldhtml) 回调函数,index索引,oldhtml当前html,return值为设置的html代码值
text([text])用来读取或修改元素的纯文本内容
参数:
无参 获取文本值
参数 text,设置文本值
参数 function(index,oldText) 回调函数,index索引,oldText当前text,return值为设置的text文本值
3. 事件
1.bind(eventType[,eventData ],handler(eventObject) )
eventType:一个或多个事件类型 ,字符串 'click' 'submit'多个事件类型可以通过用空格隔开一次性绑定'click submit'(多个事件绑定同一个函数)
eventData:向处理函数传递数据,一个对象,可选不常用
handler :事件处理函数,每次触发该事件时执行它
eventObject: 事件对象
currentTarget 在事件冒泡过程中的当前DOM元素。
target 触发事件的DOM元素。
preventDefault()阻止默认事件行为
stopPropagation()防止事件冒泡到DOM树上
type 描述事件的性质。
data 传递给一个事件方法的数据对象
metaKey 表示事件触发时哪个Meta键被按下
pageX 鼠标相对于文档的左边缘的位置
pageY 鼠标相对于文档的顶部边缘的位置
可以同时绑定多个事件处理函数(多个事件绑定不同函数),只要传入一个{事件类型:处理函数,....}的对象:
1.2bind(events)
events :一个对象,包含了一个或多个DOM事件类型,以及要对它们执行的函数,key为事件类型,val为事件处理函数
events = {
click: function() {},
mouseenter: function() {}
}
2. unbind([eventType][,handler(eventObject)])
从元素上删除一个以前附加事件处理程序。
无参时 .unbind() 将移除元素上所有绑定的处理程序。
参数为某事件类型时,移除该事件类型上的所有绑定的处理程序
参数为事件类型,事件处理函数,移除该事件类型上绑定的该处理函数
unbind( event )
3.on( events[,childSelector][,data],handler(eventObject))
在选定的元素上绑定一个或多个事件处理函数。
childSelector:一个选择器字符串,用于过滤出被选中的元素中能触发事件的“后代元素”。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件。
绑定动态元素(未来元素)事件
.on(events, callback) 只能绑定页面已有元素的事件。
.on(events, childSelector, callback) 则是在 已有的元素 上绑定 代理的 事件处理器,但只有事件的实际 source 是其子代元素并且符合 selector 时, callback 才会以该实际。(把元素绑在页面中已存在的,的未来元素的祖先元素上)
4.off( events [, selector ] [, handler ] )
移除一个事件处理函数。
推荐使用on/off的方式
4.2//$es.click(handler );
5.trigger( eventType[,extraParameters])
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。extraParameters 传递给事件处理程序的额外参数。为数组类型
$("#one").trigger("click");//模拟点击
向事件中传入任意的数据:
$("p").click( function (event, a, b) {
}).trigger("click", ["foo", "bar"]);
6. 其他事件方法
鼠标事件
click()
dblclick()
focusin()
focusout()
hover() 1.7 mouseenter 和 mouseleave 事件。(不包括子节点,只有在鼠标指针穿过/离开被选元素时)
1.8 mouseover 和 mouseout 事件。(包括子节点,不论鼠标指针穿过/离开被选元素或其子元素)
mousedown()
mouseup()
mouseenter()
mouseleave()
mouseout()
mouseover();
mousemove()
键盘事件:
keypress()
keyup()
keydown()
表单事件:
blur()
change()
focus()
select()
suubmit()
2. jQuery中常用API
1)jQuery中的工具方法
get()
无参 调用这个方法将会返回所有匹配的DOM节点,这些节点包含在一个标准的数组中
参数 index: 索引,从0开始计数,用来确定获取索引指定元素。如果index的值超出范围 小于元素数量的负数或等于或大于元素的数量 - 那么它将返回undefined
toArray()
无参 返回一个包含jQuery对象集合中的所有DOM元素的数组。
eq(index)
参数 index,用于指示元素的索引,当为负数时从集合中的最后一个元素开始倒数
返回值 jQuery对象
filter() 过滤器函数
参数 选择器字符串
参数 function(index){} 匿名函数,如果函数返回true ,该元素将被包含在筛选集合中;
返回值 : jQuery对象
map() 该方法特别适用于获取或设置元素集合中的值
参数 function(index,item){}回调函数
例如
可以得到一个用逗号分隔的复选框 ID:
$(':checkbox').map(function() {
return this.id;
}).get().join();
each() 遍历一个jQuery对象,为每个匹配元素执行一个函数。
参数 function(index, Element/item)
first() 获取匹配元素集合中第一个元素。无参数
last() 获取匹配元素集合中最后一个元素。无参数
has() 参数 :selector
将匹配元素集合缩减为包含特定元素的后代的集合,
选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中。
is() 参数 :selector
根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true,至少有一个匹配
返回值 : boolean类型
not() 参数 :selector
从匹配的元素集合中移除指定的元素。不匹配该选择器的元素会被包含在结果中。
slice()根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 jQuery 对象。
参数(start [, end ])
start整数,从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数,那么代表从末尾开始计数。
end整数,从 0 开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数,那么代表从末尾开始计数。如果忽略此参数,则选择的范围是从 start 开始,一直到最后。
包含开始,不包含结束
1. jQuery中的DOM操作的更多相关文章
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
随机推荐
- [python]错误检测及异常处理try-except
1. 简介 要给代码添加错误检测及异常处理,只需要将其封装在try-except中. try:通常的代码 except:处理错误和异常的代码 2. 示例 import os try: path = ' ...
- JavaScript数组方法速查,32个数组的常用方法和属性
JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...
- 漫谈JavaScript中的作用域(scope)
什么是作用域 程序的执行,离不开作用域,也必须在作用域中才能将代码正确的执行. 所以作用域到底是什么,通俗的说,可以这样理解:作用域就是定义变量的位置,是变量和函数的可访问范围,控制着变量和函数的可见 ...
- 联邦学习开源框架FATE助力腾讯神盾沙箱,携手打造数据安全合作生态
近日,微众银行联邦学习FATE开源社区迎来了两位新贡献者——来自腾讯的刘洋及秦姝琦,作为云计算安全领域的专家,两位为FATE构造了新的功能点,并在Github上提交修复了相关漏洞.(Github项目地 ...
- Runtime.getRuntime().exec()实现Java调用python程序
使用Runtime.getRuntime().exec()来实现Java调用python,调用代码如下所示: import java.io.BufferedReader; import java.io ...
- MySQL Explain学习笔记
目录 一.执行计划概念 二.Explain用法 三.Explain属性介绍 3.1 id属性 3.2 select_type属性 3.3 table属性 3.4 type属性 3.5 possible ...
- Spring Boot 配置文件和命令行配置
Spring Boot 属于约定大于配置,就是说 Spring Boot 推荐不做配置,很多都是默认配置,但如果想要配置系统,使得软件符合业务定义,Spring Boot 可以通过多种方式进行配置. ...
- Cookie的获取
1.先创建Cookie对象,设置Cookie的键和值: Cookie cookie1="); Cookie cookie2="); Cookie cookie3="); ...
- tomcat 中无法添加项目等问题的解决方案
博客地址:http://www.moonxy.com 一.前言 今天新建了一个 maven 项目,添加程序文件之后,发现无法添加项目,然后修改配置,将应用添加到了 tomcat,启动时又报错,解决出现 ...
- Spring Boot 入门之基础构建篇(一)
博客地址:http://www.moonxy.com 一.前言 随着 Spring 的功能越来越强,在使用 Spring 的时候,门槛也变得高了起来,诸如搭建一个基于 Spring 的 Web 程序却 ...