jQuery(JS库) | 一文带你掌握jQuery的使用

一：开篇基础

1. 为什么使用 jQuery

2. DOM 对象

3. JS对象和 jQuery 对象

4. 获取 jQuery

5. 牛刀小试

6. DOM 对象和 jQuery 对象

二：选择器

1. 基本选择器

2. 表单选择器

三：过滤器

1. 基本过滤器

2. 表单对象属性过滤器

四：函数

1. 第一组：val、text、attr

2. 第二组：hide、show、remove、empty 、append、html、 each

五：事件

1. 定义元素监听事件

2. on() 绑定事件

六：Ajax

1. $.ajax()

2. $.get() & $.post()

一：开篇基础

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

（2）官网地址： https://jquery.com/

（3）官网首页 jQuery 介绍

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

1. 为什么使用 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 里面通过

6. DOM 对象和 jQuery 对象

（1）DOM 对象是用 JavaScript 语法创建的对象，也就是前面说的 js 对象。

（2）Dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery，语法： $(dom对象)。
jquery对象也可以转为dom对象，语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get{0}。

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

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

（1）DOM 对象转换 jQuery 对象：

①使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象，转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。

②一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。
	
		
		DOM转jQuery
	
	
		
		
		
		
		
	
（2）jQuery 对象转为 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]。
	
		
		jQueryToDom
		
		
		
	
	
		
		
	
二：选择器

选择器: 其实就是一个字符串，用来定位dom对象条件；通知 jquery 函数定位满足条件的 dom 对象。定位了dom对象，就可以通过jquery的函数操作dom!

1. 基本选择器

常用的选择器：

（1）id选择器，语法： $("#dom对象的id值")

通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。

（2）class选择器，语法： $(".class样式名")

class表示css中的样式，使用样式的名称定位dom对象的。

（3）标签选择器，语法： $("标签名称")

使用标签名称定位dom对象的

（4）所有选择器，语法：$(“*”)

选取页面中所有 DOM 对象，整个页面！

（5）组合选择器，语法：$(“id,class,标签名”)

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
	
		
		jQueryToDom
		
		
		
		
		
		
		
	

	
		
		one

		two

		three

		
		span

		
		
		
		
		
		
		
		
		
	
2. 表单选择器

（1）表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的！例如：
 
 
 
 
 
 
 
 
（2）语法： $(":type属性值")，例如：

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

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

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

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

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

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

		
		男

		女

		
		 骑行 

		 足球 

		 音乐 

		
		
		
		

		
		

		
	

		
	
三：过滤器

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

             1 dom1

           2 dom2

           3 dom3

$("div") == [dom1,dom2,dom3] 与前面的声明顺序要保持一致

（2）过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数；过滤器也是一个字符串，用来筛选dom对象的，并且不能单独使用，必须和选择器一起使用！

1. 基本过滤器

（1）选择第一个 first, 保留数组中第一个 DOM 对象；语法：$(“选择器:first”)

（2）选择最后个 last, 保留数组中最后 DOM 对象；语法：$("选择器:last")

（3）选择数组中指定对象的 DOM 对象；语法：$(“选择器:eq(数组索引)”)

（4）选择数组中小于指定索引的所有 DOM 对象；语法：$(“选择器:lt(数组索引)”)

（5）选择数组中大于指定索引的所有 DOM 对象；语法：$(“选择器:gt(数组索引)”)
	
		
		jQueryToDom
		
	
		
		
		
	
	
		
		
		div-0
		div-1
		div-2
		    div-3
			div-4
		
		div-5
		

		
		
		
		

		
		

		
		

		
		

		
	
	

		
	
2. 表单对象属性过滤器

（1）表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象的。

①启用状态：enabled ,

②不可用状态：disabled

③单选框、复选框选中状态：checked ，例如：radio， checkbox

④下拉列表选中状态：selected，例如：select父标签的option字标签

（2）选择可用的文本框；$(“:text:enabled”)

（3）选择不可用的文本框；$(“:text:disabled”)

（4）复选框选中的元素；$(“:checkbox:checked”)

（5）选择指定下拉列表的被选中元素；选择器>option:selected(>左是父标签，右是子标签)
	
		
		jQueryToDom
	
	
		
		
		
	
	
		
		

		
 
		

		
 
		

		
		游泳 

		健身 
 
		电子游戏 
 
		

		
		
		
		
		
		

		
		

		
	
		
	
