jQuery

Posted 2021-10-10 g0rez

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。

jQuery入门

了解jQuery

jQuery 是一款跨主流浏览器的 javascript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 html DOM 操作

1.为什么使用 jQuery

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器
处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX
异步对象。
其他优点：

写少代码，做多事情【write less do more】
免费，开源且轻量级的 js 库，容量很小
兼容市面上主流浏览器，例如 IE，Firefox，Chrome
能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能
文档手册很全，很详细
成熟的插件可供选择，多种 js 组件，例如日历组件(点击按钮显示下来日期)
出错后，有一定的提示信息
不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
1. 通过 ID 属性：document.getElementById()
2. 通过 class 属性：getElementsByClassName()
3. 通过标签名：document.getElementsByTagName()
  上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$("#id") , $(".class 名") , $(“标签名”) 封装了上面的 js 方法。

2.引入jQuery

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>

3.入口函数

$(document).ready(function() {
    //自定义功能代码
    alert("hello jQuery");
})

$(document)，将DOM对象document转换为jQuery对象

ready()函数表示当页面DOM对象加载完毕之后，开始执行function()函数

( d o c u m e n t ) . r e a d y ( ) 与 (document).ready()与(document).ready()与()、jQuery()、window.jQuery()是等价的，例如如下的简写

$(function() {
    //自定义功能代码
    alert("hello jQuery");
})

4.了解DOM对象和jquery对象

DOM对象：使用javascript的语法创建的对象叫做dom对象，也就是js对象。var obj = document.getElementById("id");obj是dom对象，也叫做js对象
jQuery对象：使用jquery语法表示对象叫做jquery对象；注意：jquery表示的对象都是数组。var obj = $("#id")，obj就是使用jquery语法表示的对象，也就是jquery对象，它是一个数组。现在数组中就一个值。

5.DOM对象和jquery对象互转

为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者属性

当你的dom对象时，可以使用dom对象的属性或者方法
如果你要想使用jquery提供的函数，必须是jquery对象才可以

dom对象可以转为jquery ，语法： var $objs = $(dom对象/dom对象数组/选择器)
jquery对象也可以转为dom对象，语法： var obj = $objs[index]或者$objs.get(index)

// jquery对象其实是一个数组，里面存放了DOM对象

// DOM转jquery
// 1. 将DOM对象转为jQuery对象
var $objs1 = $(document.getElementById("id"));
// 2. 将DOM对象数组转为jquery对象
var $objs2 = $(document.getElementsByTagName("div"));
// 3. 将选择器所代表的DOM对象数组转为jquery对象
var $objs3 = $("c");

// jquery转DOM
// jquery对象是一个存放了DOM对象的数组，所以可以通过下标的方式获取到DOM对象
// 1. 将jquery对象转为DOM对象，通过下标的方式
var obj1 = $objs1.[0];
// 2. 将jquery对象转为DOM对象，通过get()函数的方式
var obj2 = $objs2.get(0);

DOM对象和jQuery对象非关系
1. jQuery对象是一个数组，存放了一些DOM对象而已；
2. 将DOM对象转为jQuery对象，var $objs = $(dom对象/dom对象数组/选择器)，参数可以是一个具体的DOM对象，或者是DOM对象的数组，又或者是字符串形式的选择器语法，这样就将DOM对象转化为jQuery对象；
3. 而将jquery对象转为DOM对象其实就是从jquery对象这个数组中获取DOM对象而已；

// 将DOM对象转为jQuery对象
var $objs1 = $(document.getElementById("id"));
// 将ODM对象数组转为jquery对象
var $objs2 = $(document.getElementsByTagName("div"));
// 将选择器所代表的DOM对象数组转为jquery对象
var $objs3 = $("c");

6.选择器

选择器: 是一个字符串，是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

常用基本选择器

ID选择器

通过DOM对象的id选择DOM对象

var $obj = $("#id");

class选择器

通过DOM对象的class来选择一类DOM对象

var $objs = $(".class");

标签选择器

通过DOM对象的标签来选择一类DOM对象

var $objs = $("span");

全部选择器

通过通配符*来选中所有DOM对象

var $objs = $("*");

组合选择器

通过使用多个选择器来选中符合条件的元素，这些选择器是并集

var $objs = $("#id,.class");

7.选择器案例

