一、jQuery概述

jquery的概念

jQuery是一个快速简洁的JavaScript库
jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理。动画设计和Ajax交互

优点

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

二、jQuery的基本使用

1. jquery的下载

官网地址：http://jquery.com/

2.jQuery的入口函数

	$（function (){
    
    }）

     $(document).ready(function(){
    
    }})

DOM加载完毕再去执行js代码
相当于原生js’中的DOMContentLoaded

3. jQuery的顶级对象 $

$是jQuery的别称
$ 也是jQuery的顶级对象

jQuery对象和DOM对象

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

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

相互转换

DOM对象转换为jQuery对象

$(DOM对象)

jQuery对象转换为DOM对象

$(‘div’)[index] (index是索引号)
$(‘div’).get(index) （index是索引号）

三、jQuery常用API

1. jQuery选择器： $(" 选择器 ")

基础选择器

选择器	语法	说明
ID选择器	$(“#id”)	获取指定id的元素
全选选择器	$（“*”）	匹配所有元素
类选择器	$(" .class")	获取同一类class的元素
标签选择器	$(" div ")	获取同一类标签的所有元素
并集选择器	$(" div,p,li ")	获取多个元素
交集选择器	$(" li.current ")	交集选择器

层级选择器

选择器	语法	说明
子代选择器	$(" ul>li ")	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$(" ul li ")	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器

选择器	语法	说明
：first	$(" li:first" )	获取第一个li元素
：last	$(" li:last" )	获取最后一个li元素
：eq（index）	$(" li:eq(0) ")	获取到的元素中，选择索引号为0的元素，索引号从0开始
：odd	$(" li:odd" )	获取到的元素中，选择索引号为奇数的元素
：even	$(" li:even" )	获取到的元素中，选择索引号为偶数的元素

筛选方法

方法	语法	说明
parent（）	$(“li”).parent();	查找父级
chuildren(selector)	$(“ul”).children(“li”)	相当于$（“ul>li”）,最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”)	相当于$（“ul li”）,后代选择器
siblings(selector)	$(“.first”).siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(“.first”).nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(“.first”).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”)，index从0开始

隐式迭代

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

链式编程

节省代码量

$(this).css(“color”,“red”).sibling().css(“color”.“”)

2. jquery样式操作

操作css方法

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

$(this).css(“color”)
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引导

$(this).css(" color",“red”)
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({“color”:“red”,“fontSize“:”20px”})

设置类样式方法

作用等同于classList

添加类

$(“div”).addClass(“current”);
移除类

$(“div”).remove(“current”);
切换类

$(“div”).toggleClass(“current”);

3. jQuery动画

(1) 显示隐藏效果

显示效果

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

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

隐藏语法效果

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

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

切换效果

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

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

(2) 滑动效果

显示效果

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

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

隐藏效果

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

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

切换效果

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

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

事件切换

hover（[over]，out）

	$(" . nav>li") . hover(function() {
    
    }, function() {
    
    })

over：鼠标移到元素上要触发的函数（相当于mouseenter）
out：鼠标移出元素要触发的函数（相当于mouseleave）
可以省略over不写

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

动画或效果队列

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

停止排队

stop（）

stop（）方法用于停止动画或者效果
注意：stop（）写到动画或者效果的前面，相当于停止结束上一次的动画

(3) 淡入淡出效果

淡入效果

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

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

淡出效果

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

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

切换效果

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

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

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

opacity 透明度必须写，取值0~1之间必须写
speed：三种预定速度之一的字符串（slow normal fast）或表示动画时长的毫秒数值（如：1000）必须写
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

(4) 自定义动画animate

animate([ params,[speed], [easing] ,[fn]])

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是符合属性则需要采取驼峰命名法
speed：三种预定速度之一的字符串（slow normal fast）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

手风琴案例

