一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： .代码如下: $(document)//选择整个文档对象 $('#myId')//选择ID为myId的网页元素 $('div.myClass')//选择class为myClass的div元素 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式： .代码如下: $('a:first')//选择网页中第一个a元素 $('tr:odd')//选择表格的奇数行 $('#myForm :input')//选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)')//选择所有的div元素，除了前三个 $('div:animated')//选择当前处于动画状态的div元素 二、改变结果集 如果选中多个元素，jQuery提供过滤器，可以缩小结果集： .代码如下: $('div').has('p'); //选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： .代码如下: $('div').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 三、链式操作 选中网页元素以后，就可以对它进行某种操作。 jQuery允许将所有操作连接在一起，以链条的形式写出来，比如： .代码如下: $('div').find('h3').eq(2).html('Hello'); 我们可以这样拆封开来，就是下面这样： .代码如下: $('div')//找到div元素 .find('h3')//选择其中的h3元素 .eq(2)//选择第3个h3元素 .html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。 jQuery还提供了 .end() 方法，使得结果集可以后退一步： .代码如下: $('div') .find('h3') .eq(2) .html('Hello') .end()//退回到选中所有的h3元素的那一步 .eq(0)//选中第一个h3元素 .html('World'); //将它的内容改为World 四、元素的操作：取值和赋值 操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。 jQuery使用同一个函数，来完成取值 (getter) 和赋值 (setter)。 到底是取值还是赋值，由函数的参数决定。 $('h1').html(); //html()没有参数，表示取出h1的值 $('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值 常见的取值和赋值函数如下： .代码如下: .html() 取出或设置html内容 .text() 取出或设置text内容 .attr() 取出或设置某个属性的值 […]
View Details在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。 在说区别之前还是先总结一下三者的相似之处： 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 那么他们的区别在哪里的，先看一个例子。 var xw = { name : "小王", gender : "男", age : 24, say : function() { […]
View Details/* * 智能机浏览器版本信息: * */ var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 }; } […]
View Details基于移动端的微信和wap网站开发，日益火起来，下面贴一段智能判断分流的代码，希望对菜鸟有所帮助！ <?php function isMobile(){ $useragent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : "; $useragent_commentsblock = preg_match('|(.*?)|',$useragent,$matches) --> 0 ? $matches[0] : "; } function CheckSubstrs($substrs, $text) { foreach ( $substrs as $substr ) { if (false !== strpos($text,$substr)) { return true; } return false; } $mobile_os_list = array ( 'Google Wireless Transcoder', 'Windows CE', 'WindowsCE', 'Symbian', 'Android', 'armv6l', 'armv5', 'Mobile', 'CentOS', 'mowser', 'AvantGo', 'Opera Mobi', 'J2ME/MIDP', 'Smartphone', 'Go.Web', 'Palm', 'iPAQ' ); $mobile_token_list = array ( 'Profile/MIDP', 'Configuration/CLDC-', '160×160', '176×220', '240×240', '240×320', '320×240', 'UP.Browser', 'UP.Link', 'SymbianOS', 'PalmOS', 'PocketPC', 'SonyEricsson', 'Nokia', 'BlackBerry', […]
View Details网页上漂亮的消息提醒不仅耳目一神，关键是引起用户的主题，实实在在起到提醒而不扰民的用途。本文向你推荐 25 个漂亮的 jQuery 消息提醒插件，你值得拥有。 偷个懒不翻译了，大家点击图片可直达官网。 1. jQuery Toastmessage jquery-toastmessage-plugin is a JQuery plugin which provides android-like notification messages. The toasted messages arriving on the screen in a seamless and natural way. 2. jQuery Notification Menu A jQuery plugin to add notification bubbles and a notification list to any menu. 3. Noty noty 是一个很有用的 jQuery 插件，用于创建 alert, success, error and confirmation 信息提示框，替换浏览器标准的对话框。每个提醒都是添加队列并进行显示的。 4. Notify Notify! is a jQuery Notification Plugin which adds simple notifications bars that you can use on your website and application to assist users while […]
View Details2014年11月23日源创会年度盛典（北京站）正在报名 每次发这类文章时，用户集中反馈的问题包括： 好像以前发过 —— 答：标题类似，内容不同 怎么只有名称和图片，没有介绍 —— 答：介绍千篇一律，没什么特别的，图片更加直接，当然了最主要是为了偷懒，哈哈 怎么那么多前端的内容？ —— 答：多不好吗？ 1. MenuItems 2. Sidr 3. Material Menu 4. Responsive Tabbed Navigation 5. PGW Menu 6. jQuery Slimmenu 7. jQuery Sliding Menu 8. Responsive Tabs 9. Mmenu 10. Flex Nav 11. Responsive Full Width Tabs 12. Fixed Nav 13. Daisy Nav 14. Navgoco 15. Naver 16. Smart Menus 17. jQuery Fluid Content Scroller 18. Menu-aim 19. HorizontalNav 20. SlickNav 21. TinyNav.js 22. Menutron 23. Flaunt.js 24. jPanel Menu 25. Repsonsive Toggle Menu via codegeekz from:http://www.oschina.net/news/56988/responsive-jquery-navigation-plugins
View DetailsBootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。 本文向你推荐 50 个 Bootstrap 的插件，可以考虑在你下一个项目中使用它们。 1. Bootstrap Multiselect 2. Bootstrap Dialog 3. Bootstrap Confirmation 4. Bootstrap Tag Input 5. Bootstrap File Input 6. Bootstrap WYSIWYG 7. Bootstrap Select 8. pNotify Pines Notify 是一个 JavaScript 的消息提醒插件，基于 Bootstrap 框架和 jQuery UI 框架。 9. Bootstrap Forms Helper 10. Pongstagr.am 11. X-editables X-editable 基于 Bootstrap、jQuery UI 和 jQuery 实现了网页文本即时编辑的功能。支持包括文本框、textarea、下拉列表、日期选择等。支持 IE7+ 和其他浏览器。 12. Bootstrap Lightbox Plugin 13. Editable Table 14. Timepicker 15. ClockPicker 16. Bootstrap Video Player 17. Bootstrap Progressbar 18. jQuery Sortable 19. Bootstrap Star Rating 20. Bootstrap Growl 21. Feedback […]
View Details在浏览器中，我们有很多方式来绘制生成签名效果，并且有很多很棒很智能的jQuery插件。数字化签名是未来的发展方向，正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件，希望大家喜欢！ 1. jSignature 这个jQuery插件简化了创建数据签名的过程，允许用户使用鼠标，手写板，手指来绘制签名。这里是演示 2. Signature Pad 这个jQuery插件可以辅助使用HTML5画布来实现数字签名。它保存签名为JSON，并且可以以后再重新生成，这里是演示 3. jQuery UI Signature 这个jQueryUI插件帮助捕捉或者绘制签名。要求jQuery UI组件和鼠标模块，如果需要支持老版本IE的话，需要excanvas.js。 4. jSignature 一个jQuery插件帮助添加web签名功能的插件。这里可以查看演示 阅读原文：四款超棒的jQuery数字化签名插件 from:http://www.oschina.net/news/53718/4-jquery-signature-plugins
View Details喜欢哪个赶紧带走，过期不候。 Animated Progress Bars with CSS3 [ Demo | Download ] Spin JS Bar [ Demo | Download ] The Facebook loading animation [ Demo | Download ] Flickr Style Loading Animation [ Demo | Download ] CSS3 Loading Spinners Without Images [ Demo | Download ] Sonic.js [ Demo | Download ] QueryLoader2 – Preload your images with ease [ Demo | Download ] jQuery Progress Bar [ Demo | Download ] jQuery Ajax Loader & Spinner [ Demo | Download ] Animated jQuery Progressbar [ Demo | Download ] Automatic Page Load & Ajax Request Progress Bar [ Demo | Download ] CSS Load [ Demo | Download ] Mambo [ Demo | Download ] Google Like jQuery Slim Progress Bar Plugin [ Demo | Download ] CanvasLoader Creator [ Demo | Download ] Loader Bar [ Demo | Download ] Animated Progress Bar [ Demo | Download ] Animated Progress Bar in 4 […]
View DetailsjQuery 是一种快速、简洁的 JavaScript 库，可以简化 HTML 文档遍历、事件处理、动画和 Ajax 交互，能快速进行 web 开发。一个 jQuery 插件基本上是一种新方法，用来扩展 jQuery 原型对象。当扩展原型对象时，所有的 jQuery 对象就会启用并且能够添加和继承其他的任何方法。 1. Bigvideo.js BigVideo.js 是一个 jQuery 视频插件，能让用户很方便将视频作为网站的背景并且能够生成自适应的视频背景。它可以播放一个无声视频（或一系列视频），或者像播放器一样提供一个视频列表给用户，让他们选择喜欢的进行播放。这个插件基于 Video.js 构建。此外如果有些设备不支持自动播放则转换成用图片来显示。这款插件要求 jQuery UI（滑块控制）和 jQuery 图像加载插件。在线演示 2. jPlayer jPlayer 是个完全免费和开源的媒体库 (media library)。作为jQuery插件的一员，使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频。通过jPlayer的API，你可以构想出具有创意的影音解决方案。 在线演示 3. Tubular Tubular 是一款 jQuery 插件，允许用户自由的设置 YouTube 上面的视频作为自己网页的背景。直接使用的时候需要安装 Javascript 和 Flash player 和具有相应功能的客户端浏览器。Tubular 依赖于 jQuery 和swfobject 。用户使用的时候只需要添加到你的 body 标签里面，指定一个 YouTube 的视频 ID 并且把 ID 告诉你的内容封装。需要注意的是，Tubular 必须部署在 web 服务器上。 4. FitVids.js Fitvids.js 是个轻量级，易于使用的 jQuery 插件，用来在网页上播放指定宽度的嵌入视频。Fitvides.js 会自动通过 Thierry Koblentz 的 Intrinsic Ration 方法来在你的响应式网页中实现流体宽度视频。有一款自定义的视频播放器吗？答案是肯定的，Fitvides.js 提供一个 customSelector 自定义选择器，允许用户添加自定义的视频供应商。在线演示 5. BigScreen BigScreen 是一个调用 JavaScript Full Screen API 的 […]
View Details