jQuery入门jQuery API-1

小橙子*

已于 2022-09-16 21:46:44 修改

阅读量198

点赞数

分类专栏：前端文章标签： jquery javascript 前端

于 2022-09-06 22:29:02 首次发布

本文链接：https://blog.csdn.net/m0_62091240/article/details/126735397

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.jQuery 概述

1.1 JavaScript 库

仓库:可以把很多东西放这个仓库里面。找东西只需要到仓库里面查找到就可以了。

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

比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。

常见的JavaScript库：

jQuery
Prototype
YUI
Dojo
Ext JS
移动前端的zepto

这些库都是对原生JavaScript的封装,内部都是用JavaScript实现的,我们主要学习的是jQuery。

1.2 jQuery 的概念

jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码,
做更多的事情。
j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里
面的功能。
jQuery封装了JavaScript 常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

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

2.1 jQuery 的下载

官方网址：https://jquery.com/

版本:
●1x :兼容IE 678等低版本浏览器，官网不再更新
●2x :不兼容IE 678等低版本浏览器,官网不再更新
●3x:不兼容IE 678等低版本浏览器，是官方主要更新维护的版本

各个版本的下载：https://code.jquery.com/

2.2 jQuery 的使用步骤

1.引入 jquery文件

2.使用即可

2.3 jQuery 的入口函数

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

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

1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentl oaded,
3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
4.更推荐使用第一种方式。

2.4 jQuery 的顶级对象$

2.5 jQuery 对象

1.用原生JS获取来的对象就是DOM对象

2.jQuery方法获取的元素就是jQuery对象。

3.jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储).

2.5 jQuery 对象和 DOM 对象

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

DOM对象转换为jQuery对象: $(DOM对象)

$('div')

2.jQuery对象转换为 DOM 对象

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

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

<!--muted 使用谷歌添加这个属性会静音自动播放 -->
    <video src="mov.mp4" muted></video>
    <script>
        //1 DOM对象转换为 jQuery对象
        //(1)我们直接获取视频，得到就是jQuery对象
        $('video');
        //(2)我们已经使用了原生js 获取过来 DOM对象
        var myvideo = document.querySelector('video');
        $(myVideo);
        //2 jQuery对象转换为DOM对象
        //myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>

jQuery API

1 jQuery 选择器

1.1 jQuery 基础选择器

原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准。

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

1.2 jQuery 层级选择器

jQuery设置样式

$("div").css("属性","值")

1.3 隐式迭代

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

 <script>
        // 1. 获取四个div元素
        console.log($("div"));
        // 2. 给四个div设置背景颜色
        $("div").css("background", "orange");
        //3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法: 
        $("ul li").css("color", "red");
    </script>

1.4 jQuery 筛选选择器

1.5 jQuery 筛选方法（重点）

重点记住：parent()、children()、find()、sibling()、eq()

 <script>
        // 注意一下都是方法 带括号
        $(function() {
        // 1.兄弟元素sibling 除了自身元素之外的所有亲兄弟
        $("ol .item").siblings("li").css("color", "red");
        // 2. 第n个元素
        var index = 2;
        //(1) 可以利用选择器的方式选择
        $("ul li:eq(2)").css("color", "red");
        $("ul li:eq(" + index + ")").css("color", "blue");
        //(2) 可以利用选择方法的方式选择 更推荐这种写法
        //$("ul li").eq(2).css("color","blue");
        $("ul li").eq(index).css("color", "blue");
        // 3. 判断是否有某个类名
        console.log($("div:first").hasClass("current"));
        console.log($("div:last").hasClass("current"));
        })
    </script>

1.6 jQuery 里面的排他思想

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

<script>
	$(function() {
        //1. 隐式迭代 给所有的按钮都绑定了点击事件
        $("button").click(function() {
        //2. 当前的元素变化背景颜色
        $(this).css("background", "orange");
        //3. 其余的兄弟去掉背景颜色 隐式迭代
        $(this).siblings("button").css("background", "");
        });
     })
 </script>

1.7 链式编程

链式编程是为了节省代码量，看起来更优雅

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

使用链式编程一定注意是哪个对象执行样式

2 jQuery 样式操作

2.1 操作css方法

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

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

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

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

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

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

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

2.2 设置类样式方法

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

1 添加类

$("div").addClass("current");

2 移除类

$("div").removeClass("current");

3 切换类

$("div").toggleClass("c")

2.3 类操作与className区别

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

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

3 jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

3.1 显示隐藏效果

1 显示语法规范

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

2 显示参数

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

1 隐藏语法规范

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

2 隐藏参数

1 切换语法规范

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

2 切换参数

3.2 滑动效果

3.3 事件切换

hover([over,]out)

( 1 ) over鼠标移到元素上要触发的函数(相当于mouseenter )
( 2 ) out:鼠标移出元素要触发的函数(相当于mouseleave )

3.4 动画队列及其停止排队方法

1 动画或效果队列

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

2 停止排队

stop()

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

3.5 淡入淡出效果

1 淡入效果语法规范

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

2 参数

1 淡出效果语法规范

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

2 参数

1 淡入淡出效果语法规范

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

2 参数

3.6 自定义动画 animate

1 语法

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

2 参数

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

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