jQuery

Ծ‸Ծ小珂

于 2022-03-03 09:24:50 发布

阅读量1.2k

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_56588657/article/details/123245585

版权

文章目录

1. jQuery 概述

1.1 JavaScript 库

仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了

JavaScript 库：即 library，是一个封装好的特定得集合(方法和函数)，从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show，比如获取元素等

简单理解：就是一个 JS 文件，里面对原生 js 代码进行了封装，存放到里面，这样可以快读高效的使用其中封装好的功能

比如 jQuery ，就是为了快读方便的操作 DOM，里面基本都是函数(方法)

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

学习 jQuery 本质：就是学了调用其中的函数(方法)

常见的 JavaScript 库：

jQuery
Prototype
YUI
Dojo
Ext JS
zepto (移动端)

这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的

1.2 jQuery 优点

轻量级，核心文件才几十kb ，不会影响页面加载速度
跨浏览器兼容，基本兼容了现在主流的浏览器
链式编程，隐式迭代
对事件、样式、动画支持，大大简化了 DOM 操作
支持插件扩展开发，有着丰富的第三方插件，如：树形菜单，日期控件，轮播图等
免费、开源

2. jQuery 的基本使用

2.1 jQuery 的入口函数

$(function () {
    ......        // 此处是页面 DOM 加载完成的入口
});

$(document).ready(function() {
     ......       // 此处是页面 DOM 加载完成的入口
});

等着 DOM 结构渲染完毕即可执行内部代码，不用等到所有外部资源加载完成，jQuery 会自动完成封装
相当于原生js 中的 DOMContentLoaded
不同于原生js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码
更推荐使用第一种方式

.id {
            width: 100px;
            height: 100px;
            background-color: chartreuse;
    }
    
<div class="id"></div>

 $(function () {
      $('.id').hide()
 })

2.2 jQuery 的顶级对象 $

$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $
$ 是 jQuery 的顶级对象，相当于原生JavaScript 中的 window，把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法

2.3 jQuery 对象和 DOM 对象

用原生JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象
jQuery 对象本质：利用 $ 对 DOM 对象包装后产生的对象(伪数组形式存储)

jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生JavaScript 属性和方法

<div></div>

 var div = document.querySelector('div');   // DOM 对象
    console.dir(div);                       // dir 打印出对象的全部信息

    $('div');                               // jQuery 对象
    console.dir($('div'));                  // 以伪数组的形式存储

2.4 jQuery 对象和 DOM 对象的相互转换

DOM 对象与 jQuery 对象之间可以相互转换

因为原生JS 比 jQuery 更大，原生的一些属性和方法在 jQuery 中并没有封装，要想使用这些属性和方法，要把 jQuery 对象转换成 DOM 对象才可以使用

2.4.1 DOM 对象转换为 jQuery 对象： $(DOM对象)

$('div')

2.4.2 jQuery 对象转换为 DOM 对象 (两种方式)

$('div')[index]       // index 是 索引号
$('div').get(index)

div {
            width: 100px;
            height: 100px;
            background-color: brown;
        }

<div>123</div>

let bbb = $('div');        // 获取到一个 jQuery 对象
console.log(bbb);

let sss = $('div')[0];         // 将获取到的 jQuery 对象 转换为 DOM 对象
sss.style.backgroundColor = '#bfa';
console.log(sss);

3. jQuery 常用 API

3.1 jQuery 选择器

原生JS 获取元素方式很多很杂，而且兼容性情况不一致，因此 jQuery 做了相应的封装，使获取元素统一标准

$('选择器')    // 里面选择器直接写 CSS 选择器即可，要加引号

3.1.1 jQuery 基础选择器

名称	用法	描述
ID 选择器	$(’#id’)	获取指定 ID 的元素
全选选择器	$(’*’)	匹配所有元素
类选择器	$(’.class’)	获取同一类 class 的元素
标签选择器	$(‘div’)	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’)	选取多个元素
交集选择器	$(‘li.current’)	交集元素

3.1.2 jQuery 层级选择器

名称	用法	描述
子代选择器	$(‘ul>li’)	使用 > 号，选取子集元素
后代选择器	$(‘ul li’)	使用空格，获取 ul 下的所有 li 元素

3.1.3 jQuery 筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个 li 元素
:last	$(‘li:last’)	获取最后一个 li 元素
:eq(index)	$(‘li:eq(2)’)	获取到的 li 元素中，选择索引号为2的元素，索引号 index 从0开始
:odd	$(‘li:odd’)	获取到的 li 元素中，选取索引号为奇数的元素
:even	$(‘li:even’)	获取到的 li 元素中，选择索引号为偶数的元素

  <ul>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
 </ul>
 <ol>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
     <li>jQuery筛选选择器</li>
 </ol>
 
   $(function () {
        $('ul li:first').css('color', 'red');
        $('ul li:last').css('color', 'blue');
        $('ol li:odd').css('color', 'green');
        $('ol li:even').css('color', 'hotpink');
        $('ul li:eq(3),ol li:eq(6)').css('color', 'purple');
    })

