Fade away

Appearance

jQuery ​

一、简介 ​

jQuery是一个快速、简洁的JavaScript框架，一个优秀的基于JavaScript的封装库（框架）。

它封装了JavaScript常用的功能代码。

设计的宗旨是“write Less，Do More”，提倡写更少的代码，做更多的事情。

具有独特的链式语法，具有高效灵活的CSS选择器，具有自主的隐式迭代，拥有插件扩展机制和丰富的插件。

jQuery兼容各种主流浏览器。

  • jQuery官网：https://jquery.com/
  • jQuery方法大全中文网：http://jquery.cuishifeng.cn/

二、引用jQuery ​

本地引用 ​

在官网下载jQuery到本地，然后就是在页面里面引入 jQuery.js 就行了

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 下载到本地引用jQuery -->
    <script src="./../jQuery/jquery-3.6.0.min.js"></script>
	
</body>
</html>

CDN引用 ​

CDN的全称是Content Delivery Network，内容分发网络。

CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

三、jQuery使用 ​

jQuery 向全局暴露了 jQuery 和 $ ，在使用时两个任何一个都可以。

文档就绪事件 ​

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

和原生js的 window.onload事件一样的意思。

js
$(function(){
   // 开始写 jQuery 代码...
});


jQuery(function(){
   // 开始写 jQuery 代码...
});

css选择器 ​

jQuery 有着相当强大的选择器来匹配获取到页面中的元素。

基础选择器 ​

