js、jquery实用小技巧集合

Tip16:JS的定时器

  JS 中有两种定时器,setTimeout('fn', t) 和 setInterval('fn', t),'fn'指的是定时执行的方法名,字符串类型。

 

 

 

  setTimeout('fn', t):

 

只执行一次,执行完成后将销毁。

 

  setInterval('fn', t):一直执行。

 

(Date:2012-02-17)

 

-----------------------------------------------------------------

Tip15:Jquery触发回车事件

        $(function () {
$('#target').bind('keyup', function (event) {if (event.keyCode == 13) {
alert("Hello~");
}
});
}); 

(Date:2011-10-28)

-----------------------------------------------------------------

 Tip14:获得select 的值

  jquery可以像获取textbox值一样获取select的值:$('select').val();

(Date:2011-10-19)

-----------------------------------------------------------------

Tip13:复制文本

  使用  window.clipboardData.setData('text', text); 可以将text文本放到系统剪贴板中,实现文本的复制功能。但是,这个方法只被IE所支持。Google Chrome 和Foxfire都不支持。所以,在使用时应先判断浏览器是否支持:if (window.clipboardData) { 

window.clipboardData.setData('text', text); }

(Date:2011-9-16)

-----------------------------------------------------------------

Tip12:选择文本

  对于input或者textarea的文本选择,jquery提供了一个简单的函数完成:select(),在调用它的时候,需要确保文本框可见,并且已经获得焦点。

 

 

 

  $("#txtSample").focus().select();  //现货的焦点,然后选择文本

(Date:2011-9-16)

-----------------------------------------------------------------

Tip11:鼠标事件

  mouseover 和 mouseout、

 

mouseenter 和  mouseleave;这两组事件都是鼠标移入和移出元素时触发的,他们的最大区别是:

mouseover 和 mouseout是冒泡的,如果鼠标移动到它们的子元素,同样会触发该事件,而

 

mouseenter 和  mouseleave是不会冒泡的。

 

 

 

  这个区别很重要!

(Date:2011-9-14)

-----------------------------------------------------------------

Tip10:页面跳转

使用js直接对window.location.href 赋一个URL字符串值即可实现跳转。

window.location.href = 'a.html';

(Date:2011-6-18)

-----------------------------------------------------------------

Tip9:jQuery对象的扩展

$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。例如:
$.extend(settings, options);
合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在 setting中。
var settings = $.extend({}, defaults, options);
合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。可以有多个参数(合并多项并返回)

(Date:2011-6-18)

-----------------------------------------------------------------

Tip8:jQuery删除数组中的项

如Tip7中所说,使用$.grep()方法删除数组中的元素。

var array = ['a', 'b', 'c']; 
$.grap(array, function(value, index){return value=='b';}, true);

上面的代码将删除数组array中的元素'b'。

(Date:2011-6-18)

-----------------------------------------------------------------

Tip7:jQuery数组的处理

$.each(obj, fn);

  对obj进行遍历,obj为要遍历的数组或对象;fn为处理函数,可选的参数为索引和内容,例如var fn = function(index, content){};如果需要结束遍历,请返回false,其它的返回值将会被忽略。

  该方法可以用来处理JSON数据对象。

$.inArray(obj, array);

  判断数组array中是否包含obj对象,如果存在,返回对应的下标,如果不存在,返回-1;

$.map(array, fn);

  将一个数组中的元素转换到另一个数组中。array为需要转换的数组,fn为处理函数;这个方法的返回值是一个经过处理后的新数组。

$.merge(array1, array2);

  合并两个数组;将数组array2中的内容复制到array1中,并将结果返回。merge方法不会去除重复,需要使用 $.unique()去除重复。

$.unique(array);

  去除数组array中的重复项。

$.grep(array, fn, [invert]);

  过滤数组中的元素;该方法对数组array中的每一个对象都调用fn方法;

  invert 可选参数;如果 "invert" 为 false 或未设置,则函数返回数组中由过滤函数返回 true 的元素,当"invert" 为 true,则返回过滤函数中返回 false 的元素集。

  该方法常用来删除数组中的元素

(Date:2011-6-18)

-----------------------------------------------------------------

Tip6:去除string开头和结尾的空格

js中没有提供trim函数供我们去掉字符串两段的空字符,jQuery中扩展了这一功能:

$.trim(str):删除字符串两端的空白字符。
如:$.trim(" hello, how are you? "); //返回"hello,how are you? "

(Date:2011-6-18)

-----------------------------------------------------------------

Tip5:添加事件和移除事件

为一个jQuery对象添加事件是很方便的事情:

$('#btn').click(fn);

$('#btn').bind('click', fn);

jQuery提供了为一个对象的事件提供多个处理函数的机制,我们添加了一个click事件处理方法后,还可以继续添加,而不会覆盖先前的处理方法。

当调用unbind方法时移除绑定的事件订阅:

$('#btn').unbind();    //将会移除所有的事件订阅

$('#btn').unbind('click')  //将会移除click事件的订阅

(Date:2011-6-18)

-----------------------------------------------------------------

Tip4:扩展需要的功能

jQuery提供了extend方法让我们来扩展自己需要的功能。例如:

$.extend({
sum: function(num1, num2){return num1+num2; },
}); //为jquery扩展了sum方法

使用扩展的方法(通过“$.方法名”调用):
alert($.sum(10, 20));

(Date:2011-6-18)

-----------------------------------------------------------------

Tip3:获取jQuery对象集合中的一项

  对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
$("div").eq(2).html();      //调用jquery对象的方法
$("div").get(2).innerHTML;   //调用dom的方法属性

