jQuery 的 DOM 操作

简介: jQuery 的 DOM 操作

jQuery 的 DOM 操作


查找节点, 修改属性


查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取 它的各种属性值

//获取图片的路径、高属性
$("img").attr("src", "../image/1.png");
$("img").attr("height", "200")


创建节点


使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串 创建一个 jQuery 对象,


动态创建的新元素节点不会被自动添加到文档中, 需要使用其他方法将其插入到 文档中; .当创建单个元素时, 必须使用标准的 XHTML 格式,标签一定要闭合. 例:用( " < p / > " ) 或 ("<p/>")或("<p/>")或(“”).


创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建.


内部插入法


内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)

1.append(content) :向每个匹配的元素的内部的结尾处追加内容.

$('#sh').append($myli)// 表示 在 $('#sh')对象内部后面添加一个 $myli 对象


2.appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处.

$myli.appendTo($("#city")); //表示把$myli 添加到 $("#city")对象的内部
后面


3.prepend(content):向每个匹配的元素的内部的开始处插入内容.

//***添加成都 li 到 北京前
$("#b2").click(function () {
//jqury 方法
$myli = $("<li id='cd' name='chengdu'>成都</li>");
$('#city').prepend($myli);
//$myli.prependTo($('#city'));
})


4.prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处.

$myli.prependTo($('#city'));


外部插入法


外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)


1.after(content) :在每个匹配的元素之后插入内容.

//*** 添加成都 li 到 北京和重庆之间
$('#b4').click(function () {
//$("#bj").after("<li id='cd' name='chengdu '>成都</li>");


2.before(content):在每个匹配的元素之前插入内容.

//*** 添加成都 li 到 吉林前面
$('#b5').click(function () {
//使用外部插入, 一步到位
//$("#jl") 对象前面添加 "<li id='cd' name='chengdu '>成都</li>";
var $cd= $("<li id='cd' name='chengdu'>成都</li>");
//$("#jl").before($cd);
})


3.insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面.

$("<li id='cd' name='chengdu '>成都</li>").insertAfter($('#bj'));})


4.insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面.

$cd.insertBefore($('#jl'));


删除节点


1.remove():

从 DOM 中删除所有匹配的元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同 时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

//*****删除所有 p
$("#b1").click(function () {
$("p").remove();
})
//****删除上海这个 li
$("#b3").click(function (){
$("#sh").remove();
})


2.empty():

清空节点 – 清空元素中的所有后代节点(不包含属性节点)

//***所有 p 清空
$("#b2").click(function () {
$("p").empty();
})


复制节点

1、clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有 任何行为.

//克隆节点,不克隆事件,添加到p元素内部后面
$("button").clone().appendTo("p");


2、clone(true): 复制元素的同时也复制元素中的的事件

//克隆节点,克隆事件,添加到p元素内部后面
$("button").clone(true).appendTo("p");


替换节点


1.replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素 A.replaceWith(B)

前面的替换到后面

//1. 将 p 替换成 button
//$("p").replaceWith("<input type='button' id='my' value='我的按钮'/>")


2.replaceAll(): 颠倒了的 replaceWith() 方法.A.replaceAll(B)

如果若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元 素一起消失,

后面的替换到前面

//用粗体文本替换每个段落:
$(".b1").click(function(){
   $("p").replaceAll("<b>Hello world!</b>");
});


属性操作


1.attr(): 获取属性和设置属性


2.attr()传递一个参数时, 即为某元素的获取指定属性


3.attr()传递两个参数时, 即为某元素设置指定属性的值


4.jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等, 后面我们还会举例说明.


5.removeAttr(): 删除指定元素的指定属性


样式操作


1.获取 class 和设置 class :

class 是元素的一个属性, 所以获取 class 和设置 class 都可 以使用 attr() 方法来完成.

//获取class和设置 class 都可以使用 attr() 方法来完成.(给 id 为 first 添加 .one 样式
$("#b1").click(function (){
$("#first").attr("class", "one");
})


2.追加样式: addClass()

//追加样式: addClass()
$("#b2").click(function (){
$("#first").addClass("one");
})


3.移除样式: removeClass()

从匹配的元素中删除全部或指定的 class

//移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
$("#b3").click(function (){
$("#first").removeClass();
})


4.切换样式: toggleClass()

控制样式上的重复切换.如果类名存在则删除它, 如果类名 不存在则添加它.

//切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
$("#b4").click(function (){
$("#first").toggleClass("one");
})


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

判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 fals

$("#b5").click(function (){
alert($("#first").hasClass("one"));
})


获取 HTML, 文本和值


1、设置或返回所选元素的内容(包括 HTML 标记): html()

2、读取和设置某个元素中的文本内容: text(). 该方法既可以用于 HTML 也可以用于 XML 文档.

$(this).text();


3、读取和设置某个元素中的值: val() — 该方法类似 JavaScript 中的 value 属性. 对于文 本框, 下拉列表框, 单选框该方法可返回元素的值

//获取到当前值
var currentVal = $(this).val()


常用遍历节点方法


1、取得匹配元素的所有子元素组成的集合: children().

//**查找所有子元素(class 为 one的 div 的子元素)
var $ div=$("div[class='one']").children()


2、取得匹配元素后面的同辈元素的集合:next()/nextAll();

//***获取后面的同辈 div 元素(class 为 one 的 div 的)
$("div.one").nextAll().filter("div")


3、取得匹配元素前面的同辈元素的集合:prev()/prevAll();

//**获取前面的同辈 div 元素(class 为 one 的 div 的)
$("#b3").click(function () {
//遍历
// $("div.one").prevAll().filter("div").each(function (){
// alert("div 的内容= " + $(this).text());
// })


4、取得匹配元素前后所有的同辈元素: siblings()

//**获取所有的同辈 div 元素(class 为 one 的 div 的)
$("#b4").click(function () {
$("div.one").siblings().filter("div").each(function () {
alert("同辈 div text= " + $(this).text())
})


5、获取指定的第几个元素: nextAll().eq(index)

//指定获取到第几个子元素, eq(1) 表示得到第 2 个子元素
//alert($("div.one").children().eq(1).text());


CSS-DOM 操作


juery CSS操作函数

function () {

$(“div.one”).siblings().filter(“div”).each(function () {

alert("同辈 div text= " + $(this).text())

})

5、获取指定的第几个元素: nextAll().eq(index)


//指定获取到第几个子元素, eq(1) 表示得到第 2 个子元素

//alert($(“div.one”).children().eq(1).text());

####  CSS-DOM 操作
juery CSS操作函数
![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/3931f3da99334c18a4ec2e7e42527f8e.png)


相关文章
|
4月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
90 0
|
9月前
|
缓存 JavaScript
|
5月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
5月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
4月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
38 0
|
8月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
92 2
JavaScript基础-DOM操作:查找、创建、修改
|
8月前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
54 2
|
8月前
|
JavaScript 前端开发 开发者
DOM操作
【6月更文挑战第30天】DOM操作
51 1
|
8月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
7月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
51 0