Web前端 jQuery

1、初始jQuery


1.1、jQuery是什么?

jQuery由美国人John Resig于2006年创建,jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事

jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互

jQuery 出现的目的是加快前端人员的开发速度,可以非常方便的调用和使用它,从而提高开发效率

Web前端 jQuery_第1张图片

jQuery优点

  • 轻量级。核心文件才几十kb,基本不会影响页面加载速度
  • 对事件、样式、动画支持,大大简化了DOM操作
  • 跨浏览器兼容。基本兼容了现在主流的浏览器
  • 支持插件扩展开发。有着丰富的第三方的插件
  • 链式编程、隐式迭代

注:jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率

官网地址

文档工具站

1.2、jquery基本使用

引入jquery.js使用即可

jquery入口函数

<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>

<script>
    // 方式一
    $(document).ready(function () {
        // ...      页面DOM元素加载完成的入口
    })

    // 方式二
    $(function () {
        // ...
    })
script>
  • 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 内部帮我们完成了封装
  • 相当于原生 js 中的 DOMContentLoaded
  • 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码
  • 更推荐使用第二种方式,写法更简洁

jQuery 的顶级对象 $

<script>
    jQuery(function () {
        alert(1)
    })

    $(function () {
        alert(2)
    })
script>

$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $

$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法

1.3、jQuery 对象和 DOM 对象

用原生 JS 获取来的对象就是 DOM 对象

jQuery 方法获取的元素就是 jQuery 对象

jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)

注:

  • DOM对象和jQuery对象分别拥有一套独立的方法,不能混用
  • jQuery对象命名一般约定以$开头

jQuery对象转DOM对象

因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用原生js的方法

方式一:jQuery对象是一个类似数组(伪数组)的对象,可以通过**[index]**的方法得到相应的DOM对象

<div id="box">div>
<script>
    $(function () {
    let $box = $("#box")        // jQuery对象
    // console.log($box)
    // jQuery对象转DOM对象 
    let box = $box[0]
    box.style.backgroundColor = "orange"
})
script>

方式二:通过**get(index)**方法也可以得到相应的DOM对象

<div id="box">div>
<script>
    $(function () {
    let $box = $("#box")        // jQuery对象
    // jQuery对象转DOM对象 
    let box = $box.get(0)
    box.innerHTML = "我是div"
})
script>

1.4、jQuery基本操作

<h2>金风玉露一相逢 便胜却人间无数h2>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<script>
    $(function () {
    // 链式操作:对一个对象进行多重操作,并将操作结果返回给该对象
    $("h2").css("background-color", "skyblue").css("color", "white").css("padding", "20px")
})
script>
  • 工厂函数$():将DOM对象转化为jQuery对象
  • 选择器 selector:获取需要操作的DOM 元素
  • 方法action():jQuery中提供的方法,其中包括绑定事件处理的方法

2、jquery选择器


jQuery选择器类似于CSS选择器,用来选取网页中的元素

2.1、基本选择器

