[JavaScript知识库] web技术 --- JQuery引入【选择器，事件，函数】

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> web技术 --- JQuery引入【选择器，事件，函数】 -> 正文阅读

[JavaScript知识库]web技术 --- JQuery引入【选择器，事件，函数】

JQuery

内容导航

Javaweb — emmm……刚好刚好，基础技术全都……

这两天因为充足的时间，JSP，AJAX都很快的过了

之前JavaScript写完本来是要写JQuery的，但是没成想忘记了，进入了servlet的web编程；技术的出现都会为了更加方便的编程，特别是一些规模较小的技术，JSP为了减少Servlet的输出的冗杂问题，AjAX提供了异步刷新的问题，带来了更好的体验；— 本来是JS和XML，现在是JS和JSON；而JSP中的EL技术简化了输出的步骤；而JQuery的出现就是简化JavaScript的BOM编程

因为JS编程的BOM部分，要获取结点只能是getElementByID ----- 这个很长，如果没有提示就很难书写，所以就要使用JQurey；方法名长并且区分大小写，因此代码量还非常大

这里首先来一段传统的DOM操作代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery介绍</title>
		<script type="text/javascript">
			fun = function() {
				console.log(document.getElementById("text1").value);
				console.log(document.getElementById("text2").value);
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text" value="张三" />
		<input id="text2" type="text" value="正在看正则表达式" />
		<input type="button" value="获取" onclick="fun()" />
	</body>
</html>

document.getElementById(“text1”).value就可以获取文本框的内容，但是这里的代码量太大了，导致开发的时候会浪费时间，开发应该将时间花在更有价值的地方

封装方法提升获取DOM的效率

上面的一长串代码，可以发现，只有id的位置不同，其他的代码都是相同的，那就用一个方法将这种操作给封装起来

//自定义方法，快捷获取对象
getDomObj = function(objID) {
	return document.getElementById(objID);
 }


所以直接使用上面的方法
console.log(getDomObj("text1").value);  //这里相当于是this调用的

但是这个方法名还是挺长的，可以把名字极限省略，变为a — 》a太常用了，容易冲突，换成美元符号$

a = function(objID) {
	return document.getElementById(objID);
}

console.log(a("text1").value);

-----------------------------
$ = function(objID) {
	return document.getElementById(objID);
}

console.log($("text1").value);

$就是一个函数名称，看到这个字符就知道是操作什么，简化对于DOM对象的处理

JQuery的介绍

JQuery是一款快主流浏览器的JavaScript库，封装了JavaScript相关方法的调用，简化了JavaScript对于HTML的DOM操作。库就是一个存放的仓库，JQuery中就是js代码书写的function ----- 这些function的作用就是使得HTML文档遍历、操作、事件处理、动画和Ajax变得更加简单，提高了功能性和扩展性 ----- 【原生的AJAX需要四步，非常的固定化，并且重复化，所以该封装的就得封装】

比如对于DOM对象的操作

//通过ID属性获取对象  document.getElementByid(); --->
$("#id");

//通过class属性获取对象  document.getElementByClassName(); --->
$(".class名");

//通过标签名获取对象     document.getElementByTagName(); --->
$(标签名);

其中的#，. 还有缺省就是用于区分三种方式，和CSS中相同

JQuery可以直接在官网下载即可，一般开发使用原版；上线之后使用压缩版，因为互联网B/S结构方便传输

JQuery引入 window.onload = function(){} – 简化$()

这里放一段使用JQuery的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery简单介绍</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>  <!--将JQuery库引入 -->
		<script type="text/javascript">
			$(document).ready(function(){
				alert("你好")
			})
			
			/*
				1.$(document)，$是JQuery中的函数名称，document是函数的参数，document一定程度上相当于window
				作用是将document对象变成JQuery可以使用的对象
				2.ready是JQuery中的函数，准备 -- 当页面的dom加载完毕后才会执行ready函数的内容，就相当于
				JS中的window.onload
				3.function函数就是自定义的函数，当页面加载完毕之后会执行
			*/
		</script>
	</head>
	<body>
	</body>
</html>

这里就是最主要的就是==$(document).ready()==，要将document转化成JQuery可以操作的对象；这段代码的功能和之前JS的操作的最开始用一个window.onload相同，都是页面加载成功之后

上面是标准版的写法，还有简化版的，直接省略ready和docum $( function(){} )

$(function(){
		alert("你好")
	})

其实就是
$( function(){}   )   //$函数中的函数都是页面加载之后才会执行，这就是简化版

这里的写法有多种

$(document).ready()
$()
JQuery()
window.JQuery()  都是等价的   最常使用的还是$()

DOM对象和JQuery对象

dom ----- 文档对象模型，document object model DOM，是处理可扩展标志语言的标准编程接口；通过DOM对HTML页面的解析，可以将页面元素解析成一棵树，DOM对象可以使用JavaScript中的方法，dom对象也是JS对象

var obj = documnet.getElementByid("mytext");   //obj就是一个dom对象，也是一个js对象

JQuey对象：使用Jquery语法表示的对象叫做JQuery对象，注意：JQuery表示的对象都是数组，比如

var jobj = $("#txt1")  这里的jobj就是一个JQuery对象，它是一个数组，   只是这是id来定义的，这个数组种只有一个值； 以.class或者标签获得的数组就不止一个值

DOM对象和JQuery对象可以相互转换

DOM对象转JQuery对象：

$(dom对象)     -------------- > jquery对象

JQuery对象也可以转为dom对象，

从数组种获取第一个对象【第一个对象就是dom对象】  使用[0]或者get{0}

进行dom或者jquery的转换的目的是使用对象的方法，如果想用dom对象的属性和方法就必须进行转换，比如value 等属性值；想要使用jquery方法也要转化为jquery对象

Dom对象转JQuery对象

使用$(dom对象)的格式，可以转为JQuery对象，命名JQuery对象，习惯性以美元符号开始

这里先来一段常规的JS程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom对象转JQuery对象</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>  <!--将JQuery库引入 -->
		<script type="text/javascript">
			window.onload = function(){ //按顺序执行，页面要加载完毕才可以
				var btn = document.getElementById("btn1")
				btn.onclick = function(){
					alert("常规方式" + btn.value);
					
					//转化为JQuery对象，然后使用JQuery中的val方法可以和value的效果相同
					var $btn = $(btn);
					alert($btn.val());
				}
			}
		</script>
	</head>
	<body>
		<input id="btn1" type="button" value="我是按钮" />
	</body>
</html>

这里再HBuilder中可以使用JQuery的提示库，JQuery中的方法书写都很简单；直接将dom对象放在$()中就变为了JQuery对象

JQuery对象转dom对象

JQuery转为dom，因为JQuery对象都是一个数组，所以可以直接取下标0；或者使用JQuery对象的方法get就可以得到dom对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery简单介绍</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>  <!--将JQuery库引入 -->
		<script type="text/javascript">
			//获取输入的文本框的内容
			btnclk = function() {
				//使用JQuery方式获取成JQuery对象
				//alert($("#txt")[0].value); //获取到的是数组，使用get(0)或者[0]都可以转为普通dom对象
				alert($("#txt").get(0).value);
			}
		</script>
	</head>
	<body>
		<input id="btn1" type="button" value="按钮" onclick="btnclk()" /><br/>
		<input id="txt" type="text"/>
	</body>
</html>

$("#txt").get(0).value 这里#就是通过id获取，.就是通过class获取，无就是通过标签获取

基本选择器 # . 无

选择器：就是定位条件，通知JQuery函数定位满足条件的DOM对象；其实和CSS是相同的

选择器就是字符串，可以用来定位dom对象，常见的选择器有id选择器，标签选择器，类选择器

id选择器： $("#") 通过id来定位dom对象，id在当前页面是唯一的
class选择器： $(".") 通过class 样式定位dom对象
标签选择器： $("") 使用标签名来定位dom对象 ---- 加上了（）所以就是一个jquery对象

在编辑器中使用JQuery的语法提示库，就可以非常方便的提示了；上面的位置已经使用过了按照id选择的

alert($("#txt").get(0).value);

这里再举一个例子，使用jquery对象的css方法可以改变对象的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery简单介绍</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>  <!--将JQuery库引入 -->
		<style type="text/css">
			div{
				background-color: aquamarine;
				height: 200px;
				width: 300px;
			}
		</style>
		
		<script type="text/javascript">
			btnclk = function() {
				//通过标签获取第一个div，改变其样式--背景色改为红色
				//这里就直接使用jquery的方法css就可以修改
				$("#one").css("background-color","red");
			}
			
			btnclk1 = function() {
				//通过class样式获取第二个div；使用样式选择器
				$(".two").css("background-color","yellow");
			}
			
			btnclk2 = function(){
				//通过标签获取dom对象，这样获取的对象不止一个，这里有3个
				$("div").css("background-color","black");
			}
		</script>
	</head>
	<body>
		<div id="one">我是第一个div，使用标签</div><br>
		<div class="two">我是第二个div，使用的样式</div><br/>
		<div>我是一个普通的div</div> <br><br>
		<input type="button" value="通过id获取dom对象" onclick="btnclk()"/><br/>
		<input type="button" value="通过class获取dom对象" onclick="btnclk1()"/><br>
		<input type="button" value="通过标签获取dom对象" onclick="btnclk2()"/>
	</body>
</html>

注意Jquery函数是会操作对象数组的每一个对象，所以标签定位的就会改变所有的标签；class是自定义样式，所有应用该样式的标签都要加上属性class；相当于就是一个类了，可以按照类来理解；归类；

所有选择器 $("*")

如果不加具体的选择,也可以使用全部选择器，也就是全选所有的对象，也就是$("*")

组合选择器

这个在CSS中也有，就是搭配多个，将多个被选择的对象间使用，分隔姓曾的选择器

$("#id,.class,type")

表单选择器 :

表单相关的元素选择器是指文本框、单选器、复选框、下列表等元素的选择方式，该方法无论是否存在表form都可以做出选择；表单选择器是为了更加容易操作表单，更具元素类型来操作的

$(":type属性值")
比如
$(":text")  所有的文本框
$(":radio")  所有的单选框

快速定义所有的一类对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery简单介绍</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>  <!--将JQuery库引入 -->
	
		<script type="text/javascript">
			btnclk = function(){
				//使用表单选择器，读取所有文本框的值 这里就一个
				alert($(":text").val());  
				 //使用表单选择器读取多有的单选按钮，这里有两个
				 var $rdio = $(":radio"); //一个jquery对象数组
				 for(var i = 0; i < $rdio.length; i++) {
					 //获取成员，使用下标的方式---- 使用了下标就变成了dom对象，就不能使用jquery的方法eval了
					var dom = $rdio[i];
					console.log(dom.value);
				 }
				 //使用表单选择取读取checkbox;这里使用jquery的val函数获取
				 var $chebox = $(":checkbox");
				  for(var i = 0; i < $chebox.length; i++) {
					  //变成jquery对象会多此一举，但是还是看看
					  var dom = $chebox[i];
					  var $dom = $(dom);
					  console.log($dom.val());
				  }
			}
		</script>
	</head>
	<body>
		<input type="text" value="我是一个type=text" />
		<br>
		<input type="radio" value="man" />男<br>
		<input type="radio"  value="women"/>女 <br>
		<br/>
		<input type="checkbox" value="bike" />骑自行车<br/>
		<input type="checkbox" value="soccer" />踢足球<br/>
		<input type="checkbox" value="ping-pong" />骑行<br/>
		<br>
		<input type="button" value="操作" onclick="btnclk()"/><br/>
	</body>
</html>

获取的JQuey对象都是一个数组，只是根据id或者其他的获取的只有一个对象，就可以直接用jquery的eval方法获取；但是如果是数组，通过下标方式就会转化为dom对象，就不能使用jquery的方法，而只能使用js中的方法

还有其他的选择器这里就先不深入了，以后遇到单独分享； — 还有注意不要和EL表达式弄混淆了，EL表达式时大括号，这里的选择器都是小括号；并且形式不一样

过滤器

JQuery对象中存储的Dom对象顺序和页面标签声明的顺序是一致的，也就是先出现的会先进入数组

在servlet中分享过监听器和过滤器，监听器可以监听对应的共享与的创建销毁或者属性变化的时刻；过滤器可以拦截所有目标路径的请求并进行过滤；满足调节的直接使用方法放行

在JQuery中也有过滤器；过滤器就是过滤条件，对已经定位到数组的DOM对象进行过滤筛选，过滤条件不能独立出现，必须出现在选择器的后方 在定位了dom对象后，根据一些条件筛选dom对象，也是字符串；直接跟在选择器后方

基本过滤器

选择第一个first，保留数组的第一个DOM对象

$("选择器:first")

选择最后一个last，保留数组的最后一个DOM对象

$("选择器:last")

选择数组中的指定的对象根据下标 eq

$("选择器:eq(index)")  index是数组的下标

选择小于指定对象的所有的对象，也是下标 lt

$("选择器:lt(index)")

选择大于指定对象的所有的对象，下标gt

$("选择器:gt(index)")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本过滤器</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			div{
				background-color: aquamarine;
				height: 20px;
				width: 200px;
			}
		</style>
		
		<script type="text/javascript">
			func = function(){
				//选择第一个div；改变颜色
				//$("div:first").css("background-color","yellow");
				
				//选额最后一个div，改变颜色  选择器和过滤器都是字符串，都在""中   first和last和eq都是过滤只剩1个
				//$("div:last").css("background-color","red");
				
				//选择下标为3的，也就是第4个div;使用的都是两字符的eq
				//$("div:eq(3)").css("background-color","red");
				
				//选择下标大于0的，也就是除了第一个所有的div；css方法可以直接变化所有，不需要遍历
				//$("div:gt(0)").css("background-color","red");
				
				//选择下标小于3的，也就是前三个div
				$("div:lt(3)").css("background-color","red");
			}
		</script>
	</head>
	<body>
		<div>我是div1</div><br>
		<div>我是div2</div><br>
		<div>我是div3</div><br>
		<div>我是div4</div><br>
		<div>我是div5</div><br>
		<div>我是div7</div><br>
		<div>我是div8</div><br>
		
		<input type="button" value="功能按钮" onclick="func()" />
	</body>
</html>

上面看到了JQuery的一个重要的手段就是快捷得到dom对象进行操作，不需要用长的方法获取，并且和CSS有相似之处，这里.是class； #是id；无是标签； : 是表单选择器【没有forn没有关系，主要是其内部的几个标签】

表单属性过滤器

上面的基本过滤器其实都是根据下标来进行过滤的，选择器中除了基本的选择器，还有表单选择器，那么对应的也有表单属性过滤器；根据表单的dom状态情况，定位dom对象

启用状态 enabled 不可用状态disabled 选中状态 checked

选择可用状态的文本框

$(":text:enabled")   前面的:是表单选择器；后面的是过滤器

选择不可用状态的文本框注意禁用状态disabled和只读readonly有区别，后者只是限制不能修改，但是还可以获取焦点，但是禁用就什么都不能操作

$(":text:disabled")

复选框选中的元素

$(":checkbox:checked")

下拉列表框中被选中的元素

$("选择器>option:selected")  前面是选择器，因为使用了标签，select标签没有type属性，不是表单选择器

选择器就是父，option就是子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本过滤器</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){//页面加载完毕，获取按钮对象
				$(":button").click(function(){
					//过滤可用状态的文本框;输出value
					//console.log($(":text:enabled").val()); // 输出了文本框3的内容
					
					/*
					//过滤出不可用状态的文本框;输出value
					var $text =  $(":text:disabled"); //val函数和css函数不同，不会作用每一个
					for(var i = 0; i < $text.length; i++) {
						console.log($text[i].value); //这里下标就变成了dom对象，不能使用val方法
					}//这里就输出了文本框1和2的内容
					*/
				   
				   //过滤复选框中的内容 --- 这里只有一项选中
					//console.log($(":checkbox:checked").val()); ping-pong
					
					//过滤出下拉列表中选中的内容;这里也只有一项
					console.log($("select>option:selected").val());  //这里的select标签不是type属性，是属于普通的选择器  bj
				})
			})
		</script>
	</head>
	<body>
		文本框1：<input type="text" value="我是文本框1" disabled/><br/>
		文本框2：<input type="text" value="我是文本框2" disabled/><br/>
		文本框3：<input type="text" value="我是文本框3"/><br/>
		
		<input type="checkbox" value="bike" />骑自行车<br/>
		<input type="checkbox" value="soccer" />踢足球<br/>
		<input type="checkbox" value="ping-pong" checked/>骑行<br/>
		
		<select>
			<option value="null">请选择省份</option>
			<option value="sh">上海</option>
			<option value="bj" selected>北京</option>
			<option value="tj">天津</option>
		</select>
		<br>
		<input type="button" value="功能" />
	</body>
