JQuery系列
关注
分享
扫一扫
专门编写JQuery内容
海洋的渔夫
这个作者很懒，什么都没留下…
展开
-
jquery介绍
仅供学习，转载请注明出处jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。j...原创 2019-03-28 21:38:19 · 121 阅读 · 0 评论 -
jquery特殊效果 - fadeIn\fadeOut\hide\show\slide
仅供学习，转载请注明出处特殊效果方法fadeIn() 淡入 $btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); });fadeOut() 淡出fadeTogg...原创 2019-04-11 00:48:43 · 300 阅读 · 0 评论 -
jquery 使用 a 标签的click()触发hide()等特效方法无效
在编写层级菜单的时候，发现点击a标签的click方法实现hide等特效的时候，一闪一闪，没有实现真正的效果。解决这个问题，只需要给a标签设置 # 号即可解决。 ...原创 2019-04-13 01:43:06 · 419 阅读 · 0 评论 -
jquery 元素尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight()
1、获取和设置元素的尺寸width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeigh...原创 2019-04-17 23:20:34 · 484 阅读 · 0 评论 -
jquery属性操作 html() prop()
1、html() 取出或设置html内容// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('<span>添加文字</span>');使用html()相当于原生javascript的innerHtml，即可以获取元素的之间的html内容，还可以创建新的html...原创 2019-04-20 23:28:04 · 392 阅读 · 0 评论 -
jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()
什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用...原创 2019-04-23 00:15:54 · 885 阅读 · 0 评论 -
jquery - 页面弹框 - 阻止事件冒泡示例
需求编写一个简单的页面弹框的示例，功能要求如下：一个点击按钮，点击可以弹出一个弹框弹框固定出现在页面的中间位置需要写一个背景mask，用于遮掩背景，设置透明度0.3点击弹框外的位置，弹框就可以消失不见，可以使用fadeOut()点击弹框内的文本框可以输入内容，弹框不会消失不见点击弹框右上角的 × 号，则关闭弹框看完了需求，首先快速写好一波html + css编...原创 2019-04-24 23:38:10 · 919 阅读 · 0 评论 -
jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点
事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件...原创 2019-04-27 00:56:40 · 6807 阅读 · 0 评论 -
jquery 绑定事件 bind() unbind() 以及 事件函数列表
事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件...原创 2019-04-22 20:40:49 · 307 阅读 · 0 评论 -
jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()
事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件...原创 2019-04-27 02:03:30 · 1502 阅读 · 0 评论 -
jquery 绑定事件 - resize() 浏览器窗口的大小发生改变
事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件...原创 2019-04-27 02:12:34 · 1661 阅读 · 0 评论 -
jquery 绑定事件 - submit() 用户递交表单
事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件...原创 2019-04-27 02:31:35 · 4085 阅读 · 0 评论 -
jquery 元素节点操作 - 创建节点、插入节点、删除节点
jquery的节点操作说明前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作，这种直接使用字符串创建的方式也是性能最高的。使用html()操作节点首先编写一个div包含一个a标签，如下：下面来给这个a的后面加上一个span标签看看，如下：在这里面可以看到，首先使用$('div').html()得到原来的内部元素字符串，然后...原创 2019-04-27 21:41:42 · 1680 阅读 · 0 评论 -
jquery 示例 - todolist(计划列表)实例
功能说明在文本框输入内容，点击增加按钮，则下方的列表会增加添加项点击删除按钮，则删除该项点击向下箭头，位置顺序就往下调整点击向上箭头，位置顺序就往上调整首先实现基本HTML+CSS<!DOCTYPE html><html><head> <title></title>...原创 2019-04-29 00:04:08 · 708 阅读 · 0 评论 -
jquery 滚轮插件 示例 - 整屏滚动
在上一篇张写了jquery 滚轮插件 jquery.mousewheel.js，可以根据滚轮上下滚动的事件，触发控制整个屏幕的切换。正屏滚动的需求编写通过滚轮上下切换这五个屏幕效果。要做出这个效果，其实不用说，首先要把这五个div的基本HTML+CSS给写出来先。准备好五个图片001.png...原创 2019-05-03 01:54:02 · 564 阅读 · 0 评论 -
jquery jsonp 解决ajax无法跨域请求的问题
在上一篇文章jquery ajax中，说到ajax请求为了安全的问题，具有一个同源策略的情况。说明使用ajax无法进行跨域请求。那么当真的需要进行跨域请求的时候，该怎么办呢？此时就要使用jquery中的jsonp进行跨域请求了。jsonpajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了...原创 2019-05-11 12:15:52 · 716 阅读 · 0 评论 -
jquery cookie示例 - 只提示一次的弹框
经常有些网站在访问的时候，就是有一个弹框介绍一下通知内容。然后点击已读之后，就不会再弹出了。那么这个功能是怎么做出来的呢？其实这个功能就是采用cookie的方式，当点击已读按钮，那么则存入一个标识在cookie里，当再次进入页面，则读取cookie，查看有没有标识，再判断是否弹出弹框。说到这里，如果不知道如何使用cookie，那么可以看看我的上一篇文章。首先编写基本的弹框H...原创 2019-05-11 15:31:40 · 754 阅读 · 0 评论 -
jquery 使用 unbind 解决重复绑定执行事件
原文：jquery 使用 unbind 解决重复绑定执行事件存在问题在jquery监听click事件的时候会出现点击一次没有重复，点击第二次就重复的情况。出现这个问题的原因是之前的click事件被绑定后，并没有解绑。还原问题现场先来看看需求：点击一个数据表之后，确认自定义的模态窗口，然后删除改行的数据，并打印改行数据的ID。从上面...原创 2019-07-31 20:54:22 · 540 阅读 · 0 评论 -
Sublime3 安装 jQuery自动补全插件 SublimeCodeIntel
仅供学习，转载请注明出处需求之前为了JavaScript可以自动补全，安装了SublimeCodeIntel插件，将其中jQuery的补全部分改为了JavaScript。那么，后续为了方便编写jQuery，可以改回来。具体安装该插件的方式可以访问Sublime3 设置JavaScript自动补全 - SublimeCodeIntel插件。配置Sublim...原创 2019-03-29 00:08:37 · 410 阅读 · 0 评论 -
jquery ajax
ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。同步和异步现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的...原创 2019-05-10 01:04:38 · 124 阅读 · 0 评论 -
jquery 本地存储 sessionStorage
上一篇写到jquery 本地存储 localStorage, localStorage在浏览器关闭后，只要不主动删除就一直存在。但是下面讲的sessionStorage就不一样，只会在关闭前有效，只要窗口关闭，那么数据就会立即删除，起到一定的安全性作用。sessionStorage3、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同...原创 2019-05-11 15:57:05 · 1107 阅读 · 0 评论 -
jquery 加载 - ready方法
仅供学习，转载请注明出处原生JavaScript的window.onload将获取元素的语句写到页面头部，会因为元素还没有加载而出错。JavaScript为了避免加载页面的元素报错的问题，需要在加载之中增加window.onload方法。如下：jQuery的ready方法相对的，jquery提供了ready方法解决这个问题，它的速度比原生...原创 2019-03-28 23:34:21 · 324 阅读 · 0 评论 -
jquery选择器
jquery用法思想选择某个网页元素，然后对它进行某种操作jquery选择器jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。$('#myId') //选择id为myId的网页元素$('.myClass') // 选择class为myClass的元素$('li') //选择所有的li元素$('#ul1 li span...原创 2019-04-09 01:43:32 · 178 阅读 · 0 评论 -
jquery样式操作
jquery用法思想同一个函数完成取值和赋值操作行间样式// 获取div的样式$("div").css("width");$("div").css("color");//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({fontSize:"30px",...原创 2019-04-09 01:58:57 · 119 阅读 · 0 评论 -
jquery 绑定click事件
仅供学习，转载请注明出处绑定click事件给元素绑定click事件，可以用如下方法：$('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this)})获取元素的索引值有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取va...原创 2019-04-10 00:56:07 · 450 阅读 · 0 评论 -
jquery链式调用 - 层级菜单示例
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：$('#div1') // id为div1的元素.children('ul') //该元素下面的ul子元素.slideDown('fast') //高度从零变到实际高度来显示ul元素.parent() //跳到ul的父元素，也就是id为div1的元素.siblings()...原创 2019-04-11 07:10:49 · 211 阅读 · 0 评论 -
jquery animate 动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。$('#div1').animate({ width:300, height:300},1000,'swing',function(){ alert('done!');});下面来写一个div放大的动画效果。上面首先写好一...原创 2019-04-14 12:46:48 · 232 阅读 · 0 评论 -
jquery 加入购物车示例
仅供学习，转载请注明出处编写一个加入购物车的按钮，然后动画一个圆点到购物车，同时数量加1。淡定直接写出基本html以及css，如下：根据点击加入购物车的位置，增加一个红色的圆形编写jquery实现小红圆的移动效果、以及购物车数量的追加每点击一次加入购物车，小红球就会移动到购...原创 2019-04-18 00:05:16 · 355 阅读 · 0 评论 -
jquery 页面滚动事件 scroll()
仅供学习，转载请注明出处为了方便理解，我先画了一个下面将要介绍的尺寸示意图获取浏览器可视区宽度高度$(window).width();$(window).height();缩小一下浏览器，查看可视区的宽高有无变化，如下：这里主要就是浏览器内可以看到页面的宽高。获取页面文档的宽度高度$(document)....原创 2019-04-18 01:18:16 · 966 阅读 · 0 评论 -
jquery 置顶菜单
需求初始状态如上图，当拖动右侧的滚动条，菜单置顶的时候需要固定位置，如下：注意：当Banner图片完全上移出了浏览器可视区域，此时菜单固定定位在文档的最上方。首先编写基本HTML以及CSS编写jquery实现menu置顶效果设置当$(document).scrollTop() > 100的时候，也即是banne...原创 2019-04-19 00:46:41 · 220 阅读 · 0 评论 -
jquery 置顶按钮
需求返回到页面的最上方。这个功能在简书阅读的时候右下角也有，如下：点击这个按钮，直接就返回到最上方了。当文档达到最上方的时候，置顶按钮消失。编写基本HTML\CSS这个图片我用了阿里的矢量图库，如果不懂如何使用的朋友，可以访问iconfont阿里巴巴矢量图标库从注册到使用。再写一些p段落，用来形成滚动条，如下：好...原创 2019-04-19 01:45:41 · 967 阅读 · 0 评论 -
jquery循环 each()
对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：$(function(){ $('.list li').each(function(i){ $(this).html(i); })})......<ul class="list"> <li></li&g...原创 2019-04-21 00:12:21 · 224 阅读 · 0 评论 -
jquery 手风琴
效果点击相应卡片的标签，那么就会切换至卡片的呈现如果点击03标签，那么01 02 要一起移动5个效果图片基本HTML结构如下：编写5个li标签，包含span以及图片设置绝对定位，溢出部分overflow:hidden进行隐藏基本5个li标签需要使用的绝对定位的居...原创 2019-04-22 00:48:48 · 237 阅读 · 0 评论 -
jquery 事件委托 - delegate()
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。一般绑定事件的写法$(function(){ $ali = $('#list li'); $ali.click(function() { $(this).css({ba...原创 2019-04-25 00:57:22 · 343 阅读 · 0 评论 -
jquery 滚轮插件 jquery.mousewheel.js
jquery.mousewheel插件使用jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。Github地址:jquery-mousewheel下载jquery.mousewheel的js文件访问Github之后，主要jquery需要用到这两个js文件。那么先将项目git clone下来。...原创 2019-05-01 01:45:36 · 1475 阅读 · 0 评论 -
jquery slide 幻灯片
slide 幻灯片的实现思路在写这个slide幻灯片之前，首先理清楚思路，这样才能更快速实现代码。假设制作5张图片的幻灯片，那么图片的初始位置如下：因为图片1-5是使用行内块的方式布局，只要控制图片1的div的margin-left改变，就可以跟推箱子一样，实现5个图片的左右滑动。当图片从1向左移动至2，图片实现效果大致如下可以看到，只需要设置...原创 2019-05-08 20:59:02 · 492 阅读 · 0 评论 -
jquery 本地存储 cookie 的基本用法
本地存储分为cookie，以及新增的localStorage和sessionStorage 。本篇章专门来讲讲 cookiecookie1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。jquery如果需要使用cookie，则需要一个插件js才可...原创 2019-05-11 14:54:16 · 976 阅读 · 0 评论 -
jquery 本地存储 localStorage
前面写了jquery 本地存储 cookie 的基本用法、jquery cookie示例 - 只提示一次的弹框 两篇介绍cookie用法的篇章之后，下面来看看 localStorage 这个本地存储的方式。localStorage2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数...原创 2019-05-11 15:45:41 · 1423 阅读 · 0 评论 -
Webstorm 2019.1.3 设置jquery命令自动补全
设置jquery命令自动补全打开 File > Settings > Languages & Frameworks > JavaScript > Libraries 选择Add点击Add，选择jQuery填写Name可以自定义，然后选择下面的 + 号，可以选择本地已经下载好的jQuery文件。点击OK...原创 2019-07-19 17:08:51 · 1076 阅读 · 1 评论