`
sassds
  • 浏览: 154987 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

10 个 jQuery 代码片段

阅读更多

 

[代码]图片预加载

01 (function($) {
02 varcache = [];
03 // Arguments are image paths relative to the current page.
04 $.preLoadImages =function() {
05 varargs_len = arguments.length;
06 for(vari = args_len; i--;) {
07 varcacheImage = document.createElement('img');
08 cacheImage.src = arguments[i];
09 cache.push(cacheImage);
10 }
11 }
12
13 jQuery.preLoadImages("image1.gif","/path/to/image2.png");

[代码]在新窗口打开链接 (target=”blank”)

1 $('a[@rel$='external']').click(function(){
2 this.target ="_blank";
3 });
4
5 /*
6 Usage:
7 <a href="http://www.catswhocode.com" rel="external">catswhocode.com</a>
8 */

[代码]当支持 JavaScript 时为 body 增加 class

1 /* 该代码只有1行,但是最简单的用来检测浏览器是否支持 JavaScript 的方法,如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */
2 $('body').addClass('hasJS');

[代码]平滑滚动页面到某个锚点

01 $(document).ready(function() {
02 $("a.topLink").click(function() {
03 $("html, body").animate({
04 scrollTop: $($(this).attr("href")).offset().top +"px"
05 }, {
06 duration: 500,
07 easing:"swing"
08 });
09 returnfalse;
10 });
11 });

[代码]鼠标滑动时的渐入和渐出

1 $(document).ready(function(){
2 $(".thumbs img").fadeTo("slow", 0.6);// This sets the opacity of the thumbs to fade down to 60% when the page loads
3
4 $(".thumbs img").hover(function(){
5 $(this).fadeTo("slow", 1.0);// This should set the opacity to 100% on hover
6 },function(){
7 $(this).fadeTo("slow", 0.6);// This should set the opacity back to 60% on mouseout
8 });
9 });

[代码]制作等高的列

1 varmax_height = 0;
2 $("div.col").each(function(){
3 if($(this).height() > max_height) { max_height = $(this).height(); }
4 });
5 $("div.col").height(max_height);

[代码]在一些老的浏览器上启用 HTML5 的支持

01 (function(){
02 if(!/*@cc_on!@*/0)
03 return;
04 vare ="abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}
05 })()
06
07 //然后在head中引入该js
08 <!--[iflt IE 9]>
09 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
10 <![endif]-->

[代码]测试浏览器是否支持某些 CSS3 属性

01 varsupports = (function() {
02 vardiv = document.createElement('div'),
03 vendors ='Khtml Ms O Moz Webkit'.split(' '),
04 len = vendors.length;
05
06 returnfunction(prop) {
07 if( propindiv.style )returntrue;
08
09 prop = prop.replace(/^[a-z]/,function(val) {
10 returnval.toUpperCase();
11 });
12
13 while(len--) {
14 if( vendors[len] + propindiv.style ) {
15 // browser supports box-shadow. Do what you need.
16 // Or use a bang (!) to test if the browser doesn't.
17 returntrue;
18 }
19 }
20 returnfalse;
21 };
22 })();
23
24 if( supports('textShadow') ) {
25 document.documentElement.className +=' textShadow';

[代码]获取 URL 中传递的参数

1 $.urlParam =function(name){
2 varresults =newRegExp('[\\?&]'+ name +'=([^&#]*)').exec(window.location.href);
3 if(!results) {return0; }
4 returnresults[1] || 0;
5 }

[代码]禁用表单的回车键提交

1 $("#form").keypress(function(e) {
2 if(e.which == 13) {
3 returnfalse;
4 }
5 });
分享到:
评论

相关推荐

    高效Web开发的10个jQuery代码片段_.docx

    以下是从"高效Web开发的10个jQuery代码片段"中提炼出的关键知识点: 1. **检测Internet Explorer版本**: 使用`navigator.userAgent`对象可以检测用户使用的浏览器类型。通过匹配字符串`msie/i`,我们可以判断是否...

    50个jquery代码片段

    从给定的文件信息中,我们可以提炼出一系列关于jQuery的重要知识点,这50个代码片段不仅展示了jQuery的强大功能,还提供了实用的编程技巧,适用于各种JavaScript项目。以下是对部分代码片段的详细解释: ### 1. ...

    高效Web开发的10个jQuery代码片段

    下面详细介绍的10个jQuery代码片段,是从日常开发工作中提炼出的高效实用技巧,它们对于Web开发人员来说十分有帮助。 1. 检测Internet Explorer版本 这个代码片段有助于识别访问网站的用户是否使用的是Internet ...

    直接拿来用的15个jQuery代码片段

    标题中提到的是“直接拿来用的15个jQuery代码片段”,这表明本文将分享十五个可以直接应用于项目中的实用jQuery代码片段。jQuery是广泛使用的一个JavaScript库,它简化了HTML文档遍历、事件处理、动画以及AJAX交互...

    10 个很棒的 jQuery 代码片段

    10 个很棒的 jQuery 代码片段 - 代码分享

    45个实用的jquery代码片段

    这个“45个实用的jquery代码片段”集合为开发者提供了丰富的资源,可以帮助他们更高效地开发网页应用。下面,我们将详细讨论这些jQuery代码片段中的关键知识点。 1. **选择器**:jQuery提供了丰富且直观的选择器,...

    jQuery常用代码片段

    这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...

    49个jQuery代码经典片段

    以下是从给定的“49个jQuery代码经典片段”中提炼出的一些关键知识点: 1. **修改 jQuery 默认编码**: jQuery 默认使用 UTF-8 编码,但可以通过 `$.ajaxSetup` 设置全局的 `contentType` 来改变编码,如将编码改...

    一些实用的jQuery代码片段

    ### 一些实用的jQuery代码片段 #### 1. 使用jQuery获取用户的IP地址 在Web开发中,有时我们需要知道用户所在的IP地址,以便进行一些特定的操作,例如地理定位、访问控制等。下面是一段使用jQuery来获取用户IP地址...

    常用的几个JQuery代码片段

    jQuery 是一款广泛使用的 JavaScript 库,它极大地简化...以上就是一些常用的 jQuery 代码片段,它们涵盖了常见的交互效果、数据管理以及兼容性处理等多个方面。熟练掌握这些技巧,能够使你在网页开发中更加得心应手。

    jQuery选择器大全(48个代码片段 21幅图演示)

    **jQuery选择器大全** jQuery库以其易用性和强大的选择器...结合代码片段和21幅图的演示,可以更直观地理解并掌握每个选择器的工作原理和应用场景。在实际项目中,熟练运用jQuery选择器能大大提高开发效率和代码质量。

    jquery代码片段

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2 才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。

    VS2010 VS2012最好用的JQuery代码段

    在Visual Studio 2010 和 2012 这两个版本中,开发人员可以利用jQuery代码片段来提高编码效率。本文将详细介绍如何在VS2010和VS2012中使用这些代码片段,以及它们为何被视为“最好用”的。** **一、安装jQuery库** ...

    10个超棒jQuery表单操作代码片段

    以下将详细解析给出的四个代码片段,这些代码片段旨在优化和控制表单的行为。 1. **禁止通过回车键提交表单** 这段代码用于阻止用户在表单中按下回车键时意外提交表单。它监听`keypress`事件,如果检测到的键码(`...

    jquery实用代码片段集合

    ### jQuery实用代码片段集合知识点 ...以上知识点涵盖了在实际开发中常用的jQuery代码片段,它们可以提高开发效率,增强用户体验。通过这些实用的代码片段,开发者可以更灵活地处理常见的前端开发场景。

    60个实用的jQuery代码片段.pdf

    以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素集合,如`":not(:has(.selected))"`用于移除包含特定类的元素。 2. **元素引用**:存储已选择的...

    Jquery必备 必学的7个代码片段

    以上就是7个重要的 jQuery 代码片段,涵盖了打印页面、输入框提示、全选/取消全选复选框、禁用右键点击、淡入淡出效果、回到顶部功能以及 AJAX 表单提交等常见任务的解决方案。学习并掌握这些代码片段,将有助于提升...

    Firebug控制台动态加载jquery脚本并执行jquery代码

    在`firebug动态加载js脚本.txt`文件中,可能包含了一些关于如何在Firebug控制台中执行这些操作的步骤和代码片段。 6. **扩展应用**:除了在Firebug控制台中使用,这种动态加载和执行jQuery的方法还可以应用于实际的...

    50个常见的JQUery代码

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了网页中的 DOM 操作、事件处理和动画效果。以下是一些关于 jQuery 的常见...了解并熟练掌握这些代码片段,可以提升工作效率,创建出更加用户友好的 web 应用。

    jQuery 常用代码段

    这个压缩包文件“超实用的jQuery代码段”显然是一份汇集了多个常见和实用jQuery代码片段的资源,对于前端开发者来说极具价值。下面,我们将深入探讨这些关键知识点。 1. **选择器**:jQuery的选择器使得选取DOM元素...

Global site tag (gtag.js) - Google Analytics