JQuery

目录

简介

​ JQuery是一套兼容多浏览器的JavaScript脚本库，核心理念是写得更好，做的更多。使用JQuery将极大的提高编写JavaScript代码的效率，帮助开发者节省大量的工作，让写出来的代码更加优雅，更加健壮，如虎添翼。

​ JQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，JQuery已经成为最流行的JavaScript框架，在世界前10000多个访问最多的网站中，有超过55%在使用JQuery。

jQuery的下载

打开链接，复制内容并粘贴到项目中，文件名为：jquery-3.7.1.min.js

文件放在js目录下。

完整版：jquery-3.7.1.js --->学习版（学习源码 向高手学习时最好的学习方法）

压缩版：jquery-3.7.1.min.js --->开发版（压缩版，减少传输）

优点

  1. 提供了强大的功能函数
  2. 解决浏览器兼容性问题
  3. 实现丰富的UI和插件
  4. 纠正错误的脚本知识

JQuery对象

JQuery的使用

在页面引入即可

<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>

JQuery核心

$符号在JQuery中代表对JQuery对象的引用，"JQuery"是核心对象。通过该对象可以获取JQuery对象，调用JQuery提供的方法等。只有JQuery对象才能调用JQuery提供的方法。

$ <==> JQuery

Dom对象与JQuery包装集对象

明确Dom对象和JQuery对象包装集的概念，将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过JS代码获取的对象都是Dom对象；而通过JQuery获取的对象是JQuery包装集对象，简称JQuery对象，只有JQuery对象才能使用JQuery提供的方法。

Dom对象：

​ 通过js方式获取的元素名称(docment)

JQuery对象：

​ 通过JQuery方法获取的元素对象，返回的是JQuery包装集

Dom对象

JavaScript中获取dom对象，dom对象只有有限的属性和方法；

var divs = document.getElementById("testDiv")
var divs = document.getElementsByTagName("div")

JQuery包装集对象

可以说Dom对象的扩充在JQuery世界中将所有的对象，无论是一个还是一组，都封装成一个JQuery包装集，比如获取包含一个元素的JQuery包装集。

var JQueryobject = $("#testDiv")

Dom对象转JQuery对象

Dom对象转JQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv') //获取Dom对象
mydiv = $(domDiv)

JQuery对象转Dom对象

JQuery对象转Dom对象，只需要取数组中的元素即可

//第一种方式 获取JQuery对象
// var jqueryDiv = jQuery('#mydiv');
//第二种方式 获取JQuery对象
jqueryDiv = $('#mydiv')
//将获取的JQuery对象转为dom
var dom = jqueryDiv[0]

JQuery选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在JQuery中提供了简便的方式供我们查找|定位元素，成为JQuery选择器，选择器可以说是最考验一个人JQuery功力的地方，通俗的讲，Selector选择器就是“一个表示特殊语意的字符串”。只要把选择字符串传入上面的方法中就能够选择不同的Dom对象并且以JQuery包装集的形式返回。

JQuery选择器按照功能只要分为“选择”和“过滤”。。并且是配合使用的，具体分类如下。基础选择器掌握即可，其他用到时再查阅。

基础选择器

选择器 名称 举例 含义
id选择器 #id $("#id属性值")选择id为testDiv的元素 选择di为指定元素对象（如果有多个同名id，则以第一个为准）
元素名称选择器 element $("标签名/元素名")选择所有div元素 选择所有指定标签的元素对象
类选择器 .classs $(".class属性值")选择所有class=blue的元素 选择class为指定值的元素对象
选择所有元素 * $("*")选择页面所有元素 选择页面中所有的元素对象
组合选择器 选择器1,选择器2,.. $("#选择器1,选择器2,..")同时选择多个选择器匹配的元素 选择指定选择器选中的元素对象 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="mydiv1" class="blue">元素选择器</div>
    <div id="mydiv1">id选择器<span>span中的内容</span></div>
    <span class="blue">样式选择器</span>
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //ID选择器
        var mydiv = $("#mydiv1")
        console.log(mydiv)
        //类选择器
        var clas = $(".blue")
        console.log(clas)
        // 元素选择器
        var spans = $("span")
        console.log(spans)
        // 通用选择器
        var all = $("*")
        console.log(all)
        // 组合选择器
        var group = $("#mydiv1, div, .blue")
        console.log(group)
    </script>