</html>

需要注意的地方就是这里的select是普通的选择器，不是表单选择器，虽然可以在表单中，但是没有type属性

JQuery绑定事件

其实大概和之前差不多，但是省略了很多，首先是用选择器获得dom对象，然后.引用事件【不是事件句柄，去掉on】；直接加上括号，括号中就是处理函数所选择的所有的对象都会绑定上这个事件

$("选择器").事件名称(处理函数)

$("#mybtn").click(function(){         //这里的click()就是JQuery中的函数，因为domk中式onclick = function(){}
    ……
})

注意这种绑定事件的方式一定要页面加载玩之后，所以在$()中

其实上面的页面加载事件就是这样子的格式【标准版】

将document变成了jquery对象----$(document).ready(function() {}) 简化之后就是

$(function(){})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本过滤器</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			div{
				background-color: aquamarine;
				height: 20px;
				width: 200px;
			}
		</style>
		
		<script type="text/javascript">
			//回调函数，给按钮绑定事件
			$(function(){
				//这种绑定方式一定要页面加载完毕之后才能使用，因为要获取按钮对象，按照先后顺序，执行script标签时还没有button
				$(":button").click(function(){
					//选择第一个div；改变颜色
					//$("div:first").css("background-color","yellow");
					
					//选额最后一个div，改变颜色  选择器和过滤器都是字符串，都在""中   first和last和eq都是过滤只剩1个
					//$("div:last").css("background-color","red");
					
					//选择下标为3的，也就是第4个div;使用的都是两字符的eq
					//$("div:eq(3)").css("background-color","red");
					
					//选择下标大于0的，也就是除了第一个所有的div；css方法可以直接变化所有，不需要遍历
					//$("div:gt(0)").css("background-color","red");
					
					//选择下标小于3的，也就是前三个div
					$("div:lt(3)").css("background-color","red");
				})
			})
		</script>
	</head>
	<body>
		<div>我是div1</div><br>
		<div>我是div2</div><br>
		<div>我是div3</div><br>
		<div>我是div4</div><br>
		<div>我是div5</div><br>
		<div>我是div7</div><br>
		<div>我是div8</div><br>
		
		<input type="button" value="功能按钮"/>
	</body>