名称 示例 说明
ID选择器 $(“#id”) 获取指定ID的元素
$(“.class”) 获取相同的类名的元素
标签选择器 $(“div”) 获取同一类标签的元素
全选择器 $(“*”) 获取所有元素
并集选择器 $(“p,div,a”) 选取多个元素
交集选择器 $(“li.active”) 交集元素
<div id="box">博学之 审问之 慎思之 明辨之 笃行之div>
<p class="content">世界上那些最容易的事情中 不在能知 乃在能行 知行合一p>
<div>div>

<script>
    // 基本选择器
    $(function () {
        $("#box").css('background-color', 'salmon')
        $(".content").css('font-size', '22px')
        $("div").css("margin-top", "15px")
    })
script>

2.2、层级选择器

名称 示例 说明
后代选择器 $(“ul li”) 用来获取元素的后代元素
子代选择器 $(“ul>li”) 用来获取元素的子元素
相邻兄弟选择器 $(“ul>li:first-of-type+li”) 用来选取紧邻目标元素的下一个元素
通用兄弟选择器 $(“ul>li:first-of-type~li”) 用来选取目标元素之后的所有同辈元素
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $(function () {
        $("ul>li").css("font-size", "20px")
        $("ul>li:eq(0)+li").css('background-color', 'skyblue')
        $("ul>li:eq(2)~li").css('background-color', 'orange')
    })
script>

2.3、筛选选择器

名称 示例 说明
:first $(“li:first”) 获取第一个li元素
:last $(“li:last”) 获取最后一个li元素
:eq(index) $(“li:eq(1)”) 获取索引号为1的li元素,索引号从0开始
:odd $(“li:odd”) 获取索引号为奇数的元素
:even $(“li:even”) 获取索引号为偶数的元素
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $(function () {
        $("ul li:first").css('background-color', 'green')
        $("ul li:eq(2)").css('background-color', 'blue')
        $("ul li:odd").css('background-color', 'yellow')
    })
script>

2.4、常见筛选方法

名称 示例 说明
parent() $(“li”).parent() 查找li的父级
parents() $(“li”).parents() 查找li的祖先元素
children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子代选择器
find(selector) $(“ul”).find(“li”) 相当于$(“ul li”),后代选择器
siblings(selector) $(“.three”).siblings(“li”) 查找兄弟节点,不包括自己本身
nextAll([expr]) $(“.second”).nextAll() 查找当前元素之后所有的同辈元素
prevAll([expr]) $(“.second”).prevAll() 查找当前元素之前所有的同辈元素
hasClass(class) $(“div”).hasClass(“active”) 检查当前元素是否含有某个特定的类,如果有返回true,反之为false
eq(index) $(“li”).eq(2) 相当于$(“li:eq(2)”)

注:当遇到一些特殊符号跟文档结构有冲突的时候要进行转义,转义使用**\**

2.5、隐式迭代

遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代

匹配到的所有元素进行循环遍历,执行相应的方法,而我们不用再进行循环,简化操作,方便调用

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<script>
    $(function () {
        $("ul>li").css("background-color", "orange")
    })
script>

2.6、链式编程

链式编程是为了节省代码量,使代码看起来更优雅

<button>按钮button>
<button class="active">按钮button>
<button>按钮button>
<button>按钮button>
<button>按钮button>
<button>按钮button>

<script>
    $(function () {
        $("button").click(function () {
            // 当前元素添加样式  其他兄弟移除样式     隐式迭代
            $(this).addClass("active").siblings("button").removeClass("active")
        })
    })
script>

注:使用链式编程一定注意是哪个对象执行样式

3、jQuery操作页面元素


3.1、jQuery 样式操作

操作CSS

jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式

参数如果只写属性名,则是返回属性值

<div>div>
<script>
    console.log($("div").css("width"))		// 160px
script>

参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号

<div>div>
<script>
    $("div").css("width", "260px")
script>

参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号

<div>div>
<script>
    $("div").css({
        width: 260,
        "height": 260,
        "borderRadius": 15,
    })
script>

设置类样式方法

作用等同于以前的 classList,可以操作类样式

添加类

<script>
    $("div").click(function () {
        $(this).addClass('active')
    })
script>

移除类

<script>
    $("div").click(function () {
        $(this).removeClass('active')
    })
script>

切换类

<script>
    $("div").click(function () {
        $(this).toggleClass('active')
    })
script>

注:操作类里面的参数不需要加点

类操作与className区别

  • 原生 JS 中 className 会覆盖元素原先里面的类
  • jQuery 里面类操作只是对指定类进行操作,不影响原先的类名

3.2、jQuery 动画效果

Query 封装了很多动画效果,最为常见的如下:

显示隐藏

  • show()
  • hide()
  • toggle()

滑动

  • slideDown()
  • slideUp()
  • slideToggle()

淡入淡出

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

自定义动画

  • animate()

显示隐藏效果

具体语法:show([speed,[easing],[fn]])

  • 参数都可以省略, 无动画直接显示
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次

隐藏具体语法:hide([speed,[easing],[fn]]),参数同显示参数一致!

切换具体语法:toggle([speed,[easing],[fn]]),参数同显示参数一致!

<script>
    $(function () {
        $("button").eq(0).click(function () {
            $("div").show()
        })

        $("button").eq(1).click(function () {
            $("div").hide("fast", "linear", function () {
                console.log(1)
            })
        })

        $("button").eq(2).click(function () {
            $("div").toggle()
        })
    });
script>

注:平时使用一般不带参数,直接显示隐藏即可

详见jQuery文档

滑动效果

具体语法:slideDown([speed,[easing],[fn]])

  • 参数都可以省略
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次

上滑具体语法:slideUp([speed,[easing],[fn]]),参数同下滑参数一致!

滑动切换具体语法:slideToggle([speed,[easing],[fn]]),参数同下滑参数一致!

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 下拉滑动
            $("div").slideDown()
        })
        $("button").eq(1).click(function () {
            // 上拉滑动
            $("div").slideUp(2000, "linear", function () {
                console.log(1)
            })
        })
        $("button").eq(2).click(function () {
            $("div").slideToggle()
        })
    });
