1 查找节点,为匹配标签对象的每一个节点的内容提供一个&lt

锋利的jquery-DOM操作,jquery-dom

1 查找节点 ① 可依附jquery选用器来达成节点查找 ②
可用.text()获取节点的文本内容 ③ 可用.attr(“attr”)获取属性value 2
创造节点 ① 可用jquery工厂函数来达成$(html) eg:$(“<li></li>”)
能够何况为标签添Gavin本和总体性   3插入节点 ① 方法(见文书档案)
图片 1    
图片 2
方法不止可对节点开展插队操作,还可对节点举行活动操作 4 删除节点 ①
remove()去除全部相称的因素 ②
detach()同样去除全数匹配的要素,与remove区别的是被删去的源委保留有样本数量;其全数绑定的事件和附加数据都会被封存下来
③ empty()清空节点,清空相称成分的全部后代节点满含内容 5 复制节点 ①
clone(true)复制匹配的节点;传入的参数true表示还要复制该因素的绑定事件
6 替换节点 ① replaceWith() eg:A.replaceWith(B) B替换A ②
replaceAll() 与replaceWith()替换与被轮换节点相反 7 包裹节点 ① 包裹节点
A.wrap(“<b></b>”) 用<b>标签将A包裹起来
若A为多节点目的则为每二个节点提供叁个<b>标签包裹
A.wrapAll(“<b></b>”)
若A为多节点指标则为该指标提供贰个标签,将富有节点包裹在一个b标签中  
A.wrapInner(“<b></b>”)
为相配标签对象的每三个节点的剧情提供七个<b>标签 8 属性操作 ①
获取和设置属性 A.attr(“title”); A.attr(“title” ,”value”) ② 删除属性
A.removeAttr(“title”); 9 样式操作 ① 获取和设置样式(操作class属性)
E.attr(“class”); E.attr(“class”,”value”);   ② 追加样式
addClass(“className”)追加三个className ③ 移除样式
removeClass(“className”)移除二个className ④ 切换样式
.toggleClass(“className”) 若有该样式则移除该class,若未有则增加该clss ⑤
推断是或不是含有有些样式 .hasClass(“className”)判别是还是不是包含有些class; 10
设置和取得HTML,文本和值 1 .html()方法
类似js中innerHTML方法,设置和得到成分中HTML内容 2 .text()方法
类似js中innerText方法,设置和获取成分中text值 3 .val()方法
设置和收获成分中的value属性;若是成分多选,则赶回三个数组 11
相配节点查找 ① .children()
查找相称节点的全体子节点;(只思量子节点,不怀想后代别的节点) ②
.next()/.prev()/siblings() 查找匹配节点(后/前/全数)的隔壁的同辈成分;
③ .parent()/.parents() 查找相配节点的父成分   12 css-dom操作 ①
获取/设置样式值 $(“E”).css(“cssAttr”) $(“E”).css(“cssAttr”,”value”); ②
.offset()/.position() 都以获取left/top值 offset获取或安装绝对于视窗的值
position获取或设置的是对峙于第贰个相对或相对固定的祖宗成分的值 ③
.scrollTop()/.scrollLeft() 获取或设置滚动条距最上部或左端的相距

1 查找节点①
可依据jquery选取器来产生节点查找② 可用.text()获取节点的文书内容③
可用.attr(“attr”)获取属性…

.hasClass(“className”)判别是还是不是含有有个别class;

eg:A.replaceWith(B) B替换A

删去样式;$(“p”).removeClass(“high”)          
移除所选成分的名号为high的class属性$(“p”).removeClass(“high another”)  
移除所选成分的五个class样式$(“p”).removeClass()                
 移除所选成分的兼具的class属性

11.常用遍历节点的不二等秘书籍

收获相配成分的富有子元素组成的聚合:children()。该措施只思量第一层子元素而不思考任何后代成分。
获取相称成分前边紧邻的兄弟元素的联谊(但集合中只有三个成分):next()。
得到相称元素前边紧邻的兄弟元素的会集(但集结中独有一个要素):prev()。
获得相称成分前后全体的男士儿成分: siblings()。

addClass(“className”)追加多少个className

8 性质操作

 

5.复制节点

克隆匹配的DOM成分。如,“$(“p”).clone();”再次来到克隆后的别本,但不抱有任何表现。固然要将DOM的平地风波联合克隆,应该使用“$(“p”).clone(true);”。

图片 3

若有该样式则移除该class,若未有则增添该clss

把原先p里的内容换到钦赐的剧情

9.样式操作