</html>

层次选择器

选择器 名称 举例 含义
后代选择器 ancestor descendant $("parent div") 选择父元素的所有指定元素（包含第一代、第二代等）
子代选择器 parent > child $("parent > div") 选择父元素的所有第一代指定元素
相邻选择器 prev + next $(".blue + img") 选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
同辈选择器 prev ~ sibling $(".blue ~ img") 选择元素的下面的所有指定元素 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .testColor{
            background-color: green;
        }
        .gray{
            background-color: gray;
        }
    </style>
<body>
    <div id="parent">层次选择器
        <div id="child" class="testColor">父选择器
            <div class="gray">子选择器</div>
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">
        </div>
        <div>
            选择器2<div>选择器2中的div</div>
        </div>
    </div>
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //后代选择器
        var hd = $("#parent div")
        console.log(hd)
        //子代选择器
        var zd = $("#parent > div")
        console.log(zd)
        //相邻选择器
        var xl = $("#child + div")
        console.log(xl)
        //同辈选择器
        var tb = $(".gray ~ img")
        console.log(tb)
    </script>
</html>

表单选择器

Forms 名称 举例
表单选择器 :input 查找所有的input元素，注意会匹配所有的input、textarea、select和button元素 $(":input")
文本框选择器 :text 查找所有文本框 $(":text")
密码框选择器 :password 查找所有密码框 $(":password")
单选按钮选择器 :radio 查找所有单选框 $(":radio")
复选框选择器 :checkbox 查找所有复选框 $(":checkbox")
提交按钮选择器 :submit 查找所有提交框 $(":submit")
图像域选择器 :image 查找所有图像域 $(":image")
重置按钮选择器 :reset 查找所有重置按钮 $(":reset")
按钮选择器 :button 查找所有按钮 $(":button")
文件域选择器 :file 查找所有文件域 $(":file")

JQuery Dom操作

JQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作方式只适用于JQuery对象

操作元素属性

获取属性

