第四章使用jQuery操作DOM元素

简介: 第四章使用jQuery操作DOM元素

一、DOM的分类:


1.DOM core


2.HTML-DOM


3.CSS-DOM




二、css操作


语法:

$("#div1").css(“color”,“red”);
$("#div1").css({“color”:“red”,“margin”:“5px”});
//添加样式
$("#div1").addClass(“div1_style”);
//移除样式
$("#div1").removClass(“div1_style”);




三、jQuery操作文本:


1.html():


语法:


获取值:var val_html = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").html(); …("#div1").html(“值”);


2.text():


语法:


获取值:var val_text = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").text(); …("#div1").text(“值”);


3.text和html的区别:


(1)都是操作文本的方法


(2)html可以解析html的标签,text不可以解析。


四、获取表单的值:


语法:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲inp").val(); 赋…("#inp").val(“值”);


五、节点与属性操作:


1.创建节点:


var $new_Node = ( " < l i > 第 n 个 l i < / l i > " ) ; 2. 插 入 节 点 : 内 部 插 入 : ( 1 ) a p p e n d ( ) : 向 所 选 元 素 的 后 面 插 入 节 点


( 2 ) a p p e n d T o ( ) : 与 a p p e n d 的 用 法 不 一 样 , 但 是 效 果 一 样 。 e g : ("<li>第n个li</li>"); 2.插入节点: 内部插入:


(1)

append():向所选元素的后面插入节点


(2)appendTo():与append的用法不一样,但是效果一样。 eg: ("<li>第n个li</li>");2.插入节点:内部插入:


(1)append():向所选元素的后面插入节点


(2)appendTo():与append的用法不一样,但是效果一样。eg:(“ul”).append( n e w N o d e ) ; ( new_Node); ( newNode);


(new_Node).appendTo(“ul”);



(3)perpend():向所选择元素的前面插入节点。


(4)perpendTo():与perpend的效果一样,但是用法不一样。

eg:

( &quot; u l &quot; ) . p e r p e n d ( (&quot;ul&quot;).perpend( ("ul").perpend(new_Node);
( n e w N o d e ) . p e r p e n d T o ( &quot; u l &quot; ) ;


外 部 插 入 : ( 1 ) a f t e r ( ) : 向 所 选 元 素 的 后 面 插 入


( 2 ) i n s e r t A f t e r ( ) : 与 a f t e r 的 用 法 不 一 样 但 是 效 果 是 一 样 的 。 e g : new_Node).perpendTo(&quot;ul&quot;);


外部插入:

(1)after():向所选元素的后面插入


(2)insertAfter():与after的用法不一样但是效果是一样的。 eg: newNode).perpendTo("ul");


外部插入:(1)after():向所选元素的后面插入


(2)insertAfter():与after的用法不一样但是效果是一样的。eg:(“ul”).after( n e w N o d e ) ; ( new_Node); ( newNode);(new_Node).insertAfter(“ul”);

(3)before():向所选元素的前面插入节点


(4)insertBefore():与before的语法不一样,但是效果一样。


eg:

( &quot; u l &quot; ) . b e f o r e ( (&quot;ul&quot;).before( ("ul").before(new_Node);
( n e w N o d e ) . i n s e r t B e f o r e ( &quot; u l &quot; ) ;

3. 删 除 节 点 :


1. 使 用 r e m o v e 删 除 , 可 以 直 接 删 除 节 点 。


2. 使 用 e m p t y ( ) 删 除 , 但 是 只 能 清 空 内 容 e g :

new_Node).insertBefore(&quot;ul&quot;

); 3.删除节点:

1.使用remove删除,可以直接删除节点。


2.使用empty()删除,但是只能清空内容 eg: newNode).insertBefore("ul");


3.删除节点:


1.使用remove删除,可以直接删除节点。


2.使用empty()删除,但是只能清空内容eg:(“li:eq(0)”).remove();

$(“li:eq(0)”).empty();


4.替换节点:


1.replaceWith():将所选的元素替换成新的元素


2.replaceAll():与replaceWith的效果一样,用法不一样。


eg:

( &quot; l i : e q ( 0 ) &quot; ) . r e p l a c e W i t h ( (&quot;li:eq(0)&quot;).replaceWith( ("li:eq(0)").replaceWith(new_Node);
($new_Node).replaceAll(“li:eq(0)”);



六、设置元素的属性和给元素赋值:


1.attr()


语法:


获取值:var im_val = ( &quot; i m g &quot; ) . a t t r ( &quot; w i d t h &quot; ) ; 赋 值 : (&quot;img&quot;).attr(&quot;width&quot;); 赋值: ("img").attr("width");赋值:(“img”).attr({width:“500”,height:“500”});


七、遍历子元素:


1.获取紧邻其后的一个同辈元素:next()

eg: ( &quot; l i : e q ( 0 ) &quot; ) . n e x t ( ) . c s s ( &quot; c o l o r &quot; , &quot; r e d &quot; ) ; 2. 获 取 紧 邻 其 前 的 一 个 同 辈 元 素 : p r e v ( ) ; e g : (&quot;li:eq(0)&quot;).next().css(&quot;color&quot;,&quot;red&quot;);


2.获取紧邻其前的一个同辈元素:prev(); eg: ("li:eq(0)").next().css("color","red");


2.获取紧邻其前的一个同辈元素:prev();eg:(“li:eq(2)”).prev().css(“color”,“red”);


3.获取紧邻其后的所有同辈元素:nextAll();


eg: ( &quot; l i : e q ( 0 ) &quot; ) . n e x t A l l ( ) . c s s ( &quot; c o l o r &quot; , &quot; r e d &quot; ) ; 4. 获 取 紧 邻 其 前 的 所 有 同 辈 元 素 : p r e v A l l ( ) e g : (&quot;li:eq(0)&quot;).nextAll().css(&quot;color&quot;,&quot;red&quot;); 4.获取紧邻其前的所有同辈元素:prevAll() eg: ("li:eq(0)").nextAll().css("color","red");4.获取紧邻其前的所有同辈元素:prevAll()eg:(“li:eq(4)”).prevAll().css(“color”,“red”);

5.获取所有的同辈元素:silbings()


eg: ( &quot; l i &quot; ) . s i b l i n g ( ) . c s s ( &quot; c o l o r &quot; , &quot; r e d &quot; ) ; 八 、 获 取 前 辈 元 素 : 1. p a r e n t ( ) : 获 取 其 父 亲 元 素 。 e g : (&quot;li&quot;).sibling().css(&quot;color&quot;,&quot;red&quot;);


八、获取前辈元素: 1.parent():获取其父亲元素。 eg: ("li").sibling().css("color","red")



eg: ( &quot; l i &quot; ) . p a r e n t ( ) . p a r e n t ( ) . c s s ( &quot; b a c k g r o u n d &quot; , &quot; r e d &quot; ) ; 3. p a r e n t s ( ) : 获 取 根 元 素 , h t m l e g : (&quot;li&quot;).parent().parent().css(&quot;background&quot;,&quot;red&quot;); 3.parents():获取根元素,html eg: 
("li").parent().parent().css("background","red");3.parents():获取根元素,htmleg:(“li”).parents().css(“background”,“red”);



目录
相关文章
|
1月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
29天前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
45 0
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
10天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
10天前
|
JavaScript 前端开发
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
42 4
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
10天前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
203 1