能够由此“attr()”设置或获得css样式。
日增样式:addClass()
。如,“$(“p”).addClass(“selected”);”,向全部P成分中追加“selected”样式。
移除样式:removeClass() —
从相称的元素中除去全数或钦命的class。如,“$(“p”).removeClass(“selected”);”,删除全体P成分中的“selected”。
切换样式:toggleClass() —
调控样式上的再次切换。如若类名存在则删除它,纵然类名子虚乌有则拉长它。如,“$(“p”).toggleClass(“selected”);”,全部的P成分中,要是存在“selected”样式就删除“selected”样式,不然就增加“selected”样式。
认清是或不是带有有个别样式:hasClass() — 判定成分中是或不是包罗有个别class,有重临 true; 不然赶回
false。如,“$(this).hasClass(“protected”)”,判别当前节点是或不是有“protected”样式。

③ 移除样式

A.wrap(“<b></b>”)

遍历节点

7.包裹节点

wrap():将点名节点用其余标记包裹起来。该办法对于急需在文书档案中插入额外的结构化标识极其有用,
而且不会损坏原有文书档案的语义。如,“$(“p”).wrap(“<div
class=’wrap’></div>”);”。种种p成分被打包到<div>中。
wrapAll():将享有相称的成分用叁个因平昔包裹。而wrap()方法是将富有的要素实行独立包装。如,“$(“p”).wrapAll(“<div></div>”);”,将有所p成分包裹到<div>中。
wrapInner():将每叁个合作的因素的子内容(满含文件节点)用其它结构化标志包裹起来。如,“$(“p”).wrapInner(“<b></b>”);”,
<b>被每一个p成分包裹。

② 方法不但可对节点开始展览插队操作,还可对节点开始展览活动操作

② 可用.text()获取节点的文件内容

体制操作:获取样式和设置样式
$(“p”).attr(“class”) 获取class  $(“p”).attr(“class”,”my class”)
 设置class为myclass追加体制$(“p”).addClass(“another”);加多another的class属性样式
addClasss()和attr()的界别addClass是增添class样式,而attr()是在存活的底子上海展览中心开更换。

6.替换节点

将装有相称的因素都替换为钦赐的 HTML 或 DOM
成分。如,$(“p”).replaceWith(“<b>Paragraph.
</b>”);,将所有p成分,替换为”<b>Paragraph. </b>”。

与replaceWith相返:$(“<b>Paragraph.
</b>”).replaceAll(“p”);。

寻觅相配节点的全体子节点;(只思索子节点,不记挂后代其余节点)

A.attr(“title” ,”value”)

包裹节点:用三个节点把其他的符号包裹起来,jquery提供了wrap()和warpAll()和warpInner()
$(“strong”).warp(“<b></b>”);//用b标签把<strong>的因素包起来

10.设置或得到HTML、文本和值

读取和设置有些成分中的 HTML 内容: html(),该情势能够用来
XHTML,但不能够用于 XML 文书档案。
读取和装置某些成分中的文本内容:text(),该方法不只能够用来 XHTML
也能够用来 XML 文档。
读取和设置有个别元素中的值:val(),该措施类似 JavaScript 中的 value
属性。对于文本框,下拉列表框,单选框该方法可重返元素的值(多选框只好回去第一个值)。如若为多选下拉列表框,则赶回二个包含全数选用值的数组。

4 删除节点

removeClass(“className”)移除一个className

empty()严谨来讲正是删除节点,而是清空节点。他能清空成分中的全体成分$(“ul
li:eq(1)”).empty();复制节点$(this).clone(true).appendTo(“body”);

3.插入节点

将新创建的节点,或获得的节点插入钦赐的任务。
“$node.append($newNode)”,向每一个相配的要素内部的结尾处追加结尾处。如,“$(“p”).append(“<b>Hello</b>”);”将”<b>Hello</b>”增多到”p”内部的结尾处。
“$newNode.appendTo($node)”,将新成分追加到各种相配成分内部的结尾处。
“$node.prepend($newNode)”,向各种相配的要素内部的结尾处追加初始处。如,“$(“p”).prepend(“<b>Hello</b>”);”将”<b>Hello</b>”添加到”p”内部的起首处。
“$newNode.prependTo($node)”, 将新成分追加到各类相称成分内部的上马处。
“$node.after($newNode)”,向各样相称的成分的事后插入内容,是同样注重兄弟。如,“$(“p”).after(“<b>Hello</b>”);”将”<b>Hello</b>”插入到”p”的前面。它们是弟兄关系。
“$newNode.insertAfter($node)”,将新成分插入到各类匹配成分之后。
“$newNode.before($node)”,向各样相称的因素的以前插入内容。如,“$(“p”).before(“<b>Hello</b>”);”将”<b>Hello</b>”插入到”p”的日前,它们是手足关系。
“$node.insertBefore($newNode)”,将新成分插入到各种相配成分从前。
瞩目:就算插入的节点是还是不是新创制的,插入将产生移动操作。所以,在插入那样的节点在此以前应当选取clone的节点。

