JQuery基础(一)


一、JQuery简介

jQuery 是一个 JavaScript 库,提供了大量的拓展,它极大地简化了 JavaScript 编程。了解常用操作之前,有必要了解一下jQuery对象和DOM对象的区别。

  • DOM对象:是用传统的方法(javascript)获得的对象。在js对网页进行操作时,认为网页中的每个标签就是一个对象,使用面向对象的思想来操作,js中提供了一个document对象,表示整个html文档对象,网页加载后会自动生成表示此文档的document对象,通过document提供的方法精确获得网页中要操作的标签;
  • jQuery对象:是用jQuery类库的选择器获得的对象。jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。
  • DOM对象和JQuery对象的相互转化
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom对象与JQuery对象</title>
	</head>
	<body>
		<div id="mydiv">div文本</div>
	</body>
	<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// Dom对象
		var divDom = document.getElementById("mydiv");
		console.log(divDom);		
		//Jquery包装集对象
		var divJquery = $("#mydiv");
		console.log(divJquery);		
		//Dom对象转Jquery对象
		var domToJquery = $(divDom);
		console.log(domToJquery);		
		//Jquery对象转Dom对象
		var JqueryToDom = divJquery[0];
		console.log(JqueryToDom);		
	</script>
</html>

二、常用操作

1.JQuery选择器

基础选择器

