jQuery常用方法

CtrlCV_Tian

于 2019-02-10 18:27:30 发布

阅读量166

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/CtrlCV_Tian/article/details/86920530

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、addClass() 给元素添加一个类名
removeClass() 给元素删除类名
toggleClass如果没有相应的类就进行添加，有的话就进行删除，相当于切换

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			#box{
				width: 200px;
				height: 100px;
				border: 1px solid black;
			}
			.red{
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$("button").eq(0).click(function(){
					$("#box").addClass("red");
				});
				$("button").eq(1).click(function(){
					$("#box").removeClass("red");
				})
				$("button:last").click(function(){
					$("#box").toggleClass("red");
				})
			})
		</script>
	</head>
	<body>
		<button>添加背景色</button>
		<button>删除背景色</button>
		<button>toggleClass</button>
		<div id="box"></div>
	</body>
</html>

2、获取或者设置内容：如果传值相当于设置内容，不传值就是获取内容
html()相当于innerHTML添加内容获取到代码
text()相当于innerText方法(纯文本，里面的标签不会被解析)获取到的是文本内容
3、css方法获取或者设置css样式

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			$(function(){
				$("button:eq(0)").click(function(){
					//链式写法
//					$("div").css("background","red").css("color","blue");
					//传入对象
					/*$("div").css({
						"background":"red",
						"color":"white"
					})*/
					//先获取到所有的div然后进行判断，此时的这个index就是
					//获取到的所有的div的下标，这样就能实现隔行变色功能
					$("div").css("background",function(index){
						if(index % 2 == 0){
							return "red";
						}else{
							return "blue";
						}
					});
				})
				$("button:eq(1)").click(function(){
					var s = $("div").css("background");
					alert(s);
				})
			})
		</script>
	</head>
	<body>
		<button>设置样式</button>
		<button>获取样式</button>
		<div>hello_1</div>
		<div>hello_2</div>
		<div>hello_3</div>
		<div>hello_4</div>
		<div>hello_5</div>
		<div>hello_6</div>
		<div>hello_7</div>
		<div>hello_8</div>
		<div>hello_9</div>
		<div>hello_10</div>
	</body>
</html>

4、each jQuery中的循环方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			$(function(){
				//此时要对拿到的数据进行展示
				var data = [
					{"name":"zhang3","age":18,"sex":"男"},
					{"name":"zhang4","age":18,"sex":"男"},
					{"name":"zhang5","age":18,"sex":"男"},
					{"name":"zhang6","age":18,"sex":"男"},
					{"name":"zhang7","age":18,"sex":"男"},
					{"name":"zhang8","age":18,"sex":"男"}
				];
				var trHTML = "<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>";
				//拿到的这个数据直接进行遍历
				$(data).each(function(index, item){
					trHTML += "<tr><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.sex+"</td></tr>";
				})
				$("table").html(trHTML);
			})
		</script>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0"></table>
	</body>
</html>

5、attr设置和获取属性 removeAttr 删除属性
attr(“要获取的属性”) 只写一个值就是获取属性获取值默认只获取第一个可以通过循环得到所有的属性
attr(“要设置的属性”,“要设置的属性的值”);值可以传入函数
removeAttr(“要删除的属性名”)

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			$(function(){
				$("button:eq(0)").click(function(){
				//点击后给所有的div都添加上属性，属性名为data-text
					$("div").attr("data-text",function(index){
						return "text-" + index;
					})
				});
				$("button:eq(1)").click(function(){
					$("div").each(function(index,item){
					//通过遍历获取所有的属性名为data-text的值
						var att = $(item).attr("data-text");
						console.log(att);
					})
				});
				$("button:eq(2)").click(function(){
				//删除属性
					$("div").removeAttr("data-text");
				})
			})
		</script>
	</head>
	<body>
		<button>设置属性</button>
		<button>获取属性</button>
		<button>删除属性</button>
		<div>{noding_1}</div>
		<div>{noding_2}</div>
		<div>{noding_3}</div>
		<div>{noding_4}</div>
		<div>{noding_5}</div>
		<div>{noding_6}</div>
		<div>{noding_7}</div>
		<div>{noding_8}</div>
		<div>{noding_9}</div>
		<div>{noding_10}</div>
	</body>
</html>

6、prop()设置或者获取元素的属性
removeProp()删除属性和attr应用场景不同具有true和false属性值的属性最好使用prop()属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("button:eq(0)").click(function(){
				//将input中的的checked属性设为true
					$("input").prop("checked",true);
				});
				$("button:eq(1)").click(function(){
					//反选
					$("input").each(function(index,item){
					//item就是当前遍历到的元素，直接将当前的这个checked设为非
						$(item).prop("checked",!$(item).prop("checked"));
					})
				})
				$("button:eq(2)").click(function(){
				//将input中的的checked属性设为false
					$("input").prop("checked",false);
				})
			})
		</script>
	</head>
	<body>
		<button>全选</button>
		<button>反选</button>
		<button>取消全选</button>
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
	</body>
</html>

7、show() 显示当前元素 hide() 隐藏当前元素
相当于原生JS中的display:block;display:none;