名称用法描述
ID选择器$(“#id”);获取指定ID的元素
类选择器$(“.class”);获取同一类class的元素
标签选择器$(“div”);获取同一类标签的所有元素
并集选择器$(“div,p,li”);使用逗号分隔，只要符合条件之一就可。
交集选择器$(“div.redClass”);获取class为redClass的div元素
全选选择器$(“*”);匹配所有元素

层级选择器 ​

名称用法描述
子代选择器$(“ul>li”);使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器$(“ul li”);使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器 ​

:odd$(“li:odd”)获取到的li元素中，选择索引号为奇数的元素
:even$(“li:even”)获取到的li元素中，选择索引号为偶数的元素
:first$(“li:first”)获取第一个li元素
:last$(“li:last”)获取最后一个li元素
:eq（index）$(“li:eq(2)”)获取到的li元素中，选择索引号为2的元素，索引号index从0开始。

筛选器（方法） ​

jQuery 的筛选器就是在选择器选择到一组元素以后

对元素进行筛选，也可以对准确的某一个元素进行判断和获取

名称用法描述
children(selector)$(“ul”).children(“li”)相当于$(“ul>li”)，子类选择器
find(selector)$(“ul”).find(“li”);相当于$(“ul li”),后代选择器
siblings(selector)$(“#first”).siblings(“li”);查找兄弟节点，不包括自己本身。
parent()$(“#first”).parent();查找父亲
parents()$(“li”).parents();以此向上找到所有父元素
eq(index)$(“li”):eq(2);相当于$(“li:eq(2)”),index从0开始
next()$(“li”).next()找下一个兄弟
prev()$(“li”).prev()找上一次兄弟
nextAll([expr])$(“.first”).nextAll()查找当前元素之后所有同辈元素
prevAll([expr])$(“.first”).prevAll()查找当前元素之前所有同辈元素
hasClass(class)$(“.div”).hasClass("protected")查找当前的元素是否含有某个特定的类，如果有，则返回true

隐式迭代 ​

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

隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法T

属性操作 ​

  • 给一个元素添加标签自带属性

    javascript
    // 给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))
    • prop 这个方法只能添加元素自己本身就有的属性
    • 如果是添加的自定义属性，不会显示在标签上，但是可以使用

  • 给一个元素添加某个自定义属性

    javascript
    // 给 div 添加一个 index 属性，值是 1
$('div').attr('index', 1)
// 获取 div 的 index 属性
console.log($('div').attr('index'))

  • 移除元素的某一个属性

    javascript
    // 移除元素自己本身的属性
$('div').removeProp('id')
// 移除元素的自定义属性
$('div').removeAttr('index')

  • 操作元素的类名

    javascript
    // 判断某一个元素有没有某一个 class
$('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名

// 给元素添加一个类名
$('div').addClass('box2') // 给 div 元素添加一个 box2 类名

// 移除元素的类名
$('div').removeClass('box') // 移除 div 的 box 类名

// 切换元素类名
$('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加

  • 操作元素的内容

    javascript
    // 给元素的 innerHTML 赋值
$('div').html('<span>hello world</span>')
// 获取元素的 innerHTML
$('div').html()

// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()

// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()

操作样式 ​

  • jQuery 操作元素的样式就是一个方法 css

    javascript
    // 给元素设置一个 css 样式
$('div').css('width', '100px')

// 获取元素的某一个样式，可以获取到行内样式
$('div').css('width')

// 给元素设置一组样式，需要用{}包含，类似json
$('div').css({ 
    "color":"white", 
    "font-size":"20px",
    "backgroundColor":"red"
});

遍历方法 ​

  • siblings()

​ 获得匹配集合中其它兄弟元素，通过选择器进行筛选是可选的

​ 不传参就遍历所有兄弟元素

​ 传参就遍历具体的兄弟元素

js
$("p").siblings()
  • end

返回当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态

js
  let t = $('li:eq(2)').siblings().find('a').css('color','blue').end()

  console.log(t)

元素操作 ​

  • 创建一个元素

    javascript
    var div = $('<div></div>')

  • 内部插入元素

    javascript
    // 向 div 元素中插入一个 p 元素，放在最后
$('div').append($('<p></p>'))

// 把 p 元素插入到 div 中去，放在最后
$('<p>hello</p>').appendTo($('div'))

// 向 div 元素中插入一个 p 元素，放在最前
$('div').prepend($('<p></p>'))

// 把 p 元素插入到 div 中去，放在最前
$('<p>hello</p>').prependTo($('div'))

  • 外部插入元素

  • after 目标元素.after(插入的元素)

  • before 目标元素.before(插入的元素)

    javascript
    var ipt = $("<input type='text' />")

    //after 目标元素.after(插入的元素)

    //before 目标元素.before(插入的元素)

    $('button').click(function () {
        // $('.zh').after(ipt)

        // $(".zh").before(ipt)
    })

  • 替换元素

    javascript
    // 把 div 元素替换成 p 元素
$('div').replaceWith($('<p></p>'))

// 用 p 元素替换掉 div 元素
$('<p></p>').replaceAll($('div'))

  • 删除元素

    javascript
    // 删除元素下的所有子节点
$('div').empty()

// 把自己从页面中移除
$('div').remove()

  • 克隆元素

    javascript
    // 克隆一个 li 元素
// 接受两个参数
//   参数1： 自己身上的事件要不要复制，默认是 false
//   参数2： 所有子节点身上的事件要不要复制，默认是 true
$('li').clone()

元素尺寸 ​

  • 操作元素的宽和高

    javascript
    // 获取 div 元素内容位置的高，不包含 padding 和 border
$('div').height()
// 设置 div 内容位置的高为 200px
$('div').height(200)

// 获取 div 元素内容位置的宽，不包含 padding 和 border
$('div').width()
// 设置 div 内容位置的宽为 200px
$('div').width(200)

  • 获取元素的内置宽和高

    javascript
    // 获取 div 元素内容位置的高，包含 padding 不包含 border
$('div').innerHeight()

// 获取 div 元素内容位置的宽，包含 padding 不包含 border
$('div').innerWidth()

  • 获取元素的外置宽和高

    js
    // 获取 div 元素内容位置的高，包含 padding 和 border
$('div').outerHeight()
$('div').outerWidth()

元素位置 ​

  • 元素相对页面的位置

    javascript
    // 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }

// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 })
// 获取定位到一个距离页面左上角 100 100 的位置

  • 元素相对于父元素的偏移量

    javascript
    // 获取 div 相对于父元素的偏移量（定位的值）,只能获取，不能设置，返回一个对象
$('div').position()

  • 获取页面卷去的高度和宽度

    javascript
    window.onscroll = function () {
    // 获取浏览器卷去的高度
    console.log($(window).scrollTop())
}

window.onscroll = function () {
    // 获取浏览器卷去的宽度
    console.log($(window).scrollLeft())
}

//设置的时候 使用

$('html').scrollTop()

//设置scrollTop 和 scrollLeft

$(window).scrollTop(100)
$(window).scrollLeft(100)

元素事件 ​

  • 绑定事件的方法

    javascript
    $('button').click(function () {
    console.log('我被点击了')
})
// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
    console.log('我被点击了')
})

// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', { name: 'Jack' }, function (e) {
    console.log(e) // 所有的内容都再事件对象里面
    console.log(e.data) // { name: 'Jack' }
})

// 事件委托的方式给 button 绑定点击事件
// 委托对象.on('事件名','需要触发的目标',处理函数)
$('div').on('click', 'button', function () {
    console.log(this) // button 按钮
})

// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', { name: 'Jack' }, function (e) {
    console.log(this) // button 按钮
    console.log(e.data)
})

  • 移除事件

    javascript
    // 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)