(Date:2011-6-18)

-----------------------------------------------------------------

Tip2:jQuery对象和Dom的转换

Dom对象可以通过$(dom)转换为jQuery对象;例如:

  $(document.getElementById('#myDiv'))

jQuery对象本身是一个索引,可以通过下标得到Dom对象;也可以使用方法get()获取Dom对象;例如:

  $("div")[0];    //获取第一个Dom对象

  $("div").get(0);  //同样获取第一个Dom对象

(Date:2011-6-18)

-----------------------------------------------------------------

Tip1:在独立的js文件中智能感知

在js文件的开头添加:/// <reference path="jquery-1.3.2-vsdoc2.js" />

(Date:2011-6-16)

-----------------------------------------------------------------

参考目录:

JQuery从零开始系列教程:

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) jQuery中的Ajax

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (八) 插播:jQuery实施方案

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

JQuery小技巧:

http://blog.csdn.net/gudanyehai/archive/2010/04/29/5541187.aspx

如果认为此文对您有帮助,别忘了支持一下哦!

作者:齐飞

来源:http://youring2.cnblogs.com/

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/archive/2011/06/16/JavaScriptTips.html

时间: 2024-11-01 06:30:59

js、jquery实用小技巧集合的相关文章

jQuery实用小技巧_输入框文字获取和失去焦点的简单实例_jquery

jQuery实用小技巧_输入框文字获取和失去焦点的简单实例 <input id="txt" class="text1" type="text" /> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("inp

SQL Server数据库实用小技巧集合

server|集合|技巧|数据|数据库     包括安装时提示有挂起的操作.收缩数据库.压缩数据库.转移数据库给新用户以已存在用户权限.检查备份集.修复数据库等. (一)挂起操作 在安装Sql或sp补丁的时候系统提示之前有挂起的安装操作,要求重启,这里往往重启无用,解决办法: 到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager 删除PendingFileRenameOperations (二)收缩数据库 --重

Jquery使用小技巧汇总_jquery

下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他Javascript类库冲突问题. 1. 禁止右键点击 $(document).ready

PPT扁平化设计的8个实用小技巧

PPT扁平化设计的8个实用小技巧   扁平化是目前的主流设计风格,本文总结了扁平化设计的8个小技巧,字体.图标.排版.配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计. 最近帮一个师兄做一个PPT,用了几乎每个人都听说过的扁平化风格.于是趁热打铁,找了一些扁平化的作品和文章看了,自己对扁平化做一个总结,希望对你ppt抑或海报设计有所帮助. 注:此处所谈的扁平化指的是一个大的概念,将后面衍生出来所谓的"似扁平化"也包含进来. Tip 1:关于高光.渐变和投影

总结MySQL建表、查询优化的一些实用小技巧

本篇文章是对MySQL建表以及查询优化的一些实用小技巧进行了详细的分析介绍,需要的朋友参考下   MySQL建表阶段是非常重要的一个环节,表结构的好坏.优劣直接影响着后续的管理维护,赶在明天上班前分享总结个人MySQL建表.MySQL查询优化积累的一些实用小技巧. 技巧一.数据表冗余记录添加时间与更新时间 我们用到的很多数据表大多情况下都会有表记录的"添加时间 (add_time)",我建议大家再新增一个记录"更新时间(update_time)"字段,在我的工作里需

美图看看浏览照片两个实用小技巧

  每年的春节,不管是出门旅行还是回老家,最后总会抱着一堆旅行照片归来,浏览.整理是回味这个快乐春节的又一快事.然而,几百张大尺寸的照片,查看起来要等半天,以后查找起来也是麻烦,这却是一件烦心事.另外,下面我们就来帮你解决这个困扰的问题. 美图看看浏览照片两个实用小技巧 图片浏览不再慢半拍 旅游回来,迫不及待地想看看那些照片吧,用Windows默认查看器查看的话,不假死就是好事了,想要解决问题,除了升级内存,那就是升级看图软件了. 安装美图看看后就自动将它设置为默认看图软件了,首次用美图看看来图

Photoshop实用小技巧介绍

  Photoshop实用小技巧介绍 调整个别字符之间的距离 使用文字工具添加文字以后,如果你想调整个别字符之间的距离,可以将光标放在需要调整的两个字符之间,按住Alt键后,用左右方向键调整,非常灵活和方便. 快速改变对话框中显示的数值 要快速的改变在对话框中显示的数值,首先用鼠标点击那个数字,让光标处在对话框中,然后就可以用上下方向键来改变该数植了.如果在用方向键改变数值前先按下Shift键,那么数值的改变速度会加快(一般以10为步长). 临时切换到滴管工具 如果你现在处于以下的状态:毛笔,喷

JavaScript编程的10个实用小技巧_javascript技巧

在这篇文章中,我将列出10个Javascript实用小技巧,主要面向Javascript新手和中级开发者.希望每个读者都能至少从中学到一个有用的技巧. 1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高. 复制代码 代码如下: var myVar   = "3.14159",str     = ""+ m

总结MySQL建表、查询优化的一些实用小技巧_Mysql

MySQL建表阶段是非常重要的一个环节,表结构的好坏.优劣直接影响着后续的管理维护,赶在明天上班前分享总结个人MySQL建表.MySQL查询优化积累的一些实用小技巧. 技巧一.数据表冗余记录添加时间与更新时间 我们用到的很多数据表大多情况下都会有表记录的"添加时间(add_time)",我建议大家再新增一个记录"更新时间(update_time)"字段,在我的工作里需要为市场部.运营部等建立各种报表,而很多报表里的数据都是需要到大记录表里去查询的,如果直接查询大表的