</html>

这里将上面的按钮的注册方式由行间注册变为JQuery注册；

注意几个点：

这里获取对象的方式式选择器，选择的所有的对象都会注册上后面的事件
前面获取的就是JQuery对象，使用该对象的相关的事件方法即可；例如click()就是Jquery中的方法

JQuery函数

都是同一个函数，少参的是获取；多参的是设置

val() 有参无参

这个函数可以操作dom对象的value属性；

无参形式 $(选择器).val() 读取数组中第一个DOM对象的value属性
有参形式 $(选择器).val(value) 对数组中所有的DOM对象的value属性统一赋值为value

text() 有参无参

操作数组中所有的DOM对象的【文字显示内容属性】

无参形式 $(选择器).text() 读取数组中所有DOM对象的文字显示内容，将得到的内容拼接为一个字符串返回有的时候和value挺类似
有参形式 $(选择器).text(value) 对数组中所有DOM对象的文字显示内容进行统一赋值为value

attr() 有value 无

对val、text之外的其他属性进行操作都是用attr

无参形式 $(选择器).attr(“属性名”) 获取DOM数组第一个对象的对应属性的属性值
有参形式 $(选择器).attr(“属性名”,”值“) 对数组中所有DOM对象的对应属性赋值为value

这里来举一个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本过滤器</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			div{
				background-color: aqua;
				width:200px;
			}
		</style>
		
		<script type="text/javascript">
			$(function(){//页面加载完毕，获取按钮对象
				$(":button").click(function(){
					//获取第一个文本框的值
					//console.log($(":text:first").val()); //显示我是文本框1
					
					//设置所有的文本框为新值
					//$(":text").val("你好，JQuery");
					
					//div没有value属性，只有innerText；所以只能使用text
					//获取所有的div内容\
					//console.log($("div").text()); 我是第一个div我是第二个div我是第三个div
				
					//获取第一个div的内容
					//console.log($("div:first").text());我是第一个div 
					
					//为所有的div设置新值
					//$("div").text("你好，JQuery");
					
					//获取图片的src属性值
					//console.log($("img").attr("src")); img/uiz4.png
					
					//设置图片的src属性值
					$("img").attr("src","img/Cfeng官网(已去底).png")
				})
			})
		</script>
	</head>
	<body>
		文本框1：<input type="text" value="我是文本框1" /><br/>
		文本框2：<input type="text" value="我是文本框2" /><br/>
		文本框3：<input type="text" value="我是文本框3"/><br/>
		<br>
		<div>我是第一个div</div><br>
		<div>我是第二个div</div><br>
		<div>我是第三个div</div><br>
		<br>
		<img src="./img/uiz4.png" height="50px" width="100px"/>
		<br>
		<input type="button" value="功能" />
	</body>
</html>