选择器格式实例含义
id选择器#id$(“#testDiv”)选择id为testDiv的元素
元素名称选择器element$(“div”)选择所有div元素
类选择器.class$(“.blue”)选择所有class=blue的元素
选择所有元素*$(“*”)选择页面所有元素
组合选择器selector1,selector2,…$(“#testDiv,span,.blue”)同时选中多个选择器匹配的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础选择器</title>
		<style type="text/css">
			.blue{
				background-color: blue;
			}
			.yellow{
				background-color: yellow;
			}
		</style>
	</head>	
	<body>
		<div id="mydiv">基础选择器
			<div class="yellow">
				<span class="blue">
					这是一行文本
				</span>
			</div>		
		</div>
		<input type="text" value="今天是星期六" />
	</body>
	<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//id选择器
		var ele1 = $("#mydiv");
		console.log(ele1);//包含div#mydiv
		//类选择器
		var ele2 = $(".yellow");
		console.log(ele2);//包含div.yellow
		//元素名称选择器	
		var ele3 = $("span");
		console.log(ele3);//包含span.blue
		//选择所有元素
		var ele4 = $("*");
		console.log(ele4);//包含所有
		//组合选择器
		var ele5 = $("#mydiv,.yellow,span,input")
		console.log(ele5);//包含div#mydiv、div.yellow、span.blue、input
		
	</script>
</html>

层次选择器

选择器格式实例含义
后代选择器父元素 指定元素$(“父元素 指定元素”)选择父元素的所有指定元素(包含第一代,第二代等)
子代选择器父元素>指定元素$(“父元素>指定元素”)选择父元素的所有第一代指定元素
相邻选择器父元素+指定元素$(“元素+指定元素”)选择元素的下一个指定元素
同辈选择器父元素~指定元素$(“父元素~指定元素”)选择父元素下面的所有指定元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery层次选择器</title>
	</head>
	<body>		
		<div id="parent">层次选择器		
			<div id="select1">选择器1
				<div class="gray">
					选择器1中的div
				</div>
			</div>			
			<div id="select2">选择器2
				<div class="blue">
					选择器2中的div
				</div>
			</div>			
		</div>
	</body>
	<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//后代选择器
		var ele1 = $("#parent div");
		console.log(ele1);//包含div#select1\div#gray\div#select2\div#blue
		//子代选择器
		var ele2 = $("#parent>div");
		console.log(ele2);//包含div#select1\div#select2
		//邻居选择器
		var ele3 = $("#select1+div");
		console.log(ele3);//包含div#select2
		//同辈选择器
		var ele4 = $("#select1~div");
		console.log(ele4);//包含div#select2
				
	</script>
</html>

表单选择器

选择器格式实例含义
表单选择器:input$(“:input”)查找所有的input、textarea、select和button元素
文本框选择器:text$(“:text”)查找所有的文本框
密码框选择器:password$(“password”)查找所有的密码框
单选框选择器:radio$(“:radio”)查找所有单选按钮
复选框选择器:checkbox$(":checkbox ")选择所有复选框
提交按钮选择器:submit$(":submit ")查找提交按钮
图像域选择器:image$(“:image”)查找所有图像域
重置按钮选择器:reset$(“:reset”)查找所有重置按钮
按钮选择器:button$(“:button”)查找所有按钮
文件域选择器:file$(“:file”)查找所有文件域

2.操作元素的属性

属性可以分为固有属性、返回值是Boolean的属性和自定义属性:

  • 固有属性:元素本身就有的属性(id、name、class、style)等;
  • 返回值是Boolean的属性:checked、selected、disabled 等;
  • 自定义属性:用户自己定义的属性。
操作元素方式语法
获取属性
attr("属性名")
prop("属性名")
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名")
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的属性</title>
	</head>
	<body>
		姓名:<input type="text" id="uname" name="uname" value="zhangsan" test="XiAn" /><br />
		年龄:<input type="text" id="uage" name="uage" value="22" /><br />
		性别:<input type="radio" id="ugender1" name="ugender" checked="checked" />
		<input type="radio" id="ugender2" name="ugender" />

	</body>
		<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//获取属性
		var ele1 = $("#uname").attr("name");
		console.log(ele1); //输出uname
		var ele2 = $("#uname").prop("name");
		console.log(ele2); //输出uname
		var ele3 = $("#ugender1").attr("checked");
		console.log(ele3); //输出checked
		var ele4 = $("#ugender1").prop("checked");
		console.log(ele4); //输出true
		var ele5 = $("#uname").attr("test");
		console.log(ele5); //输出AiAn
		var ele6 = $("#uname").prop("test");
		console.log(ele6); //输出undefine
		//设置属性与移除属性	
		$("#uname").removeAttr("value");
		$("#ugender2").prop("checked", "true");
	</script>
</html>		

由以上例子可知:attr()和prop()的区别有:

  1. 如果是固有属性,attr()和prop()方法均可获取
  2. 如果使自定义属性,attr()可获取,prop()不可获取
  3. 如果使返回值是boolean类型的属性,若设置了属性,attr()返回具体的值,prop()返回true;若未设置属性,attr()返回undefined,prop()返回false;

因此一般用法是:如果属性的类型是boolean,则使用prop()方法;否则使用attr()方法

3.操作元素的样式

方法说明
attr(“class”)获取元素的样式名
attr(“class”, “样式名”)设置元素的样式(原本的样式会被覆盖)
addClass(“样式名”)添加样式(在原来的样式基础上添加样式,原来的样式会保留;如果出现相同的样式,则会以后定义的为准)
css(“样式名”,“样式值”)添加单个样式
css({“样式名1”:“样式值1”,“样式名2”:“样式值2”})添加多个样式
removeClass(“样式名”)移除样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的样式</title>
		<style type="text/css">
			div{
				padding: 8px;
				width: 180px;
			}
			.green{
				background-color: green;
			}
			.blue{
				background-color: blue;
			}
			.larger{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
			<div id="conBlue" class="blue larger">天蓝色</div>
			<div id="conGreen">草绿色</div>
			<div id="remove" class="blue larger">天蓝色</div>
	</body>
	<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//获取样式名
		var cla = $("#conBlue").attr("class");
		console.log(cla);//输出blue larger
		//设置样式
		$("#conGreen").attr("class","green");
		//添加样式
		$("#conBlue").addClass("green");//结果仍然显示蓝色
		//添加具体样式
		$("#conGreen").css("font-size","30px");
		$("#conGreen").css({"color":"red","font-family":"楷体"});
		//移除样式
		$("#remove").removeClass("blue");
	</script>
</html>

4.操作元素的内容

  • 表单元素:文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

  • 非表单元素:div、span、h1~h6、table、tr、td、li、p等

方法说明
html()获取元素的内容,包含html标签 (非表单元素)
html(“内容”)设置元素的内容,包含html标签 (非表单元素)
text()获取元素的纯文本内容,不识别HTML标签 (非表单元素)
text(“内容”)设置元素的纯文本内容,不识别HTML标签(非表单元素)
val()获取元素的值 (表单元素)
val(“值”)设置元素的值(表单元素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的内容</title>
	</head>
	<body>
		<div id="mydivhtml"><p>这是一段用来测试的文字1</p></div>
		<div id="mydivtext"><p>这是一段用来测试的文字2</p></div>
		姓名:<input type="text" id="uname" name="uname" value="zhangsan" test="XiAn" /><br />
		年龄:<input type="text" id="uage" name="uage" value="22" /><br />
		性别:<input type="radio" id="ugender1" name="ugender" checked="checked" />
		<input type="radio" id="ugender2" name="ugender" />
	</body>
	<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//获取元素内容
		var html = $("#mydivhtml").html();
		console.log(html);//输出:<p>这是一段用来测试的文字1</p>
		//设置元素的内容
		$("#mydivhtml").html("<h2>学生信息选择</h2>");
		var htmldata = $("#mydivhtml").html();
		console.log(htmldata);//输出:<h2>学生信息选择</h2>
		//获取元素的纯文本内容
		var text = $("#mydivtext").text();
		console.log(text);//输出:这是一段用来测试的文字2
		//设置元素的纯文本内容
		$("#mydivtext").text("<h2>学生信息选择</h2>");
		var mydivtext1 = $("#mydivtext").text();
		console.log(mydivtext1);//输出:<h2>学生信息选择</h2>,这里h2是纯文本,不是标签
		//获取元素的值
		var val1 = $("#uname").val();
		console.log(val1);//输出:zhangsan
		//设置元素的值
		$("#uname").val("Lisi");
		var val2 = $("#uname").val();
		console.log(val2);//输出:Lisi
	</script>	
</html>	

5.创建元素

		语法: $('元素内容')
		例如:$('<p>this is a paragraph!!!</p>');

6.添加元素

1.前追加元素
	指定元素.prepend(内容)   在指定元素内部的最前面追加内容,内容可以是字符串、html元素或jquery对象。
	$(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面,内容可以是字符串、html元素或jquery对象  √
2.后追加元素
	指定元素.append(内容)   在指定元素内部的最后面追加内容,内容可以是字符串、html元素或jquery对象。
	$(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面,内容可以是字符串、html元素或jquery对象   √
3.前追加同级元素
	before(内容) 在指定元素的前面追加内容
4.后追加同级元素
	after(内容) 在指定元素的后面追加内容

注:
在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置
如果元素本身存在 (已有元素) ,会将原来元素直接剪切设置到指定位置
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建元素和添加元素</title>
	</head>
	<body>
			<div id="mydiv">
				<span id="han">汉朝</span>
				<span id="tang">唐朝</span>
			</div>
	</body>
	<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	//前追加元素
	$("#mydiv").prepend("<span>秦朝</span>");
	$("<span>商朝</span>").prependTo($("#mydiv"));
	//后追加元素
	$("#mydiv").append("<span>元朝</span>");
	$("<span>明朝</span>").appendTo($("#mydiv"));
	//前追加同级元素
	$("#han").before("<span>楚汉</span>")
	//后追加同级元素
	$("#tang").after("<span>宋朝</span>")
	</script>
</html>

7.删除元素

方法说明
remove()删除所选元素及其对应的的子元素,包括整个标签和内容一起删
empty()清空所选元素的内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除元素</title>
	</head>
	<body>	
		<div id="mydiv">
			<div id="han">汉朝
				<span>东汉</span><br />
				<span>西汉</span>
			</div>
			<span id="tang">唐朝</span>
		</div>
	 </body>
	 <script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
		 $("#han").remove();
		 $("#tang").empty();
	 </script>
</html>

8.遍历元素

$(selector).each(function(index,element))
其中:
	function为遍历时的回调函数
	index为遍历元素的序列号,从0开始
	element时当前的元素,此时是dom元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历元素</title>
		<style type="text/css">
			.green{
				background-color: green;
			}
		</style>
	</head>
	<body>
			<span class="green">jquery</span>
			<span class="green">javase</span>
			<span class="green">http</span>
			<span class="green">servlet</span>			
	</body>
	<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("span").each(function(index,ele){
			console.log(index + ":" + $(ele).text());
		})

	</script>
</html>

9.ready加载事件

ready加载事件也叫预加载事件,当页面的dom结构加载完毕后执行,类似于JS中的load事件,ready事件可以写多个,语法为

		$(document).ready(function(){
			
		})
		可以简写为:
		$(function()){
			
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ready加载事件</title>
		<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				console.log($("#p1"));
			})
		
		</script>
	</head>
	<body>
			<p id="p1">这是测试文本</p>
	</body>
</html>

  • 25
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值