jquery 일부 코드 수집

1. 중첩 필터를 만드는 방법

                        // 컬렉션에서 일치하는 요소를 줄일 수 있는 필터,

                                                 > 이 경우 查 // 조회는 (: has)를 사용하여 모든 (: not)을 삭제합니다.

// 클래스가 "Selected"(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를 사용하여 스타일 시트를 전환하는 방법

                                                                  jQuery를 사용하여 사용

                     ’ ’ s ’ s ‐ ‐ ‐ 변경됩니다.

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

如何5. 선택 범위를 제한하는 방법(최적화 목적에 따라)

// 클래스 이름의 접두어로 레이블 이름을 사용하면 jQuery에서 검색에 더 많은 시간을 소비할 필요가 없습니다. / 원하는 요소. 명심해야 할 또 다른 사항은 페이지의 요소에 대한 작업이 더 구체적일수록 실행 및 검색 시간이 더 많이 단축될 수 있다는 것입니다.

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

6. ToggleClass를 올바르게 사용하는 방법

                                                                        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>

10. 정렬되지 않은 컬렉션에서 요소의 색인 번호를 찾는 방법

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

11. 이벤트에 함수 바인딩하기

    a.toggleClass('blueButton');

12. 요소에 html을 추가하는 방법

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

13. 요소를 생성할 때 객체 리터럴을 사용하여 속성을 정의하는 방법

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

14. 여러 속성을 사용하는 방법

               

                                                   jQuery를 사용하기 위해 을 사용

                  ‐ 끄기 끄기 ‐ ‐ ‐ ,

                                  선택기와 일치하는 모든 요소에 대해 이벤트 핸들러를 설정하세요

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

17. 선택된 옵션 요소를 찾는 방법

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

18. 텍스트 값이 포함된 요소

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

19. 페이지 내 특정 영역으로 자동 스크롤되는 경우

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

20. 다양한 브라우저를 감지하는 방법

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

21. 오른쪽 클릭 컨텍스트 메뉴 비활성화

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

23. 사용자 정의 선택기 정의 방법

    jQuery.preloadImages = function () {
        for (var i = 0; i < arguments.length; i++) {
            $("<img />").attr(&#39;src&#39;, arguments[i]);
        }
    };
        //用法 $.preloadImages(&#39;image1.gif&#39;, &#39;/path/to/image2.png&#39;, &#39;some/image3.jpg&#39;);

24. 요소 존재 여부 확인 방법

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

25. jQuery를 사용하여 오른쪽 및 왼쪽 마우스 클릭을 감지하는 방법

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

26. 입력 필드를 표시하거나 삭제하는 방법 기본값

                                                                using                       using using ' ' s '              아웃 쓰루 아웃'' 아웃 아웃 아웃 웨이 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 그래서 so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so 그래서 그래서 그래서 그래서 그래서

    $(".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 중국어 웹사이트의 기타 관련 기사를 참조하세요!