jQuery技巧和窍门

2020/09/25 15:41 · javascript ·  · 0评论

创建HTML元素并保留引用

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

检查元素是否存在

if ($("#someDiv").length)
{
    // It exists...
}

编写自己的选择器

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

jQuery的data()方法很有用,但并不为人所知。它允许您将数据绑定到DOM元素,而无需修改DOM。

嵌套过滤器

您可以嵌套过滤器(如nickf所示)。

.filter(":not(:has(.selected))")

我真的不喜欢$(document).ready(fn)捷径。当然,它减少了代码的编写,但同时也减少了代码的可读性。看到时$(document).ready(...),您知道您在看什么。$(...)太多其他方式用于立即有意义。

如果您有多个框架,则可以按需使用jQuery.noConflict();,但是也可以像这样为它分配一个不同的变量:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

如果您有几个可以简化为$x(...)-style调用的框架,则非常有用

噢,别忘了jQuery元数据data()函数很棒,但是必须通过jQuery调用来填充。

而不是破坏W3C对自定义元素属性的合规性,例如:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

改用元数据:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

直播活动处理程序

与选择器匹配的任何元素设置事件处理程序,即使在初始页面加载后将其添加到DOM中也是如此:

$('button.someClass').live('click', someFunction);

这允许您通过ajax加载内容,或通过javascript添加内容,并自动为这些元素正确设置事件处理程序。

同样,要停止实时事件处理:

$('button.someClass').die('click', someFunction);

与常规事件相比,这些实时事件处理程序具有一些局限性,但是它们在大多数情况下都非常有效。

有关更多信息,请参见jQuery文档

UPDATE:live()die()在jQuery 1.7中已弃用。有关类似的替换功能,请参见http://api.jquery.com/on/http://api.jquery.com/off/

UPDATE2:live()早在jQuery 1.7之前就已被弃用。对于1.7之前的jQuery 1.4.2+版本,请使用delegate()undelegate()live()例子($('button.someClass').live('click', someFunction);)可以使用改写delegate()这样的:$(document).delegate('button.someClass', 'click', someFunction);

用命名函数替换匿名函数。这确实取代了jQuery上下文,但是由于它依赖于回调函数,因此在使用jQuery时似乎发挥了更多作用。我的内联匿名函数存在的问题是,它们更难调试(更容易查看具有不同名称的函数的调用栈,而不是6个级别的“匿名”),以及在同一个匿名函数中存在多个匿名函数的事实。 jQuery链可能难以阅读和/或维护。另外,匿名函数通常不被重用。另一方面,声明命名函数会鼓励我编写更可能被重用的代码。

插图;代替:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

我更喜欢:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

在元素创建时定义属性

在jQuery 1.4中,可以在创建元素时使用对象文字来定义属性:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

...您甚至可以添加样式:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

这是文档链接

而不是为jQuery对象使用其他别名(使用noConflict时),我总是通过将所有代码包装在闭包中来编写jQuery代码。这可以在document.ready函数中完成:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

或者,您可以这样做:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

我发现这是最便携的。我一直在同时使用Prototype和jQuery的网站上工作,这些技术避免了所有冲突。

检查索引

jQuery具有.index,但是使用起来很麻烦,因为您需要元素列表,然后传入您想要索引的元素:

var index = e.g $('#ul>li').index( liDomObject );

以下内容要容易得多:

如果您想知道无序列表中某个集合(例如列表项)中某个元素的索引:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

准备活动的简写

显式和冗长的方式:

$(document).ready(function ()
{
    // ...
});

速记:

$(function ()
{
    // ...
});

在核心jQuery函数上,除了选择器参数外,还要指定上下文参数。指定context参数可以使jQuery从DOM中更深的分支开始,而不是从DOM根开始。在给定足够大的DOM的情况下,指定上下文参数应该可以转化为性能提升。

示例:在文档的第一个表单中查找radio类型的所有输入。

$("input:radio", document.forms[0]);

参考:http : //docs.jquery.com/Core/jQuery#expressioncontext

不仅是真正的jQuery,而且我为jQuery和MS AJAX搭建了一个不错的小桥梁:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

如果您要进行大量的ASP.NET AJAX,这真的很好,因为jQuery已得到MS的支持,现在有了一个不错的桥梁,这意味着执行jQuery操作非常容易:

$get('#myControl').j().hide();

因此,上面的示例并不是很好,但是如果您正在编写ASP.NET AJAX服务器控件,则可以轻松地将jQuery包含在客户端控件实现中。

优化复杂选择器的性能

使用复杂的选择器大幅提高性能时,查询DOM的子集:

var subset = $("");

$("input[value^='']", subset);

谈到技巧和窍门以及一些教程。我发现这些教程系列(“jQuery的绝对初学者”视频系列)杰弗里方式是非常有帮助的。

它针对jQuery新手。他展示了如何使用jQuery创建许多很酷的东西,例如动画,创建和删除元素等等。

我从中学到了很多。他展示了使用jQuery的便捷性。现在我很喜欢它,即使它很复杂,我也可以阅读和理解任何jQuery脚本。

这是我喜欢“ 调整文本大小 ”的一个示例

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- CSS样式...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

强烈推荐这些教程...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

异步each()函数

如果您有非常复杂的文档,在其中运行jquery each()函数会在迭代期间锁定浏览器,并且/或者Internet Explorer弹出“ 您是否要继续运行此脚本 ”消息,那么此解决方案将节省您的时间。

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

使用它的第一种方法就像each()一样:

$('your_selector').forEach( function() {} );

