JavaWeb之jQuery常用基础知识

jQuery

• jQuery是一个轻量级JS库，使用十分简单
• jQuery的核心是选择器，用于获取页面元素
• jQuery提供了大量高效方法，开发速度大幅提升

我们在使用HTML开发页面时，有两个基本点:

1. 选择HTML页面上在哪些元素
2. 在这些元素上做哪些动作

而jQuery就能更好的帮助我们进行开发

jQuery选择器

jQuery选择器用于选中需要操作的页面元素
语法1: jQuery(选择器表达式)
语法2: $(选择器表达式)
两个语法是等价的,推荐使用语法2,因为书写简单

基本选择器

基本选择器是jQuery最基础也是最常用的选择器表达式

语法	说明
$(" #id")	ID选择器,指定Id元素的对象
$(“标签”)	元素选择器,选择指定标签名的选择器
$(".class")	类选择器，选中拥有指定css类的元素
$(“S1,S2,SN”)	组合选择器,对元素进行组合

层叠选择器

层叠选择器是根据元素的位置关系来获取元素的选择器表达式

语法	说明
$(“ancestor descendant”)	后代选择器
$(“ancestor>descendant”	子选择器
$(“prev~siblings”)	兄弟选择器

属性选择器

属性选择器是根据元素的属性值来选择元素的选择器表达式

语法	说明
$(“selector[attribute=value]”)	选中属性值等于具体值的组件
$(“selector[attribute^=value]”)	选中属性值以某值开头的组件
$(“selector[attribute$=value]”)	选中属性值以某值结尾的组件
$(“selector[attribute*=value]”)	选中属性值包含某值的组件

位置选择器

位置选择器是指通过位置获取指定的元素

语法	说明
$(“selector:first”)	获取第一个元素
$(“selector:last”)	获取最后一个元素
$(“selector:even”)	获取偶数位置的元素(从0开始)
$(“selector:odd”)	获取奇数位置的元素(从0开始)
$(“selector:eq(n)”)	获取指定位置的元素(从0开始)

表单选择器

表单选择器是获取表单元素的简化形式

语法	说明
$(“selector:input”)	所有输入元素
$(“selector:text”)	获取文本框
$(“selector:password”)	获取密码框
$(“selector:submit”)	获取提交按钮
$(“selector:reset”)	获取重置按钮
…

操作元素属性

• attr(name|properties|key) 获取或设置元素属性
• removeAttr(name) 移除元素属性

<script type="text/javascript" src="js/jquery-3.5.1.js";></script>
	<script type="text/javascript">
		//获取元素属性
		var href_attr = $("a[href*='163']").attr("href");
		alert(href_attr);
		//设置元素属性
		$("a[href*='163']").attr("href","http://www.163.com");
		//移除元素属性
		$("a").removeAttr("href");
	</script>

操作元素的CSS样式

• css() 获取或设置匹配元素的样式属性
• addClass() 为每个匹配的元素添加指定的类名
• removeClass() 从所有匹配的元素中删除全部或者指定的类

<script type="text/javascript" src="js/jquery-3.5.1.js";></script>
	<script type="text/javascript">
		//设置所有超链接的颜色为红色
		$("a").css("color","red");
		//批量设置,可以传入一个JSON对象
		$("a").css({"color" : "red","font-weight" : "bold","font-style" : "italic"});
		//获取属性
		var color = $("a").css("color");
		alert(color)
		//为匹配的元素指定css类
		$("li").addClass("highlight");
		//为匹配的元素指定多个css类
		$("li").addClass("highlight myclass");
		//移除指定元素的css类
		$("p").removeClass("myclss");
	</script>

设置元素内容

• val() 获取或设置输入项的值
• text() 获取或设置元素的纯文本
• html() 获取或设置元素内部的HTML

<script type="text/javascript" src="js/jquery-3.5.1.js";></script>
	<script type="text/javascript">
		//设置输入项的值
		$("input[name='uname']").val("administrator");
		//获取输出项的值
		var v = $("input[name='uname']").val();
		//设置元素的纯文本内容,其中的所有内容都是纯文本内容
		$("span.myclass").text("<b>text</b>");
		//获取元素的纯文本内容
		var vspan = $("span.myclass").text();
		//设置元素内部的html
		$("span.myclass").html("<b>html</b>");
		//获取元素内部的html
		$("span.myclass").html();
	</script>

jQuery事件处理方法

• on(“click”,function) 为选中的页面元素绑定单击事件
• click(function) 为绑定事件的简写形式
• 处理方法中提供了event参数包含了事件的相关信息

<script type="text/javascript" src="js/jquery-3.5.1.js";></script>
	<script type="text/javascript">
		//绑定单击事件
		$("p.myclass").on("click",function () {
			//$(this)是指当前事件产生的对象
			$(this).css("background-color","yellow");
		});
		//绑定事件的简写形式
		$("span.myclass").click(function () {
			$(this).css("background-color","lightgreen");
		});
		//keypress是键盘的一次完整的按下弹起操作,event参数包含了事件的相关信息
		$("input[name='uname']").keypress(function (event) {
			//如果输入了空格,也就是ASCII码为32的字符,就会显示为红色
			if(event.keyCode == 32){
				$(this).css("color","red");
			}
		})
	</script>

jQuery常用事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
mouseover

页面就绪函数

• 页面就绪函数是指在页面加载完成后执行的函数
• 语法1: $(document)ready(function)
• 语法2: $(function)

若有错误,请各位指正,文章持续更新,知识点覆盖Java全栈,关注羽毛不迷路