9 个超实用的 jQuery 代码片段
来源:互联网 发布:科荣erp进销存软件 编辑:程序博客网 时间:2024/05/24 05:15
jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!
1. jQuery平滑回到顶端效果
在线调试
2. jQuery处理图片尺寸
在线调试
3. jQuery实现的滚动自动加载代码
4. jQuery测试密码强度
在线调试
5. jQuery实现的DIv高度保持一致
在线调试
6. 简单处理IE6上PNG格式文件
将class=pngfix添加到需要处理的对象即可。
7. jQuery处理JSON
8. jQuery实现让整个div可以被点击
在线调试
9. jQuery实现的Facebook风格的图片预加载效果
希望大家喜欢这些实用的jQuery代码,如果你也有更多的jQuery代码片段,请与我们分享,谢谢!
Via 极客社区 来源:分享10个超实用的jQuery代码片段
1. jQuery平滑回到顶端效果
- $(document).ready(function() {
- $("a.topLink").click(function() {
- $("html, body").animate({
- scrollTop: $($(this).attr("href")).offset().top + "px"
- }, {
- duration: 500,
- easing: "swing"
- });
- return false;
- });
- });
在线调试
2. jQuery处理图片尺寸
- $(window).bind("load", function() {
- // 图片修改大小
- $('#imglist 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;
- }
- if(height > maxHeight){
- ratio = maxHeight / height;
- $(this).css("height", maxHeight);
- $(this).css("width", width * ratio);
- width = width * ratio;
- }
- });
- });
在线调试
3. jQuery实现的滚动自动加载代码
- 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);
- });
4. jQuery测试密码强度
- $('#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;
- });
在线调试
5. jQuery实现的DIv高度保持一致
- var maxHeight = 0;
- $("div").each(function(){
- if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
- });
- $("div").height(maxHeight);
在线调试
6. 简单处理IE6上PNG格式文件
- $('.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")');
- });
将class=pngfix添加到需要处理的对象即可。
7. jQuery处理JSON
- 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++){
- //Build a template string of
- //the post title, url and excerpt
- 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();
- });
8. jQuery实现让整个div可以被点击
- $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
在线调试
9. jQuery实现的Facebook风格的图片预加载效果
- var nextimage = "http://www.gbtags.com/gb/networks/uploadimgthumb/55d67b14-fb25-45e7-acc8-211a41047ef0.jpg";
- $(document).ready(function(){
- window.setTimeout(function(){
- var img = $("<img>").attr("src", nextimage).load(function(){
- $('div').append(img);
- });
- }, 100);
- });
- [url=http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm]在线调试[/url]
希望大家喜欢这些实用的jQuery代码,如果你也有更多的jQuery代码片段,请与我们分享,谢谢!
Via 极客社区 来源:分享10个超实用的jQuery代码片段
来自: www.gbin1.com
- 9 个超实用的 jQuery 代码片段
- 9 个超实用的 jQuery 代码片段
- 9 个超实用的 jQuery 代码片段
- 分享10个超实用的jQuery代码片段
- 分享10个超实用的jQuery代码片段
- 分享10个超实用的jQuery代码片段
- 分享10个超实用的jQuery代码片段
- 10个超实用的jQuery代码片段分享
- 10个超实用的jQuery代码片段分享
- 15 个实用的Jquery代码片段
- 10 个实用的jQuery 代码片段
- 《超实用的代码片段》
- jQuery:12 个非常实用的 jQuery 代码片段
- PHP开发者必备,超实用的9个拿来就用的代码片段
- 实用的jQuery代码片段
- 实用的jQuery代码片段
- 实用的 jQuery 代码片段
- 10 个实用的 jQuery 表单操作代码片段
- 企业级报表软件都需要具备哪些功能?
- 完全卸载oracle11g步骤:
- volatile
- 我的csdn
- C++ const学习
- 9 个超实用的 jQuery 代码片段
- 判断一个数是否是质数
- 对 (1<<1) 的研究
- 限定只能在栈或堆上实例化的类
- 重建二叉树
- 2.3 常见内核数据结构 : 网络数据结构
- 对于位域的分析
- 交换两个数据的方法
- linux dd备份恢复系统