在这里插入图片描述

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
      
      
            margin: 0;
            padding: 0;
        }

        img {
      
      
            display: block;
        }

        ul {
      
      
            list-style: none;
        }

        .king {
      
      
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }

        .king ul {
      
      
            overflow: hidden;
        }

        .king li {
      
      
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }

        .king li.current {
      
      
            width: 224px;
        }

        .king li.current .big {
      
      
            display: block;
        }

        .king li.current .small {
      
      
            display: none;
        }

        .big {
      
      
            width: 224px;
            display: none;
        }

        .small {
      
      
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
      
      
            $(".king li").mouseenter(function () {
      
      
                $(this).stop().animate({
      
      
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                $(this).siblings().stop().animate({
      
      
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        })
    </script>
</head>

<body>

    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>




</body>

</html>

3. jQuery属性操作

设置或获取元素固有属性值 prop（）

获取

prop（“属性”）

设置属性

prop（“属性”，“属性值”）

设置或获取元素的自定义属性值 attr（）

获取属性

attr（“属性”）
类似于原生getAttribute（）

设置属性

attr（“属性”，“属性值”）
setAttribute（）

数据缓存 data（）

data（）方法可以在指定的元素上存取数据，并不会修改DOM元素结构
附加数据语法

data（“name”，“value”）
向被选中的元素附加数据

获取数据语法

data（‘‘name’’）
向被选中的元素获取数据

还可以读取HTML5自定义属性 data-index，得到的是数字型

4. jQuery内容文本值

普通元素获取内容html（）（相当于原生innerHTML）

html（） 获取元素内容

html（“内容”） 设置元素内容

普通元素文本内容text（）（相当于原生innerHText）

- text（) 获取元素文本内容
- text（“文本内容”） 设置元素的文本内容

input表单获取内容

val() 获取表单内容

val“内容”) 设置表单文本内容

其他方法

parents（“选择器”） 返回祖先元素

toFixed（2） 保留2位小数

substr（1） 截取字符串

5. jQuery元素操作

遍历元素

给同一类元素做不同操作

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

$.each(arr,function(){
    
    })

each()方法遍历匹配的的每一个元素，主要用DOM处理
里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象
dom元素需要转换为jQuery对象$(donEle)

创建元素

动态创建了一个li

$("<li></li>");

添加元素

内部添加
内部添加并放到内容的最后面

$("ul").append(li);

内部添加并且放到内容的最前面

$("ul").prepend(li);

外部添加
把内容放到目标元素的后面

$("div").after("内容")

把内容放到目标元素的前面

$("div").before("内容")

内部添加元素生成之后，他们是父子关系

外部添加元素生成之后，他们是兄弟元素

删除元素

删除匹配的元素（本身）

		$("div").remove()

删除匹配元素集合中所有的子节点

$("div").empty()

清空匹配的元素内容

$("div").html("")

6.jQuery尺寸、位置操作

jQuery尺寸

属性	说明
width（）/height()	取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHeight()	取得匹配元素宽度和高度值，包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值，包含padding和border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值，包含padding和border,margin

概要

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

jQuery位置

offset（）

设置获取元素偏移量
offset（）方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
属性

属性	使用	说明
top	offset（）.top	用于获取距离文档顶部的距离
left	offset（）.left	用于获取距离文档左侧的距离

可以设置元素的偏移量：offset（{top：10，left：29}）

position（）

获取元素对于有定位的父级元素的位置，父级没有定位以文档为准
只能获取不能设置

scrollTop（）/scrollLeft（）

设置获取元素被卷去的头部和左侧
animate动画函数里面有个scrollTop属性，可以设置位置
但是是元素做动画,因此 $(. “body,html” ).animate({scrollTop: 0})

7. jQuery事件

jQuery事件注册

$("div").click(function(){
    
    事件处理程序})

与原生基本一致：mouseover、mouseout、bliur、focus等

jQuery事件处理

on（）事件绑定

on（）方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn)

events：一个或多个用空格分隔的事件类型，如“click”或“keydown”
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数
利用对象的方式绑定多个事件

优势

可以绑定多个事件，多个处理事件处理程序

$ ("div") .on({
      
      
      mouseover: function() {
      
      },
      mouseout: function() {
      
      },
      click: function() {
      
       }
}) ;

如果事件处理程序相同

      $ ("div") . on ("mouseover mouseout", function() {
      
      
               $ (this) . tqggleClass ("current");
        }) ;

可以事件委派操作，事件委派的定义就是，把原来加给子元素身上得到事件绑定在父元素身上，就是把事件委派给父元素
```
$('ul') .on('click', 'li', function() {
      
      
 alert( 'hello world!') ;
}) ;
```
on可以给未来动态创建的元素绑定事件

off（）事件解绑

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

$("p").off()  //解绑怕元素所有事件处理程序
$("p").off("click")  //解绑p元素上面的点击事件
$("ul").off(""click","li");  //解绑事件委托

如果有的事件只想执行触发一次，可以使用one（）来绑定事件

自动触发事件trigger（）

1. $("div").click();元素.事件（）

2. $("div").trigger("click")

不会触发元素的默认行为

3. $("div").triggerHandler("click")

jQuery事件对象

element.on(events,[selector],function(event){
    
    })

阻止默认行为

event.preventDefault() 或者 return false

阻止冒泡行为

event.stopPropagation()

jQuery其他事件

jQuery拷贝对象

把某个对象拷贝（合并）给另外一个对象使用，可以使用$.extend()方法

$.extend([deep],target,object1,[objectN])

deep: 如果设为true为深拷贝，默认为false 浅拷贝
- 浅拷贝：是把被拷贝对象复杂数据类型中的地址给目标对象，修改目标对象会影响被拷贝对象
- 深拷贝：前面加true ，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象

多库共存

问题概述
jQuery使用 $ 作为标识符，随着jQuery的流行，其他js库也会用$作为标识符，一起使用会引起冲突

客观需求
让jQuery与其他的js库不存在冲突，可以同时存在，叫做多库共存

解决方案

把里面的$符号同意改为jQuery
jQuery变量规定新的名称
$.noConflict()
var xx = $.noConflict();

jQuery 的插件

jQuery插件常用的网站

jQuery插件库
http://www.jq22.com/
jQuery之家
http://www.htmleaf.com/

jQuery插件使用步骤

引入相关文件。（jquery文件和插件文件）
复制相关的html、css、js（调用插件）

请添加图片描述

想要更加方便完成DOM操作，事件处理，动画设计吗？我带来了一个小伙伴——jQuery

一、jQuery概述

jquery的概念

二、jQuery的基本使用

1. jquery的下载

2.jQuery的入口函数

3. jQuery的顶级对象 $

jQuery对象和DOM对象

相互转换

三、jQuery常用API

1. jQuery选择器： $(" 选择器 ")

基础选择器

层级选择器

筛选选择器

筛选方法

隐式迭代

链式编程

2. jquery样式操作

操作css方法

设置类样式方法

3. jQuery动画

(1) 显示隐藏效果

显示效果

隐藏语法效果

切换效果

(2) 滑动效果

显示效果

隐藏效果

切换效果

事件切换

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

动画或效果队列

停止排队

(3) 淡入淡出效果

淡入效果

淡出效果

切换效果

(4) 自定义动画animate

手风琴案例

3. jQuery属性操作

设置或获取元素固有属性值 prop（）

获取

设置属性

设置或获取元素的自定义属性值 attr（）

获取属性

设置属性

数据缓存 data（）

4. jQuery内容文本值

普通元素获取内容html（）（相当于原生innerHTML）

普通元素文本内容text（）（相当于原生innerHText）

input表单获取内容

其他方法

5. jQuery元素操作

遍历元素

创建元素

添加元素

删除元素

6.jQuery尺寸、位置操作

jQuery尺寸

jQuery位置

offset（）

position（）

scrollTop（）/scrollLeft（）

7. jQuery事件

jQuery事件注册

jQuery事件处理

on（）事件绑定

off（）事件解绑

如果有的事件只想执行触发一次，可以使用one（）来绑定事件

自动触发事件trigger（）

jQuery事件对象

jQuery其他事件

jQuery拷贝对象

多库共存

jQuery 的插件

猜你喜欢