jqueryのいくつかのコードコレクション

1。この場合、查 // 問い合わせは、(: がある) を持つすべての (: ない) を削除します

// クラスが「選択済み」(SELECTED) であるサブノードが含まれます。

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

2. 要素検索を再利用する方法

    var allItems = $("p.item");
    var keepList = $("p#container1 p.item");

//これで、これらの jQuery オブジェクトの操作を続けることができます。たとえば、

チェック ボックス、チェック ボックスの名前に基づいて「キープ リスト」をトリミングする

//jQuery 1.4.* には、この has メソッドのサポートが含まれています。このメソッドは、

// 特定の要素に他の要素クラスが含まれているかどうか、または検索している

// を検索し、その上で操作します。

   <p>class names:
    $(formToLookAt + " input:checked").each(function () {
        keepList = keepList.filter("." + $(this).attr("name"));
    });
   </p>

4. jQueryを使ってスタイルシートを切り替える方法

’ ’ s ’ ’ s ‐ ‐ ‐ ‐ 変更されます。

      $("input").has(".email").addClass("email_icon");

方法5. 選択の範囲を制限する方法 (最適化の目的に基づいて)

// ラベルのニックネームをカテゴリとしてプレフィックスとして使用すると、jQuery は検索にこれ以上の時間を必要としません

// 必要な要素。もう 1 つ留意すべき点は、ページ上の要素に対するアクションがより具体的であればあるほど、より多くの実行時間と検索時間を短縮できることです。

    $('link[media="screen"]').attr('href', 'Alternative.css');

6. ToggleClassの正しい使い方

有 // この場合、一部の開発者は次を使用します:

    var in_stock = $('#shopping_cart_items input.is_in_stock');
    <ul id="shopping_cart_items">
        <li><input type="radio" value="Item-X" name="item" class="is_in_stock" />Item X</li>
        <li><input type="radio" value="Item-Y" name="item" class="3-5_days" />Item Y</li>
        <li><input type="radio" value="Item-Z" name="item" class="unknown" />Item Z</li>
    </ul>

e

// ToggleClass を使用すると、これを簡単に行うことができます

        a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

E

7. IE 独自の機能を設定する方法

    a.toggleClass('blueButton');

E

8. jQuery を使用して要素を置き換える

    if ($.browser.msie) {       // Internet Explorer其实不那么好用 
    }

9. 要素が空かどうかを確認する方法

    $('#thatp').replaceWith('fnuh');

10. 未ソートのコレクションから要素のインデックス番号を見つける方法

    if ($('#keks').html().trim()) {       //什么都没有找到; 
    }

11. イベントに関数をバインドする方法

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

12. HTMLを要素に追加または追加する方法

    $('#foo').bind('click', function () {
        alert('User clicked on "foo."');
    });

13. 要素を作成するときにオブジェクトリテラルを使用して属性を定義する方法

使用する 使用する jQuery を使用する

がプリロードされます

セレクターに一致する要素のイベントハンドラーを設定します

    $('#lal').append('sometext');

17. 選択されたオプション要素を見つける方法

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

18. 値テキストを含む要素を非表示にする方法

      var elements = $('#someid input[type=sometype][value=somevalue]').get();