方法 说明 举例
attr（属性名） 获取指定的属性值，操作checkbox时，选中返回checked，没有选中返回undefined attr('checked')
attr('name)
prop（属性名） 获取具有true和false两个属性的属性值 prop('checked') 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .testColor{
            background-color: green;
        }
        .gray{
            background-color: gray;
        }
    </style>
<body>
    <input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"> aa
    <input type="checkbox" name="ch" id="bb"> bb
</body>
    <!--
        操作元素的属性：
            属性的分类：
                固有属性：元素本身就有的属性：id、name、class、style
                返回值是Boolean的属性：checked、selected、disabled
                自定义属性：用户自定义的属性
            区别：
                1. 如果是固有属性，attr()和prop()方法均可操作
                2. 如果是自定义属性，attr()可以操作，prop()不可操作
                3. 如果返回值是Boolean类型的属性，
                    若设置了属性，attr()返回具体的值，prop()返回true
                    若未设置属性，attr()返回undefined，prop()返回false
            获取属性：
                attr("属性名")
                prop("属性名")
            设置属性
                attr("属性名","属性值")
                prop("属性名","属性值")
            移除属性
                removeAttr("属性名")

            总结：
                如果属性的类型是Boolean，则使用prop()方法，否则使用attr()方法。
                一开始只有attr()方法，后续为了缓解attr()的压力，新推出了prop()方法来操作Boolean类型


    -->
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //获取固有属性
        var name = $("#aa").attr("name") 
        console.log(name);//ch
        var name2 = $("#aa").prop("name")
        console.log(name2)//ch
        // 返回值是Boolean的属性（元素设置了属性）
        var ck1 = $("#aa").attr("checked")
        var ck2 = $("#aa").prop("checked")
        console.log(ck1)//checked
        console.log(ck2)//true
        // 返回值是Boolean的属性（元素未设置属性）
        var ck3 = $("#bb").attr("checked")
        var ck4 = $("#bb").prop("checked")
        console.log(ck3) //undefined
        console.log(ck4) // false
        //自定义属性
        var abc1 = $("#aa").attr("abc")
        var abc2 = $("#aa").prop("abc")
        console.log(abc1) //aabbcc
        console.log(abc2) //undefined

        //设置固有属性
        $("#aa").attr("value", "1")
        $("#bb").prop("value", "2")
        //返回值是Boolean的属性
        $("#bb").attr("checked","checked")
        $("#bb").prop("checked",false)
        //自定义属性
        $("#aa").attr("uname","admin")
        $("#aa").prop("uage",18)
    
        //移除属性
        $("#aa").removeAttr("checked")
    </script>
</html>

设置属性

//设置固有属性
$("#aa").attr("value", "1")
$("#bb").prop("value", "2")
//返回值是Boolean的属性
$("#bb").attr("checked","checked")
$("#bb").prop("checked",false)
//自定义属性
$("#aa").attr("uname","admin")
$("#aa").prop("uage",18)

移除属性

//移除属性
$("#aa").removeAttr("checked")

操作元素样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

方法 说明
attr("class") 获取class属性的值，即样式名称
attr("class","样式名") 修改class属性的值，修改样式
addClass("样式名") 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div{
            padding: 8px;
            width: 180px;
        }
        .blue{
            background: blue;
        }
        .larger{
            font-size: 30px;
        }
        .pink{
            background: pink;
        }
        .green{
            background: green;
        }
    </style>
</head>
<body>
    <!--
        操作元素的样式
         attr("class")              获取元素的样式名
         attr("class", "样式名")     设置元素的样式 (设置样式，原本的样式会被覆盖)
         addClass("样式名")          添加样式 （在原来的样式基础上添加样式，原本的样式会保留， 如果出现相同样式则以样式中后定义的为准）
         css()                      添加具体的样式 （添加行内样式）
                                    css("具体样式名":"样式值") 设置单个样式
                                    css({"具体样式名":"样式值","具体样式名":"样式值"}) 设置多个样式
         removeClass("样式名")       移除样式
    -->
    <h3>css()方法设置元素样式</h3>
    <div id="conBlue" class="blue larger">天蓝色</div>
    <div id="conRed">大红色</div>
    <div id="remove" class="blue larger">天蓝色</div>
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        // attr("class")              获取元素的样式名
        var cla = $("#conBlue").attr("class")
        console.log(cla)

        //attr("class", "样式名")     设置元素的样式
        $("#conBlue").attr("class","green")

        // addClass("样式名")          添加样式
        $("#conBlue").addClass("larger")
        $("#conBlue").addClass("pink")
        
        //css()                      添加具体的样式 （添加行内样式）
        $("#conRed").css("font-size","40px")
        $("#conRed").css({"font-family":"楷体","color":"green"})

        // removeClass("样式名")       移除样式
        $("#remove").removeClass("blue")
    </script>
</html>

操作元素的内容

对于元素还可以操作其中的内容，例如文本、值、甚至是HTML

方法 说明
html() 获取元素的HTML内容
html("html,内容") 设定元素的HTML内容
text() 获取元素的文本内容，不包含HTML
text("text 内容") 设置元素的文本内容，不包含HTML
val() 获取元素的value值
val('值') 设定元素的value值 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>html()和text()方法设置元素内容</h3>
    <div id="html"></div>
    <div id="html2"></div>
    <div id="text">北京</div>
    <div id="text2"><h2>北京</h1></div>
    <input  type="text" name="uname" value="oop" id="op">
    <!--
        操作元素的内容
        html()              获取元素的内容，包含HTML标签（非表单元素）
        html("内容")         设置元素的内容，包含HTML标签（非表单元素）
        text()              获取元素的纯文本内容，不识别HTML标签（非表单元素）
        text("内容")         设置元素的纯文本内容，不识别HTML标签（非表单元素）
        val()               获取元素的值（表单元素）
        val("内容")          设置元素的值（表单元素）
    
        表单元素：
            文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
        
        非表单元素:
            div、span、h1~h6、table、tr、td、li、p等
    -->
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //html("内容")         设置元素的内容，包含HTML标签（非表单元素）
        $("#html").html("<h2>上海</h2>")
        $("#html2").html("上海")
        //html()              获取元素的内容，包含HTML标签（非表单元素）
        var html = $("#html").html()
        var html2 = $("#html2").html()
        console.log(html)
        console.log(html2)

        //text("内容")         设置元素的纯文本内容，不识别HTML标签（非表单元素）
        $("#text").text("北京")
        $("#text2").text("<h2>北京</h2>")
        //text()              获取元素的纯文本内容，不识别HTML标签（非表单元素）
        var txt = $("#text").text()
        var txt2 = $("#text2").text()
        console.log(txt)
        console.log(txt2)

        //  val()               获取元素的值（表单元素）
        var val = $("#op").val()
        console.log(val)
        // val("内容")          设置元素的值（表单元素）
        $("#op").val("今天天气还好")
    </script>
</html>

创建元素

在JQuery中创建元素很简单，直接使用核心函数即可

$('元素内容')

$('<p>this is a paragaph!!!</p>')

添加元素

方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、HTML元素标记
$(content).prependTo(selector) 把content元素或内容加入selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、HTML元素标记
$(content).appendTo(selector) 把content元素或内容插入selector元素内，默认是尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content) 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        div{
            margin: 10px 0px;
        }
        span{
            color: white;
    
            padding: 8px;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
        .green{
            background-color: green;
        }
        .pink{
            background-color: pink;
        }
        .gray{
            background-color: gray;
        }
    </style>
<body>
    <h3>prepend()方法前面追加内容</h3>
    <h3>prependTo()方法前面追加内容</h3>
    <h3>append()方法后追加内容</h3>
    <h3>appendTo()方法后追加内容</h3>
    <span class="red">男神</span>
    <span class="blue">偶像</span>
    <div class="green"><span>小鲜肉</span></div>
    <!--
        创建元素和添加元素
            创建元素
                $("内容")
            添加元素
                1.前追加子元素
                    指定元素.prepend(内容)        在指定元素内部的最前面追加内容，内容可以是字符串、HTML元素
                    $(内容).prependTo(指定元素)   把内容追加到指定元素内部的最前面，内容可以是字符串、HTML元素
                2.后追加子元素
                    指定元素.append(内容)         在指定元素内部的在最后面追加内容，内容可以是字符串、HTML元素
                    $(内容).appendTo(指定元素)    把内容追加到指定元素内部的最后面，内容可以是字符串、HTML元素
                3.前追加同级元素
                    before()                    在指定元素的前面追加内容
                4.后追加1同级元素
                    after()                     在指定元素的后面追加内容
    
            注意：
                在添加元素时，如果元素本身不存在（新建的元素），此时将元素追加到指定位置；
                如果元素本身存在（已有元素）会将原来元素直接剪切到指定位置
    -->
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //创建元素
        var  p = "<p>这是一个p标签</p>"
        console.log(p)
        console.log($(p))
        // 创建元素
        var span = "<span>小奶狗</span>"
        //添加元素
        $(".green").append(span)
        
        var span2 = "<span>小狼狗</span>"
        $(span2).appendTo($(".green"))

        // 将已存在内容追加到指定元素中
        $(".green").append($(".red"))

        //同级追加
        var sp1 = "<span class='pink'>女神</span>"
        var sp2 = "<span class='gray'>歌手</span>"

        $(".blue").before(sp1)
        $(".blue").after(sp2)
    </script>
</html>

删除元素

方法 说明
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删除
empty() 清空所选元素的内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        span{
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }
        .green{
            background-color: green;
        }
        .blue{
            background-color: blue;
        }
    </style>
<body>
    <!--
        删除元素
            remove() 
                删除元素及其对应的子元素，标签和内容一起删除
                指定元素.remove()
            empty()
                清空元素内容，保留标签
                指定元素.empty()

    -->
    <h3>删除元素</h3>
    <span class="green">jquery<a>删除</a></span>
    <span class="blue">javase</span>
    <span class="green">http协议</span>
    <span class="blue">servlet</span>
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //删除元素
        $(".green").remove()
        //清空元素
        $(".blue").empty()
    </script>
</html>

遍历元素

each()

$(selector).each(function(index,element)):遍历元素

参数function为遍历时的回调函数

index为遍历元素的序列号，从0开始。

element是当前元素，此时是dom元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        span{
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }
        .green{
            background-color: green;
        }
        .blue{
            background-color: blue;
        }
    </style>
<body>
    <!--
        each()
        $(selector).each(function(index,element)):遍历元素
        参数function为遍历时的回调函数
        index为遍历元素的序列号，从0开始。
        element是当前元素，此时是dom元素。
    -->
    <h3>遍历元素</h3>
    <span class="green">jquery<a>删除</a></span>
    <span class="green">javase</span>
    <span class="green">http协议</span>
    <span class="green">servlet</span>
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //获取指定元素并遍历
        $(".green").each(function(index,element){
            console.log(index)
            console.log(element)
            console.log(this)
            console.log($(this))
        })
    </script>
</html>

JQuery事件

ready预加载事件

代码执行从上往下执行的，如果先执行后定义 会出现object空的情况，所以ready加载就是解决这种问题的，允许先执行后定义

reayd()类似于onLoad()事件

ready()可以写多个，按顺序执行

\((document).ready(function(){})等价于\)(function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //获取元素
            console.log($("#p1"))
        })
        $(function(){
            // 简便写法
            console.log($("#p1"))
        })
        
        
    </script>
