前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JQuery第四节

JQuery第四节

作者头像
用户3461357
发布于 2019-08-02 07:02:40
发布于 2019-08-02 07:02:40
39800
代码可运行
举报
文章被收录于专栏:web前端基地web前端基地
运行总次数:0
代码可运行

jQuery补充知识点

隐式迭代

基本概念

隐式迭代:jQuery在设置属性时会自动的遍历,因此我们不需要再遍历

  1. jQuery在执行设置性操作时,会给所有的元素都设置上相同的值。
  2. jQuery在执行获取性操作时,只会返回第一个元素对应的值。
  3. 如果想要给每一个元素都设置不同的值,需要手动进行遍历jQuery对象。

each方法

遍历jQuery对象集合,为每个匹配的元素执行一个函数

语法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素, 在function中this也表示当前元素。
$(selector).each(function(index,element){});

【案例:不同的透明度.html】

链式编程

链式编程的原理:设置性操作会返回一个jQuery对象,因此可以继续调用jQuery的方法。

  1. 设置操作的时候,可以使用链式编程。
  2. 获取操作的时候,无法使用链式编程。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。

【案例:五角星评分案例.html】

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
prevAll();//获取前面所有的兄弟元素
nextAll();//获取后面所有的兄弟元素
siblings();//获取所有的兄弟元素
prev();//获取前一个兄弟
next();//获取后一个兄弟。

多库共存

jQuery使用$作为标示符,但是如果与其他框架中的$冲突时,jQuery可以释放$符的控制权.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

jQuery插件

插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。

使用插件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1. 引入jQuery文件
2. 引入插件(如果有用到css的话,需要引入css)
3. 使用插件

常用插件的使用

  • jquery.color.js的使用
    • https://github.com/jquery/jquery-color
  • jquery.lazyload.js的使用
    • https://github.com/tuupola/jquery_lazyload
  • jquery.ui插件的使用

制作jQuery插件

制作jQuery插件的核心思想:给jQuery的原型增加方法即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$.fn.pluginName = function(){}
  • 制作基本的jQuery插件
  • 制作手风琴插件
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端基地 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jquery第一次课的案例教程
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。 (animate.js、common.js)
用户9184480
2024/12/19
960
掌握jQuery插件开发 这篇文章就够了 转
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。 进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用? 第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,jQuery插件的使用方式就是jQuery对象方法的调用。 我们先看个例子:$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素,返回一个a元素的jQuery对象,这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢?其实jQuery内部定义了一个jQuery.fn对象,查看jQuery源码可以发现jQuery.fn=jQuery.prototype,也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的,然后jQuery对象就可以通过原型继承这些方法。 基础版jQuery插件 知道了上面这些知识,我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件: $.fn.changeStyle = function(colorStr){          this.css("color",colorStr); } 然后按下面的方式来使用插件: $("p").changeStyle("red"); 插件调用的时候,插件内部的this就是当前调用插件的jQuery对象,这样的话每个使用$()方法选择的标签,在调用changeStyle()插件时都会使用css()方法重设color样式。 满足链式调用的jQuery插件 链式调用时jQuery的一大特色,一个通用的插件应该遵循jQuery风格,满足链式调用要求。实现链式调用的方式也很简单: $.fn.changeStyle = function(colorStr){          this.css("color",colorStr);          return this; } 然后使用的时候就可以链式调用其他方法了: $("p").changeStyle("red").addClass("red-color"); 实现链式调用的关键点就一行代码return this,插件中加了这行代码,那么在插件执行完之后,就会把当前的jQuery对象返回,然后就可以在插件方法后面继续调用其它jQuery方法。 防止$符号污染的jQuery插件 有很多js库都会使用$符号,虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权,但是如果定义插件的时候,使用$.fn对象来定义的,那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况,我们可以使用立即执行函数通过传参的方式封装插件。形式如下: (function($){      $.fn.changeStyle = function(colorStr){          this.css("color",colorStr);                  return this;      } })(jQuery); 因为使用了立即执行函数,所以此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。 可以接受参数的jQuery插件 继续上面的例子,假如我还想为这个插件添加一个设置标签元素内容文字大小的功能,那么我可以这么来实现: (function($){      $.fn.changeStyle = function(colorStr,fontSize){          this.css("color",colorStr).css("fontSize",fontSize+"px");                  return this;      } })
tianyawhl
2019/04/04
4250
掌握jQuery插件开发,这篇文章就够了
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以
用户1097444
2022/06/29
3050
掌握jQuery插件开发,这篇文章就够了
jQuery基础--jQuery特殊属性操作
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
eadela
2019/09/29
2.2K0
06-老马jQuery教程-jQuery高级
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQuery.fn === jQuery.pro
老马
2018/01/05
2.1K0
JQuery第一节
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
用户3461357
2019/08/02
1.6K0
jQuery学习笔记
jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本
用户2700375
2022/06/09
1.3K0
jQuery学习笔记
从零开始学 Web 之 jQuery(二)获取和操作元素的属性
DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。
Daotin
2018/08/31
1.8K0
jQuery事件对象
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。
Qwe7
2022/04/17
1.5K0
第80天:jQuery插件使用
jQuery其他补充 + 4.1 链式编程: end()补充 * 补充五角星 评论案例 * 第一步:鼠标移入,当前五角星和前面的五角星变实体。后面的变空心五角星 * 第二步:鼠标点击的时候,为当前元素添加clicked类,其他的移除clicked类 * 第三步:当鼠标移开整个评分控件的时候,把clicked的之前的五角星显示实心
半指温柔乐
2018/09/11
6670
JQuery第三节
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
用户3461357
2019/08/02
8110
jQuery基础--插件
官方API:http://api.jqueryui.com/category/all/
eadela
2019/09/29
3.5K0
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4K0
jQuery
当父类的对象引用没有指向父类的对象,而是指向了子类的对象时,调用方法或访问变量时会怎样呢?
yaoyaoah
2020/04/09
1.1K0
前端之jQuery
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
GH
2019/12/16
5K0
06-老马jQuery教程-jQuery高级
根据用户需求,总结文章内容,提供摘要。
老马
2017/12/27
1.8K0
JQuery分析及实现part4之DOM操作模块功能及实现
JQuery模块分析及其实现第四部分属性部分功能及实现,接第三部分! appendTo 方法 功能:将结果集中的元素 追加到指定的 dom 元素上. 语法:<target对象>.appendTo(target) 实现思路 定义 appendTo 方法,声明一个形参 target .追加到目标 dom 元素 选择器 dom 元素 dom 数组 为了操作方便,将 target 类型统一为 itcast 对象,去 itcast 函数走一圈,出来就是 itcast 对象. 遍历 this 上的每一个 dom 元素,
ihoey
2018/10/31
1.3K0
jQuery
onload 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
小丞同学
2021/08/16
8.5K0
Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob.com/manual/jquery/ jQuery笔记 笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理. JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套.
py3study
2020/01/19
5.5K0
jQuery 选择器
原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。
星辰_大海
2020/10/09
2.9K0
jQuery 选择器
相关推荐
jquery第一次课的案例教程
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文