jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可,jQuery已经成为最流行的javascript库,下面给大家推荐几款常用的JQuery代码。

1、管理搜索框的值

现在各大网站都有搜索框,而搜索框通常都有默认值,当输入框获取焦点时,默认值消失。而一旦输入框失去焦点,而输入框里又没有输入新的值,输入框里的值又会恢复成默认值,如果往输入框里输入了新值,则输入框的值为新输入的值。这种特效用JQuery很容易实现:

$("#searchbox")
.focus(function(){$(this).val('')})
.blur(function(){
var $this = $(this);
// '请搜索...'为搜索框默认值
($this.val() === '')? $this.val('请搜索...') : null;
});

2、反序访问JQuery对象里的元素

在某些场景下,我们可能需要反序访问通过JQuery选择器获取到的页面元素对象,这个怎么实现呢?看下面代码:

//要掌握JQuery对象的get方法 以及数组的reverse方法即可
var arr = $('#nav').find('li').get().reverse();
$.each(arr,function(index,ele){
.... ...
});

3、克隆table header到表格的最下面

为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现:

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
$tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

4、使用JQuery重绘图片的大小

关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。

$(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
});

5、滚动时动态加载页面内容

有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码:

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);
});

原文地址:https://segmentfault.com/a/1190000016895814

几个非常实用的JQuery代码片段的更多相关文章

  1. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  2. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  3. 一些实用的JQuery代码片段收集

    本文将展示50个非常实用的JQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够 ...

  4. 12 个非常实用的 jQuery 代码片段

    jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助. 导航菜单背景切换效果 ...

  5. 十条很实用的jQuery代码片段

    本文转自:http://developer.51cto.com/art/201604/509093.htm 作者:核子可乐译来源:51CTO 原文标题:10 jQuery Snippets for E ...

  6. js动态判断密码强度&&实用的 jQuery 代码片段

    // 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  7. 一些实用的JQuery代码片段收集(筛选,搜索,样式,清除默认值,多选等)

    //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { ...

  8. 很实用的JQuery代码片段(转)

    1 元素屏幕居中 jQuery.fn.center = function () { this.css("position","absolute"); this. ...

  9. 高效Web开发的10个jQuery代码片段(10 JQUERY SNIPPETS FOR EFFICIENT WEB DEVELOPMENT)

    在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...

随机推荐

  1. P1223 [小数据版]边权差值最小的生成树

    这道题和最小生成树kruskal的代码几乎相同,只不过不一定是最小生成树,所以不一定从最短的边开始做生成树:所以将每一条边分别作为起点,然后枚举就行了...... #include <bits/ ...

  2. python 列表 元组

    1.列表的基本声明和赋值 #声明一个空列表 变量 = [] 或者 变量 = list() var = [1] var2 = list() # 声明带有数据的列表 var = [1,2,3,'一','二 ...

  3. iOS 跷跷板动画 Seesaw Animation

    Xcode Playgound示例代码: let testView = UIView() testView.frame = CGRect.init(x: , y: , width: , height: ...

  4. 跟我一起玩Win32开发(6):创建右键菜单

    快捷菜单,说得容易理解一点,就是右键菜单,当我们在某个区域内单击鼠标右键,会弹出一些菜单项.这种类型的菜单,是随处可见的,我们在桌面上右击一下,也会弹出一个菜单. 右键菜单的好处就是方便,它经常和我们 ...

  5. Magento 缓存机制简析

    在知道缓存机制前,首先需要知道,Magento的路由机制,这边就不做赘述了,百度一大堆. 下面一个简单的缓存生效流程: A:首先在页面开始时,Magento在app\code\core\Mage\Co ...

  6. Contextual Action bar(2) 简介,启动,各函数介绍

    一.Context Action Bar简介 它是一个ActionBar,有各种操作项,但它不是始终显示的ActionBar,它需要上下文才显示.样式如下: 二.Context Action Bar的 ...

  7. [已读]编写高质量代码 改善JavaScript程序的188个建议

    吐槽一万遍,买的最后悔的一本,没有之一,大量篇幅抄袭<高性能javascript>,我记得还有部分抄袭<javascript精粹>,<javascript模式>有没 ...

  8. NIO客户端主要创建过程

    NIO客户端主要创建过程:   步骤一:打开SocketChannel,绑定客户端本地地址(可选,默认系统会随机分配一个可用的本地地址),示例代码如下:    SocketChannel client ...

  9. AJPFX总结String类的特点

          String str = "abc"; str就是String的一个对象         字符串一旦被赋值, 值就不能再被改变了         举例:String s ...

  10. slimScroll的应用(一)

    本类文章依旧是针对初学者来说的,希望大家看到后觉得有用的能给个赞~~ 什么是slimScroll? 一.官网介绍: slimScroll is a small (4.6KB) jQuery plugi ...