</head>
<body>
    <!--
        eready加载事件
            预加载事件
            当页面的dom结构加载完毕后执行
            类似于js中load事件
            ready事件可以写多个
            语法：
                $(document).ready(function(){

                })
            简写：
                $(function(){
                    
                })
    -->
    <p id="p1">文本</p>
</body>
</html>

绑定事件

为备选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(evenType [, eventData], handler(eventObject));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        绑定事件
            bind绑定事件
                为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
            语法：
                $(selector).bind(evenType [, eventData], handler(eventObject));
            解释：
                eventType：是一个字符串类型的事件类型，就是你所需要绑定的事件
                [, eventData]  传递参数，格式：{名：值，名2：值2}
                handler(eventObject) 该事件触发执行的函数
            绑定单个事件
                $("元素").bind("事件类型"，function(){
                    
                })
            直接绑定
                $("元素").事件名(function(){

                })
            绑定多个事件
                bind绑定
                    1、同时为多个事件绑定同一个函数
                    指定元素.bind("事件类型1 事件类型2 ..",function(){
                        
                    })
                    2、为元素绑定多个事件并设置对应的函数
                    指定元素.bind("时间类型", function(){

                    })
                    3、为元素绑定多个事件，并设置对应的函数
                    指定元素.bind({
                        "事件类型": function(){

                        },
                        "事件类型": function(){
                            
                        },
                    })
                直接绑定
                    $("元素").事件名(function(){

                    }).事件名(function(){

                    }).事件名(function(){

                    })
    -->
    <h3>bind()方法简单的绑定事件</h3>
    <!-- 设置鼠标图标 -->
    <div id="test" style="cursor: pointer">点击查看名言</div>
    <input id="btntest" type="button" value="点击就不可用了">
    <hr>
    <button type="button" id="btn1">按钮1</button>
    <button type="button" id="btn2">按钮2</button>
    <button type="button" id="btn3">按钮3</button>
    <button type="button" id="btn4">按钮4</button>
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
        /*
        1.确定为哪些元素绑定事件
            获取元素
        2.绑定什么事件（事件类型）
            第一个参数 ：事件类型
        3.相应事件触发的，执行的操作
            第二个参数：函数
        */
       //绑定单个事件
       $("#test").bind("click", function(){
        console.log("世上无难事只怕有心人")
       })
       //原生js绑定事件
       document.getElementById("test").onclick = function(){
        console.log("test")
       }
       //直接绑定事件
       $("#btntest").click(function(){
        //禁用按钮
        $(this).prop("disabled", true)
       })
       //绑定多个事件
       //1、同时为多个事件绑定同一个函数
       $("#btn1").bind('click mouseout',function(){
        console.log("按钮1")
       })
       //2、为元素绑定多个事件并设置对应的函数
       $("#btn2").bind("click",function(){
        console.log("按钮2被点击了")
       }).bind("mouseout",function(){
        console.log("按钮2离开了")
       })
       //3、为元素绑定多个事件，并设置对应的函数
       $("#btn3").bind({
        'click': function(){
            console.log('按钮3点击了')
        },
        'mouseout': function(){
            console.log('按钮3离开')
        }
       })
       //直接绑定
       $("#btn4").click(function(){
        console.log("按钮4点击了")
       }).mouseout(function(){
        console.log("按钮4离开了")
       });
    </script>
