05jQuery之class增删查以及切换样式、math对象、attr获取和设置节点属性以及删除元素属性、节点元素操作、CSS-DOM操作

本文链接：https://blog.csdn.net/Denial_learn/article/details/101018351

追加和移出以及判断class存在控制样式：

hasClass(“div2”) //判断是否存在class
addClass(“div2”)//添加class
toggleClass（）//也可以进行添加Class
removeClass(“div2”)//移出class

示例：

	   $(function(){
				$("#div1").mouseover(function(){
					if (!$(this).hasClass("div2")) {//判断是否存在class
						$(this).addClass("div2")//添加class
					}
				});
				
				$("#div1").mouseout(function(){
					if ($(this).hasClass("div2")) {
						$(this).removeClass("div2")//移出class
					}
				});
			})
		</script>
		<style type="text/css">
			.div2{
				background-color: #00FFFF;
			}
			.div3{
				font-size: 50px;
			}
		</style>

		<div id="div1" class="div3">
			朱得草是帅哥！！
		</div>

切换样式：
toggleclass（）//添加一个class样式
示例：

toggleClass("one")//在样式里面书写一个css样式伪类，将类名为one添加到目标标签当中

math对象：

在这里插入图片描述

attr获取和设置节点属性：

语法：

$(selector).attr([name]) ;//获取属性值
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置多个属性的值

示例：

$(".contain img").attr({width:"200",height:"80"});

删除元素属性：
语法：

$(selector).removeAttr(name) ;

示例：

$(".contain img").removeAttr("alt");//删除元素的alt属性

节点操作：

创建节点元素：
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

示例：

var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");
创建含文本与属性<li>元素节点

插入节点操作：

注意：元素内部插入子节点
在这里插入图片描述
注意：元素外部插入同辈节点

在这里插入图片描述

删除节点操作：

jQuery提供了三种删除节点的方法

remove()：删除整个节点 $(selector).remove([expr]);
empty()：清空节点内容 $(selector).empty();
detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点操作：

replaceWith()和replaceAll()用于替换某个节点
示例：

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");

注意：两者的关系类似于append()和appendTo()

复制节点操作：
clone()用于复制某个节点

语法：

$(selector).clone([includeEvents]) ;//参数ture或flase, true复制事件处理，flase时反之

通俗的来说true的话，复制出来的副本，也可以进行复制；默认值为false，复制出来的副本，不能够再进行复制。

示例：

$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

节点遍历：

遍历子元素
children()方法可以用来获取元素的所有子元素

语法：

$(selector).children([expr]);

示例：

var $section =$("section").children();//获取<section>的子元素，但不包含子元素的子元素
alert($section.length);

遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

在这里插入图片描述

遍历前辈元素
jQuery中可以遍历前辈元素

语法：

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

示例：

$("li:eq(1)").parent().addClass("orange");
 $("li:eq(1)").parents().addClass("orange");

其他遍历方法

each( ) ：规定为每个匹配元素规定运行的函数
end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

语法：

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

index：选择器的位置
element：当前的元素

示例：
each():

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

end():

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");