3.1.4 ♥ jQuery 筛选方法

语法	用法	说明
parent()	$(‘li’).parent()	查找自身元素的父级元素
children(selector)	$(‘ul’).children(‘li’)	相当于"ul > li",查找最近一级的子集元素
find(selector)	$(‘ul’).find(‘li’)	相当于"ul li",类似后代选择器
siblings(selector)	$(’.first’).siblings(‘li’)	查找同级节点，不包括自身
nextALL([expr])	$(’.first’).nextALL()	查找当前元素之后所有的同级元素
prevtAll([expr])	$(’.last’).prevtALL()	查找当前元素之前所有的同级元素
hasClass(class)	$(‘div’).hasClass(‘protected’)	检查当前的元素是否含有某个特定的类，如果有，则返回 true
eq(index)	$(‘li’).eq(2)	相当于"$(‘li:eq(2)’)"，index 从0开始

3.1.5 链式编程

链式编程可以有效节省代码量

$(this).css('color','red').siblings().css('color','white');

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

3.2 jQuery 样式操作

3.2.1 修改 css 样式

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

参数只写属性名，则是返回属性值

$(this).css('color');

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

$(this).css('color','red');

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

$(this).css({'color':'blue','font-size':'20px'});

// 操作样式之css方法
$(funtion() {
	console.log($('div').css('width'));   // 输出 div 的 width 值
	
	$('div').css('height','400px');
	
	$('div').css({
		width: 300,
		height: 300,
		backgroundColor: 'red'
	});
})

3.2.2 设置类样式

作用等同于 JS 中的 classList，可以操作类样式，注意操作类里面的参数不要加点

添加类
```
$('div').addClass('current');
```
移除类
```
$('div').removeClass('current');
```

切换类

$('div').toggleClass('current');

类操作与 className 的区别

原生 JS 中 className 会覆盖元素原先里面的类名

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

 div {
       	width: 200px;
       	height: 200px;
       	background-color: blueviolet;
       	margin: 50px;
       	transition: 1s;
      }

.change {
    background-color: bisque;
    border-radius: 40%;
    transform: rotate(270deg);
}

  $(function () {
        $('div').click(function () {
        	$(this).addClass('change');
        	$(this).removeClass('change');
        	$(this).toggleClass('change');
        })
    })

3.3 jQuery 效果

3.3.1 显示隐藏

show([speed,[easing],[fn]])

hide([speed,[easing],[fn]])

参数设置

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

 div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
        
   <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
                    $("div").toggle(1000);
                })
        });
    </script>

3.3.2 滑动与事件切换

(1) 滑动效果

slideDown([speed],[easing],[fn])     // 向下滑动
slideUp([speed],[easing],[fn])       // 向上滑动
slideToggle([speed],[easing],[fn])   // 切换滑动

参数设置 同 show() 和 hide() 的参数

 div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
        
  <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);


            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()

                $("div").slideToggle(500);

            });

        });
    </script>

(2) 事件切换

hover([over,]out)

over: 鼠标移到元素上要触发的函数(相当于 mouseenter)
out: 鼠标移出元素要触发的函数(相当于 mouseleave)

# 事件切换 hover 就是鼠标经过和离开的复合写法
 $(function () {
        $('nav>li').hover(function () {
            $(this).children('ul').stop().slideDown(500);
        }, function () {
            $(this).children('ul').stop().slideUp(500);
        })
    })

# 事件切换 hover 如果只写一个参数，那么鼠标经过和离开都会触发这个函数
 $(function () {
        $('nav>li').hover(function () {
            $(this).children('ul').stop().slideToggle();
        })
    })

3.3.3 淡入淡出

淡入 			fadeIn([speed],[easing],[fn]) 
淡出 			fadeOut([speed],[easing],[fn]) 
调整不透明度    fadeTo([[speed],opacity,[easing],[fn]]) 
切换淡入淡出    fadeToggle([speed],[easing],[fn])

 div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
        
$(function () {
        $("button").eq(0).click(function () {
            $("div").fadeIn(400)
        })
        $("button").eq(1).click(function () {
            $("div").fadeOut(400)
        })
        $("button").eq(2).click(function () {
            $("div").fadeToggle(400)
        })
        $("button").eq(3).click(function () {
            $("div").fadeTo(400, 0.3)
        })
    })

