目录
jQuery定义(更少的代码,做更多的事)环境搭建对象对象分类DOM对象转jQuery对象jQuery对象转DOM对象 选择器什么是选择器基本选择器表单选择器 过滤器基本过滤器表单过滤器 函数(语法:$("选择器").函数名())第一部分val()text()attr()栗子 第二部分remove()empty()append()html()栗子each()after()、before() 事件定义元素监听事件方式一(该方式仅适合给现有的元素加事件)方式二(该方式还能够给动态生成的元素加事件) ajax$.ajax()$.get()$.post() 综合运用jQuery
定义(更少的代码,做更多的事)
jQuery是一款跨主流浏览器的JavaScript库,封装了JavaScript相关方法调用,简化了JavaScript对HTML DOM操作
操作document对象创建事件、动画进行ajax处理
环境搭建
idea的webapp目录下,新建文件夹拷贝jqueryhtml页面使用script标签引入外部文件(jquery文件)在页面中根据需要调用jQuery封装的函数步骤
<script src="../../jQuery/jquery-3.6.0.js"></script><!--$:jQuery中的函数名$(document):document为参数,$(document)意思就是把js中使用的document对象转换成jQuery可以使用的对象ready():该函数是在页面的document对象加载之后执行(也就是js的onload事件结束)-无名函数--><script type="text/javascript">$(document).ready(function () {alert("jQuery环境搭建成功!")})/*$():调用无名函数,页面dom对象加载后执行,相当于onload事件*/$(function () {alert("调用无名函数!")})</script>
对象
对象分类
通过js创建的对象DOM对象
使用jQuery获取对象JQuery对象
DOM对象转jQuery对象
<script type="text/javascript">var dom = document.getElementById("mytext")// $jquery 这样声明也可以var jquery = $(dom) </script></head><input type="text" id="mytest">
jQuery对象转DOM对象
语法:jQuery对象是一个数组,数组成员是DOM对象,使用下标获取
<script type="text/javascript">function test03() {var obj = $("#myMath")//obj:是一个jQuery对象里面存储的是DOM类型的数组var dom = obj[0]// var dom = obj.get(0)alert(dom.value*dom.value)}</script></head><body><input type="text" id="myMath"><br><input type="button" value="计算平方" onclick="test03()"></body>
选择器
什么是选择器
选择器就是一个字符串(用来定位dom对象的字符串),使用这个字符串作为条件来定位dom对象;
我们可以使用id、class或标签名称来作为选择器使用,定位dom对象。
基本选择器
id选择器
<script type="text/javascript">function test01() {var obj = $("#my_id")alert("id选择器")}</script><input type="button" id="my_id" value="id选择器" onclick="test01()">
class选择器(样式选择器)
<script type="text/javascript">function test02() {var obj = $(".my_class")alert("样式选择器")}</script><div class="my_class"><input type="button" value="class选择器/样式选择器" onclick="test02()"></div>
标签选择器
<script type="text/javascript">function test03() {var obj = $("input")alert("标签选择器")}</script><input type="button" value="标签选择器" onclick="test03()">
所有选择器
语法:${"*"}
组合选择器
语法:${"#id,.class,标签名称"}
表单选择器
标案选择器是根据元素类型type来定义的,而与是否存在form标签无关
<script type="text/javascript">function test01() {var obj = $(":text");//jQuery对象转为dom对象var dom = obj.get(0)alert(dom.value);}function test02() {var obj = $(":radio")//jQuery对象转为dom对象for (let i = 0; i < obj.length; i++) {var dom = obj[i]alert(dom.value)}}</script></head><body><p>文本框:</p><input type="text" value="我是文本框"><br><p>性别:</p><input type="radio" value="man">男<br><input type="radio" value="woman">女<br><input type="button" value="表单选择器" onclick="test01()"><input type="button" value="表单选择器01" onclick="test02()"></body>
过滤器
过滤器是一个字符串,用来对dom对象进行筛选,和选择器一起使用
jQuery对象中存储的dom对象的顺序和页面中dom对象的顺序一致
基本过滤器
选择第一个/最后一个,保留dom数组中的dom对象
语法:$("选择器:first")
$("选择器:last")
选择DOM数组中的中的dom对象
语法:$("选择器:eq(数组索引)")
选择大于/小于某个下标的所有dom成员
语法:$("选择器:gt(下标)")
$("选择器:lt(下标)")
表单过滤器
根据表单对象的状态来进行过滤
<!--获取可用的文本框-->$(":text:enabled")<!--获取不可用的文本框-->$(":text:disabled")<!--获取选中的复选框-->$(":checkbox:checked")<!--获取选中的下拉列表框-->$("选择器>option:selected")
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单过滤器</title><script src="../../jQuery/jquery-3.6.0.js"></script><script type="text/javascript">$(function () {$("#Btn1").click(function () {var obj = $(":text:enabled")alert(obj.val())})$("#Btn2").click(function () {var obj = $(":checkbox:checked")for (let i = 0; i < obj.length; i++) {alert(obj[i].value)}})$("#Btn3").click(function () {var obj = $("select > option:selected")for (let i = 0; i < obj.length; i++) {alert(obj[i].value)}})})</script></head><body><input type="text" value="文本1"><br><input type="text" value="文本2" disabled><br><input type="text" value="文本3"><br><input type="text" value="文本4" disabled><br><input type="checkbox" value="篮球">篮球<br><input type="checkbox" value="游戏">游戏<br><input type="checkbox" value="音乐">音乐<br><select id="my_select"><option value="java">Java语言</option><option value="c" selected>c语言</option><option value="python">Python语言</option></select><br><button id="Btn1">过滤文本</button><br><button id="Btn2">过滤复选框</button><br><button id="Btn3">过滤下拉框</button><br></body></html>
函数(语法:$(“选择器”).函数名())
第一部分
val()
操作数组中的DOM对象的value属性值
<!--$(选择器).val():无参调用形式,读取数组中第一个DOM对象的value属性值${选择器}.val(值):有参调用形式,对数组中的所有DOM对象的value属性值进行统一赋值-->
text()
操作标签的文本内容,标签开始和结束之间的内容
<!--text():无参调用形式,把DOM数组中的所有dom对象的文本内容链接起来,形成一个字符串并返回text(参数):有参调用形式,对数组中的所有DOM对象进行统一赋新的文本(覆盖,显示在所匹配元素内部)-->
attr()
操作value、文本内容以外的属性
<!--attr("属性名"):获取dom数组中第一个dom对象对应该属性名的属性值attr("属性名","属性值"):给dom数组所有dom对象的这个属性名赋属性值-->
栗子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一组jQuery函数</title><script src="../../jQuery/jquery-3.6.0.js"></script><script type="text/javascript">$(function () {$("#btn1").click(function () {var obj = $(":text")alert(obj.val())})$("#btn2").click(function () {var obj = $(":text")obj.val("haha")})$("#btn3").click(function () {var str = $("div").text()alert(str)})$("#btn4").click(function () {var str = $("div").text("我是笨蛋!")})$("#btn5").click(function () {var str = $("img").attr("src")alert(str)})$("#btn6").click(function () {var str = $("img").attr("src","../../image/粉色的A梦.webp")})})</script></head><body><input type="text" value="关羽:打野收割能力偏弱,阵容缺少开团"><br><input type="text" value="吕布:对面阵容偏坦度,阵容缺少开团"><br><input type="text" value="花木兰:对面控制偏多,对线英雄很硬"><br><br><br><div><div>王者荣耀的匹配机制很恶心</div><div>,再不进行优化,热度只能越来越低!</div></div><br><br><img src="../../image/多啦A梦.webp"><br><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">获取图片的路径</button><br><button id="btn6">设置图片的路径</button><br></body></html>
第二部分
remove()
删除选择器选中的dom对象和子对象
empty()
删除选择器选中的dom对象的子对象
append()
给dom对象的后面增加新的dom对象(“追加”,注意:所匹配的元素标签和要添加的内存是“父子关系”)
html()
<!--html():获取dom数组中第一个dom对象的文本值(html()返回结果相当于innerHTML)html(参数):给dom数组所有dom对象设置新的文本内容(覆盖,显示在所匹配元素内部)-->
栗子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>>第二组jQuery函数</title><script src="../../jQuery/jquery-3.6.0.js"></script><script type="text/javascript">$(function () {//无名函数,当dom对象加载完成之后再加载js代码,相当于onload$("#btn1").click(function () {$("select").remove()})$("#btn2").click(function () {$("select").empty()})$("#btn3").click(function () {$("#my_div").append("<button id=\"btn3\">append方法测试</button><br>")})$("#btn4").click(function () {var str = $("span").html()alert(str)})$("#btn5").click(function () {var str = $("span").html("神奇")})})</script></head><body><select id="刺客"><option value="01">云樱</option><option value="01">澜</option><option value="01">橘右京</option></select><br><br><div id="my_div" style="background-color: aquamarine">我的游戏</div><br><br><span>学习<b>打游戏</b>难吗?</span><br><span>打王者毒药</span><br><button id="btn1">remove方法测试</button><br><button id="btn2">empty方法测试</button><br><button id="btn3">append方法测试</button><br><button id="btn4">html无参方法测试</button><br><button id="btn5">html有参方法测试</button><br></body></html>
each()
循环函数,遍历数组、json字符串、dom数组
语法1:
$.each(要执行循环的变量,function(index,element){处理函数})
$:jQuery对象调用each方法“要执行循环的变量”:数组、json字符串、dom数组“function”:循环的处理函数,每个遍历的对象都要执行一次index:循环定义的索引element:和index对应的成员
语法2:
$("选择器").each(function(index,element){处理函数})
专门用来循环DOM数组
<script type="text/javascript">$(function () {var json = {"name":"mtf","age":22,"study":"java"}$.each(json,function (index,element) {//index:key//element:valueconsole.log("json字符串的key:"+index+" value:"+element)})})</script>
after()、before()
在所匹配的元素标签的后面或前面追加内容(注意:所匹配元素标签和要添加的内容“二者平级”)
事件
为页面元素绑定事件,意思就是绑定的页面元素如果发生指定动作,那么就会执行该元素绑定的事件
定义元素监听事件
方式一(该方式仅适合给现有的元素加事件)
语法:$(“选择器”).事件名称(事件的处理函数)
“事件名称”:就是js中去掉on部分的事件,比如onclick - >click“事件处理函数”:函数定义,当事件发生时,执行这个函数
错误实例:
浏览器打开网页点击按钮并没有打开“弹窗”分析:监听事件和页面元素加载一样,都是从上到下进行加载,因此监听事件首先被加载,但是没有找到id为myBtn
的元素(它还没有被加载),所以点击按钮不触发事件解决:$(function (){ })
调用jQuery的无名函数,相当于js中的onload事件结束
<script src="../../jQuery/jquery-3.6.0.js"></script><script type="text/javascript">$("#myBtn").click(function () {alert("事件监听成功!")})</script></head><body><input type="button" value="测试监听事件" id="myBtn"></body>
<script type="text/javascript">$(function () {$("#myBtn").click(function () {alert("事件监听成功!")})})</script></head><body><input type="button" value="测试监听事件" id="myBtn"></body>
方式二(该方式还能够给动态生成的元素加事件)
语法:$(“选择器”).on(事件名称,function(){处理事件})
事件名称:去掉on的js事件function:事件处理函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>定义监听事件</title><script src="../../jQuery/jquery-3.6.0.js"></script><script type="text/javascript">$(function () {$("#myBtn1").click(function () {alert("事件监听成功!")})$("#myBtn2").on("click",function () {alert("事件监听成功!")})})</script></head><body><input type="button" value="测试监听事件方式一" id="myBtn1"><br><input type="button" value="测试监听事件方式二" id="myBtn2"></body></html>
ajax
jQuery对ajax进行了封装,也就是说我们可以选择不再原生的ajax,避免重复造轮子
原生Ajax参考博客:
$.ajax()
语法:$.ajax(json格式的参数)
<script type="text/javascript">$.ajax({url:"",//请求提交的地址data:{},//请求提交时携带的数据type:"get",//提交的请求方式(默认为get)dataType:"json",//希望回调函数返回的数据类型//请求成功回调函数success:function (data) {//成功回调后,后台返回的数据保存在data中},//请求出现错误执行该函数error:function () {}})</script>
$.get()
语法:$.get(url,请求参数,回调函数...)
(固定请求方式:get)
$.post()
语法:$.post(url,请求参数,回调函数)
综合运用
级联查询:/qq_48575500/article/details/125952322
如果觉得《jQuery快速掌握(看这一篇就够了)》对你有帮助,请点赞、收藏,并留下你的观点哦!