失眠网 > jQuery快速掌握（看这一篇就够了）

jQuery快速掌握（看这一篇就够了）

时间：2019-07-29 03:24:42

相关推荐

jQuery快速掌握（看这一篇就够了）

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封装的函数

对象

对象分类

DOM对象

通过js创建的对象

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标签无关

过滤器

过滤器是一个字符串，用来对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属性值

text()

操作标签的文本内容，标签开始和结束之间的内容

attr()

操作value、文本内容以外的属性

栗子

<!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()

栗子

<!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>