3.3.4 自定义动画 animate

animate(params,[speed],[easing],[fn])  // 用于创建自定义动画的函数

参数：

params: 一组包含作为动画属性和终值的样式属性和及其值的集合
speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”
fn: 在动画完成时执行的函数，每个元素执行一次

 div {
            position: absolute;
            width: 150px;
            height: 300px;
            background-color: pink;
        }
        
 $(function () {
        $("button").eq(0).click(function () {
            $("div").animate({
                left: 400,
                top: 200,
                opacity: .6
            })
        })
    })

3.4 jQuery 属性操作

3.4.1 设置或获取元素固有属性值 prop()

元素本身自带的属性，比如的href，的type

获取属性语法

prop("属性")

设置属性语法

prop("属性","属性值")

console.log($("a").prop("href"))

$("a").prop("title","titleName")

$("input").change(funtion() {
	console.log($(this).prop("checked"))
})

3.4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性即为自定义属性，比如给 div 添加 index=“1”

获取属性语法

attr("属性")			  // 类似原生中的 Attribute()

设置属性语法

attr("属性","属性值")	// 类似原生中的 setAttribute()

console.log($("div").attr("index"))

$("div").attr("index",4)

console.log($("div").attr("data-index"))

3.4.3 jquery 利用属性操作实现全选反选

$(function () {
        $("#j_cbAll").change(function () {
        		// 当全选按钮发生改变时，记录下全选按钮的选中状态，将该值赋给 input 的 checked 属性
            $("#j_tb").find("input").prop('checked', $(this).prop("checked"))
        })
        $("#j_tb").find("input").change(function () {
        	// 当 input 按钮被选中的个数等于 input 按钮的个数，则让全选按钮的 checked 值为 true，否则 false
            if ($("#j_tb input:checked").length === $("#j_tb input").length) {
                $("#j_cbAll").prop("checked", true);
            } else {
                $("#j_cbAll").prop("checked", false);
            }
        })
    })

3.5 jQuery 文本属性值

3.5.1 获取设置元素内容 html()

相当于原生中的 innerHTML

html()				// 获取元素的内容
html("内容") 		   // 设置元素的内容

console.log($("div").html())
console.log($("div").html("123"))

3.5.2 获取设置元素文本内容 text()

相当于原生中的 innerText

text()				// 获取元素文本内容
text("内容") 		   // 设置元素文本内容

console.log($("div").text())
console.log($("div").text("456"))

3.5.3 获取设置表单值 val()

val()				// 获取表单值
val("内容") 		   // 设置表单值

console.log($("input").val())
console.log($("input").val("456"))

3.6 jQuery 元素操作

主要是遍历，创建，添加，删除元素

3.6.1 遍历元素

语法1

$("div").each(funtion(index,domEle) { xxx; })

each() 方法遍历匹配到的每一个元素，主要用 DOM 处理
里面的回调函数有两个参数，index 是每个元素的索引号，domEle 是每个 DOM 元素对象( 即 $(this) )，不是 jQuery 对象
所以要使用 jQuery 方法，还需要将这个 DOM 元素转换为 jQuery 对象 $(domEle)

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

 $(function () {
        $("div").each(function (i, e) {
            console.log(i);			// 输出 div 的索引号
            console.log(e);			// 输出每个 div DOM元素
        })
    })
    
$(function () {
        var color = ['red', 'blue', 'green', 'yellow'];
        var sum = 0;
        $("div").each(function (i) {
            $(this).css('color', color[i]);
            sum += parseInt($(this).text());
        })
        console.log(sum);
    })

语法2

$.each(object,funtion(index,element) { xxx; })

$.each() 方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
里面的函数有两个参数，index 是每个元素的索引号，element 表示遍历内容

 $(function () {
        var color = ['red', 'blue', 'green', 'yellow'];
        
        // $(color).each(function (i, e) {
        //     console.log(i);
        //     console.log(e);
        // })
        
        $.each(color, function (i, e) {
            console.log(i);
            console.log(e);
        })
    })

3.6.2 创建元素

语法

$("<li></li>")		// 动态创建一个 li

3.6.3 添加元素

内部添加元素，生成之后是父子级关系
外部添加元素，生成之后是同级关系

内部添加

element.append("内容")		// 把内容添加到目标元素的后面
element.prepend("内容")		// 把内容添加到目标内容的前面

外部添加

element.after("内容")			// 把内容添加到目标元素的后面
element.before("内容")		// 把内容添加到目标内容的前面

3.6.4 删除元素

