Programing

jQuery 팁과 요령

lottogame 2020. 2. 12. 07:56
반응형

jQuery 팁과 요령

통사론

데이터 저장고

최적화

여러 가지 잡다한

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 요소에 데이터를 바인딩 할 수 있습니다.

중첩 필터

필터가 중첩 될 수 있습니다 ( 별명이 여기에 표시됨).

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

나는 $(document).ready(fn)지름길 의 팬이 아니다 . 물론 코드는 줄이지 ​​만 코드의 가독성도 줄어 듭니다. 당신이 볼 때 $(document).ready(...), 당신은 당신이보고있는 것을 알고 있습니다. $(...)너무 많은 다른 방법으로 즉시 이해됩니다.

여러 프레임 워크가있는 경우 원하는 jQuery.noConflict();대로 사용할 수 있지만 다음과 같이 다른 변수를 지정할 수도 있습니다.

var $j = jQuery.noConflict();

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

$x(...)스타일 호출 로 정리할 수있는 여러 프레임 워크가있는 경우 매우 유용 합니다.

오, 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-chain은 읽고 유지 관리하기가 어려워 질 수 있습니다. 또한 익명 함수는 일반적으로 재사용되지 않습니다. 반면에 명명 된 함수를 선언하면 재사용 가능성이 높은 코드를 작성할 수 있습니다.

삽화; 대신에:

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

나는 이것이 가장 휴대하기 쉽다는 것을 안다. 프로토 타입과 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이 주어지면 context 매개 변수를 지정하면 성능이 향상됩니다.

예 : 문서의 첫 번째 양식 내에서 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());
}

jQuery가 MS에 의해 지원되므로 이제 훌륭한 브리지가 있다는 것은 jQuery 작업을 수행하기가 쉽다는 것을 의미하기 때문에 많은 ASP.NET AJAX를 수행하는 경우 정말 좋습니다.

$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와 실행 위치를 각 () 함수를 반복하는 동안 브라우저를 고정 및 / 또는 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() {} );

옵션 2 매개 변수는 반복 사이의 속도 / 지연 지정할 수 있습니다 (애니메이션에 유용 할 수있는 다음의 예는 반복 사이에서 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...

더 복잡한 예로 상점에 식품 목록이 있고 사용자의 기준과 일치하는 음식 만 표시하려고한다고 가정하십시오. 확인란이있는 양식이 있으며 각 양식에는 기준이 포함되어 있습니다. 확인란의 이름은 organic과 같고 lowfat제품에는 해당 클래스가 있습니다- .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) 유틸리티 함수는 객체와 배열을 반복합니다. 오랫동안, 나는 어떻게 든 다른 구문과 다른 것이 무엇인지 알지 못했고 (모든 구식 루프를 작성하는 것은 중요하지 않습니다), 나는 최근에야 주요 강점을 깨달았습니다.

문제는 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세 개의 클로저가 모두 참조한다는 것입니다. 루프가 완료되면 최종 값 i은 3이며 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 코드에서 여러 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 (sizzle보다 훨씬 빠름)을 사용할 수 있습니다. 이 선택기를 고려하십시오.

$('.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 객체에서 요소를 제거합니다. 이 경우 : 텍스트 "One"또는 "Two"를 포함하지 않는 모든 li 요소는 제거됩니다.

입력 요소의 유형 변경

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");

양식 필드 유효성 검사 또는 URL 구문 분석과 같은 타사 jQuery 스크립트를 신중하게 사용합니다. 다음에 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] } }' />


자바 스크립트 :

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!

참고 URL : https://stackoverflow.com/questions/182630/jquery-tips-and-tricks



반응형

'Programing' 카테고리의 다른 글

이전 커밋에서 새 Git 브랜치를 어떻게 만듭니 까?  (0) 2020.02.12
ng-class를 사용하여 여러 클래스 추가  (0) 2020.02.12
Visual Studio Code의 사이드 바에서 특정 파일을 숨기려면 어떻게합니까?  (0) 2020.02.12
자바 스크립트에서 배열 교차를위한 가장 간단한 코드  (0) 2020.02.12
쉼표로 구분 된 문자열을 ArrayList로 변환하는 방법?  (0) 2020.02.12

'Programing'의 다른글

  • 현재글jQuery 팁과 요령

관련글

댓글

티스토리툴바