script>

事件切换

具体语法:hover([over,]out)

  • over:鼠标移到元素上要触发的函数(等同于mouseenter)
  • out:鼠标移出元素要触发的函数(等同于mouseleave)
  • 如果只写一个函数,则鼠标经过和离开都会触发它
<script>
    $(".nav li").hover(function () {
        $(this).children("ul").slideDown()
    }, function () {
        $(this).children("ul").slideUp()
    })

    $(".nav li").hover(function () {
        $(this).children("ul").slideToggle()
    })
script>

动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行

停止排队:stop()

<script>
    $(".nav li").hover(function () {
        $(this).children("ul").stop().slideToggle()
    })
script>
  • stop() 方法用于停止动画或效果
  • 注: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画

淡入淡出效果

具体语法:fadeIn([speed,[easing],[fn]])

  • 参数都可以省略
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次

淡出具体语法:fadeOut([speed,[easing],[fn]]),参数同淡入参数一致!

淡入淡出切换具体语法:slideToggle([speed,[easing],[fn]]),参数同淡入参数一致!

<script>
    $(function () {
        $("button").eq(0).click(() => {
            $("div").fadeIn()
        })

        $("button").eq(1).click(() => {
            $("div").fadeOut(1500, "linear", () => {
                console.log(1)
            })
        })

        $("button").eq(2).click(() => {
            $("div").fadeToggle()
        })

        $("button").eq(3).click(() => {
            $("div").fadeTo("fast", 0.6)
        })
    });
script>

自定义动画 animate

具体语法:animate(params,[speed],[easing],[fn])

  • params:想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次
<button>点我摇起来button>
<div>div>
<script>
    $(function () {
        $("button").click(function () {
            $("div").animate({
                width: 260,
                top: 200,
                opacity: 0.7
            }, 1000)
        })
    })
script>

3.3、jQuery 属性操作

所谓元素固有属性就是元素本身自带的属性,比如 标签里面的 href属性、 标签里面的src属性、 标签里面的type属性等

固有属性值 prop()

获取属性:prop(''属性'')

设置属性:prop(''属性'', ''属性值'')

<img src="./images/7.jpeg" alt="picture">
<script>
    $(function () {
        console.log($("img").prop('src'))
        $("img").prop("src", "./images/8.jpeg")
    })
script>

自定义属性值 attr()

用户自己可以给元素添加的属性,称为自定义属性。 比如给 li 标签添加 data-id=“1”

获取属性:attr(''属性'')

设置属性:attr(''属性'', ''属性值'')

<ul>
    <li data-id="1">1li>
    <li>2li>
ul>
<script>
    $(function () {
        console.log($("ul>li").eq(0).attr("data-id"))		// 1
        $("ul>li").eq(0).attr("data-id", "0")
    })
script>

注:该种方式获取属性类似于类似于原生 getAttribute()、setAttribute()

数据缓存 data()

data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除

获取数据:date(''name'')

设置数据:data(''name'',''value'')

