|
目录
1 前言
2 概述
2.1 jQuery是什么
2.2 jQuery在js中的使用
2.3 dom对象和jQuery对象
3 jQuery的基本语法
3.1 选择器
3.2 表单选择器
3.3 过滤器
3.4 表单属性过滤器
4 函数
4.1 val
4.2 text
4.3 attr
4.4 remove
4.5 empty
4.6 append
4.7 html
4.8 each
5 jQuery中的事件
6 使用jQuery实现ajax
1 前言
在学ajax的时候我们就接触了jQuery，但当时觉得有点混乱，也没有认真学习，这次专门再学一次吧。
我们发现一个问题：在我们写js代码的时候，总是会写很多重复的内容，就比如最简单的获取根据id获取元素（getElementById），我们经常使用这个，但是这玩意很长，每次都写很麻烦，是不是可以简化一下
<script type="text/javascript">
function fun1(){
//var text1 = document.getElementById("text1")
var text1 = a("text1")
alert(text1.value)
}
function fun2(){
//var text2 = document.getElementById("text2")
var text2 = a("text2")
alert(text2.value)
}
function a(obj){
var objElt = document.getElementById(obj)
return objElt
}
</script>
<input type="text" id="text1" />
<input type="button" value="单击按钮1" onclick="fun1()" /> <br>
<input type="text" id="text2" />
<input type="button" value="单击按钮2" onclick="fun2()" />
如上，我们将根据id获取元素封装为一个 函数，这样我们直接调用这个函数就简单很多，并且函数名我们可以简化为一个字母，但是字母对我们来说经常使用，这里我们就可以使用“$”符号，它很特殊我们也基本上用不到。
2 概述
2.1 jQuery是什么
jQuery是一款JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作
可以登录官网下载查看jQuery信息：jQuery
2.2 jQuery在js中的使用
$(document).ready(function(){
alert("dhiwgfew")
})
如上，其中$就是函数名，document为函数的参数，$(document)的作用为将document对象变成jQuery函数库可以使用的对象。ready是jQuery中的函数，相当于js中的load事件，那function中的内容就表示onload执行后需要执行的内容。
好消息是上面代码可以简化为：
$(function(){
alert("hello jquery")
})
2.3 dom对象和jQuery对象
dom对象：使用js语法创建的对象为dom对象，也就是js对象,比如：
- var obj = document.getElementById("text1")，其中obj就是dom对象
jQuery对象:使用jQuery语法表示对象叫做jQuery对象，注意：jQuery表示的对象都是数组，例如
- var jobj = $("#text1")，其中jobj就是jQuery对象，它是一个数组
dom对象和jQuery对象可以相互转换
- dom转为jQuery：$(dom对象)
- jQuery转为dom：从数组中获取第一个对象就是dom对象，使用[0]
演示：dom转为jQuery
<script type="text/javascript">
function reverse(){
var btn = document.getElementById("btn")
//转为jQuery对象
var jbtn = $(btn)
//alert(btn.value)
alert(jbtn.val())
}
</script>
<input type="button" id="btn" value="我是按钮" onclick="reverse()" />
jQuery转为dom：
<script type="text/javascript">
function reverse(){
var btn = $("#btn")[0]
alert(btn.value)
}
</script>
3 jQuery的基本语法
3.1 选择器
选择器：就是一个字符串，用来定位dom对象的，定位了dom对象就可以通过jQuery的函数操作dom对象。
常用的选择器：
- id选择器：$("#对象的id值")，通过id找对象，id在当前页面中是唯一的
- class选择器：$(".class样式名")，class表示css中的样式
- 标签选择器：$("标签名称")
演示：
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//id选择器
function fun1(){
var idsel = $("#idsel")
idsel.css("background-color","red")
}
//class选择器
function fun2(){
var classsel = $(".classsel")
classsel.css("background-color","blue")
}
//标签选择器
function fun3(){
var spansel = $("span")
spansel.css("background-color","green")
}
//div标签选择器
function fun4(){
var divsel = $("div")//div标签有两个，也就是说这个数组有两个内容
divsel.css("background-color","gray")
}
function fun5(){
var ssel = $("*")//div标签有两个，也就是说这个数组有两个内容
ssel.css("background-color","yellow")
}
</script>
<div id="idsel">id选择器</div><br />
<div class="classsel">class选择器</div><br />
<span>span选择器</span><br />
<button onclick="fun1()">使用id选择器</button><br />
<button onclick="fun2()">使用class选择器</button><br />
<button onclick="fun3()">使用span标签选择器</button><br />
<button onclick="fun4()">使用div标签选择器</button><br />
<button onclick="fun5()">*标签选择器</button><br />
</body>
选择器可以组合使用，比如$("#id选择器,标签选择器")
3.2 表单选择器
使用input标签的type属性值，定位dom对象的方式
语法：$(":type属性值")。例如$(":text")，选择的是所有的单行文本框。演示：
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function fun1(){
var textObj = $(":text")
alert(textObj.val())
}
function fun2(){
var radioObj = $(":radio")//数组
//取数组数据要循环
for (var i = 0; i < radioObj.length; i++) {
//转为js对象
var domObj = radioObj[i]
alert(domObj.value)
}
}
</script>
<input type="text" value="这是text" /><br>
<input type="radio" value="这是radio=男" /><br>
<input type="radio" value="这是radio=女" /><br>
<button onclick="fun1()">测试text</button><br>
<button onclick="fun2()">测试radio</button><br>
</body>
3.3 过滤器
在定位了dom对象后，根据一些条件筛选dom对象。过滤器不能单独使用，必须和选择器一起使用
- $("选择器:first"):第一个dom对象
- $("选择器:last"):数组中的最后一个dom对象
- $("选择器:eq(数组的下标)"):获取指定下标的dom对象
- $("选择器:lt(下标)"):获取小于下标的所有dom对象
- $("选择器:gt(下标)"):获取大于下标的所有dom对象
演示:注意这里使用了事件，也就是js中的事件换成jQuery语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: gray;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj = $("div:first")
obj.css("background","red")
})
$("#btn2").click(function(){
var obj = $("div:last")
obj.css("background","blue")
})
$("#btn3").click(function(){
var obj = $("div:eq(2)")
obj.css("background","yellow")
})
$("#btn4").click(function(){
var obj = $("div:lt(2)")
obj.css("background","green")
})
$("#btn5").click(function(){
var obj = $("div:gt(2)")
obj.css("background","pink")
})
})
</script>
<div>我是div--1</div>
<div>我是div--2</div>
<div>我是div--3</div>
<div>我是div--4</div>
<br>
<span>我是span</span><br />
<button id="btn1">获取第一个dom对象</button><br>
<button id="btn2">获取最后一个dom对象</button><br>
<button id="btn3">获取下标为2的dom对象</button><br>
<button id="btn4">获取下标小于2的dom对象</button><br>
<button id="btn5">获取下标大于2的dom对象</button><br>
</body>
</html>
3.4 表单属性过滤器
- $(":text:enabled"),选择可用的文本框
- $(":text:disabled")，选择不可用的文本框
- $(":checkbox:checked")，复选框选中的元素
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj = $(":text:enabled")
//设置jQuery数组值所有对象的value为hello
obj.val("hello")
})
$("#btn2").click(function(){
//获取子元素要这样获取
var obj = $("select>option:selected")
alert(obj.val())
})
$("#btn3").click(function(){
//获取子元素要这样获取
var obj = $(":checkbox:checked")
for (var i = 0; i < obj.length; i++) {
alert(obj[i].value)
}
})
})
</script>
<input type="text" value="我是text1" disabled /><br>
<input type="text" value="我是text2" /><br>
<input type="text" value="我是text3" /><br>
<input type="text" value="我是text4" disabled /><br>
<select>
<option>抽烟</option>
<option selected>喝酒</option>
<option>烫头</option>
</select>
<br>
<input type="checkbox" value="chouyan"/>抽烟<br />
<input type="checkbox" value="hejiu" />喝酒<br />
<input type="checkbox" value="tangtou"/>烫头<br />
<br>
<button id="btn1">设置jQuery数组值所有对象的value为hello</button><br>
<button id="btn2">获取下拉框选中的元素</button><br>
<button id="btn3">获取复选框选中的元素</button><br>
</body>
</html>
4 函数
4.1 val
- val函数可以操作DOM对象的value属性
- $(选择器).val()：无参数调用形式，读取数组中第一个DOM对象的value值
- $(选择器).val(值)：有参数，对数组中所有DOM对象的value属性值进行统一赋值
4.2 text
- 对text内容操作
- $(选择器).text():无参数调用，读取数组中所有的DOM对象的文字显示内容，将得到的内容拼接位字符串返回
- $(选择器).text(值):有参数方式，对所有DOM对象的文字显示内容进行统一赋值
4.3 attr
- 对val，text之外的其它属性操作
- $(选择器).attr("属性名"):获取DOM数组第一个对象的属性值
- $(选择器).attr("属性名","值")：对数组中所有DOM对象属性值设为新值
以上三个函数的演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
alert($(":text").val())
})
$("#btn2").click(function(){
$(":text").val("你好，text")
})
$("#btn3").click(function(){
alert($("div").text())
})
$("#btn4").click(function(){
$("div").text("你好，div")
})
$("#btn5").click(function(){
alert($("a").attr("href"))
})
$("#btn6").click(function(){
$("a").attr("href","http://www.taobao.com")
})
})
</script>
<input type="text" value="我是text1" /><br>
<input type="text" value="我是text2" /><br>
<input type="text" value="我是text3" /><br>
<div>我是div-1</div>
<div>我是div-2</div>
<div>我是div-3</div>
<br>
<a href="http://www.baidu.com">百度</a>
<br>
<button id="btn1">得到text属性第一个value值</button><br>
<button id="btn2">修改text属性所有value值为你好，text</button><br>
<button id="btn3">得到div的text内容</button><br>
<button id="btn4">修改div中的text内容为你好，div</button><br>
<button id="btn5">获取超链接的href</button><br>
<button id="btn6">修改超链接的href</button><br>
</body>
</html>
4.4 remove
$(选择器).remove():将数组中所有DOM对象及其子对象一并删除
4.5 empty
$(选择器).empty():将数组中所有DOM对象的子对象删除
4.6 append
为数组中所有DOM对象添加子对象
以上三个函数演示：
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("select").remove()
})
$("#btn2").click(function(){
$("select").empty()
})
$("#btn3").click(function(){
$("select").append("<option>白嫖</option>")
})
})
</script>
<select>
<option>抽烟</option>
<option>喝酒</option>
<option>烫头</option>
</select>
<br>
<button id="btn1">将数组中所有DOM对象及其子对象一并删除</button><br>
<button id="btn2">将数组中所有DOM对象的子对象删除</button><br>
<button id="btn3">为数组中所有的DOM对象添加子对象</button><br>
</body>
4.7 html
- 设置或返回被选元素的内容
- $(选择器).html():无参数调用方法，获取DOM数组第一个匹配元素的内容
- $(选择器).html(值):有参数调用方法，设置DOM数组中所有元素的内容，注意这个html修改内容和innerHTML功能一样，都是可以传入html格式的，然后它会按照html语法修改内容
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
alert($("div").html())
})
$("#btn2").click(function(){
$("div").html("你好<b>王德发</b>")
})
})
</script>
<div>我是div-1</div>
<div>我是div-2</div>
<div>我是div-3</div>
<br>
<button id="btn1">获取第一个div内容</button>
<button id="btn2">修改所有div内容</button>
</body>
4.8 each
- each可以对数组，json和dom数组进行遍历，对每个元素调用一次函数
- 语法1：$.each(要遍历的对象,function(index,element){处理程序})
- 语法2：jQuery对象.each(function(index,element){处理程序})
- index为数组的下标，element为数组的对象
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
var arr = [1,2,3]
$("#btn1").click(function(){
$.each(arr,function(index,element){
alert("下表为："+index + "值为："+element)
})
})
var json = {"name":"王德发","password":"123561"}
$("#btn2").click(function(){
$.each(json,function(index,element){
alert(index+":"+element)
})
})
var obj = $(":text")
$("#btn3").click(function(){
$.each(obj,function(index,element){
alert("下标为："+index + "内容为："+element.value)
})
})
})
</script>
<input type="text" value="你好王德发" /><br>
<input type="text" value="你好张麻子" /><br>
<input type="text" value="你好黄四郎" /><br>
<button id="btn1">循环普通数组</button><br>
<button id="btn2">循环JSON</button><br>
<button id="btn3">循环dom数组</button><br>
5 jQuery中的事件
$(选择器).事件名称。这里的事件名称就是js中的事件去掉on，比如给按钮绑定单击事件：
$("#btn").onclick(function(){
})
js中的onload事件可用$(function()){?}代替，以后我们都用这种方式写jQuery，就像写js一样，不过换了个语法
6 使用jQuery实现ajax
在使用jQuery之前，我们实现ajax请求需要实现4个步骤，非常的麻烦，有三个方式实现ajax请求
- $.ajax()：jQuery中实现ajax的核心函数
- $.post()：使用post方式发送ajax请求
- $.get()：使用get方式发送ajax请求
- $.post()和$.get()它们在内部都是调用的$.ajax()
- $.ajax()的参数是一个JSON的结构
JSON结构的参数说明：
- success：一个function，请求成功了，从服务器返回了数据，相当于js执行完statue==200，function的参数就是responseText
- url：请求的地址
- type：请求方式，get或者post，不区分大小写
- async：默认是true，表示异步请求，可以不写
- data:可以是字符串，数组，JSON，表示请求的参数和参数值，常用JSON格式的数据。就是请求的路径?后面穿的值
- contentType：字符串，表示从浏览器向服务器发送的参数的类型，可以不写，如果想特定之处格式为JSON格式，可以写：application/json
- dataType：表示期望从服务器端返回的数据格式，可以选择：xml、html、text、json
- error：一个function，表示当请求发送错误时执行的函数
使用jQuery请求ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$("#btn").click(function (){
var username = $("#username").val()
$.ajax({
url:"/ajax/queerest",
data:{
"username":username
},
dataType:"json",
success:function (data){
alert(data.name)
}
})
})
})
</script>
用户名:<input type="text" id="username">
<button id="btn">我是阿牛</button>
</body>
</html>
将ajax中写的省市联动案例改为jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$.ajax({
url:"/ajax/ajaxrequest10",
dataType:"json",
success:function (data){
//alert(data)
$("#province").append("<option value=''>--请选择省份--</option>")
$.each(data,function (i,n){
$("#province").append("<option value='"+n.code+"'>"+n.name+"</option>")
})
}
})
$("#province").change(function (){
$.ajax({
url:"/ajax/ajaxrequest10",
dataType: "json",
data:{
"pcode":this.value
},
success:function (data){
$("#city").empty()
$("#city").append("<option value=''>--请选择城市--</option>>")
$.each(data,function (i,n){
$("#city").append("<option value='"+n.code+"'>"+n.name+"</option>>")
})
}
})
})
})
</script>
<select id="province">
</select>
<select id="city">
</select>
</body>
</html>
|