还在为一个一个敲代码烦恼❓-jQuery(1) ️_jquery语句写起来太麻烦-CSDN博客

本文链接：https://blog.csdn.net/qq_52764447/article/details/120716154

⛽️ 好好学习天天向上 ⛽️

前言

在学习javascript后，有很多同学认为大量的js代码非常的繁琐，做一个轮播图自己一个一个敲,效率太低啦。好消息好消息，今天给大家讲解一个期待已久的jquery,前端的快乐不就来了吗

在讲解前呢，给大家先做一个知识的铺垫：

javascript库：即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中封装了很多预先定义好的函数在里面，比如动画animate、hide、show、获取元素等。那么简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了，比如：jquery库，就是为了快速的操作DOM，里面基本都是函数（方法）

常见的一些库：

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto

一、jQuery概念

jQuery是一个快速、简介的js库

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

那么我们的jQuery到底是写在哪里呢？没错！写在script标签里 😊

jQuery优点：

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

二、jQuery基本使用

2.1、基本使用

jQuery下载官网：https://jquery.com/

在头部引入下载好的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="./jQ/jQuery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body>
    <script>
        $(function(){
            $('div').show();
        })
    </script>
    <div></div>
</body>

</html>

2.2、jQuery的入口函数

有另种写法，博主推荐第一种哟简单 🍳

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

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

与原生js中的入口函数区别：

和DOMContentLoaded一样是等页面主要的内容加载完后再执行jQuery代码
但是与load事件是不一样的，load是等页面所有的内容加载完后再执行

2.3、jQuery的顶级对象

jquery的顶级对象是: $

$相当于jQuery 两者都是可以互换使用

含义：把元素利用$包装成jQuery对象，就可以调用jQuery的方法


<body>
    <div></div>
    <script>
        $(function () {
            $(document).on("click", function () {
                alert(8)
            })
            jQuery("div").on("click", function (event) {
                alert(1);
                event.stopPropagation(); //阻止冒泡。表示文档不会被点击
            })
        })
    </script>
</body>

2.4、DOM对象和jQuery对象

区别：

它们获取的对象是不一样的，jQuery获取过来的对象是一种伪数组的形式存储的
jQuery对象只能使用jQuery的属性和方法，DOM对象只能使用js的属性和方法
用原生js获取来的对象就是DOM对象、jQuery方法获取的元素就是jQuery对象

<body>
    <div></div>
    <script>
        $(function () {
            console.dir($("div"));
            console.dir(document.querySelector("div"));
        })
    </script>
</body>

显示结果：

DOM对象和jQuery对象是可以相互转换的：

DOM对象转换为jQuery对象

将用DOM方法获取过来的元素放在 $()的括号里面，此时的Mydiv就可以使用jQuery的属性和方法了

<div></div>

<script>

var Mydiv = document.querySelector('div');

$(Mydiv).hide();

</script>

jQuery对象转换为DOM对象

转换为DOM对象后就可以使用DOM对象里面的属性和方法了

方法一：

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

$('div')[0];

方法二：

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

$('div').get(0);

三、jQuery选择器（重点）

语法：$(“选择器”) // 里面选择器直接写css选择器即可，但是要加引号

3.1、初级选择器

ID选择器	$("#id")	获取指定id的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的属性
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div, p ,ul")	获取多个元素
交集选择器	$("li.current")	交集元素

3.2、层级选择器

子代选择器	$("ul>li")	获取亲儿子层级的元素
后代选择器	$("ul li")	获取ul下的所有li元素

3.3、筛选选择器

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

3.4、筛选方法获取元素

parent()	$("li").parent()	查找父级也就是亲父亲
children()	$("ul").children("li")	查找的是最近一级也就是亲儿子
find()	$("ul").find("li")	后代选择器如果里面都不写的话就是选择所有后代
siblings()	$(".first").siblings()	查找兄弟节点，不包括自己本身，括号里面不写就是查找所有的兄弟元素
nextAll([ ])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevt([ ])	$(".first").prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected")	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$("li").eq(2)	相当于$("li:eq(2)"),获取指定的元素

3.5、补充

:checked选择器	:checked查找被选中的表单元素	$(".j-checked:checked").length 返回的是有几个表单被选中了
parents("选择器")	可以返回指定祖先元素	$("li").parents(".box") 查找的是li的ul的亲兄弟

四、两个重要的思想（重点）

4.1、jQuery隐式迭代