<ul>
    <li data-id="1">1li>
    <li>2li>
ul>
<div>8848div>

<script>
    $(function () {
        $("div").data("uname", "jack")
        console.log($("div").data("uname"))     		// jack
        console.log($("ul>li").eq(0).data("id"))        // 1
    })
script>

注:该方法还可以读取 HTML5 自定义属性 data-id,获取时不需要写data-前缀,并且返回的是数字型!

3.4、jQuery 内容文本值

普通元素内容 html()

等同于原生innerHTML

获取元素内容:html()

设置元素内容:html(''内容'')

<div class="box">
    <div class="item">1div>
    <div class="item">2div>
    <div class="item">3div>
div>

<script>
    console.log($((".box")).html())
    $((".box")).html(`
            
  • 1
  • 2
  • 3
`
)
script>

普通元素文本内容 text()

等同于原生innerText

获取元素文本内容:text()

设置元素文本内容:text("文本内容")

<div class="content">开源 协作 分享 创新div>

<script>
    console.log($(".content").text())       // 开源 协作 分享 创新
    $(".content").text("人间清醒")  
script>

表单的值 val()

等同于原生value

获取表单的值:val()

设置表单的值:val("内容")

<input type="text" name="desc" value="好好学习">
<script>
    console.log($("input:text").val())  // 好好学习
    $("input:text").val("天天向上")
script>

3.5、jQuery 元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历

方式一:

具体语法:$("div").each(function (index, domEle) { })

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $(function () {
        // each 遍历元素
        let arr = ['purple', 'pink', 'skyblue', 'salmon', 'orange']
        let sum = 0
        $("ul>li").each(function (i, ele) {
            // console.log(i)
            // console.log(ele)
            $(ele).css("backgroundColor", arr[i])
            sum += parseInt($(ele).text())
        })
        console.log(sum)
    })
script>
  • each() 方法遍历匹配的每一个元素。主要用DOM处理
  • each 每一个里面的回调函数有2个参数: index 是每个元素的索引号;demEle 是每个DOM元素对象,不是jquery对象
  • 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)

方式二:

具体语法:$.each(object,function (index, element) { })

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $.each($("ul>li"), function (i, item) {
        console.log(i)
        console.log(item)
    })

    $.each({ uname: "小昭", age: 22, email: "[email protected]" }, function (i, ele) {
        console.log(i)
        console.log(ele)
    }) 
script>
  • $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
  • 里面的函数有2个参数: index 是每个元素的索引号;element 遍历的内容

创建元素