3插入节点

1 .html()方法

after()   insertAfter()before()insertBefore()

8.属性设置

attr():获取属性和装置属性。
当为该办法传递贰个参数时,即为某成分的获得钦定属性。如,“$(“img”).attr(“src”);”,获取img成分的src属性值。
当为该形式传递五个参数时,即为某成分设置内定属性的值。如,“$(“img”).attr(“src”,”test.jpg”);”,设置img成分的src属性值为test.jsp。
jQuery
中有为数相当多方法都以一个函数达成获取和装置。如:attr(),html(),text(),val(),height(),width(),css()等。
removeAttr():删除钦点元素的钦点属性。

① 可依照jquery选用器来实现节点查找

12 css-dom操作

appendTo()        将富有的同盟的要素追加到钦赐的成分中。
 $(“<b>你好!!</b>”).appendTo(“p”)

4.删减节点

从DOM中剔除全部相称的因素。如,“$(“p”).remove(“.hello”);”删除所为class属性值为hello的p成分,还会有它上边的富有因素。

从DOM中清除全数相称的因素。如,“$(“p”).empty();”清除全部p成分,还应该有它下边包车型客车兼具因素。

① remove()去除全体匹配的成分

搜寻相称节点的父元素

children()方法  获得子成分  next()方法  
 获取相称成分后边紧邻的同辈成分。比如,p成分的同辈成分是ul
 li的严节列表获取ul的一种办法正是$(“p”).next()得到的值正是ul的冬季列表  prev()方法是next()方法的逆方
法 siblings()方法 获取相配成分前后全体的同辈元素,不分前后  closet()获得如今的相称成分  遍历节点的诀要有很多 find() filter() nextAll() prevAll() parent() parents()

1.查找节点

请见上边包车型大巴“基本采纳器”。

① 获取和装置属性


detach()同样去除全体相称的因素,与remove分歧的是被去除的内容保留有样本数量;其颇具绑定的风云和附加数据都会被保留下去

 

2.开立节点

利用JQuery的工厂函数,创设二个新节点:var $newNode =
$(“<p>你好</p>”);,然后将新节点插入到钦点成分节点处。

10 设置和获取HTML,文本和值

获取或安装滚动条距最上部或左端的离开

replaceWith()的秘技将具有相配的因素都替换来了制订的HTML恐怕DOM$(“p”).replaceWith(“<b>你最欢跃的果品是怎样?</b>”) 

JQuery中的DOM操作

一种与浏览器,平台,语言非亲非故的接口。使用该接口能够轻便地探访页面中装有的正统组件。
DOM Core:DOM Core 并不专门项目于 JavaScript,任何一种援助 DOM
的先后设计语言都足以行使它。它的用途并不是只限于处理网页,也能够用来拍卖其余一种是用标志语言编写出来的文书档案,举例:XML。
HTML DOM:使用 JavaScript 和 DOM 为 HTML
文件编制脚本时,有非常多隶属于HTML-DOM的脾气。
CSS-DOM:针对于CSS操作,在JavaScript中,CSS-DOM 首要用来获取和设置 style
对象的种种质量。

position获取或安装的是相对于第二个相对或绝对固定的先世成分的值

② 删除属性

性情操作:attr()获取和安装元素的属性    $(“p”).attr(“title”)
获取p的title属性。   $(“p”).attr(“title”, “you  title”)
设置title属性removeAttr() 删除成分的习性   

12.CSS-DOM操作

赢得和安装成分的样式属性:css()。
获得和安装成分反射率:opacity()属性。
收获和设置成分高度,宽度:height(),width()。在安装值时,若只传递数字,则暗中认可单位是px。如必要利用别的单位则需传递三个字符串,比方“$(“p:first”).height(“2em”)”;
获得成分在日前视窗中的相对位移:offset()。它回到的靶子涵盖了八个属性:top,left。该格局只对可知成分有效。

A.attr(“title”);

② replaceAll()

删除节点:jquery提供了五个删除节点的法门remove()和empty()$(“ul
li:eq(1)”).remove();//获取到第三个li成分,将它从网页中删去。

12 css-dom操作

1 查找节点

 

A.attr(“title” ,”value”)

为相称标签对象的每二个节点的剧情提供一个<b>标签

prepend() 
 向各类相配的成分前置内容。$(“p”).prepend(“<b>你好</b>”)

offset获得或安装相对于视窗的值

④ 切换样式

插入节点的方法append()          向每一种相称的要素的内部追加内容  
 $(“p”).append(“<b>你好</b>”)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章