关注前端开发微信微信号web007007

jQuery父级以及同级元素查找介绍

jQuery父级以及同级元素查找介绍

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$(“span”).parent()或者$(“span”).parent(“.class”) jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有...

阅读全文...

JavaScript 的新领域 – 动态图片处理(SVG)

JavaScript 的新领域 – 动态图片处理(SVG)

背景 当 JavaScript 被 Netscape 公司发明出来时,它被用来做一些琐细的事情,比如校验表单、计算日期、提示用户;随着 Web 的迅速发展,这种轻巧而灵活的语言被委以越来越多的任务,动态地修改页面内容,一致地处理事件,甚至无刷新地和服务器交互。然而,与传统的客户端编程相比,JavaScript 操作的对象限制在 DOM 模型之内,无法进行图形编程。所以长久以来,我们在设计网页时都仅仅是在“搭积...

阅读全文...

Js针对window窗体大小设置

Js针对window窗体大小设置

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft ...

阅读全文...

手机触摸屏的JS事件

手机触摸屏的JS事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件: 一、 touchstart:// 手指放到屏幕上的时候触发 touchmove:// 手指在屏幕上移动的时候触发 touchend:// 手指从屏幕上拿起的时候触发 touchcancel:// 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 二、 client / clientY:// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY:// 触摸点相对于...

阅读全文...

JavaScript判断浏览器类型及版本

JavaScript判断浏览器类型及版本

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。 浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有...

阅读全文...

前端页面有哪三层构成,分别是什么?作用是什么?

前端页面有哪三层构成,分别是什么?作用是什么?

有许多 web 设计师都有为纸质印刷品设计版面的经验。事实上,设计网站时,把网页当做纸质印刷品来对待是最容易想到的思想,除了把白纸换成了屏幕,其他做法没什么两 样。这种做法注定会失败。 Web 是一种不同的媒体。在设计纸质印刷品是时,必须把原始内容和版面设计交织在一起才能看到最终的印刷效果,但在设计网页时,只有将其分离开来才能获得最佳的 结果。 最准确的网页设计思路是把网页分...

阅读全文...

jQuery选择器大全

jQuery选择器大全

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过...

阅读全文...

深入浅出Node.js(一):什么是Node.js

深入浅出Node.js(一):什么是Node.js

【编者按】:Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹。从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟Joyent获得企业资助,再到今年发布Windows移植版本,Node.js的前景获得了技术社区的肯定。InfoQ一直在关注Node.js的发展,在今年的两次Qcon大会(北京站和杭州站)都有专门的讲座。为了更好地促进Node.js在国内的技术推广,我们决定开设“深入...

阅读全文...

监听文本框输入(input & textarea)

监听文本框输入(input & textarea)

基本概念 Firefox、Chrome、IE9&IE9+ 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件。 oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。 onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl ...

阅读全文...

阻止事件(取消其默认行为并阻止其传播)

阻止事件(取消其默认行为并阻止其传播)

功能描述 取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播。 实现代码 function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } } 只阻止事件继续传播(不取消默认行...

阅读全文...

HTML5 jQuery 绘图插件

HTML5 jQuery 绘图插件

Websanova Paint 是一个利用 HTML5 画布(canvas)技术的 jQuery 插件。它能够让你自由的在画板区域使用各种颜色画出任意的形状,还能够涂改。它能让你设定所画形状的边框,然后用颜色填充。你还能调整画笔的粗细。它的一个最有趣的功能是能让你把画好的作品保存成图片,日后你还能载入这个图片进行二次修改,但有个限制,图片只支持 PNG 格式的。下面是演示: 这个 jQuery 插件的下载地址是:http...

阅读全文...

选择jQuery的理由

选择jQuery的理由

随着 Web 前端技术的发展,Javascript 框架层出不穷,jQuery 就是其中之一。最近,国内外社区针对 jQuery 的优缺点做了深入的分析,其中不少内容值得 Web 开发人员借鉴。 Richard Hein 在“6 Things You Need to Know About jQuery”一文中列举了推荐 jQuery 的托干理由,包括: jQuery 简化工作——开发人员会发现学习 jQuery 比较容易,因为该框架的代码简洁精练,语法简单、编码标准开发等特点帮...

阅读全文...

jquery 基础语法

jquery 基础语法

基本语法: $(“HTML元素”).action() 实例: $(this).hide(); 隐藏当前元素 $(“p”).hide(); 隐藏所有段落 $(“p.test”).hide(); 隐藏所有 class=”test”的段落 $(“#test”).hide(); 隐藏所有id=”test”的元素 文档就绪函数 $(document).ready(function(){ ——– }); 这是为了防止文档在完全加载(就绪)之前...

阅读全文...

常用JavaScript语法107条–WEB前端攻城狮剥壳收藏

常用JavaScript语法107条–WEB前端攻城狮剥壳收藏

1、什么是JavaScript? JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举,还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。 今天前端攻城狮剥壳给你分享107个javascript基础语法,也算是JavaScript入门教程。这些javascript语法是...

阅读全文...

jQuery图片插件:fancybox,点击放大图片多种样式,图片浏览必备

jQuery图片插件:fancybox,点击放大图片多种样式,图片浏览必备

fancybox是一款jQuery插件,这个插件能让你在各种浏览器上部署图片浏览的效果。 基于jQuery的插件,兼容性都比较强。可以兼容firefox,ie等浏览器。 当你需要实现点击图片,就能将图片放大来查看。就像QQ,校内,新浪,淘宝一些图片浏览模式一样。 fancybox还提供多种弹出的样式,让你可以选择,找出你最需要的效果,满足不同的设计和需求。 fancybox官网 fancybox提供的实例界面 fancybox单图...

阅读全文...

SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】

SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】

Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件。 Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项。 用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片。它附带充分的说明和示例。 DEMO地址:http://slidesjs.com/ 官网地址:http://slidesjs.com/ 下载地址:http://slidesjs.com/downloads/slides.z...

阅读全文...

javascript keycode大全

javascript keycode大全

keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode 36 = Home keycode 37 = Left keycode 38 = Up keycode 39 = R...

阅读全文...

JavaScript五种继承方式

JavaScript五种继承方式

1)继承第1种方式:对象冒充   2)继承第2种方式: call方法call方法是Function对象中的方法,因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法,call方法的第一个参数会被传递给函数中的this,从第二个参数开始,逐一赋值给函数中的参数。   3)继承第3种方式: apply方法apply方法与call方法的不同之处在于,apply方法第二个参数传递的是一个数组,而不像call方法...

阅读全文...

向非程序员解释 JavaScript

向非程序员解释 JavaScript

当我告诉非程序员我的专业工作是 JavaScript 的时候,我往往得到的回答是“是不是那个安装以后让浏览器变的缓慢的东西?”,我很惊讶: 1. 知道 Java 的人比知道 JavaScript 的人要多很多,也许是很多人都曾经被问过是否需要安装 Java。 2. 这对 Java 来说不是好事,因为它和负面的印象联系在一起。虽然 JavaScript 对 Web 来说是如此重要,但是大部分人仍然不知道它的存在。 什么是 JavaScript? ...

阅读全文...

jquery 中国省市信息联动插件

jquery 中国省市信息联动插件

分享一个jquery 中国省市信息联动插件,上代码 $._cityInfo = [{"n":"北京市","c":["北京市"]}, {"n":"天津市","c":["天津市"]}, {"n":"上海市","c":["上海市"]}, {"n":"重庆市","c":["重庆市"]}, {"n":&...

阅读全文...