有三个div的DOM对象，初始颜色为green，通过点击不同按钮改变不同DOM对象的颜色

注意：对jquery对象的操作，就是操作jquery对象中的全部成员(DOM对象)

点击不同的按钮，分别使用 id选择器、class选择器、标签选择器、全部选择器、组合选择器来选中不同的一个或多个DOM对象，并通过jquery对象的函数改变DOM对象的颜色

<html>
	<head>
		<style type="text/css">
			.class,#id{
				width: 100px; height: 50px; background-color: green;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			// 点击按钮使用id选择器更改DOM对象的背景颜色
			function fun1() {
				var $obj = $("#id");
				$obj.css("backgroundColor","red")
			}
			// 点击按钮使用class选择器更改DOM对象的背景颜色
			function fun2() {
				var $objs = $(".class");
				$objs.css("backgroundColor","blue")
			}
			// 点击按钮使用标签选择器更改DOM对象的背景颜色
			function fun3() {
				var $objs = $("div");
				$objs.css("backgroundColor","yellow")
			}
            // 点击按钮使用全部选择器更改所有DOM对象的背景颜色
			function fun4() {
				var $objs = $("*");
				$objs.css("backgroundColor","orange")
			}
            // 点击按钮更改#id和span的DOM对象的背景颜色
			function fun5() {
				var $objs = $("#id,span");
				$objs.css("backgroundColor","black")
			}
		</script>
	</head>
	<body>
		<div id="id">id</div>
		<div class="class">class</div>
		<div class="class">class</div>
		
		<input type="button" onclick="fun1()" value="使用id选择器改变颜色" />
		<input type="button" onclick="fun2()" value="使用class选择器改变颜色" />
		<input type="button" onclick="fun3()" value="使用标签选择器改变颜色" />
        <input type="button" onclick="fun4()" value="使用所有选择器改变颜色" />
        <input type="button" onclick="fun5()" value="使用组合选择器改变颜色" />
	</body>
</html>

8.表单选择器

使用 <input> 标签的type属性值，定位DOM对象的方式

语法

$(":type属性值")

例子

// 选中所有的type=text属性值的input标签
$(":text").css("background","green")
// 选中所有的type=button属性值的input标签
$(":button").css("background","yellow")

注意

表单选择器使用与是否有form标签无关
仅有type属性的标签才能使用

9.过滤器

过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选；过滤条件不能独立出现在 jquery 函数；如果使用只能出现在选择器后方。

过滤器像CSS的伪类选择器

基本过滤器

first选择第一个DOM对象

选择第一个 first, 保留数组中第一个 DOM 对象

语法：$("选择器:first")

var $obj = $(".box:first");

last选择最后一个DOM对象

选择最后个 last, 保留数组中最后 DOM 对象

语法：$("选择器:last")

var $obj = $(".box:last");

eq选择数组中指定DOM对象

选择数组中指定对象

语法：$("选择器:eq(index)")

var $obj = $(".box:eq(2)");

lt选择数组中小于指定索引的所有 DOM 对象

选择数组中小于指定索引的所有 DOM 对象

语法：$("选择器:lt(index)")

var $obj = $(".box:lt(2)");

gt选择数组中大于指定索引的所有 DOM 对象

选择数组中大于指定索引的所有 DOM 对象

语法：$("选择器:gt(index)")

var $obj = $(".box:gt(2)");

10.过滤器例子

点击不同按钮，设置选定的div背景颜色

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			function fun0() {
				// 选择第一个DOM对象
				var $obj = $(".box:first");
				$obj.css("backgroundColor","red");
			}
			
			function fun1() {
				// 选择最后一个DOM对象
				var $obj = $(".box:last");
				$obj.css("backgroundColor","green");
			}
			
			function fun2() {
				// 选择指定索引的DOM对象
				var $obj = $(".box:eq(2)");
				$obj.css("backgroundColor","orange");
			}
			
			function fun3() {
				// 选择小于指定索引的所有DOM对象
				var $obj = $(".box:lt(2)");
				$obj.css("backgroundColor","blue");
			}
			
			function fun4() {
				// 选择大于指定索引的所有DOM对象
				var $obj = $(".box:gt(2)");
				$obj.css("backgroundColor","yellow");
			}
		</script>
	</head>
	<body>
		<div class="box">box0</div>
		<div class="box">box1</div>
		<div class="box">box2</div>
		<div class="box">box3</div>
		<div class="box">box4</div>
		<button onclick="fun0()">first选择第一个box</button>
		<button onclick="fun1()">last选择最后一个box</button>
		<button onclick="fun2()">eq选择索引为2的box</button>
		<button onclick="fun3()">lt选择小于指定索引的box</button>
		<button onclick="fun4()">gt选择大于指定索引的box</button>
	</body>
