JS中的jQuery库（1）

最新推荐文章于 2024-02-17 18:39:30 发布
最新推荐文章于 2024-02-17 18:39:30 发布
阅读量423 收藏
点赞数 1
文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63048999/article/details/127417127
版权

jQuery的入口函数

<script>
$(function(){})
        $(document).ready(function(){})//等DOM元素加载完之后执行
    </script>
  1. 等DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery已经完成了封装
  2. 相当于原生JS中的DOMContentLoaded
  3. 不同于原生JS中的load事件是等页面文档、外部的JS文件、css文件。图片加载完毕才执行内部代码

jQuery的顶级对象$

  1. $是jquery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常直接用$。
  2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jquery的方法。

jQuery对象和DOM对象

使用原生js获取过来的对象就是DOM对象

使用jQuery获取过来的对象就是jQuery对象

jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式储存）

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

DOM对象和jQuery对象可以互相转换

  1. DOM对象转换为jQuery对象：$(DOM对象)
/方法一
       $('div');
       //方法二
       var thisdiv=document.querySelector('div');
       $(thisdiv);
  1. jQuery对象转换成DOM对象
$('div')[index];
       $('div').get(index) //index是索引号

jQuery样式操作

一．操作css方法

jQuery可以使用css方法来修改简单的元素样式；也可以操作类，修改多个样式。

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

$(this).css(“color”);

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

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

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

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

如果是复合属性则必须使用驼峰命名法，如果值不是数字，则必须加引号

  • 设置类样式方法

作用等同于以前的classList,库操作类样式，注意操作类里面的参数不要加点

  1. 添加类
$("div").addClass("current");
  1. 移除类
$("div").removeClass("current");
  1. 切换类
$("div").toggleClass("current");

类操作与className区别

原生js中className会覆盖元素原先里面的类名

jQuery里面类操作只是对指定类进行操作，不影响原先的类名

jQuery效果

JQquey中封装了很多效果，最常见的如下：

显示隐藏：

show()   hide()   toggle()

滑动：

slideDown()   slideUp() slideToggle()

淡入淡出：

fadeIn() fadeOut() fadeToggle() fadeTo()

自定义动画：

animate()

显示隐藏效果

  1. 显示语法规范

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

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

  1. 显示语法规范

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

  1. 隐藏参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

  1. 切换语法规范

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

  1. 切换参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）Fn：回调函数，在动画完成时执行的函数，每个元素执行一次

​
<!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="./jquery/jquery-3.5.1.min.js">
    </script>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
<script>
    $(function(){
        $("button").eq(0).click(function(){
                $("div").show("fast");
        })
        $("button").eq(1).click(function(){
            $("div").hide("fast");
        })
        $("button").eq(2).click(function(){
            $("div").toggle("fast");
        })
   } )
</script>
</body>
</html>

​

1.上滑动语法规范

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

2.滑动参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

1.下滑动语法规范

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

2.滑动参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

1.切换滑动语法规范

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

2.滑动参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

<!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="./jquery/jquery-3.5.1.min.js">
    </script>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
<script>
    $(function(){
        $("button").eq(0).click(function(){
                $("div").slideDown("fast");
        })
        $("button").eq(1).click(function(){
            $("div").slideUp("fast");
        })
        $("button").eq(2).click(function(){
            $("div").slideToggle("fast");
        })
   } )
</script>
</body>
</html>

事件切换

Hover([over,]out)

  1. over:鼠标移动到元素上要触发的元素（相当于mouseover）
  2. out:鼠标移出元素要触发的函数（相当于mouseleave）

stop()

  1. stop()方法用于停止动画或效果
  2. 注：stop()写到动画或效果的前面，相当于停止结束上一次的动画
<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{ 
            border:1px solid black;
            display: block;
            float: left;
           text-align: center;
           list-style: none;
          
           width: 40px;
        }
        .hide{
            list-style: none;
             display: none; 
        }
    </style>
    <script src="./jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul class="hide">
                <Li>私信</Li>
                <Li>评论</Li>
                <Li>@</Li>
            </ul>
        </li>
    </ul>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul class="hide">
                <Li>私信</Li>
                <Li>评论</Li>
                <Li>@</Li>
            </ul>
        </li>
    </ul>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul class="hide">
                <Li>私信</Li>
                <Li>评论</Li>
                <Li>@</Li>
            </ul>
        </li>
    </ul>
    <script>
        $(function(){
           /*  $(".nav>li").mouseover(function(){
                $(this).children("ul").show();
            });
        
            $(".nav>li").mouseout(function(){
                $(this).children("ul").hide();
            }) */
            $(".nav>li").hover(function(){
                $(this).children("ul").stop().slideToggle();
            
            })})
    </script>
</body>
</html>

淡入淡出效果

