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

凉水不好喝

已于 2022-08-01 17:44:32 修改

阅读量1.1k

点赞数 2

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-07-24 09:09:02 首次发布

本文链接：https://blog.csdn.net/qq_48575500/article/details/125952215

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery

定义（更少的代码，做更多的事）

jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化了JavaScript对HTML DOM操作

操作document对象
创建事件、动画
进行ajax处理

环境搭建

步骤

idea的webapp目录下，新建文件夹拷贝jquery
html页面使用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>

对象

对象分类

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

<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：value
      console.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>