</html>

11.表单属性过滤器

根据表单中DOM对象的状态情况来定位DOM对象的，如：

启用状态：enabled

不可用状态：disable

复选框选中的元素：checked

选择可用的文本框$(“:text:enabled”)
选择不可用的文本框$(“:text:disabled”)
复选框选中的元素$(“:checkbox:checked”)
选择指定下拉列表的被选中元素选择器>option:selected

<html>
	<head>
		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					//获取所有可以使用的type="text",将其值设置为hello
					var objs = $(":text:enabled");
					objs.val("hello");
				});
				
				$("#btn2").click(function() {
					// 获取所有选中的复选框，并alert()
					var objs = $(":checkbox:checked");
					for(var i=0; i<objs.length; i++) {
						alert(objs[i].value);
					}
				});
				
				$("#btn3").click(function() {
					// 获取下拉列表选中的值
					var obj = $("#language>option:selected");
					alert(obj.val());
				});
			})
		</script>
	</head>
	<body>
		<input type="text" id="text1" value="text1" /><br />
		<input type="text" id="text2" value="text2" disabled /><br />
		<input type="text" id="text3" value="text3" /><br />
		<input type="text" id="text4" value="text4" disabled /><br />
		
		<input type="checkbox" value="游泳" />游泳<br />
		<input type="checkbox" value="健身" checked />健身<br />
		<input type="checkbox" value="游戏" checked />游戏<br />
		
		<select id="language">
			<option value="java">Java语言</option>
			<option value="go" selected >go语言</option>
			<option value="python">python语言</option>
		</select><br />
		
		<button id="btn1">设置可以使用的text的value是hello</button><br />
		<button id="btn2">显示选中的复选框的值</button><br />
		<button id="btn3">显示选中的下拉列表框的值</button><br />
	</body>
</html>

12.函数

第一组函数

val()

操作数组中DOM对象的value属性

$(选择器).val()：读取数组中第一个DOM对象的value属性值

$(选择器).value(值)：对数组中所有DOM对象的value属性值进行统一赋值

//获取第一个type="text"的value值
// val() 获取DOM对象中第一个对象的value属性值
var text = $(":text").val();
alert(text);

//设置所有type="text"的value值
// val("new value") 设置数组中所有DOM对象的value值
$(":text").val("new value");

text()

操作数组中所有DOM对象的【文字显示内容属性(innerText)】(会忽略HTML标签)

$(选择器).text()：读取数组中所有的DOM对象的文字显示内容，将得到的内容拼接为一个字符串返回

$(选择器).text(值)：对数组中所有DOM对象的文字显示内容进行统一赋值

//获取所有div的内容
//获取所有DOM对象的文本值，连接为一个字符串
var text = $("div").text();
alert(text);

//统一设置所有的div的内容
//设置所有DOM对象的文本值
$("div").text("new text");

attr()

对val，text 之外的其他属性的操作

$(选择器).attr("属性名")：获取DOM数组第一个对象的属性值

$(选择器).attr("属性名","值")：对数组中所有DOM对象的属性设为新值

//获取img的src属性值
//attr("name")读取指定属性的值
var src = $("img").attr("src");
alert(src);

//设置img的src属性值
//attr("name",value)设置指定属性的值
$("img").attr("src","images/nodejs.svg");

第一组函数例子

