jQuery 入门：概念、基本使用、选择器、样式操作、动画效果

最新推荐文章于 2024-03-10 18:19:17 发布

原创最新推荐文章于 2024-03-10 18:19:17 发布 · 280 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍jQuery库的基础知识，包括下载、入口函数及顶级对象$的使用。详细讲解了jQuery对象与DOM对象的区别与转换，并深入探讨了选择器、样式操作、效果动画等常用API的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. jQuery概述

1.1 JavaScript 库

概念：是一个封装好的特定的集合（方法和函数）如动画animate、hide、show，获取函数

简单理解：就是对原生的js进行封装；比如jQuery是为了快速方便的操作DOM，里面是函数和方法

常见的JavaScript库：jQuery、prototype、YUI、dojo

原理是对原生的js进行封装，内部都是用JavaScript实现的

1.2 jQuery 的概念

是一个快速、简洁的JavaScript库，把js中DOM进行封装、可以进行查询使用里面的功能
优化了DOM操作、事件处理、动画设计、ajax交互
学习jQuery的本质：学习调用这些函数（方法）
优点：轻量级、跨浏览器兼容、链式编程、隐式迭代、对事件样式动画支持、插件拓展开发、免费、开源

2. jQuery 的基本使用

2.1 下载

官网网站：https://jquery.com/

2.2 jquery 入口函数

等待页面加载（dom结构渲染）完毕再去执行js代码，相当于原生的DOMContentLoaded
不同于load事件，load是等页面文档，外部js文件css文件图片加载完毕在执行的内部代码
推荐第二种写法，简单

1. $(document).ready(函数)

2. $(函数)

2.3 顶级对象$

$ 是jquery的别称，在代码里相当于jquery，通用$
$ 是jquery的顶级对象，相当原生 js 的window

2.4 jquery 对象和 DOM 对象

DOM对象：用原生的 js 获取过来的对象 var div=document.querySelector('div')，div 就是dom对象
jquery对象：用jQuery 获取的对象（通过$把DOM元素进行包装）如：$('div')
jQuery 对象只能使用jQuery方法，dom 对象则使用原生的js 的属性和方法

2.5 jQuery对象和DOM对象相互装换

原生的js 比jQuery更大，原生的属性和方法有些没有封装

1. DOM 对象转换jQuery对象

$('div')

2. jQuery 对象装换 DOM 对象

$('div')[index]
$('div').get.[index]

3. jQuery 常用的 API

3.1 选择器

3.1.1 基本选择器

$ (" 选择器") //选择器可以直接写css选择器，但是要加引号

3.1.2 层级选择器

3.1.3 隐式迭代（重要）

含义：遍历内部的DOM元素（伪数组形式存储）的过程叫隐式迭代

简单理解：给所有的元素进行循环遍历，执行相同的方法，简化我们的循环操作，方便调用

3.1.4 筛选选择器

3.1.5 筛选的方法（重点）

案例新浪下拉菜单

<script>
        $(function(){

            // 鼠标经过
            $('.nav>li').mousemove(function(){
                // $(this) 当前元素
                // show() 显示元素
                $(this).children("ul").show();
            });

            // 离开
            $('.nav>li').mouseout(function(){
                // $(this) 当前元素
                // show() 显示元素
                $(this).children("ul").hide();
            })
        })
    </script>

3.1.6 排他思想

实现多选一的效果用排他思想：设置当前元素样式，清除其余的元素的样式


<body>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <script>
        $(function(){
            // 全部按钮绑定点击事件
            $("button").click(function(){
                // 当前元素变化背景色
                // 其余兄弟去掉背景色
                $(this).css("background","pink");
                $(this).siblings("button").css("background","");
            });
        })
    </script>
</body>

3.1.7 选项卡案例分析

核心原理：鼠标经过左侧盒子的小li,让内容区盒子对应图片，其余的图片隐藏
$(this) 得到当前的li 索引号，显示对应的索引号的图片eq（index）
显示show（）和隐藏hide（）

<body>
    <div class="wrapper">
        <!-- 左边选项卡 -->
        <ul class="left">
            <li><a href="#">衣服</a></li>
            <li><a href="#">包包</a></li>
            <li><a href="#">美妆</a></li>
        </ul>
        <!-- 右边内容 -->
        <div class="content">
            <div>
                <a href="#"><img src="./images/4.jpeg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./images/5.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <script>
        // 核心原理：鼠标经过左侧盒子的小li, 让内容区盒子对应图片，其余的图片隐藏
        $(function(){
            $('.left li').mouseover(function(){
                // 2. 得到当前小li 的索引号
                var index=$(this).index();
                 // 3.显示show（）和隐藏hide（）
                $('.content div').eq(index).show();
                $('.content div').eq(index).siblings().hide();
                // 链式编程写法
               // $('.content div').eq(index).show().siblings().hide();
            })
        })
    </script>
</body>

3.1.7 链式编程

为了节省代码，看起来简洁(例上）

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

一定要注意哪个对象执行样式

3.2 样式操作

3.2.1 操作css方法

可以简单修改元素样式；操作类，修改多个样式

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

$('div').css('属性',)

如：$("div").css("background") //返回pink

2. 参数时属性名，属性值，逗号分隔，设置样式，属性加引号，如果是数字不跟单位和引号

$('div').css("width","200");

3. 参数是对象形式，设置多组样式；属性名和属性值用冒号分隔；属性可以不加引号

注意复合属性采用驼峰命名法

$('li').css({

width:400,

'height':500,

color:'pink',

backgroundColor:'black'

})

jQuery对象不能使用js里面的style属性

3.2.2 设置类样式方法

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

1. 添加类：$('div').addClass('.w')

2. 移除类： $('div').removeClass('w')

3. 切换类： $('div').toggleClass('w')；

3.2.3 类操作与className 区别

原生js：className对覆盖原先的类名
jQuery类操作：不影响原先的类名，相当于追加类名

3.3 效果

jQuery封装了很多动画效果，最常见的如下

3.3.1 显示隐藏效果

显示隐藏：show（），hide（），toggle（）

语法：show([speed,[easing],[fn])

参数都可以省略

speed：("slow","normal","fast"), 或者毫秒数（1000）
easing：指定切换效果，默认swing（慢快慢），还有linear（匀速）
fn：回调函数，动画完成执行函数，每个元素执行一次

3.3.2 滑动效果

slideDown（），slideUp（），slideToggle（）

语法：slideDown([speed,[easing],[fn]) 参数都可以省略

speed：("slow","normal","fast"), 或者毫秒数（1000）
easing：指定切换效果，默认swing（慢快慢），还有linear（匀速）
fn：回调函数，动画完成执行函数，每个元素执行一次

可做下拉菜单案例

3.3.3 事件切换

hover(over,out)

over :鼠标移到元素的触发函数（相当于mouseenter）
out：移出触发的函数（相当于mouseleave）
即鼠标经过和离开的复合写法
如果只写一个函数，鼠标经过和离开都会触发

//1.鼠标经过和离开的复合写法
$('.nav').hover(function(){
    $(this).children('ul').slideDown();
},function(){
    $(this).children('ul').slideUp();
})

//2. 一个函数写法
$('.nav').hover(function(){
    $(this).children('ul').slideToggle(); //同上效果
})