jQuery
文章平均质量分 63
筱葭
这个作者很懒,什么都没留下…
展开
-
浅谈CSS+jQuery实现折叠菜单
折叠菜单 body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ text-decoration:none; color:white; } .types ul{ display:none; } .files ul{ displ原创 2016-12-20 09:29:00 · 1863 阅读 · 0 评论 -
浅谈jQuery使用this和event.target
1、this和event.target的区别:JavaScript中事件会冒泡,所以this是可以变化的,但event.target不会变化,永远是触发事件的目标DOM元素。2、jQuery中的this和event.targetthis和event.target都是DOM对象。使用jQuery中的方法可以将this和event.target转换为jQuery对象:$(thi原创 2017-03-14 11:25:27 · 628 阅读 · 0 评论 -
浅谈jQuery源码(一)——$.trim
jQuery的trim()方法用来去除字符串两端的空格。 jQuery的trim()源码如下:core_version = "1.9.0",core_trim = core_version.trim,rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,trim: core_trim && !core_trim.call("\uFEFF\xA0原创 2017-04-19 19:03:25 · 2077 阅读 · 0 评论 -
浅谈jQuery源码(二)——$.each
jQuery的each()方法使得遍历一个数组或者对象的代码段变得十分的简洁。 1、each()的用法1) each接受2个参数:数组、回调函数(回调函数具有两个参数,key是数组的索引,value是对应的元素)$.each([1,2,3], function(key, value) { console.log("[" + key + "]=" + value);});原创 2017-04-19 19:44:23 · 1088 阅读 · 0 评论 -
浅谈jQuery源码(三)——$.inArray
jQuery的inArray()方法使得遍历一个数组或者对象的代码段变得十分的简洁。 jQuery的inArray()源码如下:core_deletedIds = [],core_indexOf = core_deletedIds.indexOf, // 相当于 core_indexOf = Array.indexOf;inArray: function(elem, arr, i)原创 2017-04-19 20:12:39 · 553 阅读 · 0 评论 -
浅谈jQuery源码(四)——$.grep
jQuery的grep()方法是为了传入一个数组elems,通过过滤器callback后,等到过滤后的结果。 其中callback就是过滤器,$.grep是根据其返回值过滤; inv为true表示是callback过滤器返回true的那些被过滤掉。 1、grep()的用法:$.grep( [0,1,2], function(n,i){ return n <= 0;});结果原创 2017-04-19 20:37:14 · 744 阅读 · 0 评论 -
浅谈jQuery源码(五)——$.merge
jQuery的merge()方法的作用是修改第一个数组,使得它末尾加上第二个数组。其实,允许第二个参数不为数组。$.merge([0,1,2], [2,3,4]) == [0, 1, 2, 2, 3, 4] jQuery的merge()源码如下:merge: function( first, second ) { var l = second.length, i = firs原创 2017-04-19 20:52:07 · 1063 阅读 · 0 评论 -
浅谈jQuery源码(六)——$.map
jQuery的map()方法把数组每一项经过callback处理后的值依次加入到返回数组中。 1、map()的用法:$.map( [1,2,3], function(n){ return n * 2;});结果:[2,4,6] 2、jQuery的map()源码如下:core_deletedIds = [],core_concat = core_deletedIds原创 2017-04-19 21:01:41 · 321 阅读 · 0 评论 -
浅谈jQuery源码(七)——$.makeArray
jQuery的makeArray()方法将类数组对象转换为数组对象。 jQuery的makeArray()源码如下:makeArray: function(arr, results) { var ret = results || []; // 等同于:var ret = (!results) ? [] : results; if (arr != null) { if (isAr原创 2017-04-19 21:13:40 · 612 阅读 · 0 评论 -
浅谈jQuery源码(八)——$.extend
jQuery的extend()方法由于扩展jQuery功能。通常写一个插件,会利用extend传进来的参数来覆盖插件原有的配置。 jQuery的extend()源码如下:jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = a原创 2017-04-19 21:24:39 · 538 阅读 · 0 评论 -
浅谈jQuery的$原理
1、外层沙箱及命名空间$为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”,jQuery具体的实现,都被包含在了一个立即执行函数构造的闭包里面,然后在暴露出命名空间(可以为API,函数,对象),如只暴露 $ 和 jQuery 这2个变量给外界:(function(window, undefined) { // 用一个函数域包起来,就是所谓的沙箱 // 在这里边var定原创 2017-04-20 11:36:55 · 6964 阅读 · 0 评论 -
浅谈jQuery.extend 与 jQuery.fn.extend
jQuery是一个JavaScript类,如$("#input1") 生成一个 jQuery类的实例。jQuery为开发插件提拱了两个方法:jQuery.fn.extend()和jQuery.extend()。1、jQuery.extend()(1)为jQuery类添加类方法(静态方法)jQuery.extend({ add: function(a, b)原创 2017-03-04 17:29:38 · 1698 阅读 · 0 评论 -
浅谈jQuery的链式调用
实现链式的基本条件就是要实例对象先创建好,调用自己的方法。链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this,把对象再返回回来,对象就可以继续调用方法,实现链式操作了。Obj().init().setFlag();分解:obj = Obj();obj.init();obj.setFlag();如果需要链式的处理,只需要在方法内原创 2017-04-20 13:55:34 · 4664 阅读 · 0 评论 -
浅谈jQuery代码优化之事件委托(事件绑定)——bind()|live()|delegate()|on()|off()|one()方法
jQuery 1.7开始,on()方法提供绑定事件处理程序所需的所有功能,是 bind()、live() 和 delegate() 方法的新的替代品。live() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。格式:$(selector).on(event,childSelector,data,function,map);参数描述e原创 2016-12-30 20:39:08 · 1066 阅读 · 0 评论 -
浅谈jQuery性能优化的方法
1、总是使用id选择器在jQuery中最快的选择器是id选择器,它直接映射到JavaScript的getElementById()方法。在jQuery中最慢的选择器是class选择器是,在IE中它循环整个DOM,可能的话尽量避免使用class选择器。(1)当需要选择某元素,使用其id选择器。如:$('#student')替代$('.students')(2)当需要选择多原创 2017-03-04 20:42:41 · 564 阅读 · 0 评论 -
浅谈jQuery对象和DOM对象
DOM对象是原生JavaScript获得的对象,可以使用原生JavaScript的方法,但不能使用jQuery的方法。jQuery对象是用jQuery的$选择器获得的对象,是通过jQuery包装DOM对象后产生的对象,是jQuery独有的,可以使用jQuery的方法,但不能使用DOM的方法。 jQuery对象和DOM对象的相互转换:1) jQuery对象转换成DOM对象:由于j原创 2017-04-14 19:20:58 · 432 阅读 · 0 评论 -
浅谈jQuery 2.0版本
1、jQuery 2.0 版本的一些特性:1) 不兼容 IE6/7/8需要注意 IE9、IE10 的兼容模式仍然会使 jQuery 2.0 运行不正常,需要在 HTTP header 指定 X-UA-Compatible 属性,或者在页面 meta 标签中声明(性能原因,不推荐后者);2) 体积更小移除 IE6/7/8 兼容所需的代码,jQuery 2.0体积减小了10%,并且会根原创 2017-04-13 21:30:53 · 1231 阅读 · 0 评论 -
浅谈jQuery实现轮播
#frame{ width:700px; height:300px; position:relative; } #img2,#img3{ display:none; } .box{ position:absolute; width:50px; height:50px; line-height:50px;原创 2016-12-25 17:18:15 · 323 阅读 · 0 评论 -
浅谈jQuery模拟12306城市选择框的实现
#parent{ width:500px; position:relative; } #text{ height:25px; } #select{ width:420px; height:185px; position:absolute; top:30px; left:0; border:1px sol原创 2016-12-29 19:14:23 · 1785 阅读 · 1 评论 -
浅谈jQuery实现拖拽
#box{ position:fixed; left:100px; top:100px; background-color:red; width:300px; height:200px; } #out{ height:2000px; } $(document).ready(function(){原创 2016-11-04 11:24:00 · 610 阅读 · 0 评论 -
浅谈blur与click冲突的问题
blur事件:当元素失去焦点时触发。click事件:当点击元素时触发。原创 2016-12-30 14:06:26 · 5433 阅读 · 2 评论 -
浅谈CSS+jQuery实现标签页
预期效果:CSS代码:#tabs{ width:600px; height:250px; background:white; margin:10px;}#tabs ul{ float:left; margin:20px 0 0 20px; padding:0; }#tabs li{ width:80px; height:40px;原创 2016-12-20 21:07:36 · 424 阅读 · 0 评论 -
浅谈jQuery验证框架
jQuery验证框架(1)jQuery默认验证规则:required:true——必输字段;remote:”check.php”——使用Ajax方法调用check.php验证输入值;email:true——必须输入正确格式的电子邮件;url:true——必须输入正确格式的网址;date:true——必须输入正确格式的日期;dateISO:true——必须输入正确格式的日原创 2016-10-28 10:03:16 · 624 阅读 · 0 评论 -
浅谈使用jQuery实现Ajax
1、jQuery中的AjaxjQuery对Ajax操作进行了封装,在jQuery中最底层的方法是$.ajax(),第二层是load(),$.get()、$.post(),第三层是$.getJSON()和$.getScript()。 2、load()方法load()方法是jQuery中最简单和常用的Ajax方法能载入远程的HTML代码并插入到DOM中,它的结构是load(url[,d原创 2016-10-24 09:32:31 · 760 阅读 · 0 评论 -
浅谈jQuery Ajax的5种方法
1、load() 方法load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放入被选元素中。语法:load(url,data,function(response,status,xhr))参数描述url规定要将请求发送到哪个 URL,也可以把 jQuery 选择器添加到 URL 参数,加载页面某一部分。data可选。规定原创 2016-10-18 10:00:24 · 7498 阅读 · 0 评论 -
浅谈原生JS实现jQuery的animate()动画
参数介绍:obj执行动画的元素cssJSON数值对,形式为“{属性名: 属性值}",指要执行动画的书序及其对应值interval属性每执行一次改变的时间间隔speedFactor速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1)func执行完动画后的回调函数原创 2017-03-07 17:25:11 · 11013 阅读 · 6 评论 -
浅谈jQuery与jQuery UI
jQuery是一个JS库,主要提供的功能是选择器,属性修改和事件绑定等等。jQuery UI则是在jQuery的基础上,利用jQuery的扩展性设计的插件。提供了一些常用的界面元素,诸如放大镜、焦点图、对话框及弹出层、表单验证、分页、标签页等。原创 2017-03-04 19:28:44 · 374 阅读 · 0 评论 -
浅谈jQurey懒加载技术
Lazy Load是一个用JavaScript编写的jQuery插件,可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。图片懒加载与图片预加载的处理方式正好相反。 1、懒加载的意义如果一个页面中有成千上万张图片,如淘宝首页等,如果一上来就发送成千上万个加载图片的请求,服务器很可能会吃不消。原创 2017-03-09 17:04:52 · 514 阅读 · 0 评论 -
浅谈文档加载完成事件——document.ready和onload的区别
文档加载完成的两种事件ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)onload,指示页面包含图片等非文字媒体文件在内的所有元素都加载完成。 1、DOM ready文档加载的顺序:域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。DOM ready在加载JavaScript和CSS与加载图片等非文字媒原创 2017-03-20 11:52:45 · 11228 阅读 · 1 评论 -
浅谈原生JS和jQuery操作DOM
一、创建元素节点1、原生JS创建元素节点document.createElement("div");2、jQuery创建元素节点$('');二、创建并添加文本节点1、原生JS创建文本节点var text = document.createTextNode("Hello World!");var div = document.createElement("div原创 2017-03-09 15:34:51 · 2137 阅读 · 0 评论 -
浅谈jQuery中的删除方法empty()、remove()和detach()
jQuery提供了三种删除节点的方法:remove()、detach()和empty()。1.empty():不是删除节点,而是清空节点,清空匹配的元素集合中所有的子节点,但元素自身和事件都未被删除。2.remove():不会把匹配的元素从jQuery对象中删除,可以在将来再使用,但除了元素自身保留下来外,其他的比如绑定的事件,附加的数据等都会被删除。3.detach():不会把匹配的原创 2017-04-25 12:58:47 · 6037 阅读 · 0 评论