<html>
	<head>
		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					// val() 获取DOM对象中第一个对象的value属性值
					var text = $(":text").val();
					alert(text);
				})
				
				$("#btn2").click(function() {
					// val("new value") 设置数组中所有DOM对象的value值
					$(":text").val("new value");
				})
				
				$("#btn3").click(function() {
					//获取所有DOM对象的文本值，连接为一个字符串
					var text = $("div").text();
					alert(text);
				})
				
				$("#btn4").click(function() {
					//设置所有DOM对象的文本值
					$("div").text("new text");
				})
				
				$("#btn5").click(function() {
					//attr("name")读取指定属性的值
					var src = $("img").attr("src");
					alert(src);
				})
				
				$("#btn6").click(function() {
					//attr("name",value)设置指定属性的值
					$("img").attr("src","images/nodejs.svg");
				})
			})
		</script>
	</head>
	<body>
		<input type="text" value="Java" /><br />
		<input type="text" value="go" /><br />
		<input type="text" value="python" /><br /><br />
		
		<div>div1</div>
		<div>div2</div>
		<div>div3</div><br />
		
		<img id="img1" src="images/spring.svg" /><br />
		
		<button id="btn1">获取第一个文本框的值</button><br />
		<button id="btn2">设置所有文本框的value值</button><br />
		<button id="btn3">获取所有div的文本值</button><br />
		<button id="btn4">设置所有div的文本值</button><br />
		<button id="btn5">读取src属性值</button><br />
		<button id="btn6">设置src属性值</button><br />
	</body>
</html>

第二组函数

hide()

将数组中所有 DOM 对象隐藏起来

$(选择器).hide()

show()

将数组中所有 DOM 对象在浏览器中显示起来

$(选择器).show()

remove()

将数组中所有DOM对象及其子对象一并删除

$(选择器).remove()

//删除select1这个DOM对象及其子对象
$("#select1").remove();

empty()

将数组中所有DOM对象的子对象删除

$(选择器).empty()

// select2这个DOM对象的子对象
$("#select2").empty();

append()

为数组中所有DOM对象添加子对象

$(选择器).append("我动态添加的div")

// 给father这个DOM对象内部增加一个按钮对象
$("#father").append("<input type='button' value='我是增加的按钮' />");

html()

设置或返回被选元素的内容(innerHTML)(会保留显示HTML标签)

$(选择器).html()：无参数调用方法，获取DOM数组第一个匹元素的内容

$(选择器).html(值)：有参数调用，用于设置DOM数组中所有元素的内容

// html()获取第一个span DOM对象的innerHTML
var innerHTML = $("span").html();
alert(innerHTML);

// html(参数)设置第一个span DOM对象的innerHTML值
$("span").html("MS SQLSERVER<i style='color:red'>数据库</i>");

each()

可以对数组、json、dom数组循环遍历处理；

数组、json中的每个成员都会调用一次处理函数

var arr = [1, 2, 3];//数组
var json = {"name":"lisi","age":"18"}// json
var objs = $(":text")//DOM数组对象

语法格式1：$.each(elements,function(index, element))

语法格式2：jquery对象.each(function(index, element))，jquery对象就是一个DOM数组

参数	描述
elements	循环对象/数组
function(index, element)	必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素(也可使用 “this” 选择器)

循环数组

/**
 * 循环数组
 * index：循环索引，自定义名称
 * value：数组中索引位置对应的值
 */
var arr = [1, 2, 3];
$.each(arr,function(index, value) {
    alert("index: "+index+"\\nvalue: "+value)
});

循环DOM数组对象

<ul>
    <li>zero</li>
    <li>one</li>
    <li>two</li>
</ul>

/**
 * elements：循环列表
 * index：循环索引，自定义名称
 * element：循环列表中的其中一个对象
 */
var elements = $("ul>li");
$.each(elements,function(index, element) {
    alert("index: "+index+"\\ntext: "+$(element).text())
})

循环json

/**
 * json：循环对象
 * key：json对象的key
 * value：json对象的value
 */
var json = {"name":"zsl","age":"20","sex":"1"};
$.each(json, function(key, value) {
    alert("key: "+key+"\\nvalue: "+value)
})

第二组函数例子