具体语法:$("

"),动态创建一个div标签

添加元素

内部添加

具体语法:element.append(''元素内容''),把内容放入匹配元素内部最后面,类似原生 appendChild

具体语法:element.prepend(''元素内容''),把内容放入匹配元素内部最前面

<div class="box">
    <div class="item">1div>
div>
<script>
    // 创建元素
    let div = $("
我是jquery创建的div
"
) // $(".box").append(div) $(".box").prepend(div)
script>
外部添加

具体语法:element.after(''元素内容''),把内容放入目标元素后面

具体语法:element.before(''元素内容''),把内容放入目标元素前面

<div class="box">
    <div class="item">1div>
div>
<script>
    // 创建元素
    let div = $("
我是jquery创建的div
"
) // $(".box").before(div) $(".box").after(div)
script>
  • 内部添加元素,生成之后,它们是父子关系
  • 外部添加元素,生成之后,它们是兄弟关系

删除元素

具体语法:element.remove(),删除匹配的元素(本身)

具体语法:element.empty(),删除匹配的元素集合中所有的子节点

具体语法:element.html(),清空匹配的元素内容

<div class="box">
    <div class="item">1div>
    <div class="item">2div>
div>
<script>
    let div = $("
jquery创建的div
"
) $(".box").append(div) $(".box .item").eq(0).remove() // $(".box").empty() $(".box").html("
  • 1
  • "
    )
    script>
    • remove 删除元素本身
    • empt() 和 html(‘’‘’) 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容

    3.6、jQuery 尺寸、位置操作

    jQuery 元素尺寸

    语法 说明
    width()/height() 获取匹配元素的宽度和高度值,只计算 width / height
    innerWidth()/innerHeight() 获取匹配元素的宽度和高度值,包含padding
    outerWidth()/outerHeight() 获取匹配元素的宽度和高度值,包含padding、border
    outerWidth(true)/outerHeight(true) 获取匹配元素的宽度和高度值,包含padding、border、margin
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 10px;
        }
    style>
    <script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
    
    <div>div>
    <script>
        $(function () {
            // width + height
            console.log($("div").width());      // 100
            // $("div").width(300);
    
            // width + height + padding
            console.log($("div").innerWidth());     // 120
    
            // width + height + padding + border
            console.log($("div").outerWidth());     // 150
    
            // width + height + padding + border + margin
            console.log($("div").outerWidth(true));     // 170
        })
    script>
    
    • 以上参数若为空,则是获取相应值,返回的是数字型
    • 如果参数为数字,则是修改相应值

    jQuery 位置

    位置主要有三个: offset()、position()、scrollTop()/scrollLeft()

    offset() 设置或获取元素偏移
    • offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
    • 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left() 用于获取距离文档左侧的距离
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        .father {
            position: relative;
            width: 350px;
            height: 350px;
            background-color: salmon;
            margin: 100px;
        }
    
        .son {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: sandybrown;
            top: 10px;
            left: 10px;
        }
    style>
    <script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
    
    <div class="father">
        <div class="son">div>
    div>
    <script>
        $(function () {
            console.log($(".son").offset());        // {top: 110, left: 110}
            console.log($(".son").offset().top);    // 110
            // 设置元素偏移
            // $(".son").offset({
            //     top: 360,
            //     left: 360
            // })
        })
    script>
    
    position() 获取元素偏移
    • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
    • 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        .father {
            position: relative;
            width: 350px;
            height: 350px;
            background-color: salmon;
            margin: 100px;
        }
    
        .son {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: sandybrown;
            top: 10px;
            left: 10px;
        }
    style>
    <script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
    <div class="father">
        <div class="son">div>
    div>
    <script>
        $(function () {
            console.log($(".son").position())       // {top: 10, left: 10}
            console.log($(".son").position().top)   // 10
            
            // 原生js获取
            console.log(document.querySelector(".son").offsetTop)       // 10
        })
    script>
    
    

    注:该方法只能获取偏移,不能设置偏移(只读),等同于原生js的offsetTop/offsetLeft

    scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
    <div class="back">回顶部div>
    <div class="container">div>
    <script>
        $(function () {
            $(window).scrollTop(350)
            // console.log($(".container").offset())
            let boxTop = $(".container").offset().top
            $(window).scroll(function () {
                // console.log($(document).scrollTop())
                if ($(window).scrollTop() >= boxTop) {
                    $(".back").fadeIn()
                } else {
                    $(".back").fadeOut()
                }
            })
        })
    
        // 原生js
        // window.addEventListener('scroll', () => {
        //     window.scrollTo(0, 200)
        //     console.log(document.documentElement.scrollTop)
        // })
    script>
    
    • scrollTop() 方法设置或返回被选元素被卷去的头部,等同于原生js的scrollLeft/scrollTop
    • 不带参数是获取,参数为不带单位的数字则是设置被卷去的头部

    4、jQuery事件


    4.1、jQuery 事件注册

    单个事件注册

    具体语法:element.事件(function(){})

    <div>div>
    <script>
        $(function () {
            $("div").click(function () {
                $(this).css("backgroundColor", "orange")
            })
        })
    script>
    

    其他事件和原生js基本一致!

    4.2、jQuery 事件处理

    on() 绑定事件

    具体语法:element.on(events,[selector],fn)

    • events:一个或多个用空格分隔的事件类型,如"click"或"keydown"
    • selector:元素的子元素选择器
    • fn:回调函数,即绑定在元素身上的侦听函数

    优点一:可以绑定多个事件,多个处理事件处理程序

    <div>div>
    <script>
        $("div").on({
            mouseenter: function () {
                $(this).css("backgroundColor", "blue")
            },
            mouseleave: function () {
                $(this).css("backgroundColor", "yellow")
            }
        })
    script>
    

    优点二:可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素

    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
    ul>
    
    <script>
        $(function () {
            // 事件委托  子元素的事件冒泡 冒到了父元素ul上
            $("ul").on("click", "li", function (e) {
                console.log("你点击了第" + e.target.innerText + "个li")
            })
        })
    script>
    

    注:在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派,最新版本推荐使用on替代

    优点三:动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件

    <div class="box">div>
    
    <script>
        $(function () {
    		// 该种方式无法给未来动态创建的元素绑定事件
            // $(".box .item").click(function () {
            //     alert(1)
            // })
    
            // 给未来动态创建的元素绑定事件 Yes
            $(".box").on("click", "div", function () {
                alert(1)
            })
    
            let div = $("<div class='item'>divdiv>")
            $(".box").append(div)
        })
    

    off() 解绑事件

    off() 方法可以移除通过 on() 方法添加的事件处理程序

    解绑该元素全部事件:$("div").off()

    解绑该元素指定事件:$("div").off("事件名称")

    解绑该元素事件委托:$("ul").off("事件名称", "子元素")

    <div>div>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>
    
    <script>
        $(function () {
            $("div").on({
                mouseenter: () => {
                    $("div").css("background-color", "red")
                },
                mouseleave: () => {
                    $("div").css("background-color", "green")
                }
            })
    
            // 事件解绑 off
            // $("div").off()               // 解绑div身上所有事件处理程序
            $("div").off("mouseenter")      // 只解绑div身上鼠标经过事件处理程序
    
            // 绑定事件  事件委托 ul
            $("ul").on("click", "li", function (e) {
                console.log(e.target.innerText)
            })
            // 解绑 ul 事件委托
            $("ul").off("click", "li")
    
            // one() 只能触发事件一次
            $("ul").one("click", "li", function (e) {
                console.log(e.target.innerText)
            })
        })
    script>
    

    trigger() 自动触发事件

    有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发

    <div>div>
    <script>
        $(function () {
            $("div").on("click", () => {
                console.log(1)
            })
            // 元素名.事件
            // $("div").click()
            
            // 元素.trigger("事件名称")
            // $("div").trigger("click")    
            
            // 元素.triggerHandler("事件名称")      注:该种方式不会触发元素默认行为
            $("div").triggerHandler("click")
        })
    script>
    

    4.3、jQuery 事件对象

    事件被触发,就会有事件对象的产生

    具体语法:element.on(events,[selector],function(event) {})

    阻止默认行为:event.preventDefault() 或者 return false

    阻止冒泡: event.stopPropagation()

    <a href="https://www.hua.com">点我送礼a>
    <script>
        $(function () {
            $("a").on("click", (e) => {
                // return false
                e.preventDefault()
            })
        })
    script>
    

    5、jQuery 插件


    jQuery 对象拷贝

    如果想要把某个对象拷贝(合并) 给另外一个对象使用,此时可以使用 $.extend() 方法

    具体语法:$.extend([deep], target, object1, [objectN])

    <script>
        let obj = {
            uname: "小白",
            age: 22,
            eamil: "[email protected]",
            hobbies: ["code", "girl", "swim"]
        }
    
        let o = {}
        $.extend(true, o, obj)
        o.hobbies[0] = "basketball"
        console.log(o)
        console.log(obj)
    script>
    
    • deep:如果设为true 为深拷贝, 默认为false 浅拷贝
    • target: 要拷贝的目标对象
    • object1:待拷贝到第一个对象的对象
    • objectN:待拷贝到第N个对象的对象
    • 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
    • 深拷贝,前面加true, 完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象

    jQuery 插件

    jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成

    注:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件

    jQuery 插件使用步骤:

    • 引入相关文件。(jQuery 文件 和 插件文件)
    • 复制相关html、css、js (调用插件)

    你可能感兴趣的:(Web前端,前端,jquery,javascript)