给匹配到的所有元素进行循环遍历，执行相应的方法，相当于jQuery已经给我们做了循环这一步，而不用我们再进行循环遍历，大大的简化了我们的操作

$("div").css('bacground','pink'); // 获取过来的所有div盒子背景颜色都变成了粉色

4.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="./jQ/jQuery.min.js"></script>
</head>

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        //1、隐式迭代 给所有的按钮都绑定了点击事件
        $('button').click(function () {
            $(this).css("background", "pink");
            //2、通过隐式迭代，将当前点击的元素的兄弟元素的背景设置为空  
            $(this).siblings('button').css("background", "");
           
        })
    </script>
</body>

</html>

五、jQuery链式编程及样式操作

5.1、链式编程

链式编程就是减少了代码量

就比如上面的排他思想的例子可以简写成

$(this).css("color","red").sibling().css("color",""); //表示将当前元素的字体设置为红色，其兄弟元素的字体设置成空

5.2、样式操作

样式操作一般情况下分为两种：1、样式比较简单通过css来修改元素样式；2、样式比较复杂通过类修改多个样式

css修改

参数只写属性名，则返回属性值例如：$(this).css("color") 返回的是200px
语法：$(this).css("属性名"，"属性值")。值如果是数字不用跟单位或者引号，属性名必须添加引号
设置多组样式语法：$(this).css({"color":"white","font-size":"20px"});

里面是一个对象里面的属性可以不用添加引号
$("div").css({
width:400,
height:400
})
里面如果是复合属性则用驼峰命名法

类名修改

添加类名 $("div").addClass("current")
删除类名 $("div").removeClass("current")
切换类名 $("div").toggleClass("current")

类名不用加点

类不影响原来的类名相当于追加类名

六、jQuery效果-动画

下面讲到的效果里面的参数都是一样的，这里统一讲下面就不重复讲解了哟（[speed,[easing],[fn]]）里面的参数可以省略，无动画直接显示

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

6.1、显示隐藏效果

显示 show([speed,[easing],[fn]])
隐藏 hide([speed,[easing],[fn]])
切换 toggle([speed,[easing],[fn]])

6.2、滑动

下滑效果 slideDown([speed,[easing],[fn]])
上滑效果 slideUp([speed,[easing],[fn]])
切换效果 slideToggle([speed,[easing],[fn]])

6.3、事件切换

语法：hover([over,]out)

over:鼠标移动到元素上要触发的函数（相当与mouseenter）

out:鼠标移出元素要触发的函数（相当于mouseeleave）

$(".nav>li").hover(function(){},function(){});第一个函数时鼠标经过的事件，第二个函数时鼠标离开的事件

hover只写一个函数，那么鼠标经过鼠标离开都触发这个这个函数

$(".nav>li").hover(function(){
$(this).children("ul").slideToggle();//滑动切换

})

6.4、停止动画排队

原因：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行，如果在短时间内触发动画，那么动画就会排队执行

解决方法：stop()

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

6.5、淡入淡出

淡入效果 fadaIn([speed,[easing],[fn]])
淡出效果 fadeOut([speed,[easing],[fn]])
淡入淡出切换效果 fadeToggle()
渐进方式调整到指定的不透明度 fadeTo([[speed].opcity,[easing],[fn]])

opacity 透明度必须写，取值0～1之间
speed 三种预定速度之一的字符串，("show","normal",or,"fast")或表示动画时长的毫秒数值(:1000)
easing (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”
fn回调函数

6.6、自定义动画 animate

语法：animate(params,[speed],[easing],[fn])

参数：

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略
$(function(){

            $("button").click(function(){

                $("div").animate({

                    left:500,

                    top:300,

                    opacity:0.5,

                    width:500

                })

            })

        })
⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️ ⛽️

举一个例子让大家更加理解

下面是一个很典型的动画例子，很简单希望大家都能理解里面的代码有些我省略啦 ul里面的结构都是一样博主的用心良苦啊自己下去完善哟相信你们更厉害 😁

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>
    <script src="./jQ/jQuery.min.js"></script>
    
</head>

<body>

    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img data-lazy-src="images/m1.jpg" alt="" class="small">
                    <img data-lazy-src="images/m.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>

    <script>
        $(function () {
            $(".king li").mouseenter(function () {
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                $(this).siblings("li").animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        })
    </script>


</body>

</html>

效果展示【当鼠标移动到图片上的时候每个li的小图片淡出，大图片会淡入】