</html>

JQuery Ajax

同步操作：我点击了请求按钮，必须要等到操作完成，给我返回值之后才能继续操作

异步操作：我点击了请求按钮，你给我返回值我就处理，等待给我返回值的这段时间，我就干其他的。

Ajax经常用于局部刷新或者无刷新的场景中。

$.ajax

JQuery调用Ajax方法

	格式：$.ajax({});
		参数：
    	type: 请求方式GET/POST
			url: 请求地址URL
			async: 是否异步，默认是true表示异步
			data: 发送到后端的数据
			dataType: 预期后端返回的数据类型
			contentType: 设置请求头
			success: 请求成功时调用此函数
			error: 请求失败时调用此函数

get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        JQuery调用Ajax方法
        	格式：$.ajax({});
                参数：
                type: 请求方式GET/POST
                    url: 请求地址URL
                    async: 是否异步，默认是true表示异步
                    data: 发送到后端的数据
                    dataType: 预期后端返回的数据类型
                    contentType: 设置请求头
                    success: 请求成功时调用此函数
                    error: 请求失败时调用此函数
    -->
    <button type="button" id="btn">查询数据</button>
</body>
    <script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //点击按钮，发送Ajax请求，将数据显示到页面中
        $("#btn").click(function(){
            $.ajax({
            type:"get", //请求方式
            url:"https://jsonplaceholder.typicode.com/users", //请求地址
            // data:{ //请求数据，JSON格式
            //     uname:"" //如果没有参数，则不需要设置
            // },
            dataType:"json", //预期返回的数据类型，如果是JSON格式，在接收到返回值时自动供封装成JSON对象
            //请求成功时调用函数
            //data是形参名，代表的是返回的数据
            success:function(data){ 
                console.log(data)
                //如果返回类型是字符串，则需要做JSON序列化;我这里获取到的就是JSON类型，不需要做
                // var obj = JSON.parse(data)
                // console.log(obj)

                //Dom操作
                //创建ul
                var ul = $("<ul></ul>")
                //遍历返回的数据数组
                for(var i = 0; i < data.length; i ++){
                    //得到数组中的每一个元素
                    var user= data[i];
                    //创建li元素
                    var li = "<li>"+ user.username+"</li>"
                    //将li元素设置到ul元素中
                    ul.append(li);
                }
                console.log(ul)
                //将ul添加到页面中
                $("body").append(ul)
                }
            })
        })
    </script>
