제이쿼리 사용 팁

jquery의 탄생으로 프런트엔드 초보자도 웹 상호작용을 더 쉽게 운영할 수 있게 되었습니다.

오늘은 jquery 사용에 관한 몇 가지 팁을 알려드리겠습니다.

jquery는 하이퍼링크와 같은 기본 브라우저 동작을 차단합니다.

$("a").click(function(event){
  event.preventDefault();
});

Jquery가 캐리지 리턴 이벤트를 트리거합니다

 $(function () {
    $('#target').bind('keyup', function (event) {
       if (event.keyCode == 13) {
          alert("Hello~");
       }
   });
});

select 값 가져오기

jquery는 텍스트 상자 값을 가져오는 것처럼 select 값을 가져올 수 있습니다. ('select' ).val();

텍스트 복사

window.clipboardData.setData('text', text)

를 사용하여 텍스트를 넣으세요. 시스템 클립보드, 텍스트 복사 기능을 실현합니다. 하지만 이 방법은 IE에서만 지원됩니다.

Google Chrome이나 Foxfire 모두 지원하지 않습니다. 따라서 이를 사용할 때 먼저 브라우저가 이를 지원하는지 여부를 확인해야 합니다.

if (window.clipboardData) {  window.clipboardData.setData('text', text); }

텍스트 선택

입력 또는 텍스트 영역 텍스트 선택을 위해 jquery는 간단한 기능인 select()를 제공합니다. 호출할 때 텍스트 상자가 표시되고 포커스가 있는지 확인해야 합니다.

$("#txtSample").focus().select();　　//现货的焦点，然后选择文本

마우스 이벤트

mouseover 및 mouseout, mouseenter 및 mouseleave 이 두 가지 이벤트 세트는 마우스가 요소 안팎으로 움직일 때 트리거됩니다. 가장 큰 차이점 예: mouseover 및 mouseout 버블 마우스가 하위 요소로 이동하면

이벤트도 트리거되지만 mouseenter 및 mouseleave는 버블링되지 않습니다. ​

이 차이는 매우 중요합니다!

jQuery 객체 확장

하나 이상의 다른 객체로 객체를 확장하고 확장된 객체를 반환합니다. jquery에서 구현한 상속 방식입니다. 예:

    $.extend(target,prop1,propN)：

설정과 옵션을 병합하고 병합된 결과를 설정으로 반환합니다. 이는 옵션이 설정을 상속하고 상속된 결과를 설정에 저장하는 것과 같습니다.

    $.extend(settings, options);

기본값과 옵션을 병합하고 기본 내용을 덮어쓰지 않고 병합된 결과를 설정으로 반환합니다. 여러 매개변수를 가질 수 있음(여러 항목을 결합하여 반환)

    var settings = $.extend({}, defaults, options);

jQuery는 배열의 항목을 삭제합니다.

Tip 7에서 언급했듯이 $.grep() 메서드를 사용하여 배열의 요소를 삭제합니다.

위 코드는 배열에서 'b' 요소를 삭제합니다.

var array = ['a', 'b', 'c']; 
$.grap(array, function(value, index){return value=='b';}, true);

JQuery 배열 처리

obj를 트래버스합니다. 여기서 obj는 트래버스할 배열 또는 객체입니다. fn은 처리 함수이고 선택적 매개 변수는 var와 같은 인덱스 및 콘텐츠입니다. fn = function(index, content){}; 순회를 종료해야 하는 경우 false를 반환하면 다른 반환 값은 무시됩니다.

$.each(obj, fn);

이 방법을 사용하여 JSON 데이터 개체를 처리할 수 있습니다.

obj 객체가 배열 배열에 포함되어 있는지 확인합니다. 존재하지 않으면 해당 첨자를 반환합니다.

$.inArray(obj, array);

변환합니다. 다른 배열로. array는 변환해야 하는 배열이고, fn은 처리 함수입니다. 이 메서드의 반환 값은 새로 처리된 배열입니다.

$.map(array, fn);

두 개의 배열을 병합하고 array2의 내용을 array1에 복사하고 결과를 반환합니다. 병합 방법은 중복 항목을 제거하지 않으므로 $.unique()를 사용하여 중복 항목을 제거해야 합니다.

$.merge(array1, array2);

배열에서 중복 항목을 제거합니다.

$.unique(array);

배열의 요소를 필터링합니다. 이 메서드는 배열의 각 개체에 대해 fn 메서드를 호출합니다.

$.grep(array, fn, [invert]);

"invert"가 false이거나 설정되지 않은 경우 함수는 필터링 함수에 의해 true로 반환된 배열 요소를 반환합니다. "invert"가 true인 경우 필터링 함수에 의해 false로 반환된 요소 집합이 반환됩니다.

이 방법은 배열의 요소를 삭제할 때 자주 사용됩니다.

문자열의 시작과 끝에서 공백을 제거합니다.

js에는 트림 기능이 없습니다. 문자열의 두 세그먼트 모두에서 null 문자를 제거합니다. 이 함수는 jQuery에서 확장되었습니다.

$.trim(str): 문자열의 양쪽 끝에서 공백 문자를 제거합니다.

예: $.trim("안녕하세요, 잘 지내세요?"); //"안녕하세요, 잘 지내세요?"를 반환합니다.

이벤트 추가 및 이벤트 제거

jQuery 객체에 이벤트를 추가하는 것은 매우 편리합니다.

jQuery는 객체의 이벤트에 대해 여러 처리 기능을 제공하는 메커니즘을 제공합니다. 클릭 이벤트 처리 방법을 추가한 후 계속 추가할 수 있습니다. 이전 처리 방법을 덮어쓰지 않고.

$('#btn').click(fn);
$('#btn').bind('click', fn);

unbind 메서드가 호출될 때 바인딩된 이벤트 구독을 제거합니다.

jQuery 개체 컬렉션에서 항목 가져오기

$('#btn').unbind();　　　　//将会移除所有的事件订阅
$('#btn').unbind('click')　　//将会移除click事件的订阅

가져온 요소 컬렉션의 경우 가져오기 item(index로 지정됨)은 eq 또는 get(n) 메서드나 인덱스 번호를 사용하여 얻을 수 있습니다. eq는 jquery 객체를 반환하는 반면 get(n) 및 index는 dom 요소 객체를 반환합니다. jquery 객체의 경우 jquery 메서드만 사용할 수 있고, dom 객체의 경우 dom 메서드만 사용할 수 있습니다. 예를 들어 세 번째

요소의 내용을 가져오려는 경우입니다. 두 가지 방법이 있습니다:

jQuery 객체와 Dom의 변환

$("div").eq(2).html(); 　　　　 //调用jquery对象的方法
$("div").get(2).innerHTML; 　　//调用dom的方法属性

Dom 객체는 $(dom)을 통해 jQuery 객체로 변환될 수 있습니다. 예:

　$ ( document.getElementById('#myDiv'))

jQuery 객체 자체는 인덱스이므로 아래 첨자를 통해 Dom 객체를 가져올 수 있습니다. get() 메서드를 사용하여 Dom 객체를 가져올 수도 있습니다. 예:

독립 실행형 js 파일의 Intellisense

$("div")[0];　　　　//获取第一个Dom对象
$("div").get(0);　　//同样获取第一个Dom对象

js 파일 시작 부분에 :/// 추가: ///