jQuery技术

JQuery 遮罩层实现(mask)实现代...

字号+ 作者:H5之家 来源:H5之家 2017-04-28 18:03 我要评论( )

[jQuery 页面 Mask实现代码]:在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask。因为经常会用到,所以写成了一个 jQuery 插件,方便自

jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性。我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题,这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候,你也许更应该想办法自己来解决,下面来看看这些实用的jQuery技巧,他们肯定会能够派上用场的!

1.测试并提升你的jQuery选择器水平

这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

2.测试jQuery包装集是否包含某些元素

如果你想测试一下某个jQuery包装集中是否包含某些元素,你首先可以尝试使用验证首个元素是否存在:

if($(selector)[0]){...}
//或者这样
if($(selector).length){...}

来看看这个例子:

//例子.如果你的页面有以下html代码
<ulid="shopping_cart_items">
<li>
<inputname="item"type="radio"value="Item-X"/>ItemX
</li>
<li>
<inputname="item"type="radio"value="Item-Y"/>ItemY
</li>
<li>
<inputname="item"type="radio"value="Item-Z"/>ItemZ
</li>
</ul>
<preescaped="true"lang="javascript">...
//这个if条件将返回true,因为我们有两个input域匹配了选择器,所以<statement>代码将会执行
if($('#shopping_cart_itemsinput.in_stock')[0]){<statement>}

3.从jquery.org读取jQuery最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

<scriptsrc="http://code.jquery.com/jquery-latest.js"></script>

你可以使用这个方法来调用最近版本的jQuery框架,当然,你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>

4.存储数据

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据:

$('selector').attr('alt','databeingstored');
//之后可以这样读取数据:
$('selector').attr('alt');

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某个元素存储数据:

$('selector').data('参数名','要存储的数据');
//之后这样取得数据:
$('selector').data('参数');

这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍,可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它:
HTML部分:

<formid="testform">
<inputtype="text"value="Alwayscleared"/>
<inputtype="text"value="Clearedonlyonce"/>
<inputtype="text"value="Normaltext"/>
</form>

JavaSript部分:

$(function(){
//取出有clear类的input域
//(注:"clearonce"是两个class:clear和once)
$('#testforminput.clear').each(function(){
//使用data方法存储数据
$(this).data("txt",$.trim($(this).val()));
}).focus(function(){
//获得焦点时判断域内的值是否和默认值相同,如果相同则清空
if($.trim($(this).val())===$(this).data("txt")){
$(this).val("");
}
}).blur(function(){
//为有classclear的域添加blur时间来恢复默认值
//但如果class是once则忽略
if($.trim($(this).val())===""&&!$(this).hasClass("once")){
//Restoresaveddata
$(this).val($(this).data("txt"));
}
});
});

查看Demo

5.jQuery手册常备身边

大多数人都很难记住所有的编程细节,即使再好的程序员也会有对某个程序语言的疏忽大意,所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3 (壁纸版)

6.在FireBug控制台记录jQuery

FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于记录你的JavaScript代码也得到支持。

写入FireBug控制台的最简单方式如下:

console.log("hello world")

你也可以按照你希望的方式写一些参数:

console.log(2,4,6,8,"foo",bar)

你也可以编写一个小扩展来记录jQuery对象到控制台:

jQuery.fn.log=function(msg){
console.log("%s:%o",msg,this);
returnthis;
};

//对于这个扩展,你可以直接使用.log()方法来记录当前对象到控制台。
$('#some_div').find('li.source>input:checkbox').log("sourcestouncheck").removeAttr("checked");

7.尽可能使用ID选择器

在使用jQuery之后,你会发现利用class属性来选择DOM元素变得相当简单。尽管如此,还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为 DOM本身就有”天然的”getElementById这个方法,而class并没有。所以如果使用class选择器的话,浏览器会遍历整个DOM,如果你的网页DOM结构足够复杂,这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:

<divid="main">
<formmethod="post"action="/">
<h2>
SelectorsinjQuery
</h2>
......
<inputid="main_button"type="submit"value="Submit"/>
</form>
</div>

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多

varmain_button=$('#main.button');
varmain_button=$('#main_button');

8.善于利用jQuery链

jQuery链不但允许以简洁的方式写出强大的操作,而且提高了开发效率,因为它能够把多个命令应用到包装集,而不必重新计算包装集。从而你不用再这样写了:

<li>Description:<inputtype="text"name="description"value=""/></li>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 初学jquery之自学札记(1)

    初学jquery之自学札记(1)

    2017-04-28 16:00

  • JQuery学习笔录 简单的JQuery学习过程

    JQuery学习笔录 简单的JQuery学习过程

    2017-04-28 15:04

  • jQuery选择器源码解读(八):addCombinator函数【站长博客网】

    jQuery选择器源码解读(八):addCombinator函数【站长博客网】

    2017-04-27 16:00

  • 简洁实用的BootStrap jQuery手风琴插件

    简洁实用的BootStrap jQuery手风琴插件

    2017-04-27 09:00

网友点评