jQuery常用方法补充

最新推荐文章于 2024-07-14 19:15:47 发布

TalentO_o

最新推荐文章于 2024-07-14 19:15:47 发布

阅读量75

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42652869/article/details/113182753

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.追加和移除样式

1.1.css()

//单独设置一个样式	css("样式属性名","样式属性值")
$("div").css("background", "#FF3300");
//同时设置多个样式	css({"样式属性名1:"样式属性值1","样式属性名2"："值2"})
$("div").css({
    "background": "red",
    "color": "blue"
});

1.2.addClass()

.content {
	background-color: #FFFF00;
}
			
.border {
	border: 1px dashed #333;
}

//addClass(class属性值1 class属性值2):追加样式,相当于给元素添加了class属性
$("p.text").addClass("content border");

1.3.removeClass()

$("p.text").removeClass("content");

2.hasClass()、 toggleClass()

2.1.hasClass()

hasClass() 方法检查被选元素是否包含指定的 class。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("p:first").hasClass("intro"));
  });
});
</script>
<style type="text/css">
.intro
{
	font-size:120%;
	color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>检查第一个段落是否拥有类 "intro"</button>
</body>
</html>

2.2.toggleClass()

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
```
<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">添加或移除列表项的类</button>
</body>
</html>
```
3.bind()
/*
* bind(“事件”,function)绑定一些基本事件
* 可以绑定一个事件，也可以同时绑定多个事件
*/
//绑定一个事件
//$(".on").bind(“mouseover”,function(){
// $(".topDown").show();
//})
//绑定多个事件
$(".on").bind({
mouseover: function(){
$(".topDown").show();
},
mouseout: function(){
$KaTeX parse error: Expected 'EOF', got '}' at position 27: \dots).hide(); }̲ }) 4.hover\dots$ (".on").mouseover(function(){
// $KaTeX parse error: Expected 'EOF', got '}' at position 28: \dots.show(); //}̲) //$ (".on").mouseout(function(){
// $(".topDown").hide()
//})
$(".on “).hover(
function() {
//第一个参数相当于mouseover
$(”.topDown").show();
},
function() {
$(".topDown").hide();
})

5.toggle()

show()方法和hide()方法是jQuery 中最基本的动画方法。
在HTML 文档里，为一个元素调用hide()方法，**会将该元素的display样式改为"none"。**
当把元素隐藏后，可以使用show()方法将元素的display 样式设置为先前的显示状态
("block"或"inline"或其他除了"none"之外的值）。
show()方法和hide()方法在不带任何参数的情况下，相当于css
("display":none/block/inline)，
作用是立即隐藏或显示匹配的元素，不会有任何动画。
如果希望在调用show()方法时，元素慢慢地显示出来，可以为show（）方法指定一个速度参数，
 例如，指定一个速度关键字“ slow、normal、 fast”。应时间为0.6秒、0.4秒和0.2秒 
也可设置整数指定执行时间数字计数级别是毫秒 slow 、normal、 fast实际上相当于600、400、200的值，
用来设定整个显示/隐藏过程消耗多少毫秒。
如：("p").show(1000);该示例使p元素中1秒内显示完毕。也能添加回调事件函数。



<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>toggle</title>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function() {
				//$("#btnShow").toggle(
				//	function() {
				//		$("h3").show(1000);
				//	},
				//	function() {
				//		$("h3").hide(1000);
				//	})
				$("#btnShow").click(function(){
					$("h3").toggle(1000);
				})
			});
		</script>

	</head>

	<body>

		<h3>toggle方法</h3>
		<button id="btnShow">显示\隐藏</button>

	</body>

</html>

6.淡入淡出

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>淡入淡出效果</title>
		<style>
			body {
				text-align: center;
			}
		</style>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			/*
			 * fadeIn() 可以让元素淡入 ,不加参数0，
			 * slow normal fast 0.6,0.4,0.2
			 * 
			 */
			$(function(){
				$("input[name='fadein_btn']").click(function(){
					//淡入效果
					$("img").fadeIn("slow");//0.6s
				});
				$("input[name='fadeout_btn']").click(function(){
					//淡入效果
					$("img").fadeOut(2000);//0.6s
				})
			});
		</script>
	</head>

	<body>

		<img src="images/ad.jpg" /><br/>
		<input name="fadein_btn" type="button" value="淡入" />
		<input name="fadeout_btn" type="button" value="淡出" />

	</body>

</html>

7.滑动

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>改变元素高度</title>

		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
			}
			
			h2 {
				background-color: blue;
				color: white;
				margin: 0px;
			}
		</style>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function(){
				$("h2").click(function(){
					$(".txt").slideUp(2000);
					$(".txt").slideDown(2000);
					//$(".txt").slideToggle(2000);
				})
			});
		</script>

	</head>

	<body>
		<div id="box">
			<h2>窗边的小豆豆</h2>
			<div class="txt">
				<p>本书讲述了作者上小学的一段真实的故事。</p>
				<p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p>
				<p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
			</div>
		</div>
	</body>

</html>

TalentO_o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用方法补充

1.追加和移除样式1.1.css()//单独设置一个样式 css("样式属性名","样式属性值")$("div").css("background", "#FF3300");//同时设置多个样式 css({"样式属性名1:"样式属性值1","样式属性名2"："值2"})$("div").css({ "background": "red", "color": "blue"});1.2.addClass().content { background-color: #FFFF0
复制链接

扫一扫

专栏目录