</html>

$.get

这是一个简单的GET请求功能，以取代复杂的$.ajax

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax

// 1.请求JSON文件，忽略返回值
$.get('js/cuisine_area.json')

//2.请求JSON文件，传递参数，忽略返回值
$.get('js/cuisine_area.json', {name:"tom",age:100});

//3.请求JSON文件，拿到返回值，请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
  console.log(data);
})

//4.请求JSON文件，传递参数，拿到返回值
$.get('js/cuisine_area.json', {name:"tom",age:100},function(data){
  console.log(data);
});

$.post

这是一个简单的GET请求功能，以取代复杂的$.ajax

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax

// 1.请求JSON文件，忽略返回值
$.post('js/cuisine_area.json')

//2.请求JSON文件，传递参数，忽略返回值
$.post('js/cuisine_area.json', {name:"tom",age:100});

//3.请求JSON文件，拿到返回值，请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
  console.log(data);
})

//4.请求JSON文件，传递参数，拿到返回值
$.post('js/cuisine_area.json', {name:"tom",age:100},function(data){
  console.log(data);
});

$.getJSON

表示请求返回的数据类型是JSON格式的Ajax请求

$.getJSON('js/cuisine_area.json', {name:"tom",age:100},function(data){
  console.log(data); //要求返回的数据格式是JSON格式
});

posted @ 2024-04-03 10:30  热气球！  阅读(13)  评论(0)  编辑  收藏  举报