jQuery 기타 방법-JS 튜토리얼-php.cn

앞의 말

　 기타 메서드는 실제로는 도구 클래스 메서드이지만 jQuery 생성자에 정의된 메서드가 아니기 때문에 도구 메서드라고 할 수 없습니다. 이 글에서는 jQuery의 기타 메소드를 자세히 소개합니다.

데이터 작업

【data()】

이 메소드는 일치하는 요소에 관련 데이터를 저장하거나 일치하는 요소 세트의 첫 번째 요소를 반환하는 데 사용됩니다. 지정된 이름의 데이터에 저장된 값

data( key, value )
data( obj )
data( key )
data()

로그인 후 복사

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

console.log($("body").data("foo"));//52console.log($("body").data());//{foo: 52, bar: Object, baz: Array(3)}

로그인 후 복사

기본 JavaScript를 사용하는 경우

document.body.foo = 52;
console.log(document.body.foo);//52

로그인 후 복사

【removeData()】

과 동일합니다. RemoveData() 메서드를 사용하면 바인딩된 값을 제거할 수 있습니다. .data() 로. name 인수를 사용하여 호출하면 .removeData()는 해당 고유 값을 제거합니다. 인수 없이 호출하면 모든 값이 제거됩니다. jQuery의 내부 .data() 캐시에서는 문서의 HTML5 데이터 속성에 영향을 미치지 않습니다. 이러한 속성은 .removeAttr()을 사용하여 제거할 수 있습니다.

.removeData("name")를 사용할 때 해당 속성이 없는 경우 name 내부 데이터 캐시에 있는 jQuery는 요소에서 데이터 속성을 찾으려고 시도합니다. data- 속성을 반복적으로 쿼리하지 않으려면 .removeData()

removeData( [name] ) // [name]:String 要移除的存储数据名removeData( [list] ) // [list]:Array,String 一个数组或空间分隔的字符串命名要删除的数据块

로그인 후 복사

$('body').data("test1", "VALUE-1")
         .data("test2", "VALUE-2");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}$('body').removeData("test1");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}

로그인 후 복사

　네이티브 자바스크립트를 사용하는 경우 이에 상응하는 .removeData()를 사용하는 대신 이름을 null 또는 정의되지 않은(예: .data("name", 정의되지 않음))로 설정하세요. to

document.body.foo = 52;
console.log(document.body.foo);//52delete document.body.foo;
console.log(document.body.foo);

로그인 후 복사

Queue 연산

【queue()】

　 일치하는 요소에 실행된 함수 큐를 표시하거나 조작

queue( [queueName ] ) //queueName : String 一个含有队列名的字符串。默认是 fx，标准的动画队列
queue( [queueName ], newQueue ) //newQueue:Array 一个替换当前列队内容的函数数组
queue( [queueName ], callback( next ) )//callback( next ):Function() 将要添加到队列中的新函数。当该函数被调用时，会从弹出队列中的下一个元素

로그인 후 복사

var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);var n = div.queue('fx');
console.log(n.length);//2

로그인 후 복사

【clearQueue()】

모두 제거 대기열에서 실행되지 않은 항목

clearQueue( [queueName ] )

로그인 후 복사

수집 작업

【each()】

jQuery 객체를 탐색하고 일치하는 각 요소에 대해 함수를 실행

each( function(index, function(index, Element)) )

로그인 후 복사

$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

로그인 후 복사

【 add()】

add() 메서드는 일치하는 요소 컬렉션에 요소를 추가합니다. add() 메소드의 매개변수는 jQuery 선택기 표현식, DOM 요소 또는 HTML 조각 참조

add( selector )
add( elements )
add( html )
add( jQuery object )
add( selector, context )

로그인 후 복사

$('li').add('p')
$('li').add('<p id="new">new paragraph</p>')

로그인 후 복사

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li></ul><div>div</div><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('li').add('div').css('background', 'lightgreen');
})</script>

로그인 후 복사

【get()】

을 포함하여 거의 모든 $()를 허용할 수 있습니다. 일치하는 jQuery 객체를 검색하여 해당 DOM 요소를 가져옵니다

<span style="color: #000000;">get( [index ] ) index:Number 从0开始计数，用来确定获取哪个元素<br></span>

로그인 후 복사

$( "li" ).get( 0 )

로그인 후 복사

【index()】

index( [selector或element] )

로그인 후 복사

　부터 계산하여 일치하는 요소에서 해당 요소의 인덱스 값을 검색합니다. If not If .index() 메서드에 매개 변수를 전달하면 반환 값은 형제 요소에 상대적인 jQuery 개체의 첫 번째 요소 위치입니다. 요소 집합에서 .index()가 호출되고 매개 변수는 DOM 요소 또는 jQuery 객체인 경우 .index()의 반환 값은 원본 컬렉션을 기준으로 전달된 요소의 위치입니다.

