jQuery学习

最新推荐文章于 2024-11-05 22:07:06 发布
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量202 收藏
点赞数
文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulllnzjsjjsbsb/article/details/126231331
版权

1. jQuery 概述

1.1 JavaScript 库

javaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多定义好的功能了。

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

1.2 jQuery的优点

  • 轻量级。核心文件才几十kb,不会影响页面加载速度

  • 跨浏览器兼容。甚至兼容了现在主流的浏览器

  • 链式编程，隐士迭代

  • 对事件，样式，动画支持，大大简化了DOM操作

  • 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单，日期控件，轮播图等。

  • 免费，开源

1.3.1 jQuery的入口函数

​

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

​​

$(document).ready(function (){ ...//此处是DOM加载完成时的入口 }）；

​​>

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成。jQuery帮我们完成了封装。

​​

2. 相当于原生js中的DOMContentLoaded.

​​

3.不用于原生js中的load事件是等页面文档，外部js文件，css文件，图片加载完毕才执行内部代码。

​

1.3.2 jQuery的顶级对象$

  1. $是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都直接使用$。

  2. $是jQuery的顶级对象，相当于原生JavaScript中的window.把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

1.3.3 jQuery对象和DOM对象

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

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

​

* jQuery对象：对象只能使用jQuery方法。本质：通过$把DOM对象则使用原生的JavaScript属性和方法。

​​

* jQuery对象只能使用jQuery方法。 DOM对象则使用JavaScript属性和方法

​

1.3.4jQuery对象和DOM对象

DOM对象和jQuery对象之间是可以想换转换的

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

  1. DOM对象转换为jQuery对象：$(DOM对象)

​

$('div')

​

<body>
<video sric="mov.mp4 muted"> </video>
<script>
    //1. DOM对象转换为jQuery对象
    //(1)我们之间获取视频，得到的就是jQuery对象
    var myvideo=document.querySelector('video');
   // $(myvideo).play();jQuery里面没有play这个方法
    //2.jQuery对象转换为DOM对象
    //myvideo.play();
    $('video')[0].play()
    $('video').get(0).play()
</script>
</body>

  1. jQuery对象转换为DOM对象（两种方式）

​

$('div')[index] //index是索引号

​​

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

​

2. jQuery选择器

2.1 jQuery基础选择器

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

​

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

​

名称用法描述
ID选择器$("#id")获取指定ID的元素
全选选择器$('*')匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,li")获取多个元素
交集选择器$("li.current")交集元素

<body>

<div class="nav">
    我是nav div
</div>
<script>
    $(function(){
        $(".nav")
    })
</script>

</body>

2.2 jQuery层级选择器

名称用法描述
子代选择器$("ul>li");使用>获取亲儿子层级的元素；注意，并不会获取孙级的元素
后代选择器$("ul li")使用空格，代表后代选择器，获取ul下的所有li标签，包括孙子等

隐式迭代

​

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

​

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作，方便我们调用。

2.3 jQuery筛选选择器

语法用法描述
:first$('li:first')获取第一li元素
:last$('li:last')获取最后li元素
:eq(index)$("li:eq(2)")获取到li元素中，选择索引号为2的元素，索引号index从0开始
:odd$("li:odd")获取到li元素中，选择索引号为奇数的元素
:even$("li:even")获取到li元素中，选择索引号为偶数的元素

<script> $(function(){ $("ul li:first").css("color","red") $("ul li:eq(2)").css("color","blue") $("ul li:odd").css("color","pink") }) </script>

2.3.1 jQuery筛选方法

语法用法说明
parent$("li").parent();查找父级
children(selector)$("ul").children("li");相当于$("ul>li"),最近一级，亲儿子
find(selector)$("ul").find("li");相当于$("ul li"),后代选择器
siblings(selector)$(".first").siblings("li");查找兄弟节点，不包括自己本身
nextAll([expr])$(".first").nexAll("li");查找当前元素之后所有的同辈元素
prevtAll([expr])$(".last").prevtAll("li");查找当前元素之前所有的同辈元素
hasClass(class)$('div').hasClass("protected");检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)$("li").eq(2);相当于$("li:eq(2)"),index从0开始

2.3.2 jQuery里面的排他思想

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

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

3. jQuery样式操作

3.1 操作CSS方法

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

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

​

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

​

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

​

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

​

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

​

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

​

3.2 设置类样式方法

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

  1. 添加类

​

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

​

  1. 移除类

​

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

​

  1. 切换类

​

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

​

3.2.1 类操作于className区别

  • 原生JS中className会覆盖原宿原先里面的类名

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

4. jQuery效果

  1. 显示隐藏

  • show()

  • hide()

  • toggle()

  1. 滑动

  • slideDown()

  • slideUp()

  • slideToggle()

  1. 淡入淡出

  • fadeIn()

  • fadeOut()

  • fadeToggle()

  • fadeTo()

  1. 自定义动画

  • animate()

显示隐藏效果

显示

  1. 显示语法规范

​

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

​

  1. 显示参数

  • 参数可以省略，无动画直接显示。

  • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时常的毫秒效果。

  • easing:(Optional)用来指定切换效果,默认是"swing",可用参数是"linear"

  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次

隐藏

  1. 隐藏语法规范

​

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

​

  1. 隐藏参数

  • 参数可以省略，无动画直接显示。

  • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时常的毫秒效果。

  • easing:(Optional)用来指定切换效果,默认是"swing",可用参数是"linear"

  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次

淡入淡出效果

淡入

  1. 淡如效果语法规范

​

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

​

  1. 隐藏参数

  • 参数可以省略，无动画直接显示。

  • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时常的毫秒效果。

  • easing:(Optional)用来指定切换效果,默认是"swing",可用参数是"linear"

  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次

淡出

  1. 淡出效果语法规范

​

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

​

  1. 淡出效果参数

  • 参数可以省略，无动画直接显示。

  • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时常的毫秒效果。

  • oeasing:(Optional)用来指定切换效果,默认是"swing",可用参数是"linear"

  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次

淡入淡出效果

  1. 淡入淡出切换效果

​

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

​

  1. 淡出效果参数

  • 参数可以省略，无动画直接显示。

  • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时常的毫秒效果。

  • easing:(Optional)用来指定切换效果,默认是"swing",可用参数是"linear"

  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次

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

​

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

​

  1. 效果参数

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

  • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时常的毫秒效果。

  • easing:(Optional)用来指定切换效果,默认是"swing",可用参数是"linear"

  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次

自定义动画animate

  1. 语法：

​

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

​

  1. 参数

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

  • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时常的毫秒效果。

  • easing:(Optional)用来指定切换效果,默认是"swing",可用参数是"linear"

  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次

5. jQuery属性操作

设置或获取元素固有属性 prop()

  1. 获取属性值语法

​

prop("属性值“)

​

  1. 设置属性语法

​

prop("属性“，”属性值“)

​

设置或获取元素自定义属性值 attr()

  • 用户自己给元素添加的属性，我们称为自定义属性。比如给div添加"index=1"

  1. 获取属性语法

​

attr("属性")//类似原生getAttribute()

​

  1. 设置属性语法

​

attr("属性","属性值")//类似原生setAttribute

​

数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM结构。一旦页面刷新，之前存放的数据都将被移除。

  1. 附加数据语法

​

data("name","value")//向被选元素附加数据

​

  1. 获取数据语法

​

data("name")//向被选元素获取数据

​

同时，还可以读取HTML5自定义属性 data-index,得到的是数字型。

jQuery内容文本值

主要针对元素的内容还有表单的值得操作

  1. 普通元素内容html()(相当于原生inner HTML)

​

html()//获取元素的内容

​​

htnl("内容")//设置元素的内容

​

  1. 普通元素文本内容text() (相当于原生 innerText)

jQuery元素操作

  • 主要是遍历。创建，添加，删除元素操作

遍历元素

jQuery隐式迭代是同一类元素做了同样的的操作。如果想要给同一类元素做不同的操作，就需要遍历。

语法1：

​

$("div").each(function(index,domEle) {xxx;})

​

  • each()方法遍历匹配的每一个元素。主要用DOM处理。

  • 里面的回调函数有两个参数：index是每一个元素的索引号；demEle是每个DOM元素对象，不是jquery对象。

6. jQuery事件注册

语法：

​

element.事件(function () {})

​​

$("div").click(function(){事件处理程序})

​

其他事件和原生事件基本一致

比如mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等。

jQuery事件处理

事件处理 on（）绑定事件

  • on()方法在匹配元素上绑定一个或多个事件的事件处理函数

  • 语法：

​

element.on(events,[selector],fn)

​

  1. events:一个或多个用空格分隔的事件类型，如“click"或"keydown".

  2. selector:元素的子元素选择器

  3. fn：回调函数：即绑定在元素身上的侦听函数。

​

on()方式优势1

​

  • 可以绑定多个事件，多个处理事件处理程序。

$("div").on({

mouseover:function(){},

mouseout:function(){},

click:function(){}

});

$("div").on("mouseover mouseout",function (){

$(this).toggleClass("current")

});

​

on()方法优势2：

​

  • 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委托给父元素。

​

on()方法优势3

​

  • 动态创建元素，click()没有方法绑定事件，on()可以给动态生成的元素绑定事件。

事件处理 off()解绑事件

  • off()方法可以移除通过on()方法添加的事件处理函数

​

$("p").off()//解绑所有事件处理程序

​​

$("p").off("click")//解绑p元素上面的点击事件，后面的foo是侦听函数名

​​

$("ul").off("cclick","li")//解绑事件委托

​

  • ​
    如果有的事件只想触发一次，可以使用one()来解绑事件
    ​

自动触发事件 trigger()

  • 有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件

​

element.click()//第一种简写形式

​​

element.trigger("type")//第二种自动触发模式

​​

$("p").on("click",function() { alert("hi~"); }); $("p").trigger("click");//此时自动触发点击事件，不需要鼠标点击

​​

element.triggerHandler(type)

​

jQuery事件对象

  • 事件被触发，就会有事件对象的产生

​

element.on(events,[selector],function(event){})

​

  • 阻止默认行为：event.preventDefault()或者return false

  • 阻止冒泡：event.stopPropagation()

jQuery其他方法

jQuery 对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend() 方法

语法：

​

$.extend([deep],target,object1,[objectN])

​

  1. deep:如果设为true为深拷贝，默认为false浅拷贝。

  2. target:要拷贝的目标对象。

  3. object1:待拷贝到第一个对象的对象。

  4. objectN:待拷贝到第N个对象的对象。

  5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

jQuery 多库共存

  1. 问题概述

  • jQuery使用$作为标示符，随着jQuery的流行，其他JS库也会用$作为标识符，这样一起使用会引起冲突。

  1. 客观需求

  • 需要一个解决方案，让jQuery和其他的JS库不存在冲突，可以同时存在，这就叫做多库并存。

  1. jQuery解决方案

    1. 把里面的$符号统一改为jQuery.比如JQuery("div")

    1. jQuery变量规定新的名称：$.noConflict() var xx=$.noConflict();

jQuery 插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成。

注意：这些插件也是依赖于jQuery来完成的，所以必须要引入jQuery文件，因此也称为jQuery插件。

jQuery插件常用的网站

  1. jQuery插件库：jQuery插件库-收集最全最新最好的jQuery插件

  2. jQuery之家：http://www.htnleaf.com/

jQuery插件使用步骤

  1. 引入相关文件。（jQuery文件和插件文件）

  2. 复制相关html,css,js(调用插件)

图片懒加载

  • 图片使用延迟加载在可提高网页下载速度，也能帮助减轻服务器负载

  • 当我们页面滑动到可视区域，再显示图片。

  • 我们使用jQuery插件库EasyLazyload.注意，此时的js引入文件和js调用必须写到DOM元素最后面。

全屏滚动

gitHub:https://github.com/alvarotrigo/fullPage.ls

7. JQuery 尺寸，位置，操作

jQuery尺寸

语法用法
width() / height()取得匹配元素宽度和高度值 只算width/height
innerWidth() / innerHeight()取得匹配元素宽度和高度值 包含padding
outerWidth() / outerHeight()取得匹配元素宽度和高度值 包含padding和border
outerWidth(true) / outerHeight (true)取得匹配元素宽度和高度值 包含padding ,border,margin

  • 以上参数为空，则是获取相应值，返回的是数字型。

  • 如果参数为数字，则是修改相应值。

  • 参数可以不必写单位。

jQuery 位置

位置这主要有三个：offset(), position() ,scrollTop() / scrollLeft()

  • offset（）设置或获取元素偏移

  1. offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

  2. 该方法有2个属性left,top.offset().top用于获取距离文档底部的距离，offset().left用于获取距离文档左侧的距离。

  3. 可以设置元素的偏移：offset({top:10,left:30})

  • position()获取元素偏移

  1. position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为主。

  • scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

  1. scrollTop()方法设置或返回被选元素被卷去的头部

案例：带有动画的返回顶部

  • 核心原理：使用animate动画返回顶部。

  • animate动画函数里面有个scrollTop属性，可以设置位置。

  • 但是是元素做动画，因此$("body,html").animate({scrollTop:0})

Rui 晖
关注
JQuery学习网站
03-16
**jQuery学习网站** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。由于其简洁的语法和强大的功能，jQuery成为了前端开发中的首选工具之一。 这篇博文链接...
jQuery学习笔记
06-23
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
jQuery之从零开始的学习（完整）
msyqmsyq的博客
08-24 1万+
jQuery入门 一、简介 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an...
jQuery 学习
angel_791的博客
07-10 1683
jQuery
jQuery学习笔记总结
早安，朝气蓬勃的你
05-13 1750
jQuery 1、jQuery下载：https://www.jq22.com/jquery-info122#google_vignette 基本使用：下载解压jar包（备用），IDEA或eclipse构建一个工程，把jQuery文件复制到工程目录下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnAZpDhU-1652445213644)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 10万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
JQuery学习总结
qq_38176216的博客
11-29 1872
一、安装Jquery 1.下载Jquery 下载地址：https://jquery.com/download/ 2.通过CDN(内容分发网络)引用它 百度CDN：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js //可在浏览器中使用$.fn.jquery命令查看当前jQuery使用的版本 二、Jquery语法 1.Jquer是选取HTML元素，并对选取的元素执行某些操作 基础语法： $(selector).action() 实例: $(
jQuery学习心得
前端小胖鼠
11-14 4346
好久没更新博客了，最近除了写轮播图，飞机大战之外，就是学习jQuery了，所以今天就跟大家分享一下jQuery的心得。 由于手头上的jQuery文档是1.8.3的，所以就拿1.8.3来说吧。 说起框架，jQuery应该是最早开始做框架的，jQuery主要是简化了操作DOM的方法，并提供了简单的动画效果。 1、便捷操纵DOM。       在jQuery中，选择DOM就跟css一样，.表示c...
jQuery学习中出现问题整理
weixin_46273011的博客
05-04 1142
1，jQuery通过动态添加的节点，无法绑定事件 解决方法，交给父盒子进行事件委托处理 事件委托的写法 $('父盒子').on('绑定事件类型'，'子盒子'，function(){ console.log(this) //this 指的是子盒子 }) 2 jQuery的入口函数 入口函数的作用，一般情况下我们在dom节点编写完成后，写在下面，因此一般都用不到入口函数。但是如果把js的操作写在head部分，dom节点没有加载完毕，因此js的操作无法执行。又或者我们需要获得网页的图片资源等，但图片
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1398
本文主要介绍有关jQuery的相关知识点
jquery学习资料
03-22
**jQuery学习资料** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得DOM操作、事件处理、动画效果以及Ajax交互变得更加容易。本文将深入探讨jQuery的核心概念和使用方法，帮助你...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 432
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 233
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 486
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 168
vxe-grid新增空行，并且定位到空行位置。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 479
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
jQuery学习资源大全
《jQuery攻略》是由印度作者哈瓦尼编写的，这是一本针对JavaScript库jQuery的深入学习指南。jQuery是一个广泛使用的JavaScript框架，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，使得前端开发更为高效。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值