jQuery

风~叶～草

于 2020-04-18 19:30:16 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/qq_39544980/article/details/105603700

版权

jQuery

一，属性操作

1.1 通用的属性操作

1.prop()：获取、设置元素的属性
2.removeProp()：删除属性
3.attr()：获取、设置元素的属性
4.removeAttr()：删除属性

注：
1.prop(参数1，参数2)和attr(参数1，参数2)是对元素进行属性的设置
  prop(参数)和attr(参数)是对元素的属性进行获取
2.prop()和attr()都能对元素的固有属性和自定义属性进行设置和获取
3.prop()和attr()的设置和获取不能穿插使用
4.prop()一般用于对元素的固有属性进行设置和获取，
  attr()一般用于对元素的自定义属性进行设置和获取
5.removeProp()只能移除自定义的属性
  removeAttr()既可以移除自定义的属性也可以移除固有属性

1.2 class属性操作

1.addClass()：添加class的属性值
2.removeClass()：删除class的属性值
3.toggleClass()：切换class属性
	例如：jquery对象.toggleClass("c")
		  判断如果元素上有class="c"，则将属性值c删除；
		  如果没有class="c"，则添加属性值c。

1.3 元素的追加和删除

1.append()
	a.append(b)：将b元素作为a元素的子元素，并且追加到末尾
2.prepend()
	a.prepend(b)：将b元素作为a元素的子元素，并且添加在开头
3.appendTo()
	a.appendTo(b)：将a元素作为b元素的子元素，并且追加到末尾
4.prependTo()
	a.prependTo(b)：将a元素作为b元素的子元素，并且添加在开头

5.before()
	a.before(b)：将b元素放到a元素之前
6.after()
	a.after(b)：将b元素放到a元素之后

7.remove()：删除元素
8.empty()：删除所有后代元素，保留自身

列表左右移动案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				width: 400px;
				height: 600px;
				font-size: 36px;
			}
			#right{
				margin-left: 200px;
			}
			div{
				display: inline-block;
				position: absolute;
				left: 480px;
				top: 100px;
			}
			button{
				width: 60px;
				margin-top: 90px;
				margin-bottom: 90px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js">
		</script>
		<script type="text/javascript">
			$(function(){
				$("#in").click(function(){
					$("#left > option:selected").appendTo($("#right"));
				})
				$("#out").click(function(){
					$("#right > option:selected").appendTo($("#left"));
				})
			})
		</script>
	</head>
	<body>
		<select id="left" multiple>
			<option>燕新磊</option>
			<option>吴炳根</option>
			<option>胡浩东</option>
			<option>欧后成</option>
			<option>王超</option>
		</select>
		
		<div>
			<button id="in">入会</button>
			<br />
			<button id="out">退会</button>
		</div>
		
		<select id="right" multiple>
		</select>
		
		
	</body>
</html>

二， jQuery的循环

1.
要遍历的jquery对象.each(function(){
	...
})

要遍历的jquery对象.each(function(参数1，参数2){
	...
})
	2.
$.each(要遍历的jquery对象,function(){
	...
})

$.each(要遍历的jquery对象,function(参数1，参数2){
	...
})

注：
1.参数1表示索引，参数2表示遍历到的每个对象
2.参数1和参数2的形参名是任意的
3.没有参数的函数，在遍历过程中，可以通过this表示每次遍历得到的对象
4.在函数中使用return false;表示break
使用return true;表示continue

3.
for(临时变量 of 要遍历的jquery对象){
	...
}

三，事件的高级用法

3.1 绑定事件和解除绑定

jquery对象.on("事件名称",函数)
jquery对象.off("事件名称")：解绑指定事件
jquery对象.off()：解绑所有事件

3.2 切换绑定

jquery对象.toggle(函数1，函数2，...)
注：
该功能在jquery2.0之后被删除了，如果要在高版本中使用，需要引入
migrate插件。

随机换图案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js">
		</script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			button{
				width: 148px;
				height: 50px;
			}
			#img2{
				border: 0.5px solid black;
				width: 600px;
				height: 337.5px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				
				var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg",
				"img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"];
				
				$("#startBtn").on("click",function(){
					t = setInterval(function(){
					index = Math.floor(Math.random() * 7);
					$("#img1").prop("src",imgs[index]);
					},10)
					$(this).prop("disabled",true);
				});
				$("#stopBtn").click(function(){
					clearInterval(t);
					$("#startBtn").prop("disabled",false);
					$("#img2").prop("src",imgs[index]).hide().show(500);
				});
			})
		</script>
	</head>
	<body>
		<img src="img/1.jpg" width="300px" id="img1"/>
		<br />
		<button id="startBtn">开始</button>
		<button id="stopBtn">停止</button>
		<br />
		<img id="img2" />
	</body>
</html>

风~叶～草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery一，属性操作1.1 通用的属性操作1.prop()：获取、设置元素的属性2.removeProp()：删除属性3.attr()：获取、设置元素的属性4.removeAttr()：删除属性注：1.prop(参数1，参数2)和attr(参数1，参数2)是对元素进行属性的设置 prop(参数)和attr(参数)是对元素的属性进行获取2.prop()和attr()都能对...
复制链接

扫一扫