jQuery中DOM操作

文章目录

Tips

1. DOM操作分为三类：
     ① DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
     ② HTML-DOM：用于处理HTML文档，如document.forms
     ③ CSS-DOM：用于操作CSS，如element.style.color=“green”
2. JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持
   而 jQuery 对 JavaScript 中的 DOM 操作进行了封装

样式操作

css操作

1. css("属性","属性值")：设置单个CSS属性
2. css({"属性1":"属性值1","属性2":"属性值2"...})：设置多个CSS属性
3. var a = css(name)：获取样式值
4. addClass("样式名")：添加css中已定义的class样式名
   只能填写类样式名，如：.mxy{样式} 对应 addClass(“mxy”)
   注意：在使用addClass()时，更具体的覆盖不具体的，因此有些以父类标签开始的样式不容易被覆盖
5. removeClass("样式名")：移除样式，不填则移除所有样式
6. toggleClass("样式名")：样式切换，相当于addClass()与removeClass()轮流
7. hasClass("样式名")：判断样式，是否包含指定的样式
8. show()：显示
9. hide() ：隐藏，所占空间也完全隐藏，不会留下空白

CSS-DOM操作

内容及Value值操作

1. html()：可以对HTML代码进行操作，类似于JS中的innerHTML
2. text()：可以获取或设置元素的文本内容
3. val()：可以获取或设置元素的value属性值

节点操作

查找 / 获取节点（元素）

查找元素

1. find()：
2. filter()：
3. [index]：
4. get(index)：
5. .eq(index)：获取当前链式操作中的下标为 index 的 jQuery 对象
   :eq() 与 .eq() 的区别

	$('div:eq(1)');
	// 由于 $() 中为引号，可知 $() 里为字符串，故 :eq()中的内容只能为具体的数值
	
	//如果想要在 :eq() 中加入获取到的 索引号等 需要将字符串改为拼接
	//勿忘结尾的 ')'
	$('div:eq('+$(this).index()+')');

	//.eq() 的用法就比较随意，内容为变量或者数值都可以
	$('div').eq(a);
	$('div').eq(1);

获取子元素

1. children()：方法可以用来获取元素的所有子元素

获取同辈元素

获取前辈元素

1. parent()：获取元素的父级元素
2. parents()：元素元素的祖先元素

创建节点

工厂函数$()用于获取或创建节点

1. $(selector)：通过选择器获取节点
2. $(element)：把DOM节点转化成jQuery节点
3. $(html)：使用HTML字符串创建jQuery节点
    

DOM对象 和 jQuery对象 转换

DOM → jQuery

var txtName =document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName);  //jQuery对象 

jQuery → DOM

1. [index] 方法

var $txtName =$ ("#txtName"); //jQuery对象 
var txtName =$txtName[0]; //DOM对象

2. get(index)方法

var $txtName =$("#txtName"); //jQuery对象 
var txtName =$txtName.get(0);  //DOM对象    

插入节点

元素内部插入子节点

元素外部插入同辈节点

删除节点

1. remove()：删除整个节点
2. empty()：清空节点内容
3. detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点

1. replaceWith()：
2. replaceAll()：
    

复制节点

1. clone()：用于复制某个节点

$(selector).clone([includeEvents]) ;

节点属性操作

1. attr()：用来获取与设置元素属性

$(selector).attr([name]) ;
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

2. removeAttr()：用来删除元素的属性

$(selector).removeAttr(name) ;

$(".contain img").removeAttr("alt");

节点遍历

1. each() ：规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element)) ;

//示例
$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });

2. end()：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

$(".gameList li").first().css("background","#b8e7f9").end().last().css("background","#d3f4b5");