jQuery
田江
技术没有秘密,只有知道的人多了,才能把技术的作用发挥出来。
展开
-
jQuery中的绑定事件_on,bind,live,delegate的区别
bind:能够完成基本的绑定事件处理函数的功能,比起click(),mouseover()等的好处是,可以一次绑定多种事件类型 live:有事件委托,把事件处理函数委托给DOM根元素,效率比delegate低,所以很多新版jQuery去掉了live。 delegate:有事件委托,把事件处理函数委托给指定的父级元素,delegate比live的执行效率高 on:涵盖了以上所有的功能。 ...原创 2018-01-23 19:53:26 · 933 阅读 · 1 评论 -
jQuery插件如何编写05_ 简单的全选反选插件(完整版)
解释一下: 这个版本是完整版,从“jQuery插件如何编写01”到“jQuery插件如何编写05”是让大家一步一步过渡过来,循序渐进地学习。效果图:代码: 全选反选 *{ margin: 0; padding: 0; } ul {原创 2018-01-27 18:40:47 · 632 阅读 · 2 评论 -
jQuery插件如何编写02_ 简单的全选插件
解释一下: 如果需要看进一步封装的效果,请进入“jQuery插件如何编写03_ 简单的全选反选插件”这篇文章效果图:代码: 全选 *{ margin: 0; padding: 0; } ul { list-原创 2018-01-27 17:22:58 · 492 阅读 · 0 评论 -
jQuery插件如何编写03_ 简单的全选反选插件
解释一下: 这个代码没有吧全选前面的复选框和下面的复选框进行关联,在下一篇文章(jQuery插件如何编写04_ 简单的全选反选插件(关联了主复选框和子复选框,代码简单))中,会把这个功能实现了效果图:代码: 全选反选 *{ margin: 0; padding:原创 2018-01-27 18:42:11 · 343 阅读 · 0 评论 -
jQuery插件如何编写04_ 简单的全选反选插件(关联了主复选框和子复选框,代码简单)
解释一下: 这个代码有一个bug:当点击“全选”后,紧接着点击“反选”按钮,那么全选的复选框状态和子复选框的状态不对应。下一个版本是完整版:jQuery插件如何编写05_ 简单的全选反选插件(完整版)效果图:代码: 全选反选 *{ margin: 0; padd原创 2018-01-23 20:08:17 · 286 阅读 · 0 评论 -
jQuery插件如何编写01_ 插件的基本格式
插件的概念: 插件((Plug-in)就是一个一段程序代码,如果需要,调用即可。插件的好处是能够提高开发效率,高内聚,低耦合,程序不容易出现问题。 生活中: 插件就像u盘,usb鼠标,usb键盘,usb打印机一样,插上就能用,比如你的电脑没有打印功能,又想打印怎么办,买个“打印机”插件,插上就可以让你的电脑完成打印功能,打印机(插件)是提前做好的,谁的计原创 2018-01-27 17:09:40 · 767 阅读 · 0 评论 -
原生中的window. onload和jQuery中的 ready函数 $(function(){})
ssssssssssssssssssssssss alert("亲,你看不到我"); }原创 2018-06-02 23:21:28 · 1555 阅读 · 23 评论 -
jQuery插件_跟随鼠标滑入滑出的蒙版
效果: 代码:1、masking.jsjQuery.fn.extend({ masking:function(obj){ this.each(function(){ if(!obj){ var obj = {}; } //1、把当前div赋给属性 obj.$boxDomObj=$(this); //2、给当前div增加蒙版 ...原创 2018-10-10 21:31:47 · 558 阅读 · 0 评论 -
jQuery插件_全选反选
效果 代码:1、jQuery插件的代码(allCheck.js)//1、定义全选的插件jQuery.fn.extend({ bindCheck:function($subCheckBox,$btnUncheck){ let $allCheckBox = this; //1、给全选复选框绑定click事件 //this:是全选复选框(jQuery对象) th...原创 2018-10-10 21:42:08 · 669 阅读 · 0 评论 -
面试题:jQuery的队列,队列可以用在哪些地方
一、队列是什么?队列是一种数据结构,跟生活中的排队是一样的,符合先进先出,后进后出的原则即:对一个数组做一些限制:1、只允许在后面插入数据,只允许在前面删除数据2、不允许在后面删除数据,也不允许在前面插入数据,也不允许在中间随便插入和删除数据.二、jQuery的队列函数:queue();jQuery的队列中存放的是函数。 .clearQueue() ...原创 2019-08-08 10:49:00 · 818 阅读 · 0 评论 -
面试题:jQuery的fire函数是什么意思
//fire()函数。// callbacks.fire() 函数用于传入指定的参数调用所有的回调。// 此方法返回一个回调对象到它绑定的回调列表。//fire()函数。// callbacks.fire() 函数用于传入指定的参数调用所有的回调。// 此方法返回一个回调对象到它绑定的回调列表。 function testf1(str){ console.log("t...原创 2019-08-08 17:20:18 · 1117 阅读 · 0 评论 -
jQuery_事件绑定如何用on实现事件委托
*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back原创 2018-01-23 20:03:33 · 3733 阅读 · 1 评论 -
jQuery_轮播图_淡入淡出效果(如何用jQuery实现一个淡入淡出轮播图)
解释:jQuery做的轮播图,淡入淡出效果,没有使用面向对象效果图:思路图:代码: *{ margin:0; padding:0; list-style: none; } #box{原创 2018-01-24 12:26:12 · 11077 阅读 · 0 评论 -
jQuery_事件绑定_bind
解释一下: bind:能够完成基本的绑定事件的功能,比起直接使用click(),blur()等函数,bind可以一次绑定多个类型的事件 *{ margin:0; padding:0; list-style: none; }原创 2018-01-23 19:56:29 · 192 阅读 · 0 评论 -
jQuery_事件delegate
*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back原创 2018-01-23 20:00:11 · 361 阅读 · 0 评论 -
jQuery写的隔行变色
效果图:代码: Title 我是box1 我是box3 我是box2 我是box4 我是box5 我是box6$(function () { $("div:even").css({"background-color":"yellow"}); $("div:odd").css({"b原创 2018-01-24 11:56:08 · 471 阅读 · 0 评论 -
jQuery做的搜索提示框
效果图:代码: Title 张三疯 张千锋 王麻子 张文浩 王帆 王雨 $(function () { $("#txtId").keyup(function () { $("li").css({"dis原创 2018-01-24 11:59:09 · 822 阅读 · 0 评论 -
cmd_把tooltip做成符合cmd规范
效果图:代码:解释一下:sea.js在网上可以自行下载html代码: Title *{ margin:0; padding:0; list-style: none; } #box1{ pos原创 2018-01-24 12:27:33 · 197 阅读 · 0 评论 -
jQuery_事件_live
解释一下: live使用了事件委托,即把本该绑定在某个元素上的事件绑定在了HTML根元素上,由于这种做法比起delegate的效率低,所以,在jQuery1.9+中删除了live。 *{ margin:0; padding:0; list-style: non原创 2018-01-23 19:59:25 · 235 阅读 · 0 评论 -
jQuery如何实现滑入滑出效果(跟随鼠标滑入滑出蒙板)
效果图:代码: *{ margin:0; padding:0; list-style: none } #box{ position:relative; margin: 100p原创 2018-01-23 20:29:49 · 3385 阅读 · 1 评论 -
jQuery怎么做插件_放大镜插件_单例
效果图:代码:html代码: *{ margin:0; padding:0; list-style: none } #box{ position:relative; wid原创 2018-01-23 20:21:52 · 648 阅读 · 0 评论 -
jQuery_手风琴(不用下标)如何用jQuery做手风琴效果
效果图:代码: *{ margin: 0;padding: 0; } ul li{ list-style: none; } #box{ width:500px; heig原创 2018-01-23 19:47:49 · 306 阅读 · 0 评论 -
jQuery_手风琴(如何用jQuery做手风琴效果)
效果图:代码: *{ margin: 0;padding: 0; } ul li{ list-style: none; } #box{ width:500px; heig原创 2018-01-23 19:45:49 · 678 阅读 · 1 评论 -
面试题:jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
一、jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。语法$.extend( target [, object1 ] [, objectN ] )指示是否深度合并$.extend( [deep ], target, object1 [, objectN ] )警告:不支持第一个参数传递 false 。 参数 ...原创 2019-08-07 16:42:25 · 1938 阅读 · 1 评论