jQuery学习笔记
目 录
- jQuery是什么
- dom对象和jQuery对象
- 选择器
- 过滤器
- 事件
- 函数
- 使用jQuery的函数，实现ajax请求的处理
jQuery是什么
jQuery是js库
jQuery是存放js代码的地方
存放的是用js代码写的函数（function）
作用：可以操作dom对象，事件处理，动画，ajax
优点：免费开源、小巧、兼容大多数浏览器
dom对象和jQuery对象
dom对象：使用js的语法创建的对象，也就是js对象
var obj=doument.getElementById(“name”);
jQuery对象：使用jQuery语法表示的对象，也就是jQuery对象
（注意jQuery表示的对象都是数组）
var jobj=$("#name");//现在数组中就一个值
dom对象可以和jQuery对象相互转换
dom–>jQuery：语法：$(dom对象)
jQuery–>dom：语法：从数组中获取第一个对象，[0]或者get{0}
转换的目的：使用对象的方法或者属性
选择器
是一个字符串，用来定位dom对象。
定位了dom对象，可以通过jQuery的函数操作dom
基本选择器：
id选择器：$("#dom对象的id")
类选择器：$(".class样式名")
标签选择器：$("标签名称")
所有选择器：$("*")（代表当前页面所有dom对象）
组合选择器：$("#id",".class样式名","标签")
表单选择器：（跟有无form标签无关）
使用标签的type属性值，定位dom对象
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
……
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript" src="js/jquery-3.5.1.js">script>
<script type="text/javascript">
function fun1(){
var $obj1=$(":text");
$obj1.css("background","yellow");
}
function fun2(){
var $obj2=$(":checkbox");
for(var i=0;i<$obj2.length;i++){
//1.dom对象
var dom=$obj2[i]
alert(dom.value);
//2.dom-->jquery对象
var $jobj=$(dom);
alert($jobj.val());
}
}
script>
<input type="text" value="我是type-text" /><br />
<input type="checkbox" value="basketball" />篮球<br />
<input type="checkbox" value="score" />足球<br />
<input type="checkbox" value="pingpang" />乒乓<br />
<input type="button" value="选择器按钮1" onclick="fun1()" />
<input type="button" value="选择器按钮2" onclick="fun2()" />
body>
html>
过滤器
在定位了一个dom对象后，根据一些条件筛选dom对象
过滤器是一个字符串，用来筛选dom对象
过滤器不能单独使用，必须和选择器一起使用
基本过滤器：
选择第一个dom对象：$("选择器:first")
选择最后一个dom对象：$("选择器:last")
选择数组中指定对象：$("选择器:eq(数组索引)")
表单属性过滤器：
根据表单中dom对象的状态情况，定位dom对象
启用状态：enabled
不可用状态：disabled
选中状态：checked
选中所有可用文本框：$(":text:enabled")
选中所有不可用文本框：$(":text:disabled")
获取选中的复选框：$(":checkbox:checked")
选中下拉列表：$("select>option:selected")
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript" src="js/jquery-3.5.1.js">script>
<script type="text/javascript">
//当页面dom对象加载后，给对象绑定事件
$(function(){
$("#btn1").click(function(){
//过滤器
var obj=$("div:first")
obj.css("background","red")
})
$("#btn2").click(function(){
//过滤器
var obj=$("div:last-child")
obj.css("background","blue")
})
$("#btn3").click(function(){
//过滤器
var obj=$("div:eq(3)")
obj.css("background","green")
})
$("#btn4").click(function(){
//过滤器
var obj=$("div:lt(2)")
obj.css("background","black")
})
})
script>
head>
<body>
<div id="one">div0div>
<div id="two">div1div>
<div id="three">div2
<div>div3div>
<div>div4div>
div>
<input type="button" value="获取第一个div" id="btn1" /><br />
<input type="button" value="获取最后一个div" id="btn2" /><br />
<input type="button" value="获取下标为3的div" id="btn3" /><br />
<input type="button" value="获取下标小于2的div" id="btn4" /><br />
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript" src="js/jquery-3.5.1.js">script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj=$(":text:enabled")
obj.val("hello!!")
})
$("#btn2").click(function(){
var obj=$(":checked")
for (var i = 0; i < obj.length; i++) {
alert(obj[i].value);
}
})
$("#btn3").click(function(){
var obj=$("select>option:selected")
alert(obj.val())
})
})
script>
head>
<body>
<input type="text" value="text" /><br />
<input type="text" value="text" disabled/><br />
<input type="text" value="text" /><br />
<input type="text" value="text" disabled/><br />
<input type="checkbox" value="抽烟" />抽烟<br />
<input type="checkbox" value="喝酒" />喝酒<br />
<input type="checkbox" value="烫头" />烫头<br />
<select id="aihao">
<option value="抽烟">抽烟option>
<option value="喝酒">喝酒option>
<option value="烫头">烫头option>
select>
<input type="button" value="设置可用文本框的value" id="btn1" />
<input type="button" value="获取选中的复选框的value" id="btn2" />
<input type="button" value="获取选中的下拉列表的value" id="btn3" />
body>
html>
事件
jQuery中给dom对象绑定事件
方式一：
$(选择器).事件名称(事件的处理函数)
事件名称：就是js事件中去掉on的部分
例如给id是btn按钮绑定单击事件
$("#btn").click(function(){
alert(“单击事件执行”)
})
方式二：
on()事件绑定
$(选择器).on(事件名称,事件处理函数)
事件名称：就是js事件中去掉on的部分
事件处理函数：function定义
例如：
$("#btn").on(“click”,function(){
处理按钮单击
})
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript" src="jquery-3.5.1.js">script>
<script type="text/javascript">
$(function(){
$("#btn1").on("click",function(){
alert("绑定成功")
})
})
script>
<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
body>
html>
函数
$(选择器).val()：获取数组中第一个DOM对象的value
$(选择器).val(值)：对数组中DOM对象的所有value赋值
$(选择器).text()：读取数组中所有DOM对象的文字显示内容，得到的内容拼接为一个字符串
$(选择器).text(值)：对数组中所有DOM对象的文字显示内容统一赋值
$(选择器).html()：读取数组中所有DOM对象的所有内容，得到的内容拼接为一个字符串
$(选择器).html(值)：对数组中所有DOM对象的内容统一赋值
$(选择器).attr("属性名")：获取DOM数组第一个对象的属性值
$(选择器).attr("属性名","值")：对数组中所有DOM对象的属性设为新值
$(选择器).remove()：将数组中所有DOM对象及其子对象一并删除
$(选择器).empty()：将数组中所有DOM对象的子对象删除
$(选择器).append("：为数组中所有DOM对象添加子对象
each语法
可以对数组、JSON、DOM数组循环处理。
$.each(要遍历的对象，处理函数)：表示使用jQuery中的each，循环数组，每个数组成员都会
执行后面的“处理函数”一次。
处理函数：function(index,element)：index和element都是自定义的形参
index：循环的索引
element：数组中的成员
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript" src="js/jquery-3.5.1.js">script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj=$(":text")
alert(obj.val())
})
$("#btn2").click(function(){
var obj=$(":text")
obj.val("修改value")
})
$("#btn3").click(function(){
var obj=$("div")
alert(obj.text())
})
$("#btn4").click(function(){
var obj=$("div")
obj.text("你好，JAVA")
})
$("#btn5").click(function(){
var arr=[1,2,3];
$.each(arr,function(index,element){
alert("循环变量:"+index+"==数组成员:"+element);
})
})
$("#btn6").click(function(){
var json={"name":"张三","age":20}
$.each(json,function(index,element){
alert("index是key="+index+",element是值="+element)
})
})
})
script>
head>
<body>
<input type="text" value="123" /><br />
<input type="text" value="123" /><br />
<input type="text" value="123" /><br />
<div>你好div>
<div>jQuerydiv>
<input type="button" value="获取数组中第一个对象的value" id="btn1"/><br />
<input type="button" value="对数组中DOM对象的所有value赋值" id="btn2"/><br />
<input type="button" value="读取数组中所有DOM对象的文字显示内容" id="btn3"/><br />
<input type="button" value="对数组中所有DOM对象的文字显示内容统一赋值" id="btn4"/><br />
<input type="button" value="each循环" id="btn5"/><br />
<input type="button" value="json循环" id="btn6"/><br />
body>
html>
使用jQuery的函数，实现ajax请求的处理
$.ajax()：jQuery中实现ajax的核心函数
$.post()：使用post方式做ajax请求
$.get()：使用get方式做ajax请求
$.post()和 $.get()在内部都是调用的 $.ajax()
$.ajax()函数的使用，函数的参数表示请求的url，请求方式，参数值信息
$.ajax()函数是一个json的结构
JSON结构的参数说明：
-
async：布尔值，默认true，表示异步请求。可以不写
-
contentType：一个字符串，表示从浏览器发送给服务器的参数的格式、类型。可以不写。
例如想发送请求的参数是json格式：application/json -
data：可以是字符串、数组、json，表示请求的参数和参数值。常用json格式的数据
-
dateType：表示期望从服务器端返回的数据格式：xml、html、text、json
当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet就能够读取到dataType的值，就知道你的浏览器需要的是json或者xml的数据，那么服务器就可以返回你需要的数据格式。 -
error：一个function，表示当请求发生错误时，执行的函数。
error:function(){发生错误时执行} -
success：一个function，请求成功了，从服务器返回了数据，会执行success函数之前使用
的XMLHttpRequest对象，表示readystate= =4&&status==200的时候。 -
url：请求的地址
-
type：请求方式，get或者post，不用区分大小写。默认get
主要使用：url、data、dataType、success
$post / $get语法格式：
$.post/get(请求服务器端地址，请求参数，处理函数，数据格式)
例如：
$.post/get("queryCity",{proid:provinceId},function(resp){...},"json")
举例：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市级联查询title>
<script type="text/javascript" src="js/jquery-3.5.1.js">script>
<script type="text/javascript">
$(function () {
//绑定事件
$("#btnload").click(function () {
//做ajax请求（$.ajax）======================================>>>>>===================================
$.ajax({
url:"queryProvince",
type:"get",
dataType:"json",
success:function (resp) {
//删除旧的数据，把已经存在的数据清空
$("#province").empty();
$.each(resp,function (i,n) {
//获取select对象
$("#province").append("+n.name+"");
})
}
})//===================================================<<<<<<================================
})
//给省份的select绑定一个change事件，当下拉列表发生变化时，触发事件
$("#province").change(function () {
//获取选中的下拉列表框的值
var obj=$("#province>option:selected")
var provinceId=obj.val();//1,2,3...
//Ajax请求，获取省份的所有城市信息（$.get）===========================>>>>>===============================
$.get("queryCity",{proid: provinceId},function (resp) {
$("#city").empty();
$.each(resp,function (i,n) {
//获取select对象
$("#city").append("+n.name+"");
})
},"json")
})//==============================================<<<<<====================================
})
script>
head>
<body>
<p>省市级联查询，使用AJAXp>
<div>
<table>
<tr>
<td>省份：td>
<td>
<select id="province">
<option value="0">请选择...option>
select>
td>
<td>
<input type="button" value="load数据" id="btnload">
td>
tr>
<tr>
<td>城市：td>
<td>
<select id="city">
<option value="0">请选择...option>
select>
td>
tr>
table>
div>
body>
html>