jQuery 常用API（1）

jQuery 常用API

- 1.jQuery 介绍和引入（JavaScript +Query）
- 2.dom对象和jQuery对象
- 3.jQuery选择器
- 4.jQuery 样式操作
- 5. jQuery 效果

1.jQuery 介绍和引入（JavaScript +Query）

jQuery是一个快速、简洁的JavaScript库。JavaScript是一个封装好的特定的集合（方法和函数）。
官网：https://jquery.com/
在这里插入图片描述

在这里插入图片描述
打开复制全部内容，新建jquery.js文件，复制到这个文件里面。

在html文件中引入js文件
在这里插入图片描述

2.dom对象和jQuery对象

1.DOM 对象：用原生js获取过来的对象就是DOM对象

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

jQuery 对象：用jQuery方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装

  $('div');

2.Dom对象转jQuery对象

 var myvideo = document.querySelector('video');
 $(myvideo);

3.jQuery 对象转Dom对象

  //方法一
 $('video')[0].play()
 //方法二
 $('video').get(0).play()

3.jQuery选择器

jQuery基础选择器

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

在这里插入图片描述

2.jQuery 层级选择器
在这里插入图片描述
3.jQuery 筛选选择器

4.jQuery筛选方法（☆☆☆）

5.jQuery里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

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

7.链式编程

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

案例一：新浪下拉菜单
在这里插入图片描述

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>

</body>

</html>

 <script>
        $(".nav>li").mouseenter(function () {
            // $(this).find("ul").show();
            $(this).children("ul").show();
        });
        $(".nav>li").mouseout(function () {
            //$(this).find("ul").hide();
            $(this).children("ul").hide();
        })
    </script>

4.jQuery 样式操作

1.操作 css 方法

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

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

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

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

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({ 
"color":"white",
"font-size":"20px"
});

2. 设置类样式方法
作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

添加类

$(“div”).addClass(''current'');

移除类

$(“div”).removeClass(''current'');

切换类

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

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

案例二：Tab栏切换
在这里插入图片描述
① 点击上部的li，当前li 添加current类，其余兄弟移除类。
② 点击的同时，得到当前li 的索引号
③ 让下部里面相应索引号的item显示，其余的item隐藏


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
</body>

</html>

<script>
        $(function() {
            // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $(".tab_list li").click(function() {
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时，得到当前li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })
    </script>

5. jQuery 效果

常见的动画
1.显示效果

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

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

2.隐藏效果

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

3.切换效果

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

4.下滑效果

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

5.上滑效果

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

6.滑动切换效果

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

7.事件切换

hover([over,]out)

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

8.动画队列及其停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队方法

stop()

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

9.淡入效果

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

10.淡出效果

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

11.淡入淡出切换效果

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

12.淡入淡出渐进方式

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

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

13.自定义动画 animate

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

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

案例二：王者荣耀手风琴效果
在这里插入图片描述
① 鼠标经过某个小li 有两步操作：
② 当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入
③ 其余兄弟小li宽度变为69px，小图片淡入，大图片淡出


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

</head>

<body>
    <script src="js/jquery.min.js"></script>
    <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>

 <script type="text/javascript">
        $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>

注意区分以下两种写法

 $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().find(".big").stop().fadeIn();

此时的对象是点击的li里面的包含small类的img，然后再找其孩子里面包含big类的img，所以是错误的。

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

此时的对象是点击的li里面的包含small类的img，然后再找其兄弟包含big类的img。所以链式编程要注意当前对象是谁。

jQuery 常用API（1）

jQuery 常用API

1.jQuery 介绍和引入（JavaScript +Query）

2.dom对象和jQuery对象

3.jQuery选择器

4.jQuery 样式操作

5. jQuery 效果

jQuery 获取元素的高度，前端开发面试

jQuery的select框无法设置option为selected

echarts柱状图自动轮播

Echarts--markPoint属性

Echarts实现数据可视化（入门篇）

当vue遇到老的项目启动和打包速度慢怎么办？ webpack-低版版本-编译启动速度和打包速度优化方案

一文搞懂Vue3中如何使用ref获取元素节点？

vue中使用Echarts(超级详细！一步一步教，没有学不会的)

html css简单登录注册及密码重置页面

HTML5 CSS3 诱人的实例：canvas 模拟实现电子彩票刮刮乐

前端哥

jQuery 获取元素的高度，前端开发面试

jQuery的select框无法设置option为selected

echarts柱状图自动轮播

Echarts--markPoint属性

2023年5月实时获取地图边界数据方法，省市区县街道多级联动【附实时geoJson数据下载】

Echarts实现数据可视化（入门篇）

当vue遇到老的项目启动和打包速度慢怎么办？ webpack-低版版本-编译启动速度和打包速度优化方案

推荐一款惊艳的Vue瀑布流组件：Vue-Waterfall-Easy

一文搞懂Vue3中如何使用ref获取元素节点？

vue中使用Echarts(超级详细！一步一步教，没有学不会的)

1
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

2
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

3
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

4
jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

5
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

6
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

7
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

8
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

9
UE4.27支持HTML5

2024-05-07 13:05:261000

10
前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000