element.remove()		// 删除匹配到的元素本身
element.empty()			// 删除匹配到的元素的所有子节点
element.html("")		// 清空匹配元素的内容

 $(function () {

        // 创建元素
        var li1 = $("<li>123</li>")
        var li2 = $("<li>456</li>")

        // 添加元素
        // 内部添加
        $("ul").append(li1)
        $("ul").prepend(li2)
        // 外部添加
        var div1 = $("<div>456</div>")
        var div2 = $("<div>789</div>")
        $("div").after(div1)
        $("div").before(div2)

        // 删除元素
        $("div").remove()
        $("ul").empty()
        $("div").html("")
    })

3.7 jQuery 尺寸、位置操作

3.7.1 jQuery 尺寸

语法	用法
width() / height()	取得匹配元素的宽高，只算 width / height
innerWidth() / innerHeight()	取得匹配元素的宽高，包含 padding
outerWidth() / outerHeight()	取得匹配元素的宽高，包含 padding，border
outerWidth(true) / outerHeight(true)	取得匹配元素的宽高，包含 padding，border，margin

以上参数为空，则表示是获取相应值，返回的是数字型
如果参数是数字，则表示是修改相应值，参数可以不用写单位

div {
            width: 100px;
            height: 100px;
            margin: 20px;
            padding: 30px;
            border: 10px solid blue;
            background-color: yellow;
        }

$(function () {

        // width() / height()取得匹配元素的宽高，只算 width / height
        console.log($("div").width());
        console.log($("div").height());
        // 100 100

        // innerWidth() / innerHeight()取得匹配元素的宽高，包含 padding
        console.log($("div").innerWidth());
        console.log($("div").innerHeight());
        // 160 160

        // outerWidth() / outerHeight()取得匹配元素的宽高，包含 padding，border
        console.log($("div").outerWidth());
        console.log($("div").outerHeight());
        // 180 180

        // outerWidth(true) / outerHeight(true)取得匹配元素的宽高，包含 padding，border，margin
        console.log($("div").outerWidth(true));
        console.log($("div").outerHeight(true));
        // 220 220
    
        // 改变div的宽高值
        $("div").width(400)
        $("div").height(400)
            
    })

3.7.2 jQuery 位置

位置主要分三种：offset() position() srollTop()/srollLeft()

(1) offset()

offset() 方法设置或返回被选元素相对于文档(浏览器窗口)的偏移坐标，跟父级元素没有关系

该方法有2个属性 left，top，offset().top 用于获取元素针对文档顶部的距离，offset().left 用于获取元素针对文档左侧的距离，该方法可用作设置元素的偏移量

 * {
            margin: 0;
            padding: 0;
        }

div {
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: yellow;
}

$(function () {

        // 获取元素针对文档的位置偏移量
        console.log($("div").offset());
        // 返回一个集合 {top: 20, left: 20}

        console.log($("div").offset().top);
        // 20
        console.log($("div").offset().left);
        // 20

        // 设置偏移量
        $("div").offset({
            top: 100,
            left: 100
        })
    })

(2) position

position() 方法用于返回被选元素相对于带有定位的父级的偏移坐标，如果父级元素没有定位，则以文档(当前浏览器窗口)为准

该方法只能用于获取值，不能设置元素的偏移量

.big {
      width: 200px;
      height: 200px;
      margin: 20px;
      background-color: yellow;
      position: relative;
}

.small {
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: absolute;
    top: 10px;
    left: 20px;
}

<div class="big">
     <div class="small"></div>
</div>
         
 $(function () {

        console.log($(".big").position());
        // {top: 0, left: 0}	因为 .big 盒子只有的定位的 top 和 left 值才会被计算在内，内外边距不计算

        console.log($(".small").position());
        // {top: 10, left: 20}
     
      	console.log($(".small").position().top);
        console.log($(".small").position().left);

    })

(3) scrollTop() / scrollLeft()

设置或获取元素被卷去的头部或左侧

 $(window).scroll(function () {
      console.log($(document).scrollTop());
 })
     
 $("span").click(function () {
           $(document).scrollTop(0)
		})

浏览器头部卷去一定距离，则显示返回按钮，带有返回动画

* {
     margin: 0;
     padding: 0;
}

body {
    height: 1000px;
    }

div {
    width: 800px;
    height: 500px;
    margin: 100px auto;
    background-color: bisque;
    }

span {
    display: block;
    position: fixed;
    bottom: 60px;
    right: 50px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid black;
    display: none;
	}

<div></div>
<span>返回顶部</span>
    
$(function () {
        $(window).scroll(function () {
            if ($(document).scrollTop() >= $("div").offset().top) {
                $("span").fadeIn(100);
                $("span").click(function () {
                    $("html,body").stop().animate({
                        scrollTop: 0
                    })
                })
            } else {
                $("span").fadeOut(100)
            }
        })
    })