jQuery基本操作

水沉草木

于 2022-08-23 08:31:08 发布

阅读量316

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_69761234/article/details/126424806

版权

设置和获取样式值

语法：css(name,value) ; 或 css({name:value, name:value,name:value…})

追加和移除样式

追加样式

语法：$(selector).addClass(class); 或 $(selector).addClass(class1 class2 … classN);

移除样式

语法：$(selector).removeClass("class") ; 或 $(selector).removeClass("class1 class2 … classN ") ;

toggleClass() 模拟了addClass()与removeClass()实现样式切换的过程

语法：$(selector).toggleClass(class) ;

<!doctype html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>追加和移除样式</title>
<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:14px;
	font-family:"微软雅黑";
	line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
</style>

</head>
<body>

 <h2 class="title" >jQuery操作CSS</h2>
 <p class="text">
	 css()设置或返回样式属性<br>
	 addClass()增加一个或多个类<br>
	 removeClass()移除一个或多个类
 </p>
 <script src="js/jquery-1.12.4.js" ></script>
 <script>
	//  $(document).ready(function(){
	// 	 $("h2").mouseover(function() {
	// 		 $("p").addClass("content border");
	// 	 });
	// 	 $("h2").mouseout(function() {
	// 		 $("p").removeClass("text content");
	// 	 });
              
                  $("h2").click(function() {
			 $("p").toggleClass("content border");
		 });
              

	//  });

 </script>
</body>
</html>

判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法：$(selector). hasClass(class);

<!doctype html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>追加和移除样式</title>
<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:14px;
	font-family:"微软雅黑";
	line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
</style>

</head>
<body>

 <h2 class="title" >jQuery操作CSS</h2>
 <p class="text">
	 css()设置或返回样式属性<br>
	 addClass()增加一个或多个类<br>
	 removeClass()移除一个或多个类
 </p>
 <script src="js/jquery-1.12.4.js" ></script>
 <script>
	 $(document).ready(function(){
		/* $("h2").mouseover(function() {
			 $("p").addClass("content border");
		 });
		 $("h2").mouseout(function() {
			 $("p").removeClass("text content");
		 });*/
              /*
                  $("h2").click(function() {
			 $("p").toggleClass("content border");
		 });
              */
        $("h2").mouseover(function() {
        	if(!$("p").hasClass("content ")){
				$("p").addClass("content ");
			}	 
		 });
		 $("h2").mouseout(function() {
			if($("p").hasClass("content ")) {
				$("p").removeClass("content ");
		    }
		 });
	 });

 </script>
</body>
</html>

HTML代码操作：html()可以对HTML代码进行操作，类似于JS中的innerHTML

语法：$("div.left").html(); 或 $("div.left").html("<div class='content'>…</div>")

标签内容操作：text()可以获取或设置元素的文本内容

语法：$("div.left").text(); 或 $("div.left").text("<div class='content'>…</div>")

属性值操作：val()可以获取或设置元素的value属性的值

语法：$(this).val(); 或 $(this).val(value);

节点操作

创建节点

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

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

插入节点

元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中如：$newNode1. prependTo ("ul");

元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前如：$newNode1.insertBefore("ul");

删除节点

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

remove()：删除整个节点

empty()：清空节点内容

detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点

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

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

$($newNode1).replaceAll(".gameList li:eq(2)");

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

语法：$(selector).clone([includeEvents]) ;

属性操作

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

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

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

语法： $(selector).removeAttr(name) ;

节点遍历

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>节点遍历</title>
<style>
 .hot{ color:#F00;}
a{	color:#000;
	text-decoration:none;
}
	.orange{
		background: #c3910b;
	}
 .orange a{
	 color: #ffffff;
 }
</style>

</head>
<body>
<section>
	<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
	<ul>
		<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
		<li><a href="#">苹果iPad mini</a></li>
		<li><a href="#">三星GALAXY Ⅲ</a></li>
		<li><a href="#">苹果iPhone 5</a></li>
	</ul>
</section>
<script  src="js/jquery-1.12.4.js" ></script>
<script>
	
$(document).ready(function(){
    //遍历子节点
    var $section =$("section").children();
    alert($section.length);
});
</script>
</body>
</html>

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

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");
prev([expr])	用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");
siblings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)"). siblings().addClass("orange");

遍历前辈元素

Query中可以遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

jQuery中的事件

鼠标事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

浏览器事件：调整窗口大小时，完成页面特效

语法： $(selector).resize( );

绑定事件

移除事件

水沉草木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本操作

语法：css(name,value);或 css({name:value, name:value,name:value…})追加样式语法：$(selector).addClass(class);或 $(selector).addClass(class1 class2 … classN);移除样式语法：$(selector).removeClass("class");或 $(selector).removeClass("class1 class2 … classN ");
复制链接

扫一扫