JavaWeb——jQuery
1、介绍
也就是JavaScript和Query，是辅助JavaScript开发的JS类库，它的核心思想是，写的更少，做的更多，实现了很多浏览器的兼容问题。
2、jQuery的使用
2.1、jQuery的核心函数
是 j Q u e r y 的 核 心 函 数 ， 能 完 成 j Q u e r y 的 很 多 功 能 ， 是jQuery的核心函数，能完成jQuery的很多功能， 是jQuery的核心函数，能完成jQuery的很多功能，{}就是调用$这个函数
- 传入参数为(函数)时，表示页面加载完成后，相当于window.οnlοad=function(){}
$(function(){
alert("页面加载完成后自动调用");
})
- 传入参数是(HTML字符串)时，就会加载到主体中
<script>
$(function () {
$("<div>"+
" <span>div-span</span>"+
"<div>").appendTo("body")
});
</script>
2.2、jQuery的遍历函数
var a=$(":checkedbox:checked");
$a.each(function(){//jQuery中一定要写这个函数
alert(this.value);
})
- 传入参数为（选择器字符串）时
$("#id属性值"); id选择器，根据id查询标签对象
$(“标签名”)；标签名选择器
$(".class属性值")；类型选择器
- 传入参数为(DOM)对象的时候，会变成jQuery函数
jQuery对象的本质：是DOM对象数组+jQuery提供的一系列功能函数
DOM对象和jQuery对象的方法不能相互使用
DOM对象转jQuery：$(DOM对象)。jQuery转DOM对象：jQuery对象[下标]。
2.3、选择器
2.3.1、基本选择器
#id
element //是元素不是name
.class
*
#id,p.class //表示既要是p标签，也要是.class
2.3.2、层次选择器
ancestor descendant：祖辈 祖辈下面的所有亲属，用空格连接
parent > child：父辈>子辈，只找子辈，孙子及以下都不要
prev+next：找prev之后的第一个
prev~sibling：找prev之后的所有
2.3.3、过滤选择器
2.3.3.1、基本过滤选择器
:first $(“li:first”)
:last
:not(selector) $(“input:not(”:checked")")
:even(index) 查找索引值是偶数的元素 $(“tr:even”)
:odd(index) 查找索引值是奇数的元素
:eq(index) 给定一个匹配索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index)
:header 查找标题h1等
:animated 查找正在执行动画效果的元素
:focus
2.3.3.2、内容选择器
.contains(text)
.empty 匹配不包含子元素或者文本元素的空元素
.parent 匹配含有子元素或者文本的元素
.has(selector) 匹配含有选择器所匹配的元素的元素
<div><p>Hello</p><div>
<div>World</div>
$("div.has(p)") //结果<div><p>Hello</p><div>
2.3.3.3、属性过滤器
[attribute]：匹配给定属性的元素 $(“div[id]”)说明匹配的div中要包含id属性
[attribute=value]：匹配给定的属性是某个特定值得元素
[attribute！=value]：匹配不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value]：匹配给定的数值开始的元素
[attribute=value]：匹配给定的数值结尾的元素
[attribute*=value]：包含
[][][]：多条件
2.3.3.4、表单过滤器
:input
:text
:password
:radio
:checkedbox
:submit
:image
:reset
:button
:file
:hidden
2.3.3.5、表单对象属性
:enabled $(":text:disabled")
:disabled
:checked
:selected
2.4、jQuery元素筛选
.eq()
.first()
.last() $(“li”).last()
.fliter()
.is()：判断是否匹配给定的选择器，只要有一个匹配就返回true
.has()：返回包含有匹配选择器的元素的元素
.not()：删除匹配选择器的元素
.children()：返回匹配给定选择器的子元素
.find()：返回给定选择器的后代元素
.next()：返回当前元素的下一个兄弟元素
.nextAll()：返回当前元素后面所有的兄弟元素
.nextUntil()：返回当前元素到指定匹配的元素为止的后面元素
.parent()：返回父元素
.prev()：返回当前元素的上一个兄弟元素
.prevAll()：返回当前元素前面所有的兄弟元素
.prevUtil()：
.siblings()：返回所有兄弟元素
.add()：把add匹配的选择器的元素添加到当前jquery中
<script>
$(function () {
alert($("div").add($(":input:disabled")).length)
})
</script>
2.5、jQuery属性操作
.html() 类似innerHTML
.text() 类似innerText
.val() 类似value，获取表单项的内容
attr() 可以设置和获取属性的值
prop() 可以设置和获取属性的值
<script>
$(function () {
alert($(":checkbox:first").attr("abc","a"))
// alert($(":checkbox:first").prop("checked"))
})
</script>
综合练习，全选，反选等
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="../jquery/jquery-3.6.0.js"></script>-->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="jquery/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#checkedAll").click(function () {
$(":checkbox").prop("checked",true)
})
$("#checkedNone").click(function () {
$(":checkbox").prop("checked",false)
})
$("#reverseChecked").click(function () {
$(":checkbox[name='hobby']").each(function () {
this.checked=!this.checked
})
var a=$(":checkbox[name='hobby']").length
var b=$(":checkbox[name='hobby']:checked").length
// if(a==b) $(":checkbox:first").prop("checked",true)
// if(b==0) $(":checkbox:first").prop("checked",false)
$(":checkbox:first").prop("checked",a==b)
})
$("#all").click(function () {
$(":checkbox[name='hobby']").prop("checked",this.checked)
})
$(":checkbox[name='hobby']").click(function () {
var a=$(":checkbox[name='hobby']").length
var b=$(":checkbox[name='hobby']:checked").length
$("#all").prop("checked",a==b)
})
})
</script>
</head>
<body>
<form>
你的爱好是：<br/>
全选/全不选<input type="checkbox" id="all"/><br/>
足球<input type="checkbox" name="hobby" id="football"/>
篮球<input type="checkbox" name="hobby" id="basketball"/>
羽毛球<input type="checkbox" name="hobby" id="badminton"/>
乒乓球<input type="checkbox" name="hobby" id="ping-pang ball"/><br/>
<input type="button" id="checkedAll" value="全选"/>
<input type="button" id="checkedNone" value="全不选"/>
<input type="button" id="reverseChecked" value="反选"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
2.6、jQuery的增删改
内部插入：
appendTo()
prependTo()
$("<h1>标题</h1>").appendTo("div")
外部插入:
insertAfter()
insertBefore()
替换：
replaceWith() 将所有的替换成一个
replaceAll() a.replaceAll(b)a替换所有的b
删除：
remove() a.remove删除a标签
ewmpty() 清空a标签里的内容
练习：左换右，右换左
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.6.0.js"></script>
<script>
$(function () {
$("button:eq(0)").click(function () {
$("select:eq(0) option:selected").appendTo($("select:eq(1)"))
})
$("button:eq(1)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"))
})
$("button:eq(2)").click(function () {
$("select:eq(0) option").appendTo($("select:eq(1)"))
})
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"))
})
})
</script>
<style>
select{
height: 250px;
width: 100px;
}
</style>
</head>
<body>
<span id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
</span>
<span id="right">
<select multiple="multiple" name="sel02"></select>
</span></br>
<button>选中添加到右边</button>
<button>选中添加到左边</button></br>
<button>全部添加到右边</button>
<button>全部添加到左边</button>
</body>
</html>
练习：动态添加和删除列表
<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.6.0.js"></script>
<script>
$(function () {
var deletefun=function () {
var row=$(this).parent().parent()//function中的this表示正在执行的dom对象
//确认提示框函数confirm()，确认返回true
if(confirm("确认删除"+row.find("td:first").text()+"吗？")){
row.remove()
}
return false//return false 可以阻止元素的默认行为
}
$("#addButton").click(function () {
var name=$("#empName").val()
var email=$("#email").val()
var salary=$("#salary").val()
var a=$(" <tr>" +
"<td>"+name+"</td>"+
"<td>"+email+"</td>" +
"<td>"+salary+"</td>" +
"<td><a href='\deleteEmp?id==001'>Delete</a></td>" +
"</tr>")
a.appendTo($("#table01"))
a.find("a").click(deletefun)//注意函数的复用，此处不要加()，加了的是返回值，有问题
})
$("a").click(deletefun)
})
</script>
</head>
<body>
</br></br></br></br>
<table id="table01" border="1" cellspacing="0" width="30" align="center">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>tom@qq.com</td>
<td>5000</td>
<td><a href='deleteEmp?id==001'>Delete</a></td>
</tr>
</table>
</br></br>
<div align="center">
<h4>添加新员工</h4>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr></br></br>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="empName" id="email"/>
</td>
</tr></br></br>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="empName" id="salary"/>
</td>
</tr><br/><br/>
<button type="submit" id="addButton">提交</button>
</div>
</body>
</html>
2.7、CSS样式操作
addClass() 添加样式
removeClass 删除样式
toggleClass() 有就删除，没有就添加样式
offset() 获取和设置元素的坐标
练习：样式操作
<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="../jquery/jquery-3.6.0.js"></script>-->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="jquery/jquery-3.6.0.js"></script>
<style type="text/css">
div{
width: 100px;
height: 200px;
}
div.blackBorder{
border: 2px black solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script>
$(function () {
var a=$("div:first")
//addClass想被选元素添加一个或多个类
$("#btn01").click(function () {
a.addClass("redDiv blackBorder")//用空格分割多个样式
})
$("#btn02").click(function () {
a.removeClass("redDiv")
})
$("#btn03").click(function () {
a.toggleClass("blueBorder")
})
$("#btn04").click(function () {
//offset:获取和设置第一个匹配元素相对于文档的位置
a.offset({
top:0,
left:0
})
})
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border"></div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
</body>
</html>
2.8、动画操作
基本动画：
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏
淡入淡出动画：
fadeIn()
fadeOut()
fadeTo() 在指定时长内慢慢的将透明度降低
fadeToggle()
练习：动画操作
<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="../jquery/jquery-3.6.0.js"></script>-->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="jquery/jquery-3.6.0.js"></script>
<script>
$(function () {
var a=$("div:first")
//addClass想被选元素添加一个或多个类
$("#btn1").click(function () {
a.show(2000,function () {
alert("所有动画完成")
})
})
$("#btn2").click(function () {
a.hide(1000)
})
$("#btn3").click(function () {
a.toggle()
})
$("#btn4").click(function () {
a.fadeIn()
})
$("#btn5").click(function () {
a.fadeOut()
})
$("#btn6").click(function () {
a.fadeTo()
})
$("#btn7").click(function () {
a.fadeToggle(2000,0.5)
})
var fun=function () {
a.toggle(1000,fun)
}
$("#btn8").click(fun)
})
</script>
<style>
div{
border: black 1px solid;
height: 300px;
weight: 300px;
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td><button id="btn1">show()</button></td>
</tr>
<tr>
<td><button id="btn2">hide()</button></td>
</tr>
<tr>
<td><button id="btn3">toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">fadeToggle()</button></td>
</tr>
<tr>
<td><button id="btn8">来回操作</button></td>
</tr>
<tr>
<td><button id="btn9">停止来回操作</button></td>
</tr>
</table>
<div id="div1" >
<h1 align="center"><b>这是动画效果</b></h1>
</div>
</body>
</html>
2.9、原生js和jQuery有什么区别
$(function(){})和window.οnlοad=function(){}的区别？
$(document).ready(function(){})
$(function(){})
- 他们分别在社么时候触发？
jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
原生js的界面加载完之后浏览器的内核解析完页面的标签创建好DOM对象之后，还要等标签显示时需要的内容加载完成。
- 他们的触发顺序
jQuery先
- 他们的执行次数
原生js的页面加载完成后，只会执行最后一次的赋值函数
jQuery的页面是全部把注册的function函数依次顺序执行
2.10、jQuery中常用的事件处理方法
click() 绑定单击事件，以及触发单击事件
mouseover()
mouseout()
bind() 可以一次性绑定一个或者多个事件
one() 使用上和bind()一样，但是只会触发一次
live() 相同类型创建的绑定方法依然有效 新版本使用on代替了
unbind() 解除事件的绑定
<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.6.0.js"></script>
<script>
$(function () {
$("h1").bind("click mouseover mouseout",function(){
alert("这是标题绑定的click函数")
})
})
</script>
</head>
<body>
<h1>按一下试试</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.6.0.js"></script>
<script>
$(function () {
$(document).on("click","h1",function () {
alert("这是live绑定的")
})
$("<h1>按一下试试</h1>").appendTo("div")
})
</script>
</head>
<body>
<div id="div0"><h1>按一下试试</h1></div>
</body>
</html>
事件对象event
<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="../jquery/jquery-3.6.0.js"></script>-->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="jquery/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#div0").bind("mouseover mouseout",function (event) {
if(event.type=="mouseover"){
console.log("来")
}else{
console.log("走")
}
})
})
</script>
</head>
<body>
<div id="div0"><h1>按一下试试</h1></div>
</body>
</html>
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
