jQuery对象、选择器、样式与动画

骑猪看日落 2023-02-14 10:21 151阅读 0赞

### jQuery对象、选择器、样式与动画 ###

*  jQuery对象、选择器、样式与动画
 *   *  1. jQuery的使用
     *   *  1.1 jQuery介绍
         *  1.2 jQuery优点
         *  1.3 jQuery基本使用
     *  2. jQuery的对象
     *   *  2.1 jQuery中的顶级对象$
         *  2.2 jQuery 对象和 DOM 对象
         *  2.3 jQuery 对象和 DOM 对象转换
     *  3. jQuery选择器
     *   *  3.1 jQuery基础选择器与层级选择器
         *  3.2 jQuery筛选选择器
         *  3.3 jQuery中排他思想、隐式迭代和链式编程
     *  4. jQuery样式操作
     *   *  4.1 操作 css 方法
         *  4.2 设置类样式方法
     *  5. jQuery动画效果
     *   *  5.1 显示隐藏
         *  5.2 滑入滑出
         *  5.3 淡入淡出
         *  5.4 自定义动画
         *  5.5 停止动画排队
         *  5.6 事件切换

# jQuery对象、选择器、样式与动画 #

## 1. jQuery的使用 ##

### 1.1 jQuery介绍 ###

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。  
常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的。

**jQuery总体概况：**

*  jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”
 *  学习jQuery本质： 就是学习调用这些函数（方法）。
 *  jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

### 1.2 jQuery优点 ###

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

### 1.3 jQuery基本使用 ###

jQuery中常见的两种入口函数：

总结：

*  等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
 *  原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

## 2. jQuery的对象 ##

### 2.1 jQuery中的顶级对象$ ###

$是 jQuery 的别称，在代码中可以使用 jQuery 代替。  
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

### 2.2 jQuery 对象和 DOM 对象 ###

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

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

**注意**：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

代码如下：

控制台打印DOM对象（上）与jQuery伪数组（下）：  
![在这里插入图片描述][20200602144321667.JPG_pic_center]

### 2.3 jQuery 对象和 DOM 对象转换 ###

DOM 对象与 jQuery 对象之间是可以相互转换的。  
因为：原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。  
代码如下：

// 1.DOM对象转换成jQuery对象，方法只有一种
    var box = document.getElementById('box');  // 获取DOM对象
    var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象
    
    // 2.jQuery 对象转换为 DOM 对象有两种方法：
    // 2.1 jQuery对象[索引值]
    var domObject1 = $('div')[0]
    
    // 2.2 jQuery对象.get(索引值)
    var domObject2 = $('div').get(0)

## 3. jQuery选择器 ##

### 3.1 jQuery基础选择器与层级选择器 ###

层级选择器最常用的两个分别为：后代选择器和子代选择器。  
![在这里插入图片描述][20200602145140593.JPG_pic_center]

还有其他类型的选择器如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]

### 3.2 jQuery筛选选择器 ###

jQuery筛选选择器：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]  
代码如下：

$(function() { 
                $("ul li:first").css("color", "red");
                $("ul li:eq(2)").css("color", "blue");
                $("ol li:odd").css("color", "skyblue");
                $("ol li:even").css("color", "pink");
            })

更多的jQuery筛选方法如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]  
代码如下：

### 3.3 jQuery中排他思想、隐式迭代和链式编程 ###

*  jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
    $(this).css(“color”,”red”);
    $(this).siblings(). css(“color”,””);

*  隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
    // 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
    $('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

*  链式编程

// 链式编程是为了节省代码量，看起来更优雅。
    $(this).css('color', 'red').sibling().css('color', '');

## 4. jQuery样式操作 ##

### 4.1 操作 css 方法 ###

常用以下三种形式 :

// 1.参数只写属性名，则是返回属性值
    var strColor = $(this).css('color');
    
    // 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
    $(this).css(''color'', ''red'');
    
    // 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
    $(this).css({  "color":"white","font-size":"20px"});

### 4.2 设置类样式方法 ###

常用的三种设置类样式方法：

// 1.添加类
    $("div").addClass("current");
    // 2.删除类
    $("div").removeClass("current");
    // 3.切换类
    $("div").toggleClass("current");

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

## 5. jQuery动画效果 ##

jQuery 给我们封装了很多动画效果，最为常见的如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]

### 5.1 显示隐藏 ###

<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>

### 5.2 滑入滑出 ###

<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>

### 5.3 淡入淡出 ###

<button>淡入效果</button>
        <button>淡出效果</button>
        <button>淡入淡出切换</button>
        <button>修改透明度</button>
        <div></div>
        <script> $(function() { $("button").eq(0).click(function() { // 淡入 fadeIn() $("div").fadeIn(1000); }) $("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut(1000); }) $("button").eq(2).click(function() { // 淡入淡出切换 fadeToggle() $("div").fadeToggle(1000); }); $("button").eq(3).click(function() { // 修改透明度 fadeTo() 这个速度和透明度要必须写 $("div").fadeTo(1000, 0.5); }); }); </script>

### 5.4 自定义动画 ###

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]

<button>动起来</button>
        <div></div>
        <script> $(function() { $("button").click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }) }) </script>

### 5.5 停止动画排队 ###

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

jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

// stop 方法必须写到动画的前面
     $(this).children("ul").stop().slideToggle();

**总结**: 每次使用动画之前，先调用 stop() ,在调用动画。

### 5.6 事件切换 ###

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。

hover([over,]out)     // 其中over和out为两个函数

*  over:鼠标移到元素上要触发的函数（相当于mouseenter）
 *  out:鼠标移出元素要触发的函数（相当于mouseleave）
 *  如果只写一个函数，则鼠标经过和离开都会触发它

// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
                $(".nav>li").hover(function() { 
                    // stop 方法必须写到动画的前面
                    $(this).children("ul").stop().slideToggle();
                });
            })

[20200602144321667.JPG_pic_center]: https://img-blog.csdnimg.cn/20200602144321667.JPG#pic_center
[20200602145140593.JPG_pic_center]: https://img-blog.csdnimg.cn/20200602145140593.JPG#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200602145243354.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200602145259738.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200602145552352.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200602150437572.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/2020060215223246.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center