转:http://www.cnblogs.com/lhb25/p/10-useful-jquery-code-snippets.html
平滑滚动到锚点
这个功能很常见,在网站底部添加一个让访客快速回到页面顶部的功能,下面是实现这个功能的示例代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// HTML: // <h1 id="anchor">Lorem Ipsum</h1> // <p><a href="#anchor" class="topLink">Back to Top</a></p> $(document).ready( function () {
$( "a.topLink" ).click( function () {
$( "html, body" ).animate({
scrollTop: $($( this ).attr( "href" )).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false ;
});
}); |
缩放图片
虽然图片应该在服务器端缩放,不过如果服务器端未做缩放,需要再客户端缩放的时候,可以使用下面这个方便的代码片段:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
$(window).bind( "load" , function () {
// IMAGE RESIZE
$( '#product_cat_list img' ).each( function () {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $( this ).width();
var height = $( this ).height();
if (width > maxWidth){
ratio = maxWidth / width;
$( this ).css( "width" , maxWidth);
$( this ).css( "height" , height * ratio);
height = height * ratio;
}
var width = $( this ).width();
var height = $( this ).height();
if (height > maxHeight){
ratio = maxHeight / height;
$( this ).css( "height" , maxHeight);
$( this ).css( "width" , width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
}); |
滚动时自动加载内容
很多网站使用了流行的瀑布图布局,这种类型的网站在页面滚动的时候会自动加载内容。下面这段代码让你能够把这个功能搬到你的网站上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var loading = false ;
$(window).scroll( function (){
if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if (loading == false ){
loading = true ;
$( '#loadingbar' ).css( "display" , "block" );
$.get( "load.php?start=" +$( '#loaded_max' ).val(), function (loaded){
$( 'body' ).append(loaded);
$( '#loaded_max' ).val(parseInt($( '#loaded_max' ).val())+50);
$( '#loadingbar' ).css( "display" , "none" );
loading = false ;
});
}
}
}); $(document).ready( function () {
$( '#loaded_max' ).val(50);
}); |
检测密码强度
在表单功能中,经常会有检测用户输入的密码强度的功能,下面这个代码片段使用正则表达式来检测密码是否足够安全,当然记得在服务端也进行表单验证。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$( '#pass' ).keyup( function (e) {
var strongRegex = new RegExp( "^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$" , "g" );
var mediumRegex = new RegExp( "^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$" , "g" );
var enoughRegex = new RegExp( "(?=.{6,}).*" , "g" );
if ( false == enoughRegex.test($( this ).val())) {
$( '#passstrength' ).html( 'More Characters' );
} else if (strongRegex.test($( this ).val())) {
$( '#passstrength' ).className = 'ok' ;
$( '#passstrength' ).html( 'Strong!' );
} else if (mediumRegex.test($( this ).val())) {
$( '#passstrength' ).className = 'alert' ;
$( '#passstrength' ).html( 'Medium!' );
} else {
$( '#passstrength' ).className = 'error' ;
$( '#passstrength' ).html( 'Weak!' );
}
return true ;
}); |
均衡元素的高度
使用纯 CSS代码实现均衡元素的高度比较困难,而下面这段 jQuery 代码会根据最高的元素来均衡所有的 Div 元素。
1
2
3
4
5
6
7
|
var maxHeight = 0;
$( "div" ).each( function (){
if ($( this ).height() > maxHeight) { maxHeight = $( this ).height(); }
}); $( "div" ).height(maxHeight);
|
修复 IE6 PNG 问题
至今,IE6 在国内仍然占据了大量的份额,因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。比较常用的 IE6 PNG 图片问题,下面这段代码可以方便的修复。
1
2
3
4
5
|
$( '.pngfix' ).each( function () {
$( this ).attr( 'writing-mode' , 'tb-rl' );
$( this ).css( 'background-image' , 'none' );
$( this ).css( 'filter' , 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")' );
}); |
解析 JSON 字符串
使用 jQuery 解析 JSON 数据并不复杂。下面是一个高效解析 JSON 数据并将其追加到您的网页的例子。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
function parseJson(){
//Start by calling the json object, I will be using a
//file from my own site for the tutorial
//Then we declare a callback function to process the data
$.getJSON( 'hcj.json' ,getPosts);
//The process function, I am going to get the title,
//url and excerpt for 5 latest posts
function getPosts(data){
//Start a for loop with a limit of 5
for ( var i = 0; i < 5; i++){
var strPost = '<h2>'
+ data.posts[i].title
+ '</h2>'
+ '<p>'
+ data.posts[i].excerpt
+ '</p>'
+ '<a href="'
+ data.posts[i].url
+ '" title="Read '
+ data.posts[i].title
+ '">Read ></a>' ;
//Append the body with the string
$( 'body' ).append(strPost);
}
}
} //Fire off the function in your document ready $(document).ready( function (){
parseJson();
}); |
隔行换色
这是一个很老的功能了,在大的列表或表格中,隔行颜色可以大大提高内容的可读性。下面的代码可以非常简单实现这个功能。
$( 'div:odd' ).css( "background-color" , "#F4F4F8" );
$( 'div:even' ).css( "background-color" , "#EFF1F1" );
|
预加载图片
你是否注意到 facebook 相册的图片加载速度特别快?那是因为在你看到这些图片之前已经预加载到你的浏览器缓存中了。下面是实现这个类似功能的代码示例:
1
2
3
4
5
6
7
8
|
var nextimage = "/images/some-image.jpg" ;
$(document).ready( function (){
window.setTimeout( function (){
var img = $( "<img>" ).attr( "src" , nextimage).load( function (){
//all done
});
}, 100);
}); |
让整个 Div 可点击
这是实现链接的父 Div 也能够点击的简单方法,HTML 示例代码如下:
<div class="myBox"> blah blah blah. <a href="http://google.com">link</a> </div>
下面的 jQuery 代码让整个 Div 可点击:
$(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
相关推荐
从给定的文件信息中,我们可以提炼出一系列关于jQuery的重要知识点,这50个代码片段不仅展示了jQuery的强大功能,还提供了实用的编程技巧,适用于各种JavaScript项目。以下是对部分代码片段的详细解释: ### 1. ...
### jQuery实用代码片段集合知识点 ...以上知识点涵盖了在实际开发中常用的jQuery代码片段,它们可以提高开发效率,增强用户体验。通过这些实用的代码片段,开发者可以更灵活地处理常见的前端开发场景。
这个“45个实用的jquery代码片段”集合为开发者提供了丰富的资源,可以帮助他们更高效地开发网页应用。下面,我们将详细讨论这些jQuery代码片段中的关键知识点。 1. **选择器**:jQuery提供了丰富且直观的选择器,...
这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...
标题中提到的是“直接拿来用的15个jQuery代码片段”,这表明本文将分享十五个可以直接应用于项目中的实用jQuery代码片段。jQuery是广泛使用的一个JavaScript库,它简化了HTML文档遍历、事件处理、动画以及AJAX交互...
在网页设计中,用户体验往往是非常重要的一环,而“返回顶部”功能则是一个常见的提升用户体验的设计元素。这个“简单实用jQuery返回顶部代码.zip...在实际项目中,这样的代码片段可以被轻松集成,提升网站的整体质量。
### 一些实用的jQuery代码片段 #### 1. 使用jQuery获取用户的IP地址 在Web开发中,有时我们需要知道用户所在的IP地址,以便进行一些特定的操作,例如地理定位、访问控制等。下面是一段使用jQuery来获取用户IP地址...
《超实用的jQuery代码段》这本书提供了大量实用的jQuery代码片段,这些片段可以帮助开发者快速地解决实际项目中遇到的问题。通过学习本书,不仅可以提升使用jQuery的能力,还能提高开发效率。对于初学者来说,这本书...
《超实用的jQuery代码段》是一本专注于jQuery实践的书籍,其配套源码提供了一整套丰富的代码示例,帮助读者深入理解并掌握jQuery库在实际项目中的应用。jQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理...
以下是一些实用的jQuery表单操作代码片段,它们涵盖了表单的常见需求。 1. **禁用‘回车键’提交表单**: 当用户在表单中按下回车键时,有时我们不希望表单被意外提交。通过监听 `keypress` 事件,我们可以阻止...
### 50个必备的实用jQuery代码段 #### 1. 如何创建嵌套的过滤器 嵌套过滤器能够帮助我们进一步精简选择器的结果集。例如,我们需要找到所有不包含特定类(如 `selected`)子元素的元素。 ```javascript // 创建一...
以上代码片段展示了jQuery在处理表单交互时的灵活性和实用性。它们可以帮助开发者更有效地管理用户输入,防止错误操作,以及优化用户体验。在实际项目中,可以根据具体需求进行调整和扩展,以满足各种复杂场景的需求...
本资源"jQuery简单实用分页代码.zip"提供了一个基于jQuery 1.11.1.min.js库的分页解决方案,适用于那些希望在网站上实现高效、简洁分页功能的开发者。 jQuery是一款强大的JavaScript库,它简化了JavaScript的DOM...
10个超实用的jQuery代码片段 jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!
以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素集合,如`":not(:has(.selected))"`用于移除包含特定类的元素。 2. **元素引用**:存储已选择的...
这个压缩包文件“超实用的jQuery代码段”显然是一份汇集了多个常见和实用jQuery代码片段的资源,对于前端开发者来说极具价值。下面,我们将深入探讨这些关键知识点。 1. **选择器**:jQuery的选择器使得选取DOM元素...
在`firebug动态加载js脚本.txt`文件中,可能包含了一些关于如何在Firebug控制台中执行这些操作的步骤和代码片段。 6. **扩展应用**:除了在Firebug控制台中使用,这种动态加载和执行jQuery的方法还可以应用于实际的...
这个“简单实用的jQuery多尺寸图片上传预览代码”是一个针对网页图片上传功能的解决方案,尤其适用于需要在用户上传前预览不同尺寸图片的应用场景。 首先,我们来看`index.html`。这是项目的主页面,它包含了HTML...
jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了网页中的 DOM 操作、事件处理和动画效果。以下是一些关于 jQuery 的常见...了解并熟练掌握这些代码片段,可以提升工作效率,创建出更加用户友好的 web 应用。
**jQuery基础** jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、...每个示例都是一个独立的代码片段,你可以逐一研究,理解它们的运作机制,并尝试应用到自己的项目中,从而提高你的jQuery技能。