JS第八天 jQuery

最新推荐文章于 2024-06-03 09:15:36 发布

茶里

最新推荐文章于 2024-06-03 09:15:36 发布

阅读量115

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/weixin_64985318/article/details/129480718

版权

1. jQuery概述

1.1 JS库

即library，是一个封装好的特定的结合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如订花animate, hide, show等。简单理解，就是一个JS文件，里面对我们原生JS代码进行了封装，存到里面，这样我们可以快速高效的使用好这些封装的功能。比如jQuery就是为了快速方便的操作DOM，里面都是方法。

常见JS库：

jQuery

Prototype

YUI

Dojo

Ext JS

移动端的zepto

1.2 jQuery

概念

宗旨：write less, do more

j: JavaScript query: 查询 jQuery把DOM操作做了封装，可以快速地查询使用里面的功能。

学习jQuery的本质：学习调用这些函数

优点：

轻量，兼容，链式编程，隐式迭代，对事件，样式，动画支持，大大简化了DOM操作；支持插件扩展开发，丰富的第三方插件：树形菜单，日期控件，轮播图；免费开源。

2 基本使用

2.1 下载

网址：https://jquery.com/

2.2 使用：引入jQuery文件

<!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>
    <script src='jquery.mini.js'></script>
</head>
<body>
    
</body>
</html>

2.3 jQuery的入口函数

$(function(){
    ...//DOM加载完成的入口
});

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

2.4 jQuery的顶级对象$

1. $其实是jquery的别称，可以互相替代，一般用$

2.$是jquery的顶级对象，相当于js中的window，把元素包装成jQuery对象，就可以调用jQuery的方法

2.5 dom对象和jQuery对象

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

2. 用jq获取就是jq对象 jq对象本质：利用$对dom对象进行包装，产生伪数组存储的新对象

3. 什么对象就用什么方法

DOM和JQ可以互相转换：

原生JS比Jquery等大，原生的一些属性和方法没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才可以使用

1. DOM转换为jQuery：$(DOM对象)

2. jQuery对象转换为DOM对象：$('div)[index] / $('div').get(index)

3 jQuery常用API

3.1 JQ选择器

3.1.1 $("选择器") //CSS选择器加引号

ID选择器 $('#div')

全选选择器 $('*')

类选择器 $(".class")

标签选择器 $(''div")

并集选择器 $("div,p,li")

交集选择器 $("li.current")

3.1.2 层级选择器

子代选择器：$("ul>li"); 不会获取孙子级元素

后代选择器：$("ul li"); 使用空格，获取ul下所有级别的元素

3.1.3 JQ设置样式隐式迭代

把匹配的所有元素内部进行遍历循环，给每一个元素添加CSS方法。

$("div").css('属性', '值'）

3.1.4 筛选选择器

:first $('li:first') 获取第一个元素

:last $('li:last') 获取最后一个元素

:eq(index) $(''li:eq(2)'') 获取到li元素中索引号为2的元素

:odd $("li:odd") 获取到的li元素中，索引号为奇数的元素

:even 偶

3.1.5 筛选方法

parent() $("li").parent()

children(selector) $("ul").children("li") 子代

find(selector) 后代

siblings(selector) 兄弟结点

nextAll([expr]) 当前元素之后的所有同辈元素

prevtAll([expr]) 当前元素之前的所有同辈元素

hasClass(class) 检查当前元素是否含有某个类

eq(index) 查找第index+1个元素

3.1.6 JQ排他思想

<!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>
    <script src="jquery.mini.js"></script>
</head>
<body>
    <div>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
    </div>
    <script>
        $(function(){
            $('button').click(function(){
                $(this).css("background", "pink");
                $(this).siblings("button").css("background", "");
            })
        })
    </script>
</body>
</html>

案例：淘宝精品服饰

3.1.7 链式编程

为了节省代码，看起来更优雅

$（this）.css('color', 'red').sibling().css('color', ' ' );

3.2 JQ样式操作

3.2.1 操作CSS方法可以css也可以操作类

1.参数只写属性名，只返回属性值

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

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

更改多个样式

$(this).css({"color":"white", "font-size": "20px", "width": 200}); //不是属性要加引号

3.2.2 样式操作类

addClass()

removeClass()

toggleClass()

3.2.3 类操作和className的区别

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

案例：tab切换栏

3.3 jQuery效果（动画效果）

显示隐藏

show()

hide()

toggle()

滑动

slideShow()

slideUp()

slideToggle()

淡入淡出

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

自定义动画

animate()

4 显示隐藏

1.显示隐藏语法规范

show([speed, [easing], [fn]]) 参数都可省略

speed: 速度， slow, normal, fast , 1000（单位：毫秒）

easing: 切换效果 swing（慢，快，慢），linear（线性匀速）

fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2.滑动效果及事件切换：

slideDown([s], [e], [fn])

slideUp([s, [e] ,[fn]])

slideToggle([s], [e], [fn])

3. 事件切换

hover([over,] out)

4. 动画队列及停止排队方法

1.动画或效果队列

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

2.停止排队 stop() 要写在slideToggle()前面

5 淡入淡出及突出显示案例

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

fadeOut...

fadeToggle...

调整透明度fadeTo()

fadeTo([[]speed], opacity, [easing], [fn])

opacity 透明度 0~1

速度和透明度必须写

6 jQuery自定义动画animate方法

animate(params, [speed], [easing], [fn])
//params: 想要更爱的样式属性，以对象形式传递，必须写，属性名不用带英豪，如果是符合属性则需要采取驼峰命名法borderLeft。
//speed预定速度
//easing：切换效果

7王者荣耀手风琴案例分析

5 jQuery属性操作

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

固有属性就是元素自身自带的属性，比如<a>里面的href，比如<input>元素里面的type

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

5.3 数据缓存 data()

6 jQuery内容文本值：主要针对元素的内容还有表单值的设置

html()获取元素内容

text()获取文本内容，不包括标签

val()获取表单值

7 jQuery元素操作

遍历，创建，添加，删除

1.遍历：隐式迭代是对同一元素做相同的操作，而遍历是对元素做不同操作

语法1：
$("div").each(function (index, domEle) {xxx; })

语法2：

$.each(obaject, function(index, element) {xxx; })

可用于遍历任何对象，主要用于数据处理，比如数组

index是索引号，element是遍历内容。

//$.each(遍历对象, function(索引号， 元素)){
//    console.log(...)
//}
var arr = ["andy", "anna", "jennie"];
$.each(arr, function(i ,ele)){
    console.log(i);
    console.log(ele);
}

2. 创建元素：