一个可选的第二参数,可以指定在迭代之间的速度/延迟其可以是用于动画有用(下面的例子将等待在迭代之间1秒):

$('your_selector').forEach( function() {}, 1000 );

请记住,由于这是异步工作的,因此您不能依靠迭代来完成下一行代码,例如:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

我为一个内部项目编写了此文件,尽管我确定可以对其进行改进,但它可以满足我们的需求,因此希望你们中的一些人觉得它有用。谢谢 -

语法简写-缓存对象集合并在一行上执行命令:

代替:

var jQueryCollection = $("");

jQueryCollection.command().command();

我做:

var jQueryCollection = $("").command().command();

某种“真实”的用例可能类似于以下内容:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

我喜欢$this在匿名函数的开头声明一个变量,因此我知道可以引用jQueried这个变量。

像这样:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

将jQuery对象保存在变量中以供重用

将jQuery对象保存到变量后,您可以重复使用它,而不必在DOM中进行重新搜索即可找到它。

(正如@Louis所建议的,我现在使用$表示变量包含一个jQuery对象。)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

举一个更复杂的例子,假设您在商店中有一份食物清单,并且只想显示符合用户条件的食物。您有一个带有复选框的表单,每个复选框都包含一个条件。复选框的名称类似于organiclowfat,产品具有相应的类- .organic,等等。

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

现在,您可以继续使用该jQuery对象。每次单击复选框(选中或取消选中),请从食物的主列表开始,并根据复选框进行过滤:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

似乎已经提到了大多数有趣且重要的提示,因此该提示只是一些补充。

小提示是jQuery.each(object,callback)函数。每个人都可能使用jQuery.each(callback)函数来迭代jQuery对象本身,因为它很自然。jQuery.each(object,callback)实用程序函数遍历对象和数组。很长一段时间,除了以不同的语法(我不介意编写所有老式的循环)之外,我不知何故有什么用,我为自己直到最近才意识到它的主要优势感到有些as愧。

事实是,由于jQuery.each(object,callback)中循环主体是一个函数,因此每次在循环中都会得到一个新的作用域,这在循环中创建闭包时特别方便

换句话说,一个典型的常见错误是执行以下操作:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

现在,当您调用functions数组中的函数时,您将收到三次警报,提示中的内容undefined很可能不是您想要的。问题在于,只有一个变量i,并且所有三个闭包均引用该变量循环结束后,的最终值为i3,并且someArrary[3]undefined您可以通过调用另一个为您创建闭包的函数来解决该问题。或者,您使用jQuery实用程序,它将基本上为您完成此操作:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

现在,当您调用函数时,您将收到三个警报,其内容分别为1、2和3。

通常,您无法做任何事,但是拥有它真是太好了。

就像访问数组一样访问jQuery函数

添加/删除基于布尔的类...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

是...的简称

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

没有太多用例。永远不会少;我认为这很整洁:)

更新资料

为了防止您不是注释阅读类型,ThiefMaster指出toggleClass接受一个布尔值,该确定是否应添加或删除类。就我上面的示例代码而言,这将是最好的方法...

$('selector').toggleClass('name_of_the_class', true/false);

更新:

只要将此脚本包含在网站上,您就会获得一个Firebug控制台,该控制台会弹出以在任何浏览器中进行调试。功能不尽如人意,但仍然很有帮助!完成后,请记住将其删除。

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

查看此链接:

从CSS技巧

更新:我发现了一些新东西;其JQuery Hotbox。

jQuery Hotbox

Google在Google Code上托管了多个JavaScript库。从那里加载它可以节省带宽,并且可以加载已经缓存的快速cos。

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

要么

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

您还可以使用它来告诉图像何时完全加载。

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

firebug的“ console.info”,可用于将消息和变量转储到屏幕上,而不必使用警报框。“ console.time”使您可以轻松地设置计时器来包装一堆代码,并查看需要花费多长时间。

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

尽可能在伪选择器上使用过滤方法,以便jQuery可以使用querySelectorAll(比发出嘶嘶声要快得多)。考虑以下选择器:

$('.class:first')

可以使用以下方法进行相同的选择:

$('.class').eq(0)

哪个必须更快,因为初始选择的“ .class”与QSA兼容

从集合中删除元素并保持可链接性

考虑以下:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

filter()函数从jQuery对象中删除元素。在这种情况下:将删除所有不包含文本“一个”或“两个”的锂元素。

更改输入元素的类型

我在尝试更改已附加到DOM的输入元素的类型时遇到了这个问题。您必须克隆现有元素,将其插入旧元素之前,然后删除旧元素。否则它将无法正常工作:

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

明智地使用第三方jQuery脚本,例如表单字段验证或url解析。值得一看的内容,以便下次遇到JavaScript要求时就知道。

换行和可链接性

将多个调用链接到集合时...

$("a").hide().addClass().fadeIn().hide();

您可以使用换行符提高可读性。像这样:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

触发动画时使用.stop(true,true),以防止其重复动画。这对于过渡动画特别有用。

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

在方法调用中使用自执行匿名函数,例如.append()进行迭代。IE浏览器:

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

我用它来遍历那些庞大而又不舒服的事情,以至于中断了我的构建工作。

在类固醇上支持HTML5数据属性!

数据功能以前被提及。有了它,您就可以将数据与DOM元素相关联。

最近,jQuery团队增加了对HTML5自定义data- *属性的支持似乎还不够;他们已经使用类固醇强力喂饱了数据功能,这意味着您可以直接在标记中以JSON形式存储复杂对象。

HTML:

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />


JavaScript:

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!
本文地址:http://javascript.askforanswer.com/jqueryjiqiaoheqiaomen.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!