jQuery学习看这一篇

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量120 收藏
点赞数
文章标签： jquery javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43621712/article/details/126025300
版权

1.jQuery是什么

一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。主要学习jQuery封装好的功能方法，这些方法叫做API

2.引入方式

1.下载到本地

  • 获取源文件
  • 引入页面，注意顺序，引用和=后才能使用
  • 如： < script src=“./jquery-3.3.1.min.js” />

2.CDN引入

  • 找到可靠的CDN提供商，如：https://www.bootcdn.cn/
  • 复制CDN地址，粘贴到页面中
  • < script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js”>

注意：

jquery.js 和 jquery.min.js 的区别：

jquery.js是完整的未压缩的jQuery库，文件比较大，一般用于阅读学习源码或修改源码，一般不用于线上项目。

jquery.min.js是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。这个版本一般用于网站引用使用，减小文件体积，降低网站流量，提升访问速度等。

3.jQuery选择器

jQ提供了两个变量 $ 和jQuery给开发者使用，一般情况下使用 $ 变量即可；如果遇见其它库提供了 $ 变量，未防止冲突，可以使用 jQuery 变量。
用法：$(selector/fn)
参数：

  • selector: 选择内容
  • fn： 函数

入口函数：
以函数作为参数时，作用相当于页面的入口函数，当页面内容加载晚会层厚执行接受的函数。
与window.onload的区别：

  • 执行时间
    1.window.onload必须等到页面内包括图片的索引元素加载完毕后才能执行
    $(function(){})是DOM结构绘制完毕后就执行，不必等到加载完毕，因此执行时间比上面的要快。

  • 编写个数
    1.window.onload只能设定一个
    2.jQ入口函数可以同时编写多个，并且都可以得到执行。

jQuery的基本选择器

符号 说明
$(‘#demo’) 选择id为demo的元素
$(‘.demo’) 选择 class 为 demo 的所有元素
$(‘div’) 选择所有 div 标签元素
$(‘*‘) 选择所有标签元素
$(‘.arr.arr-left’) 交集选择器，选择同时具有 arr 和 arr-left 类名的元素
$(‘.arr, .arr-left’) 并集选择器，选择具有 arr 或 arr-left 类名的元素

jQuery 的其他选择器
1. 层级选择器

符号 说明
空格 后代选择器
> 子代选择器
+ 紧邻选择器
~ 兄弟选择器

2. 属性选择器

符号 说明
$(‘a[href]’) 具有 href 属性的 a 标签
$(‘a[href=‘baidu’]’) href 属性为’baidu’的 a 标签
$(‘a[href!=‘baidu’]’) href 属性不为’baidu’的 a 标签,包括不具有 href 属性的 a 标签
$(‘a[href^=‘www’]’) href 属性以’www’开头的 a 标签
$(‘a[href $=‘cn’]’) href 属性以’cn’结尾的 a 标签
$(a[href*=‘i’]) href 属性包含’i’的 a 标签
$(‘a[href][title=‘内容’]’) 具有 href 属性且 title 属性为’内容’的 a 标签

3. 基本筛选选择器

符号 说明(index从0开始)
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:odd 匹配所有索引值为奇数的元素
:even 匹配所有索引值为偶数的元素
:first 获取匹配的第一个元素
:last 获取匹配的最后一个元素 
<!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>
</head>
<p>我是p标签<
最低0.47元/天 解锁文章
Bubble oo..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery中.off()，on()详解集合
boy火巨的博客
12-28 1682
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。   off()函数主要用于解除由on()函数绑定的事件处理函数。 该函数属于jQuery对象(实例)。 语法 jQuery 1.7 新增该函数。其主要有以下两种形式的用法： 用法一： jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二： jQu...
jQuery的on()、one()与off()事件方法
世界和我们都不该止步于此
04-18 1079
目录 一.on()方法 1.使用on()方法 2.on()方法事件事件委托 3.【重点】使用on()方法给未来要创建的元素绑定事件 二.off()方法 三.one()方法 四.自动触发事件 五.阻止默认行为以及冒泡 一.on()方法 1.使用on()方法 相信我们都不陌生jQuery的on()方法，它可以在匹配元素上绑定一个或者多个事件处理函数，这也是on()方法的一个亮点 $(element).on(events[,selector],callback) //events.
jQuery on()与off()需要同时使用吗（$().off().on()问题）
Shift2092的博客
09-10 5643
问：发现许多前端代码用jQuery处理绑定事件的时候，没有直接用on()写绑定事件(如：$(#id).on("click",function(){})); 而是先用off()来解绑此对象的事件(如：$(#id).off("click").on("click",function(){}))。 自己写了个demo发现两种方法没有什么区别，达到的效果相同。 我知道on()绑定了事件不会自动解绑该对象的事...
jQuery学习心得
热门推荐
小疯的代码健身房
01-02 1万+
我第一次接触jquery是在大二下学期的时候，当时我们课程在讲web基础，也就是html css和js那些，我在慕课网（一个不错的在线视频学习网站，现在也在用）上提前学习了jQuery和jQuery-UI。当时只是为了腾出点时间学习更多东西，想走在大多数人前面，时间久了，等到现在上这门课才真正领略到jquery（下面简称JQ）这个前端框架的魅力。 JQ是一个轻量级的js库，它的宗旨是write
学习jQuery这一篇就够了
02-17
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了网页中的 DOM 操作、事件处理、动画制作和 AJAX 交互。它的核心理念是“write less, do more”，即通过简洁的代码实现丰富的功能。jQuery 的出现降低了开发者...
jQuery学习心得总结(必看篇)
10-22
这篇文章主要总结了学习jQuery的一些关键知识点。 首先，jQuery对象是通过jQuery包装DOM对象后生成的，它拥有jQuery特有的方法，不能直接使用DOM对象的方法。在jQuery中，通常用$符号来表示jQuery对象。jQuery对象...
jQuery 学习入门篇附实例代码
10-29
本篇文章将深入探讨jQuery的学习入门，通过实例代码帮助初学者更好地理解其基本概念和用法。 首先，理解jQuery的核心是$(document).ready()函数。这个函数确保在执行任何代码之前，DOM（文档对象模型）已经完全加载...
JQuery学习总结【一】
11-28
【jQuery学习总结】 jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。本篇文章将概述jQuery的基础知识，包括它的核心概念、文件结构、常见操作以及一些实用的功能。 ### 1. ...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 166
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 84
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 178
【代码】前端javascript中的排序算法之插入排序。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 196
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue3 + element-plus 表格行内编辑，如何实现表单校验？
yyXieDaiMa的博客
07-09 373
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 84
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 302
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 127
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
什么是vue的计算属性
weixin_56187723的博客
07-12 99
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
jQuery完整版学习资料.pdf
11-23
。。。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值