// 移除事件使用 off
// 执行函数需要在外面定义，否则移除不了
$('button').off('click', handler)

  • 只能执行一次的事件

    javascript
    // 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)

  • 直接触发事件

    javascript
    // 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
$('button').one('click', handler)
$('button').trigger('click')

//链式语法
$('button').one('click', handler).trigger('click')

可以直接使用的常见事件 ​

  • 可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法

  • click

    javascript
    // 直接给 div 绑定一个点击事件
$('div').click(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个点击事件并传递参数
$('div').click({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

  • dblclick

    javascript
    // 直接给 div 绑定一个双击事件
$('div').dblclick(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个双击事件并传递参数
$('div').dblclick({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

  • scroll

    javascript
    // 直接给 div 绑定一个滚动事件
$(window).scroll(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个滚动事件并传递参数
$(window).scroll({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

  • hover

    javascript
    // 这个事件要包含两个事件处理函数
// 一个是移入的时候，一个是移出的时候触发
$('div').hover(function () {
    console.log('我会再移入的时候触发')
  }, function () {
      console.log('我会在移出的时候触发')
  })

元素的索引 ​

可以通过index()方法来获取元素的索引

  • 传参 比如 $(this).index("ul li") 传递了一个选择器 表示当前元素在这个集合中的索引
  • 不传参 表示获取当前元素在同辈中的索引位置
js
$('ul').on('mouseover', "li", function () {
        let i = $(this).index("ul li")
        console.log(i)
    })

动画 ​

  • show

    javascript
    // 给 div 绑定一个显示的动画
$('div').show() // 如果元素本身是 display none 的状态可以显示出来

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').show(1000, 'linear', function () {
    console.log('我显示完毕')
})

  • hide

    javascript
    // 给 div 绑定一个隐藏的动画
$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').hide(1000, 'linear', function () {
    console.log('我隐藏完毕')
})

  • toggle

    javascript
    // 给 div 绑定一个切换的动画
$('div').toggle() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示

// 给 div 绑定一个显示的动画
// 接受三个参数
swing
// $('div').show('毫秒', '贝塞尔曲线', '回调函数') 
$('div').toggle(1000, 'linear', function () {
    console.log('动画执行完毕')
})

  • fadeIn(1000,fn) 渐入

  • fadeOut(1000,fn()) 渐出

  • fadeToggle(1000,fn) 切换渐入渐出

  • fadeTo(1000,透明度) 更改透明度值来产生淡入或者淡出效果;

  • animate

  • $(selector).animate({params},speed,callback);

    javascript
    // 定义一个自定义动画
$('.show').click(function () {
    $('div').animate({
        width: 500,
        height: 300
    }, 1000, 'linear', function () {
        console.log('动画运动完毕')
    })
})

  • stop

    javascript
    // 立刻停止动画
$('div').stop() // 就停止再当前状态

  • finish

    javascript
    // 立刻结束动画
$('div').finish() // 停止在动画结束状态

MIT Licensed

Copyright © 2024-present xarzhi