<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					// remove()删除父子对象
					$("#select1").remove();
				})
				
				$("#btn2").click(function() {
					// remove()删除子对象
					$("#select2").empty();
				})
				
				$("#btn3").click(function() {
					// append()增加一个DOM对象
					$("#father").append("<input type='button' value='我是增加的按钮' />");
				})
				
				$("#btn4").click(function() {
					// html()获取第一个span DOM对象的innerHTML
					var innerHTML = $("span").html();
					alert(innerHTML);
				})
				
				$("#btn5").click(function() {
					// html(参数)设置第一个span DOM对象的innerHTML值
					$("span").html("MS SQLSERVER<i style='color:red'>数据库</i>");
				})
			})
		</script>
	</head>
	<body>
		<select id="select1">
			<option value="SQL Server">SQL Server</option>
			<option value="mysql">MySQL</option>
			<option value="Oracle">Oracle</option>
		</select><br />
		
		<select id="select2">
			<option value="HTML">HTML</option>
			<option value="CSS">CSS</option>
			<option value="JavaScript">JavaScript</option>
		</select><br />
		
		<div id="father" style="background-color: orange;">我是一个div</div><br />
		
		<span>MySQL<b>数据库</b></span><br />
		
		<button id="btn1">使用remove()删除父子对象</button><br />
		<button id="btn2">使用empty()删除子对象</button><br/ >
		<button id="btn3">使用append()增加一个DOM对象</button><br/ >
		<button id="btn4">使用html()获取第一个DOM对象的innerHTML</button><br/ >
		<button id="btn5">使用html()设置所有span DOM对象的innerHTML</button><br/ >
	</body>
</html>

13.事件

为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作

定义元素监听事件

监听事件名称是 js 事件中去掉 on ，后的内容， js 中的 onclick 的监听事件名称是 click

语法

$(选择器).监听事件名称(处理函数);

例子

为页面中所有的 button 绑定 onclick，并关联处理函数 fun1

function fun1() {
    alert();
}
//只写函数名
$("button").click(fun1)

//也可以这样写
$("button").click(function() {
    alert();
})

on绑定事件(常用)

事件名称是 js 事件中去掉 on ，后的内容， js 中的 onclick 的监听事件名称是 click

jquery对象.on(事件名称，事件处理函数)

<input type="button" class="btn" value="按钮1" />
<input type="button" class="btn" value="按钮2" />

//为jquery对象绑定事件
$(".btn").on("click",function() {
    alert(this.value + "被点击");
})

//只写函数名
$(".btn").on("click",fun1);

14.AJAX

jQuery简化了AJAX请求处理；

使用三个函数可以实现ajax请求处理；

$.ajax()：jquery中实现ajax的核心函数
$.post()：使用post方式做ajax请求
$.get()：使用get方式发送ajax请求

.post()和.get()他们在内部都是调用的$.ajax() $.ajax()

语法：$.ajax({name:value, name:value,... })

说明：参数是 json 的结构，包含请求方式，数据，回调方法等

参数	说明
async(可选)	类型：Boolean 默认值: true 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
contentType(可选)	类型：String 默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。例如你想要请求的参数的json格式的，可以写`application/json`
data	类型：String、数组、json 表示请求的参数和参数值，常用的是json格式的数据例如：`data:{name:"lisi",age:20}`，如果是get请求，就会将参数拼接到url，如`/jquery/province/list.do?name=lisi&age=20`
dataType	表示期望从服务器端返回的数据格式，可选的有xml、html、text、json
error(可选)	类型：function 表示当请求发生错误时，执行的函数`error:function(){函数体}`
success	类型：function 表示请求成功，从服务器端返回了数据，会执行success指定的函数相当于原生ajax时的回调函数 success:function(data){}data就是responseText，就是服务器返回的数据，当设置dataType后，服务器返回的值将被处理为dataType所对应的类型，函数的data参数将为dataType对应的对象；不设置dataType，则data就是服务器返回的字符串responseText
url	请求地址 url:“testAjax”
type(可选)	请求方式值为get或者是post，默认是get方式 type:“get”

主要使用的是 data、dataType、success、url

Ajax例子

$.ajax({
    async:true,
    contentType:"application/json",
    data:{name:"lisi",age:20},
    dataType:"json",
    error:function(){
        // 请求错误时执行的函数
    },
    success:function(data){
        //data就是responseText
    },
    url:"testAjax",
    type:"get"
})

$.get()

内部会调用$.ajax()

$.get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：response - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型：xml、html、text、script、json

// URL、data、success()、dataType
$.get("list.do",{name:"zsl",age:"20"}, function(){alert("请求成功")}, "json" );

$.post()

内部会调用$.ajax()

$.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。

// URL、data、success()、dataType
$.post("list.do",{name:"zsl",age:"20"}, function(){alert("请求成功")}, "json" );

以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段