19. ページ内の領域まで自動的にスクロールする場合

    jQuery.preloadImages = function () {
        for (var i = 0; i < arguments.length; i++) {
            $("<img  / alt="jqueryのいくつかのコードコレクション" >").attr(&#39;src&#39;, arguments[i]);
        }
    };
        //用法 $.preloadImages(&#39;image1.gif&#39;, &#39;/path/to/image2.png&#39;, &#39;some/image3.jpg&#39;);

20. さまざまなブラウザを検出する方法

    $('button.someClass').live('click', someFunction);        //注意，在jQuery 1.4.2中，delegate和undelegate选项
        //被引入代替live，因为它们提供了更好的上下文支持
        //例如，就table来说，以前你会用 
     //.live()  
    $("table").each(function () {
        $("td", this).live("hover", function () {
            $(this).toggleClass("hover");
        });
    });       //现在用 
    $("table").delegate("td", "hover", function () {
        $(this).toggleClass("hover");
    });

21. 文字列内の単語を置換する方法

    $('#someElement').find('option:selected');

22. 右クリックのコンテキスト メニューを無効にする方法

    $("p.value:contains('thetextvalue')").hide();

23. . カスタムセレクターを定義する方法

    jQuery.fn.autoscroll = function (selector) { 
        $('html,body').animate( { scrollTop: $(this ).offset().top },        500        );    }
 
       //然后像这样来滚动到你希望去到的class/area上。 
   $('.area_name').autoscroll();

24. 要素が存在するかどうかを確認する方法

    if( $.browser.safari) //检测Safari 
    if ($.browser.msie && $.browser.version > 6 ) //检测IE6及之后版本 
    if ($.browser.msie && $.browser.version <= 6 ) //检测IE6及之前版本 
    if($.browser.mozilla && $.browser.version >= &#39;1.8&#39; ) //检测FireFox 2及之后版本

25. 入力フィールドを表示または削除する方法

    var el = $('#id'); el.html(el.html().replace(/word/ig, ''));

26.

を使用してアウト スルー アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウトはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはい

    $(".swap").each(function (i) {
        wap_val[i] = $(this).val();
        $(this).focusin(function () {
            if ($(this).val() == swap_val[i]) {
                $(this).val("");
            }
        }).focusout(function () {
            if ($.trim($(this).val()) == "") {
                $(this).val(swap_val[i]);
            }
        });
    });

27. 如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）

       //这是1.3.2中我们使用setTimeout来实现的方式
    setTimeout(function () {
        $('.myp').hide('blind', {}, 500)
    }, 5000);
    //而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠） 
    $(".myp").delay(5000).hide('blind', {}, 500);

28. 如何把已创建的元素动态地添加到DOM中

   var newp = $(''); 
       newp.attr('id', 'myNewp').appendTo('body');

29. 如何限制“Text-Area”域中的字符的个数

    jQuery.fn.maxLength = function (max) {
        this.each(function () {
            var type = this.tagName.toLowerCase();
            var inputType = this.type ? this.type.toLowerCase() : null;
            if (type == "input" && inputType == "text" || inputType == "password") {                this.maxLength = max;
            }
            else if (type == "textarea") {
                this.onkeypress = function (e) {
                    var ob = e || event;
                    var keyCode = ob.keyCode;
                    var hasSelection = document.selection
                        ? document.selection.createRange().text.length > 0
                        : this.selectionStart != this.selectionEnd;
                    return !(this.value.length >= max
                        && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13)
                        && !ob.ctrlKey && !ob.altKey && !hasSelection);
                };
                this.onkeyup = function () {
                    if (this.value.length > max) {
                        this.value = this.value.substring(0, max);
                    }
                };
            }
        });
    };
        //用法 $('#mytextarea').maxLength(500);

30. 如何为函数创建一个基本的测试

    //把测试单独放在模块中 
    module("Module B");
    test("some other test", function () {
        //指明测试内部预期有多少要运行的断言         expect(2);
        //一个比较断言，相当于JUnit的assertEquals  
        equals(true, false, "failing test");
        equals(true, true, "passing test");
    });

31. 如何在jQuery中克隆一个元素

    var cloned = $('#somep').clone();

32. 在jQuery中如何测试某个元素是否可见

    if ($(element).is(':visible') ) {        //该元素是可见的 
    }

33. 如何把一个元素放在屏幕的中心位置

    jQuery.fn.center = function () {
        this.css('position', 'absolute');
        this.css('top', ($(window).height() - this.height())                         
                       / +$(window).scrollTop() + 'px');
        this.css('left', ($(window).width() - this.width())                          
                       / 2 + $(window).scrollLeft() + 'px');
        return this;
    }
       //这样来使用上面的函数： $(element).center();

34. 如何把有着某个特定名称的所有元素的值都放到一个数组中

    var arrInputValues = new Array(); 
    $("input[name='table[]']").each(function () {
       arrInputValues.push($(this ).val());    });

35. 如何从元素中除去HTML

    (function ($) {
        $.fn.stripHtml = function () {
            var regexp = /<("[^"]*"|&#39;[^&#39;]*&#39;|[^&#39;">])*>/gi;
            this.each(function () {
                $(this).html($(this).html().replace(regexp, ""));
            });
            return $(this);
        }
    })(jQuery);
        //用法： $(&#39;p&#39;).stripHtml();

