jQuery

科技2022-07-14 141

什么是jQuery？

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

官方地址：https://jquery.com/

官网首页 jQuery 介绍：

jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。它通过易于使用的 API 在量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

为什么要使用jQuery？

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

其他优点：

（1）写少代码,做多事情【write less do more】

（2）免费，开源且轻量级的 js 库，容量很小

（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX

功能

（5）文档手册很全，很详细

（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）

（7）出错后，有一定的提示信息

（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用 JavaScript 定位 DOM 对象常用的三种方式：

（1）通过 ID 属性：document.getElementById()

（2）通过 class 属性：getElementsByClassName()

（3）通过标签名：document.getElementsByTagName()

上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出

错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

如何获取jQuery？

官方下载地址：https://jquery.com/download/

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

下面就进入jQuery的学习，先来看三个对象

Dom对象

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

DOM 对象是用 JavaScript 语法创建的对象，也看做是 js 对象。

JavaScript对象

用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对象的 API。

jQuery对象

用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。

JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们都是将 JavaScript 对象转化成 Jquery 对象

Dom转换为jQuery对象

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象，转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom对象转换为jQuery对象</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> function btnClick(){ var domBtn=document.getElementById("btn"); alert("1="+domBtn.value); //对象转换 var $btn=$(domBtn); alert("2="+$btn.val()); } </script> </head> <body> <input type="button" id="btn"; value="转换对象" onclick="btnClick()"/> </body> </html>

jQuery转换为Dom对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery对象转换为dom对象</title> </head> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> function btnClick(){ //从jQuery对象数组中获取dom对象 //var domObj=$("#txt").get(0);//从数组中获取下标是0的dom对象 var domObj=$("#txt")[0]; var num=domObj.value*domObj.value; domObj.value=num; } </script> <body> <input type="text" id="txt" /><br/> <input type="button" id="btn" value="计算平方" onclick="btnClick()" /> </body> </html>

选择器

选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

基本选择器

id选择器

语法：$(“#id”)

class（类）选择器

语法：$(“.class 名称”)

标签选择器

语法：$(“标签名”)

所有选择器

语法：$(“*”) 选取页面中所有 DOM 对象

组合选择器

$(“id,class,标签名”)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery对象转换为dom对象</title> </head> <style type="text/css"> div{ background:gray; width:100px; height: 50px; } span{ background:gray; width:100px; height: 50px; } </style> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> function fun1(){ //id选择器 var oneDiv=$("#one"); //使用jQuery中改变样式的函数 oneDiv.css("background-color","red"); } function fun2(){ //样式选择器/类选择器 $(".two").css("background","yellow"); } function fun3(){ //标签选择器 $("div").css("background","blue"); } function fun4(){ //所有选择器 $("*").css("background","darkcyan"); } function fun5(){ //组合选择器 $("#one,span,.two").css("background","azure"); } </script> <body> <div id="one" >oneDiv</div><br/> <div class="two">twoDiv</div><br/> <div>threeDiv</div><br/> <span>span标签</span><br/> <input type="button" value="获取id是one的dom对象" onclick="fun1()" /><br/> <input type="button" value="获取class是two的dom对象" onclick="fun2()"/><br/> <input type="button" value="获取没有id和class的dom对象" onclick="fun3()"/><br/> <input type="button" value="获取所有的dom对象" onclick="fun4()" /><br/> <input type="button" value="获取id和class的dom对象" onclick="fun5()" /><br/> </body> </html>

表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

$(":tr"): 不能用，tr 不是 input 标签

语法： $(":type 属性值")

例如：

$(":text")选取所有的单行文本框

$(":password")选取所有的密码框

$(":radio")选取所有的单选框

$(":checkbox")选取所有的多选框

$(":file")选取所有的上传按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery对象转换为dom对象</title> </head> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> function fun1(){ //表单选择器 alert($(":text").val()); } function fun2(){ //表单选择器 var $obj=$(":radio"); for(var i=0;i<$obj.length;i++){ var obj=$obj[i]; alert(obj.value); } } function fun3(){ //表单选择器 var $obj=$(":checkbox"); for(var i=0;i<$obj.length;i++){ var obj=$obj[i]; //alert(obj.value); //使用jQuery的val函数,获取value值 var jObj=$(obj); alert(jObj.val()); } } </script> <body> <input type="text" value="我是type=text" /><br/> <input type="radio" value="man" />男<br/> <input type="radio" value="woman" />女<br/> <input type="checkbox" value="bike" />骑行<br/> <input type="checkbox" value="football" />足球<br/> <input type="checkbox" value="music" />音乐<br/> <input type="button" value="读取text的值" onclick="fun1()" /><br/> <input type="button" value="读取radio的值" onclick="fun2()" /><br/> <input type="button" value="读取checkbox的值" onclick="fun3()" /><br/> </body> </html>

过滤器

jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$("div") == [dom1,dom2,dom3]

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

基本过滤器

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

语法：$(“选择器:first”)

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

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

3.选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

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

语法：$(“选择器:lt(数组索引)”)

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

语法：$(“选择器:gt(数组索引)”)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery对象转换为dom对象</title> <style type="text/css"> div{ background: gray; } </style> </head> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //使用标签选择器 /* $(function(){ }) */ $(document).ready(function(){ $("#btn1").click(function(){ $("div:first").css("background","blue") }) $("#btn2").click(function(){ $("div:last").css("background","deeppink"); }) $("#btn3").click(function(){ $("div:eq(3)").css("background","red"); }) $("#btn4").click(function(){ $("div:lt(3)").css("background","orangered"); }) $("#btn5").click(function(){ $("div:gt(3)").css("background","green"); }) }) </script> <body> <div id="zero">我是div-0</div> <br/> <div id="one">我是div-1</div> <br/> <div> 我是div-2 <br/> <div class="son">我是div-3</div> <div class="son">我是div-4</div> </div> <br/> <div>我是div-5</div> <br/> <span>我是span</span> <br/> <p> 功能按钮 </p> <input type="button" id="btn1" value="选择第一个div" /><br/> <input type="button" id="btn2" value="选择最后一个div" /><br/> <input type="button" id="btn3" value="选择索引等于3的div" /><br/> <input type="button" id="btn4" value="选择索引小于3的div" /><br/> <input type="button" id="btn5" value="选择索引大于3的div" /><br/> </body> </html>

表单过滤器

1. 选择可用的文本框

$(“:text:enabled”)

2.选择不可用的文本框

$(“:text:disabled”)

3.复选框选中的元素

$(“:checkbox:checked”)

4.选择指定下拉列表的被选中元素

选择器>option:selected

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单过滤器</title> <style type="text/css"> </style> </head> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#btnId1").click(function(){ var $textObj=$(":text:enabled"); $textObj.val("World"); var $textObj1=$(":text:disabled"); $textObj1.val("Hello"); }) $("#btnId2").click(function(){ var $checkboxObj=$(":checkbox:checked"); for(var i=0;i<$checkboxObj.length;i++){ alert($checkboxObj[i].value); } }) $("#btnId3").click(function(){ var $selectObj=$("select>option:selected"); /* for(var i=0;i<$selectObj.length;i++){ alert($selectObj[i].value); } */ alert($selectObj.val()); }) }) </script> <body> <input type="text" /><br/> <input type="text" value="disabled" disabled="disabled" /><br/> <input type="text" /><br/> <input type="checkbox" value="bike" />骑行<br/> <input type="checkbox" value="football" checked />足球<br/> <input type="checkbox" value="music" />音乐<br/>  <select> <option value="java">java语言</option> <option value="c++">c++语言</option> <option value="go" selected="selected">go语言</option> </select> <br/> <input type="button" id="btnId1" value="获取可用的文本框" /><br/> <input type="button" id="btnId2" value="获取复选框选中的元素" /><br/> <input type="button" id="btnId3" value="获取下拉框中选中" /><br/> <button>哈哈</button> </body> </html>

函数

1. val

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

$(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值

$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

2.text

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

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

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

3.attr

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数1</title> <style type="text/css"> div{ background: skyblue; } </style> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ var $textObj=$(":text:first"); //var $textObj1=$($textObj[0]); alert($textObj.val()); }) $("#btn2").click(function(){ var $textObj=$(":text"); $textObj.val("吕布"); }) $("#btn3").click(function(){ var $divObj=$("div"); alert($divObj.text()); }) $("#btn4").click(function(){ var $divObj=$("div:first"); alert($divObj.text()); }) $("#btn5").click(function(){ var $divObj=$("div"); $divObj.text("div"); }) $("#btn6").click(function(){ var $imgObj=$("#img"); alert($imgObj.attr("src")); $imgObj.attr("width","100px","height","100px"); }) }) </script> </head> <body> <p>文本框</p> <input type="text" value="刘备" /><br/> <input type="text" value="关羽" /><br/> <input type="text" value="张飞" /><br/> <p>文本数据</p> <div>第一个div</div> <div>第二个div</div> <div>第三个div</div> <p>图片</p> <img id="img" src="ex3.jpg" /><br/> <p>功能按键</p> <button id="btn1">获取第一个文本的值</button><br/> <button id="btn2">设置所有文本框新值</button><br/> <button id="btn3">获取div文本</button><br/> <button id="btn4">获取第一个div文本</button><br/> <button id="btn5">设置div新文本</button><br/> <button id="btn6">设置图片img</button><br/> </body> </html>

4.hide

$(选择器).hide() :将数组中所有 DOM 对象隐藏起来

5.show

$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来

6.remove

$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除

7.empty

$(选择器).empty()：将数组中所有 DOM 对象的子对象删除

8.append

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

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

9.html

设置或返回被选元素的内容（innerHTML）。

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

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

10.each

each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。

语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )

语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )

index: 数组的下标

element: 数组的对象

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数2</title> <style type="text/css"> div{ background: skyblue; } </style> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("#one").hide(); $("#two").hide(); }) $("#btn2").click(function(){ $("#one").show(); $("#two").show(); }) $("#btn3").click(function(){ $("select").remove(); }) $("#btn4").click(function(){ $("select").empty(); }) $("#btn5").click(function(){ $("#father").append("<br/><button id='five'>废物</button>") }) $("#btn6").click(function(){ alert($("span").html()); }) $("#btn7").click(function(){ $("span").html("<b>oracle</b>"); }) $("#btn8").click(function(){ //循环普通数组,非dom数组 var arr=[1,2,3]; $.each(arr,function(index,element){ alert("循环变量"+index+"====数组成员"+element); }); }) $("#btn9").click(function(){ //循环json var json={"name":"张三","age":"20"}; $.each(json,function(i,e){ alert("key="+i+" value="+e); }); }) $("#btn10").click(function(){ //循环dom数组 var $textObj=$(":text"); /* $.each($textObj,function(i,e){ alert("key="+i+" value="+e.value); }); */ $textObj.each(function(i,e){ alert("key="+i+" value="+e.value); }) }) }) </script> </head> <body> <input type="text" value="刘备" /> <input type="text" value="关羽" /> <input type="text" value="张飞" /> <p>show和hide函数</p> <div id="one">第一个div</div> <div id="two">第二个div</div> <p>remove和empty函数</p> <select> <option>老虎</option> <option>豹子</option> <option>狮子</option> </select> <br/> <select> <option>美洲</option> <option>亚洲</option> <option>欧洲</option> </select> <p>append函数</p> <div id="father" style="background: red;">父div</div> <p>html函数</p> <span>我是mysql<b>数据库</b></span><br/> <span>我是jdbc</span> <p>功能按键</p> <button id="btn1">隐藏所有div</button><br/> <button id="btn2">显示所以div</button><br/> <button id="btn3">使用remove删除所有对象</button><br/> <button id="btn4">使用empty删除字dom对象</button><br/> <button id="btn5">增加一个子dom对象</button><br/> <button id="btn6">获取文本带有的HTML标签内容</button><br/> <button id="btn7">设置值</button><br/> <button id="btn8">循环普通数组</button><br/> <button id="btn9">循环json</button><br/> <button id="btn10">循环dom对象</button><br/> </body> </html>

事件

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

定义元素监听事件

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

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

例如：

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

$("button").click(fun1)

为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2

$("tr").mouseover(fun2)

on() 绑定事件

on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法

语法：$(选择器).on(event,,data,function)

event：事件一个或者多个，多个之间空格分开

data：可选。规定传递到函数的额外数据，json 格式

function: 可选。规定当事件发生时运行的函数。

<html> <head> <meta charset="utf-8"> <title>函数1</title> <style type="text/css"> div{ background: skyblue; } </style> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").on("click",function(){ $("#myDiv").append("<br/><button class='btn'>按钮</button>"); /* $(".btn").on("click",function(){ alert("按钮被单击"); }) */ $(".btn").click(function(){ alert(111); }) }) }) </script> </head> <body> <div id="myDiv"> div </div> <br/> <button id="btn1">创建dom对象，给dom 对象添加事件</button><br/> </body> </html>

Ajax

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。

$.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

语法：

$.ajax( { name:value, name:value, ... } )

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

async ：布尔值，表示请求是否异步处理。默认是 true

contentType ：发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。

data：规定要发送到服务器的数据，可以是：string，数组，多数是 json

dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能的类型

"xml" - 一个 XML 文档

"html" - HTML 作为纯文本

"text" - 纯文本字符串

"json" - 以 JSON 运行响应，并以对象返回

error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名

success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名

type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写

url：规定发送请求的 URL。

以上是常用的参数。 error() , success()中的 xhr 是 XMLHttpRequest 对象。

2.6.2 $.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。

语法：$.get(url,data,function(data,status,xhr),dataType)

url 必需。规定您需要请求的 URL。

data 可选。规定连同请求发送到服务器的数据。

function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。

参数说明：

data - 包含来自请求的结果数据

status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）

xhr - 包含 XMLHttpRequest 对象

dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的

类型：

"xml" - 一个 XML 文档

"html" - HTML 作为纯文本

"text" - 纯文本字符串

"json" - 以 JSON 运行响应，并以对象返回

2.6.3 $.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。

语法：$.post(URL,data,function(data,status,xhr),dataType)

参数同$get()

Processed: 0.019, SQL: 8