　매개변수가 선택자인 경우 .index()의 반환 값은 선택기와 일치하는 요소를 기준으로 한 원래 요소의 위치입니다. 일치하는 요소가 없으면 .index()는 -1

$('#bar').index();
listItem.index('li');
$('li').index($('li:gt(0)'));

로그인 후 복사

를 반환합니다.[toArray()]

　 jQuery 개체 컬렉션의 모든 DOM 요소가 포함된 배열을 반환합니다.

　인덱스 선택기는 jQuery 필터 선택기의 일부입니다. 동시에 eq(), first(), last()

【eq()】

　eq() 메서드는 다음과 같은 요소 집합과 일치합니다. 지정된 인덱스 요소. eq() 메소드는 0을 기본으로 하는 정수를 매개변수로 받아들일 수 있습니다. 정수가 음수이면 집합의 마지막 요소부터 계산이 시작됩니다

toArray() 这个方法不接受任何参数

로그인 후 복사

【first()】

　first() 메서드는 일치하는 요소 집합의 첫 번째 요소를 가져옵니다. 매개변수를 허용하지 않음

【last()】

　 last() 메서드는 일치하는 요소 집합에서 마지막 요소를 가져옵니다. 이 메서드는 매개변수를 허용하지 않습니다.

【end()】

　현재 체인의 최신 필터링 작업을 수행하고 일치하는 요소의 이전 상태를 반환합니다

//[<li id="foo">, <li id="bar">]alert($('li').toArray());

로그인 후 복사

　end() 메서드는 jQuery의 체인 속성에서 주로 사용됩니다. 체인을 사용하지 않는 경우 일반적으로 변수 이름에 대해 이전 개체를 호출하므로 스택을 조작할 필요가 없습니다. end()를 사용하면 필요한 모든 메소드를 한 번에 호출할 수 있습니다

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn1">按钮一</button><button id="btn2">按钮二</button><button id="btn3">按钮三</button><script>$('#btn1').click(function(){
    $('li').eq(0).css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').eq(-1).css('border','1px solid blue');    
})
$('#btn3').click(function(){
    $('li').eq(2).css('border','1px solid green');    
})</script>

로그인 후 복사

　　在上面的代码中，首先在链式用法中只在第一个列表中查找样式为 foo 的项目，并将其背景色变成红色。然后 end() 返回调用 find() 之前的状态。因此，第二次 find() 将只会查找

中进行查找，结果是将匹配到的元素的背景色变成绿色

内容过滤

　　jQuery选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括has()、filter()、is()、not()、map()、slice()

【has()】

　　has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2<ul>  <li>list item 2-a</li>  <li>list item 2-b</li></ul></li><li>list item 3</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('li').has('ul').css('border', '1px solid lightblue');
})</script>

로그인 후 복사

【map()】

　　map()方法通过一个函数匹配当前集合中的每个元素

　　作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><input value="text"><input value="text"><input value="text"><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('input').map(function(index,dom){
        dom.value += index;
    });
})</script>

로그인 후 복사

【filter()】

　　filter()方法从匹配的元素集合中筛选出指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('li').filter(':even').css('border','1px solid lightgreen')
})</script>

로그인 후 복사

　　filter()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素保留；否则，该元素在匹配集合中被去除

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('li').filter(function(index,dom){if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')return true;
        }
    })
})</script>

로그인 후 복사

【not()】

　　not()方法与filter()方法正好相反，它从匹配的元素集合中移除指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('li').not(':even').css('border','1px solid lightgreen')
})</script>

로그인 후 복사

　　not()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素被去除；否则，该元素在匹配集合中保留

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('li').not(function(index,dom){if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')return true;
        }
    })
})</script>

로그인 후 복사

【is()】

　　is()方法用于判断当前元素是否与参数相匹配，如果匹配，则返回true；否则，返回false。参数可以是一个选择器，DOM元素，jQuery对象或函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><script>$('li').click(function(){if($(this).is(':contains("2")')){
        $(this).css('border','1px solid black')
    }
})</script>

로그인 후 복사

　　is()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回true，is()方法也返回true，如果函数返回false，is()方法也返回false

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><div id="result"></div><script>var i = 0;
$('li').click(function(){++i;if($(this).is(function(index,dom){
        $('#result').html(dom.innerHTML);if(i%2){return true;    
        }
    })){
         $(this).css('border','1px solid black')
    }
})</script>

로그인 후 복사

【slice()】

　　slice()方法根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象　

　　slice(start[,end])方法接受两个参数：start和end

　　start是一个整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数

　　end是一个整数，从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从start开始，一直到最后

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){
    $('li').slice(2,4).css('background', 'red');
})</script>

로그인 후 복사

위 내용은 jQuery 기타 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!