四：函数

1. 第一组：val、text、attr

（1）val()函数

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

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

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

（2）text()函数

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

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

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

（3）attr()函数

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

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

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

		

		

		
		第一个div
		第二个div
		第三个div
		

		
		
		

		
		
		
		

		
		

		
		

		
		

		
		

		
	
	
2. 第二组：hide、show、remove、empty 、append、html、 each

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

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

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

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

（5）$(选择器).append("动态添加的 div")：为数组中所有 DOM 对象添加子对象

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

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

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

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

语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )； $: 相当于是java的一个类名，each：就是类中的静态方法。静态方法调用，可以使用类名.方法名称

语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )；实际上jquery对象就是dom数组；所以这种方法只有对象是dom数组才能使用

index: 数组的下标

element: 数组的对象
	
		
		jQueryToDom
		
		
		
		
	
	
		
		
		
		
		
		
		

		
		

		
		我是第一个div
		
		我是mysql 数据库
		

		我是jdbc

		
		
		

		

		

		

		

		

		

		

		

		


	
五：事件

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

1. 定义元素监听事件

（1）语法：$(选择器).事件名称( 事件的处理函数)

$(选择器)：定位dom对象， dom对象可以有多个，这些dom对象都绑定事件了。
事件名称：就是js中事件去掉on的部分。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。

（2）说明：监听事件名称是 js 事件中去掉 on 后的内容，比如：js 中的 onclick 的监听事件名称是 click；例子：

为页面中所有的 button 绑定 onclick,并关联处理函数 fun1；$("button").click(fun1)

为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2；$("tr").mouseover(fun2)

2. on() 绑定事件

（1）on() 方法在被选元素上添加事件处理程序。

（2）语法：$(选择器).on(event,data,function) ；

$(选择器).on( 事件名称 , 传的json数据，事件的处理函数)

①event：事件名称，就是js事件中去掉on的部分，例如js中onclick ,这里就是click；事件可以是一个或者多个，多个之间空格分开。

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

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

需求：定义一个div，先给div增加一个dom对象，然后再给这个dom对象绑定事件
	
		
		jQueryToDom
		
		
		
		
	
	
		
		我是一个div
		
		

		
	
六：Ajax

（1）jQuery 提供多个与 AJAX 有关的方法。通过 jQuery 发送AJAX 请求，可以使用 HTTP Get和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。没有jquery之前，使用XMLHttpRequest发送ajax请求，有4个步骤。 jQuery简化了ajax请求的处理。使用三个函数可以实现ajax请求的处理：

① $.ajax() : jquery中实现ajax的核心函数。

②$.post() : 使用post方式做ajax请求。

③$.get() : 使用get方式发送ajax请求。

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

（3）$.ajax函数的使用，函数的参数表示请求的url，请求的方式，参数值等信息。$.ajax()参数是一个json的结构。

1. $.ajax()

（1）$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法语法： $.ajax( { name:value, name:value, ... } )

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

①async ：是一个boolean类型的值，默认是true ，表示异步请求。可以不写async这个配置项，和xmlHttp.open(get,url,true),第三个参数一样的意思。

②contentType ：一个字符串，表示发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。例如：你想表示请求的参数是json格式的，可以写：application/json。

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

④dataType：表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json

当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以

返回你需要的数据格式。

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

⑥success：一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数；相当于之前使用XMLHttpRequest对象，当readyState==4 && status==200的时候。

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

⑧url：规定发送请求的 URL。

（3）以上url , data ,dataType, success是常用的参数。
$.ajax(  {  async:true , 
			contentType:"application/json" , 
			data: {name:"lisi",age:20 },
			dataType:"json",
			error:function(){ 
                        // 请求出现错误时，执行的函数
			},
			success:function(data) {
                                 // data 就是responseText, 是jquery处理后的数据。
			},
			url:"bmiAjax",
			type:"get"
		}  
										 
	)
2. $.get() & $.post()

（1）$.get() 方法使用 HTTP GET 请求从服务器加载数据。语法：$.get(url,data,function(data,status,xhr),dataType)

（2）$.post() 方法使用 HTTP POST 请求从服务器加载数据。语法：$.post(URL,data,function(data,status,xhr),dataType)

总结：对于Ajax的内容我们前面已经学习过了，包括前面也尝试手写了一个小型的jQuery实现省市联动的小项目；这里就不做多做赘述了！

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/a7045d0c9a.html