jquery
front_end_fan
互联网公司缺的是技术过硬又精通业务的工程师,缺的是真正能解决实际业务问题的人,缺的是复合型的人才。
展开
-
谈谈jquery的事件名称和命名空间
Localstorage本地存储基本用法如何创建和访问 localStorage<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>上面就创建了一个localStorage。我们再来做一个刷新页面,增加访问次数的功能!很简单,原创 2017-09-08 11:03:58 · 726 阅读 · 0 评论 -
jquery常用选择器总结
jquery常用选择器基本选择器 $(‘*’) 匹配页面所有元素$(‘#id’)id选择器$(‘.class’)类选择器$(‘element’)标签选择器 组合/层次选择器 $(‘E,F’)多元素选择器,用”,分隔,同时匹配元素E或元素F$(‘E F’)后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F$(E>F)子元素选择器原创 2017-09-08 11:09:38 · 2469 阅读 · 0 评论 -
jquery属性的相关js实现方法
有些公司手机网站开发不用第三方的jquery或者zepto,直接用原生的javascript。原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器。下面对jquery相关方法,如何用js来实现,做一些简单总结。元素操作Add Class//JQUERY$(el).addClass(className);//js//谷歌浏览器,火狐浏览器,IE8+if (el.cl原创 2017-09-08 14:12:08 · 311 阅读 · 0 评论 -
js/jquery各种宽高的理解和应用
前言前面我有一篇文章,介绍js和jquery的高度,http://blog.csdn.net/qq_39198420/article/details/77862730 下面来抛砖引玉,简单的把“js/jquery各种宽高的理解和应用”再来说一下!window相关的宽高window是可以省略的,直接与window挂钩的宽高有如下几个!window.innerWidthwindow.innerHe原创 2017-09-08 15:07:44 · 247 阅读 · 0 评论 -
不要过度依赖JQuery(一)
前言 毫无疑问,JQuery是一款非常优秀的JavaScript库,它让我们开发项目变得更加便捷容易。 不过,当你准备在一个项目(特别是移动项目)中使用JQuery时,你真的该好好思考一下,你会用到JQuery的哪些功能,是否真的需要jQuery。因为随着JavaScript的不断改善进化,现在它内置的功能已经非常强大,在很大程度上,已经可以实现以前需要在JQuery中才能实现的技术(如果你的原创 2017-09-15 11:03:02 · 518 阅读 · 0 评论 -
jquery和vue对比
前言:很多人说jquey和vue没有什么可比的,应该和Angular,React来比吧,我到觉得他们倒没有多大的可比性,都是基于mvvm思想设计的框架,无非就是实现的方式不一样,在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据上去,难道不是一个根本性的改变吗? 1.jquery介绍:想必大家都用过原创 2017-09-26 15:59:03 · 1909 阅读 · 0 评论 -
JQuery学习笔记整理:工具类
jQuery还提供了很多辅助工具方法,使用这些方法可以很方便的进行操作js代码逻辑。使用方法会在后面一一给出例子:each() 用于遍历指定的对象和数组,并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。map() 用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。boxModel 检测当前页面中浏览器是否使用标准盒模型渲染页面(从1原创 2017-09-19 12:04:44 · 442 阅读 · 0 评论 -
textarea还剩余字数统计
以后再写页面上的js代码,一定要考虑复用性。比如封装好一个方法,其他地方要能够直接使用就像是下面的代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>textarea还剩余字数统计</title> <style type="text/css"> body,a{ font-size:原创 2017-09-11 13:50:16 · 1241 阅读 · 0 评论 -
jquery监听事件的另一种写法及最简单的jquery拖拽
前言思考一下,我们自己可以写出拖拽效果吗?可以的话,大概需要多少行代码?当然还要考虑代码的复用性。引子——关于jquery的某些写法我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用!假如用css设置一个属性,我们写法如下:$("#front_end_fan").css("width","100px");假如多个属性呢?我们写法如原创 2017-09-11 14:12:51 · 1845 阅读 · 0 评论 -
手机网站表层div滑动,导致底层body滑动(touchmove的阻止)
案例描述body很长,可以滑动,body头部有一个模拟下拉的选择框。下拉选择有滚动轴,如下图。我给body一个overflow:hidden和高度是没有用的。手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPr原创 2017-09-12 10:14:43 · 2347 阅读 · 0 评论 -
统一回复《怎么学JavaScript?》
鉴于时不时,有同学私信问我怎么学前端的问题。这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了。 首先说句题外话。关于有人管我叫大神的事情。个人感觉这跟你买东西时,人家管你叫帅哥一样,你答应与否都无妨。 正题开始,前端怎么学,应该因人而异,别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线,先平后陡。项目实践和练转载 2017-09-12 13:55:18 · 797 阅读 · 0 评论 -
图片自适应和footer的定位方式
前言实际项目中,关于页面的方面经常会碰到几个让人头疼的问题。举个栗子:图片自适应问题;底部footer究竟该怎样定位才能保证不管主体部分内容多少,都要能够放在最下面的理想位置。图片大小自适应一般而言,网站为了布局优美,放置图片的方框都是固定大小的容器(防止数据库中的图片大小和容器大小相差太大,影响布局)。根据图片大小和容器大小的比较,分为4类:1、前两类 图片高度 < 容器高度 && 图片宽度 <原创 2017-10-09 11:36:06 · 1289 阅读 · 0 评论 -
jquery和vue对比(二)
普遍认为jQuery是适合web初学者的起步工具。许多人甚至在学习jQuery之前,他们已经学习了一些轻量JavaScript知识。为什么?部分是因为jQuery的流行,但主要是源于经验开发人员的一个错误的理念:因为jQuery是简单的,所以对于初学者也很简单适合。jQuery提供了简洁,不简化jQuery确实克服了很多旧浏览器问题。但是,它在封装DOM API和JavaScript的复杂性上并没有原创 2017-10-11 14:05:05 · 676 阅读 · 0 评论 -
event.cancelBubble与event.stopPropagation()
在火狐Firefox、opera、IE下阻止冒泡事件是不同的代码的,火狐下使用的是event.stopPropagation(),而IE下使用的是cancelBubble,jQuery 可以使用e.stopPropagation()就可以兼容了,如果是纯粹的JavaScript需要下面的代码来统一: if (event.stopPropagation) { // Mozilla and Opera原创 2017-10-23 08:29:01 · 1073 阅读 · 0 评论 -
使用jQuery重置(reset)表单的方法
由于JQuery中,提交表单是像下面这样的: 代码如下:$('#yigeform').submit()所以,想当然的认为,重置表单,当然就是像下面这样子喽:代码如下:$('#yigeform').reset()但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下,说是,JQuery中没有reset方法,经核对,果然是没有。 那有么没有办法通过JQu原创 2017-12-26 13:37:56 · 2676 阅读 · 0 评论 -
不要过度依赖JQuery(三)
前言 在不要过度依赖JQuery(一)和不要过度依赖JQuery(二)两篇文章中已经列举了大量的使用原生JavaScript替代JQuery的例子,在本文中将继续列举! 1、表单 获取焦点$('#test').focus(); $('#test').focus(function(){}); var t = document.getElementById('test');function原创 2017-09-15 11:22:21 · 431 阅读 · 0 评论 -
不要过度依赖JQuery(二)
前言 为什么说不要过度依赖JQuery呢?从项目方面来讲,一些项目在开发中实际用到JQuery内置功能不多,这样会造成项目臃肿;另一方面,目前的主流已经倾向于原生开发。 而在之前一篇《不要过度依赖JQuery(一)》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码,这一章将继续列举。 1、位置 获取相对于文档的位置$('#test').offset() functi原创 2017-09-15 11:11:10 · 364 阅读 · 0 评论 -
jquery中$.proxy及wrap()的使用
jquery其实真的没有什么,关键是应用的熟练程度,面试的时候有时候会问你jquery源码研究过没有。我前段时间看了一下,其实jquery的源码写的还是满通俗易懂的。说到应用,我今天主要说下jquery中$.proxy及wrap()的使用,因为这两个我用的比较少,今天在项目中应用了,所以拿出来说一下!jquery中$.proxy我们先看个例子://正常的this使用$('#Haorooms'原创 2017-09-07 09:47:54 · 292 阅读 · 0 评论 -
jQuery动态向上滚动
总结:概括滚动的新闻、字幕、图片:两个最核心功能 : 1、”永动“(infinite) 2、循环 js实现”永动“(infinite) 的实现方法离不开定时器setInterval(),也就是说每过一段时间都要执行一次某个函数,从而实现无休止滚动; 而循环的实现:appendTo()或者append,三目运算符(或者 if else),insert原创 2017-08-10 16:54:13 · 2326 阅读 · 0 评论 -
彻底搞懂jQuery.stop()函数
jQuery.stop() 函数详解stop()函数用于停止当前匹配元素上正在运行的动画。默认情况下,stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画,如果当前正在执行的动画是A,则只会停止动画A的执行,不会阻止动画B和C的执行。当然,你也可以通过指定可选的选项参数来停止所有的动画。停止动画原创 2017-09-04 14:36:52 · 3972 阅读 · 0 评论 -
jquery漂浮广告代码
jquery漂浮广告代码有好多种实现方式,本文介绍的这种方法应该算得上是简单、实用、逻辑清晰的方法了。jquery漂浮广告代码 × --> var xin = true, yin = true;var step = 1;var delay = 10;var $obj;$(function() { $obj =原创 2017-09-04 16:48:38 · 7582 阅读 · 0 评论 -
jquery编程的标准写法和最佳实践(jquery代码规范)
关于jquery的代码规范,书写标准和最佳实践,是我近期看到的国外的一篇文章,感觉很受益!网上搜索了一下,果然被网友翻译过,但是查看翻译时间是2014年3月份左右,我又查看了该文章的更新时间是2014年10月14号。想必该文章很久之前就问世,但是作者又更改了不少问题吧,因此还是决定自己重新翻译一下!原文地址 ,文章翻译也是一件耗时耗力的事情,网友转载还请注明出处!加个链接!jQuery的加载1、我转载 2017-09-05 09:15:17 · 1499 阅读 · 0 评论 -
如何自己开发一款js或者jquery插件
引子现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢?首先是有扎实的js和jquery技术基础,其次还有一些写插件的方法和技巧。关于js和jquery的技术基础,那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧,本文可以略微介绍一下,方便以后写插件的时候原创 2017-09-05 09:28:14 · 4130 阅读 · 1 评论 -
javascript回到顶部滑动效果及点击导航滑动到相应热点的效果
总结一下javascript,jquery滑动效果的实现。其实代码很简单,回到顶部的代码就一句话就可以实现!$("body,html").animate({scrollTop:0},500);用jquery animate()方法,scrollTop到0,用500毫秒的时间。假如,你想用ID标签做热链接,也就是 href=”#ID”这种方法滑动的话,也很简单写一个click时间就可以了$("#a标签原创 2017-09-05 15:26:47 · 607 阅读 · 0 评论 -
62个jQuery代码开发技巧收集
jQuery代码开发技巧收集,jquery常用的开发代码今天分享一个jquery常用的开发代码,大部分是网友总结的,总共60条。后期我也会陆续完善! 把我在开发中常用的写在这里,希望持续关注~~1. 使用siblings()来处理同类元素// Rather than doing this$('#nav li').click(function(){ $('#nav li').remove原创 2017-09-05 16:01:46 · 273 阅读 · 0 评论 -
jQuery滑动tab选项卡
先上最终效果:需求分析: 1.选项卡菜单数量不固定,菜单内容不固定,导致了单个菜单和整体的宽度都是未知的, 2.第一个需求导致滑块宽度也是不固定的 3.为了让交互效果更好,滑块需要添加过度动画对滑块的需求导致滑块和菜单的html结构必须分离,并使用了jQuery的offset方法获取并设置位置,所有的div都使用了相对定位。 本案例的TAB选项卡可以比较方便的拓展、重复使用,只需修改少量值就原创 2017-09-13 18:15:38 · 2294 阅读 · 0 评论 -
jquery的height()和javascript的height总结,js获取屏幕高度
引子今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等各个方面超过小日本!在javascript和jquery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口、文档等高度的理解。(宽度和高度差不多!)jquery的各种高度首先来说一说(document)和(document)和(window),如下:$(document).height();//整个网页的高度$(wind原创 2017-09-06 10:04:12 · 566 阅读 · 0 评论 -
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
项目背景webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。遇到问题1、我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势,后面的文章会介绍,欢迎关注!2、通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪原创 2017-09-06 10:07:20 · 1400 阅读 · 0 评论 -
移动端那些事儿(二)jquery手势插件之jGestures
手机开发中,除了我们平时用的jquery基本事件之外,还有很多手势,今天介绍一款jquery手势插件jGestures,地址是:http://jgestures.codeplex.com/这个插件的强大之处在于它可以监听以下事件’pinch’(缩放手势), ‘rotate’(旋转手势), ‘swipe’(滑动手势), ‘tap’(轻触) 以及 ‘orientationchange’(改变设备方向)原创 2017-09-06 10:13:33 · 2237 阅读 · 0 评论 -
table表格合并第一列中相同的内容!
分享一个简单实用的jquery小插件:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ transition:.5s; transform: rotate(-45de原创 2017-09-06 11:06:35 · 6113 阅读 · 6 评论 -
$.browser 和 $.support
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是:?123456<!--[if lt原创 2017-08-28 17:03:02 · 453 阅读 · 0 评论 -
slice、substr、substring区别
一、正数参数含义上的区别。var strValue = "javascript programing";alert(strValue.slice(3)); //"ascript programing"alert(strValue.substring(3)); //"ascript programing"alert(strValue.substr(3));原创 2017-09-14 09:53:46 · 1028 阅读 · 0 评论 -
jQuery点击空白处隐藏弹出层
前言一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。方法一<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>front原创 2017-09-14 11:02:50 · 659 阅读 · 0 评论 -
jquery的animate多次执行后动画速度变慢
本质 多次执行 jQuery 动画, 并使用 stop 暂停, 并不是动画变慢, 而是调用 stop 时没有清空动画队列, 导致多个 timeout 来回更新样式, 忽大忽小, 从而看起来动画变慢了..stop( [clearQueue ] [, jumpToEnd ] )stop 默认不会清空队列, 并且跳转到动画结束位置, 两个可选参数默认值都为 false.改成:.stop(true, tr原创 2017-12-28 09:35:01 · 3142 阅读 · 0 评论