1.淡入方式调整到指定的不透明度

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

2.效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

1.淡出方式调整到指定的不透明度

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

2.效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

1.切换方式调整到指定的不透明度

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

2.效果参数

（1）参数都可以省略。。

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

1.渐进方式调整到指定的不透明度

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

2.效果参数

（1）opacity透明度必须写，取值1~0之间。

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

自定义动画animate

  1. 语法

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

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

（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or””fast）或表示动画时长的毫秒数值（如：1000）。

（3）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<!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="./jquery/jquery-3.5.1.min.js">
    </script>
    <style>
        div{
            height: 100px;
            width: 100px;
            background-color: red;position: relative;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div></div>
    <script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left:200,
                top:300,
            opacity:0.5},500);
            }
            )
        })
    </script>
</body>
</html>

神的恩惠。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery.params.js页面带参数跳转插件
10-31
jquery.params.js页面带参数跳转插件 http://{domain}?{param}=[]&……
JavaScript:解析params动态路径的传参
程麒阁的博客
09-08 1209
解析params动态路径的传参？vue的动态路由参数解析是如何实现的？params传参风格；resfulAPI
jQuery库入门学习
weixin_45223092的博客
11-15 580
jQuery
jQuery(JS库) | 一文带你掌握jQuery的使用
m0_61933976的博客
01-06 8650
jQuery(JS库) | 一文带你掌握jQuery的使用
JavaScript之jQuery库
qq_54889094的博客
12-14 1423
jQuery
jQuery JavaScript库v3.4.1
10-01
jQuery 是一个JavaScript 库，它有助于简化 JavaScript 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。学习
jQuery JavaScript 库
08-17
jQuery 是一个JavaScript 库，它有助于简化 JavaScript 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。学习
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jQuery：jQuery JavaScript库
02-04
—新浪潮JavaScript贡献指南本着开源软件开发的精神，jQuery始终鼓励社区代码的贡献。 为了帮助您入门，并在开始编写代码之前，请务必仔细阅读以下重要的贡献准则：使用jQuery的环境jQuery还支持Node，浏览器扩展和...
jquery-3.7.1，一个免费的前端JavaScript库
最新发布
02-20
jquery-3.7.1.min.js，压缩文件，更小、执行效率更高，适用于项目产品中使用。 jquery-3.7.1.min.map，源映射文件，可以配合压缩文件进行调试时使用，运行jQuery不需要映射文件，但它可以改善开发人员的调试体验。
[javascript核心-10] 解析params参数的多种方案
技术无止境，人生仍探索。
07-19 1594
前端实现参数解析的多种方式。大前端知识体系与面试宝典，从前端到后端，全栈工程师，成为六边形战士。
【JS】JS中的jQuery库简介及使用方法
萌萌白白的博客
02-17 1346
本文介绍了jQuery的导入、相关语法以及绑定事件
JQ-1 jQuery、库、框架的概念；jQuery（优点与缺点、起源和历史、学习原因；三种安装方式；监听文档加载；函数与对象）；jQuery对象 与 DOM Element的区别+转换
qq_54075517的博客
07-21 266
jQuery、库、框架的概念；jQuery（优点与缺点、起源和历史、学习原因；三种安装方式；监听文档加载；函数与对象）；jQuery对象 与 DOM Element的区别+转换
前端学习之JQ
weixin_53105591的博客
07-17 411
前端学习之jq
原生js快速获取路由param
Mr-yang的随笔
08-16 573
alert(GetQueryString(“参数名1”));alert(GetQueryString(“参数名2”));alert(GetQueryString(“参数名3”));
JS ES6中Arguments和Parameters用法解析
学习记录
09-20 1744
 来源 　　ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本，显著地完善了JS中参数的处理方式。除了其它新特性外，我们还可以使用rest参数、默认值、解构赋值等。 　　本教程中，我们将详细探索arguments和parameters，看看ES6是如果改善升级它们的。 对比 Arguments 和 Parameters 　　通常情况下...
jQuery库的基本使用
weixin_64770583的博客
02-04 654
jQuer，jquery入门
JavaScript--jQuery框架
zhqi9277的博客
04-28 1164
概述：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；
JavaScript的@param注解
热门推荐
seimeii的博客
09-18 1万+
@property name {String} 交互类型 @property params {Object} 附带参数 @property func {Function} 回调函数 /** * 获取事件在列表中的位置 * @param context * @param callback * @private */ _evIndex(event, context, callback) { let index = -1; for (let i = 0; i <= ...
HTML中jQuery库或JavaScript制作轮番图
05-31
使用jQuery库或JavaScript手动编写实现轮播图的步骤如下： 1. 在HTML中添加轮播图的结构。 ```html <img src="image1.jpg" alt="Image 1"> <span class="carousel-control-prev-icon"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值