36. 如何使用closest来取得父元素

    $('#searchBox').closest('p');

37. 如何使用Firebug和Firefox来记录jQuery事件日志

       // 允许链式日志记录
       // 用法： 
    $('#somep').hide().log('p hidden').addClass('someClass');
    jQuery.log = jQuery.fn.log = function (msg) {
        if (console) {
            console.log("%s: %o", msg, this);
        }
        return this;
    };

38. 如何强制在弹出窗口中打开链接

    jQuery('a.popup').live('click', function () {
        newwindow = window.open($(this).attr('href'), '', 'height=200,width=150');
        if (window.focus) {
            newwindow.focus();
        } return false;
    });

39. 如何强制在新的选项卡中打开链接

    jQuery('a.newTab').live('click', function () {
        newwindow = window.open($(this).href);
        jQuery(this).target = "_blank";
        return false;
    });

40. 在jQuery中如何使用.siblings()来选择同辈元素

        // 不这样做 
    $('#nav li').click(function () {
        $('#nav li').removeClass('active');
        $(this).addClass('active');
    });
        //替代做法是
    $('#nav li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });

41. 如何切换页面上的所有复选框

    var tog = false ;    // 或者为true，如果它们在加载时为被选中状态的话
    $('a').click(function () {
        $("input[type=checkbox]").attr("checked", !tog);
        tog = !tog;
    });

42. 如何基于一些输入文本来过滤一个元素列表

       //如果元素的值和输入的文本相匹配的话  
       //该元素将被返回
    $('.someClass').filter(function () {
        return $(this).attr('value') == $('input#someId').val();
    })

43. 如何获得鼠标垫光标位置x和y

    $(document).ready(function () {
        $(document).mousemove(function (e) {
            $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
        });
    });

44. 如何把整个的列表元素（List Element，LI）变成可点击的

    $("ul li").click(function () {
        window.location = $(this).find("a").attr("href");
        return false;
    });
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>

45. 如何使用jQuery来解析XML（基本的例子）

    function parseXml(xml) {
        //找到每个Tutorial并打印出author  
        $(xml).find("Tutorial").each(function () {
            $("#output").append($(this).attr("author") + "");
        });
    }

46. 如何检查图像是否已经被完全加载进来

    $('#theImage').attr('src', 'image.jpg').load(function () {
        alert('This Image Has Been Loaded');
      });

47. 如何使用jQuery来为事件指定命名空间

    //事件可以这样绑定命名空间
    $('input').bind('blur.validation', function (e) {
        // ...  
    });
 
    //data方法也接受命名空间 
    $('input').data('validation.isValid', true);

48. 如何检查cookie是否启用

     var dt = new Date();
     dt.setSeconds(dt.getSeconds() + 60);
     document.cookie = "cookietest=1; expires=" + dt.toGMTString();
     var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
     if (!cookiesEnabled) {
        //没有启用cookie     }

49. 如何让cookie过期

    var date = new Date();
    date.setTime(date.getTime() + (x * 60 * 1000));
    $.cookie('example', 'foo', { expires: date });

50. 如何使用一个可点击的链接来替换页面中任何的URL

    $.fn.replaceUrl = function () {
        var regexp =
            /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function () {
            $(this).html(
               $(this).html().replace(regexp, &#39;<a href="$1">$1</a>&#39;)
            );
        });
        return $(this);
    }
       //用法　 $(&#39;p&#39;).replaceUrl();

 

以上がjqueryのいくつかのコードコレクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。