jQuery
分享实用的jQuery开发干货
黄河爱浪
一个热爱分享又普通的web前端开发者,uView UI框架开发组成员。
展开
-
jQuery 链式语法
链式语法,什么是链式语法?链式语法有什么作用?如何书写链式代码?jQuery的这种链式代码,总的来说:节约JS代码;所返回的都是同一个对象,可以提高代码的效率。通过简单扩展原型方法并通过return this的形式来实现跨浏览器的链式调用。下面通过一个简单的例子来说明上面的问题<!-- html --><div id="div" title="jQuery之美"&...原创 2018-09-08 19:39:40 · 942 阅读 · 0 评论 -
jQuery 标题消息闪烁提醒
示例图:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery 标题消息闪烁提醒</title></head><body><h1 style="font-si...原创 2019-05-16 14:21:19 · 697 阅读 · 0 评论 -
jQuery 获取单选框已选中的值
jQuery 获取单选框(radio)已选中的值,请阅读我的原创文章《jQuery 表单对象属性》,文章中的 “:checked” 选择器文章中有详细的说明和源码示例。《jQuery 表单对象属性》文章链接:https://blog.csdn.net/u013350495/article/details/82533570作者:黄河爱浪QQ:1846492969,邮箱:helang.l...原创 2019-05-16 10:54:29 · 4115 阅读 · 0 评论 -
jQuery 判断复选框是否被选中
jQuery 判断复选框(checkbox)是否被选中,请阅读我的原创文章《jQuery attr()与prop()》,文章中的 prop() 方法介绍中有详细的说明和源码示例。原创 2019-05-16 10:48:52 · 22824 阅读 · 0 评论 -
jQuery 指定内容高亮
使用jQuery 快速开发一个指定内容高亮的插件在线示例地址:http://www.jq22.com/jquery-info21555示例图:插件源码:/* 作者:helang 邮箱:helang.love@qq.com jQuery插件库:http://www.jq22.com/mem395541 CSDN博客:https://blog....原创 2019-05-21 13:23:13 · 749 阅读 · 0 评论 -
jQuery 带加减按钮的数字输入框
带加减按钮的数字输入框是一个常见而实用的功能,通常出现在“购买”的业务中方便快速的选择需要购买的数量。在线演示地址:http://www.jq22.com/webqd5991示例图:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-05-06 23:42:07 · 4039 阅读 · 0 评论 -
jQuery 上拉加载更多
上拉加载,当用户浏览到页面底部时候,自动加载下一页的内容不管是上拉加载还是下拉刷新,其实都离不开一个关键的事件:滚动条滚动事件。本demo是窗口的滚动条事件,如果需要指定某个元素做上拉加载功能,请手动修改container 和content 的参数值,别忘了给container 元素设置有滚动条的CSS属性。在线演示地址:http://www.jq22.com/webqd59...原创 2019-04-26 09:52:59 · 2860 阅读 · 0 评论 -
jQuery 选项卡
选项卡是非常常见而实用的效果,本篇文章示例一个简单的选项卡效果,在以往的代码中都是选择jQuery对象级别插件扩展,本次将改为类级别插件扩展的方式。上效果图:源码如下:<!-- author:helang Email:helang.love@qq.com--><!DOCTYPE html><html lang="en">...原创 2018-10-21 15:37:39 · 711 阅读 · 0 评论 -
jQuery 折叠面板
手风琴是非常常见而实用的效果,本篇文章示例一个简单的手风琴效果。上效果图:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2018-10-28 16:07:58 · 978 阅读 · 0 评论 -
jQuery 仿微信/QQ下拉弹动效果
jQuery 仿微信/QQ下拉弹动效果,简单易用易修改在线示例地址:http://www.jq22.com/jquery-info21506示例图:核心代码:/* 作者:helang 邮箱:helang.love@qq.com jQuery插件库:http://www.jq22.com/mem395541 CSDN博客:https://blog...原创 2019-05-18 10:50:48 · 676 阅读 · 0 评论 -
jQuery on() 事件委托 IOS 无效的解决办法
问题描述:在iOS浏览器运行web页面时,如果通过body或者document委托事件, 点击事件(tap或者click)不会生效。解决办法:给委托事件元素添加行内样式,style="cursor: pointer;"; 事件添加到可点元素上例如<a>、<button> 等可点击元素; 委托事件添加到非html,body的父级元素上;推荐使用第2种方法,...转载 2019-06-06 15:06:32 · 654 阅读 · 0 评论 -
jQuery 监听输入框输入(兼容IE8)
因 IE9以下版本的浏览器不兼容 oninput事件,所以经常使用 keyup + change的组合事件来完成,但是体验有所欠缺。其实 IE早已有与 oninput事件相同功能的事件 onpropertychange。方法封装:/* 对象级别插件扩展 */$.fn.extend({ onInput:function (callback) { ...原创 2019-07-27 23:36:25 · 1299 阅读 · 0 评论 -
jQuery 父元素选择器 parent() 和 parents()
jQuery的父元素选择器小编很少使用,但却看到不少web开发者们经常使用。小编个人是不太推荐使用父元素选择器的。因为如果是列表的情况下,在循环时可以将当前的索引绑定给需要点击的按钮,通过索引查找元素。本篇文章在小编不推荐的情况下,还是决定写一篇。先来一段 HTML结构代码<table class="table table-bordered" id="user...原创 2019-07-27 00:35:18 · 8044 阅读 · 0 评论 -
jQuery 如何选择正确的版本(那个版本好?)
jQuery 在 2007年 7月发布了 1.1.3版本。从开始的 1.x 版本至现在的 3.x 版本,版本数量不少于 60 个。那么该如何选择适合项目的版本呢?本篇文章,小编为大家推荐一下 jQuery的版本电脑端 推荐选择 jQuery 1.9 版本,理由如下:兼容IE8,在当下电脑端兼容IE8还是有需要的(管理系统除外)。 API与更高版本基本一致,又将低版本的不足之处进行...原创 2019-06-24 17:29:09 · 16415 阅读 · 0 评论 -
jQuery 筛选 eq()
eq(),匹配元素的集合为指定的索引的一个元素。eq() 函数使用率绝对高。按照国际惯例,先说一说常用写法:<!-- html --><ul id="list"> <li>helang</li> <li>helang.love@qq.com</li> <li>公众号:we...原创 2019-06-24 17:02:05 · 1210 阅读 · 0 评论 -
jQuery ajax 的 Promise 风格写法
ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。ajax 绝对是 jQuery库中最重要的方法,大大的简化了ajax请求的编码过程,使用方式优美。如果说不足之处就是当许多功能需要连续调用,环环相扣依赖时,代码全部一层一层...原创 2019-06-24 16:05:13 · 2569 阅读 · 0 评论 -
jQuery 字符串 和 JSON 相互转换
在提交数据时,可能因为接口的原因,需要将JSON数据序列化为字符串,或者将字符串转为JOSN对象。首先聊一天将JSON数据序列化为字符串emmmm....小编这次没有骚操作。经查阅jQuery的API后,jQuery已经有封装好的方法$.param( obj )$.param( obj ) ,功能描述:一个用来序列化的一个数组,一个普通的对象,或一个jQuery对象。经小编测...原创 2019-06-22 22:59:21 · 4037 阅读 · 0 评论 -
jQuery 仿抖音时钟罗盘转动效果
在线预览地址:http://www.jq22.com/jquery-info21839效果图:作者:黄河爱浪QQ:1846492969,邮箱:helang.love@qq.com公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号...原创 2019-07-01 14:50:42 · 3190 阅读 · 1 评论 -
jQuery 表单序列化JSON数据
在线体验:http://www.jq22.com/jquery-info18675源码如下:/* jQuery类级别插件扩展 *//* * obj:jQ表单对象*/;$.extend({ serializeJSON: function(obj) { var formArr = obj.serializeArray(); var formOb...原创 2019-06-10 10:44:14 · 582 阅读 · 0 评论 -
jQuery 页面语言切换
上效果图:源码如下:<!-- author:helang Email:helang.love@qq.com--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...原创 2018-10-14 21:11:37 · 1859 阅读 · 2 评论 -
jQuery 自定义下拉列表框
在上一篇《单选框/复选框美化》中,使用到了关键先生<label>,但是很不幸运,在下拉列表框(<select>)中,<label>并不能通过指向来展开选项,所以只能通过自定义的方式模拟一个下拉列表框的功能。上效果图:源码如下:<!-- author:helang Email:helang.love@qq.com--...原创 2018-10-07 15:45:22 · 1444 阅读 · 0 评论 -
jQuery 数据遍历
本篇文章说一下jQuery中一个非常棒的方法,$.each(object,callback),这个方法用来遍历数据,可以遍历数组及对象,下面的示例将说明一下该方法的基本用法。1:遍历数组,回调函数可传递2个参数,index(序) 和 item(项)<!-- js -->/* 遍历数组 */var array=['web','梦之蓝','前端'];$.each(arra...原创 2018-09-08 21:30:15 · 386 阅读 · 0 评论 -
jQuery 插件机制
jQuery有着非常丰富的插件库,插件使用起来,非常方便,通过简单的调用就能轻松的实现相对繁琐的功能。其实在这背后凝聚者插件开发者大量的心血,那么jQuery插件是如何编写的呢,下面让我们来一探究竟。jQuery的插件分为类级别插件和对象级别插件,类级别插件扩展方法:jQuery.extend(),对你级别插件扩展方法:jQuery.fn.extend()。请看下面的代码分别演示这两种插件的写...原创 2018-09-08 20:56:51 · 357 阅读 · 0 评论 -
jQuery 对象访问
本篇文章讲一讲jQuery的对象访问,对象访问常见的有$(select).index()和$(select).length,不常见的有$(select).get()和$(select).size()首先说一说$(select).length和$(select).size()前者jQuery对象的全局属性,后者jQuery对象的方法,但它们的功能都是一样的:返回元素的数量。...原创 2018-09-08 20:52:57 · 482 阅读 · 2 评论 -
jQuery 事件处理 on()
说到jQuery的事件处理,不得不提jQuery中一个全能事件方法$(select).on() 。在给元素添加事件中,貌似它无所不能。用过jQuery的你肯定用过该方法。一说到事件,经常听人说,事件绑定,事件监听和事件委派。那么这三者的区别是什么呢?事件委派在本文章不做讲述,因为应用场景我还没有遇到过,下面用代码来讲解一下事件绑定和事件监听的区别<!-- html -->...原创 2018-09-08 20:43:08 · 741 阅读 · 0 评论 -
jQuery 获取元素尺寸(宽和高)
在前面几篇文章中,介绍的都是和DOM相关的jQuery方法,本篇文章依旧继续讲和DOM相关的方法。用jQuery获取一相元素的大小并不难,如下:$(window).width(); //浏览器的可视宽度$(document).height(); //页面的高度相信使用过jQuery的小伙伴都会使用这两个方法,那这篇文章还有写的必要吗?(在已发布过的几篇文章中,我并没有去介...原创 2018-09-08 20:38:38 · 1320 阅读 · 0 评论 -
jQuery 数据缓存 data()
本篇文章给大家介绍本人最常用到的jQuery方法之一 $(select).data(key,value)——这是jQuery提供的数据缓存方法。与之对应的方法是 $(select).removeData(name) 我好像还从来没使用过该方法,回归本文章主题,下面介绍本人在使用该方法的姿势:<!-- html --><input type="button" id=...原创 2018-09-08 20:33:31 · 1852 阅读 · 0 评论 -
jQuery 显式遍历
在前两篇文章中介绍了jQuery的链式语法和隐式遍历,还没有介绍一个jQuery的具体方法,下面给大家介绍一个jQuery实用的显式遍历方法:$(select).each(function(index, element))方法描述:$(select).each()方法的功能是遍历一个jQuery对象,为每个匹配元素执行一个函数,这个回调函数有两个参数 index,element。index...原创 2018-09-08 19:51:54 · 292 阅读 · 0 评论 -
jQuery 隐式遍历
jQuery的隐式遍历,在使用jQuery时无时无刻都在享受jQuery隐式遍历带来的方便,但是,我们好像并没有发觉,那隐式遍历是什么,将通过下面一个简单的例子来说明:<!-- html --><ul> <li>web</li> <li>前端</li> <li>梦之蓝</li&...原创 2018-09-08 19:45:41 · 1005 阅读 · 0 评论 -
jQuery 筛选 map()
本篇文章说一说与上篇文章《jQuery 数据遍历》中所提到的$.each()方法非常相似的方法$.map(),$.map()也有数据筛选和元素筛选。先说一下元素筛选:$(select).map(callback(index,domElement)),参数为一回调函数,回调函数支持2个参数,index(序号)和domElement(元素)。功能:匹配当前集合中的每个元素,产生一个包含新...原创 2018-09-08 21:33:26 · 1153 阅读 · 0 评论 -
jQuery 表单对象属性
jQuery有着非常丰富的DOM元素操作方法,在DOM元素中,表单元素尤为突出,在jQuery库中与表单DOM元素相关的方法是占有非常大的比例,可见一斑!接下来的文章中,将是都介绍与表单DOM元素相关的方法。本篇文章,介绍表单元素中使用频率较高的单选按钮,复选按钮,下拉列表框相关的选择器。1:“:checked”选择器功能:匹配所有勾选的元素在使用单选框和复选框时,经常会需要获取...原创 2018-09-09 00:00:00 · 4740 阅读 · 0 评论 -
jQuery 子元素选择器 find() 和 children()
在前面的文章中多次提到了子元素和直接子元素,本篇文章来说明这两者的区别。<div id="list"> <div name="a"> <div name="c">web前端</div> <div name="d">梦之蓝</div> </div> ...原创 2018-09-15 15:05:16 · 4934 阅读 · 0 评论 -
jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现 基础篇知识的实际应用。纯CSS版:http://www.jq22.com/webqd5106上效果图:源码如下:<!-- author:helang Email:helang.love@...原创 2018-09-23 11:56:49 · 3020 阅读 · 0 评论 -
jQuery 兄弟元素选择器
本篇文章介绍jQuery的兄弟元素选择器。兄弟节点的查找方式有很多,本文章只列举出实用性较高的方式。原创 2018-09-17 23:26:16 · 42119 阅读 · 0 评论 -
jQuery 基本选择器
在jQuery的使用中,选择器是使用率最高的方法,那么从本篇文章开始,介绍jQuery的选择器的使用。依小编自己的看法就是一个WEB前端开发者使用jQuery选择器的方式与他的水平有直接关系。一个好的WEB前端开发者,一定会对jQuery选择器的使用有着一定的考究。因为在选择DOM元素上,与“性能”有着一定的联系。<!-- html --><div id="div1" c...原创 2018-09-09 00:00:59 · 1059 阅读 · 1 评论 -
jQuery 测试操作
看到本篇文章,你也许会大吃一惊,瓦特??jQuery还有测试操作??嗯!是的!没错!jQuery确实提供了测试的方法,官方文档写的是测试,通俗一点就是做校验的,..........下面说一说jQuery中测试的常用方法1、jQuery.type( obj )功能说明:确定 JavaScript 对象的类型为说明该方法,还是直接上代码吧:$.type(true); //...原创 2018-09-09 00:00:50 · 434 阅读 · 0 评论 -
jQuery 获取元素位置 offset() 和 position()
本篇文件向大家介绍的方法是offset()和position(),这两个方法有什么关系?下面的内容做详细介绍。offset()功能描述:在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。position()功能描述:获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。( 注:offset parent指离该元素最近的而且被定位过的祖先元素 )...原创 2018-09-09 00:00:34 · 2489 阅读 · 0 评论 -
jQuery 筛选 is()
不得了啦,今天给大家介绍一个不用则已,一用惊人的逆天方法is(),貌似这个方法出镜率并不高。下面带大家一个领略一下这个方法的风采。功能描述:判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true。该方法接受4种参数类型,下面一一介绍这4种参数的使用第1种:jQuery.is( selector )...原创 2018-09-09 00:00:21 · 470 阅读 · 0 评论 -
jQuery 获取元素属性 attr() 和 prop()
使用过jQuery的伙伴们,一定对attr()方法不陌生,attr()方法的功能是:获取匹配的元素集合中的第一个元素的属性的值,还记得我以前将一些关键的数据值,通过该方法来保存到元素上,比如存储一个用户的ID在元素上我会这样写$(select).attr("data-uid","WEB-7258")如果您现在还像我以前一样的话,推荐您可以阅读《jQuery 数据缓存》来学习一下更...原创 2018-09-09 00:00:12 · 2715 阅读 · 2 评论 -
jQuery 筛选 slice() 区间(范围)选择器
slice()是一个可指定区间(范围)过滤的方法。使用率很低,一般接手项目或功能新增需求时会用到。设场景:有100个用户,需要每次显示10个,轮循依次切换。在允许修改布局结构的情况下,更推荐将数据10个分为一组,通过 eq()方法即可快速的实现轮循切换效果。小编原创文章:《jQuery 筛选 eq()》文章地址:https://blog.csdn.net/u013350495/...原创 2019-08-15 23:33:12 · 3625 阅读 · 0 评论