jquery selectors_jquery의 선택, 사용 및 성능 소개

의 첫 번째 장을 작성하고 나서 내 코드의 몇 가지 문제점을 지적하는 친구들의 답변을 보았는데 시간 관계상 IDE를 사용하지 않은 것이 사실이라 직접 해보았습니다. 그리고 기억력이 나빠서 대문자를 다 잊어버렸네요. 다행히 밤에 집에 가서 VS로 바꿨습니다. 하하 여러분께도 정말 죄송합니다.

이번 강의를 시작으로 JQ 클래스 라이브러리에 직접 접속하여 JQ 작성 방법, JQ의 몇 가지 일반적인 명령 등을 배우게 됩니다. 오늘은 JQ의 선택자(JQ A 전공)에 대해 주로 이야기하겠습니다. jQuery라는 이름에서 알 수 있듯이 jQuery의 특징은 주요 기능이 쿼리에 반영된다는 점이다.

머리말: 일반적으로 JS 환경에서는 <script></script>로 작성된 코드의 경우 window.onload=function(){에 코드를 작성합니다. .} 코드 블록, 이는 페이지가 로드된 후 JS 코드 블록이 실행된다는 것을 의미합니다. JQ의 경우에도 유사한 메서드가 있습니다. $(function(){...}); 여기에 쓰여 있습니다. 때로는 그런 식으로 작성하고 싶지 않은 경우(일반적으로 JS 코드는 태그에 배치되지만 이는 페이지 로딩 속도에 영향을 미칩니다) <에 JS 코드를 작성할 수 있습니다. ;본체>.
ID 선택기

코드 복사 코드는 다음과 같습니다.

Alert($("#name").val()); //ID 이름을 가진 입력 요소의 값을 출력

클래스 선택기

코드 복사 코드는 다음과 같습니다.

alert($(".nameclass").val() ); //nameclass라는 이름의 CSS가 있는 입력 요소의 값

특수 선택기

코드 복사 코드는 다음과 같습니다.

alert($("input[type=text][name=name]").val()) //출력 유형은 다음과 같습니다. text 및 name은 입력 요소의 값

코드 복사 코드는 다음과 같습니다.

// 지정된 선택 요소 선택:
function chekStatus(o) {
$('#OrderStatus').find('option[value=' o ']') .attr('선택됨', true);
$('#search_btn').trigger()
}
//모두 선택
$('#SelectAll').click(function () {
if (this.checked ) {
$('.forShop:not(:checked)').each(function() {
this.click();
}) ;
}
else {
$('.forShop:checked').each(function() {
this.click();
}); >});//선택한 항목이 있습니까
$('#delSelectProduct').click(function() {
if ($('.protucitem:checked').size() = = 0) {
alert('Baby를 선택하세요');
return false;
}
//색인에 따라 지정된 옵션을 선택하고 해당 옵션에 CSS 스타일을 추가합니다.
function chekStatus(o) {
$('#OrderStatus ').find('option')[o].selected = true; .removeClass('cur')[o]).addClass( 'cur');
$('#search_btn').trigger('click')
}
//대체 행 색상 추가 테이블의 행에 효과를 변경하고 행을 클릭한 다음 색상을 변경합니다.
var $trs = $("#baike_div>table>tbody>tr") //모든 행 선택
$trs.filter( ":odd").addClass("odd"); //홀수 행 제공 홀수 스타일 추가
$trs.filter(":even").addClass("even") //짝수 행에 홀수 스타일 추가


필요한 선택기 기술은 다음과 같습니다.



코드 복사

코드는 다음과 같습니다. 다음: //(1) 와일드카드: $("input[id^='code']") //id 속성이 code로 시작하는 모든 입력 태그

$("input[id$='code']"); //id 속성은 code로 시작합니다. 모든 입력 태그는 code로 끝납니다.

$("input[id*='code']") //All id 속성에 코드가 포함된 입력 태그
//(2) 인덱스에 따라 선택
$( "tbody tr:even") //짝수 인덱스를 가진 모든 tr 태그 선택
$("tbody tr:odd"); //홀수 인덱스를 가진 모든 tr 태그 선택
//(3) jqueryObj
jqueryObj.children("input")의 하위 노드의 입력 개수를 구합니다. length;
//(4) main
클래스를 사용하여 태그의 하위 노드 아래에 있는 모든 태그를 가져옵니다.
//(5) 선택 즉시 레이블
jqueryObj.next("div"); //jqueryObj 레이블 바로 뒤에 있는 div를 가져오고, nextAll은 모두 가져옵니다.
// (6)
$("div").eq( 0) 인덱스 기반; //첫 번째 div 태그 가져오기
//Filter
$("#code input: not([id^='code'])") //id는 코드입니다. 태그에 ID가

코드로 시작하는 입력 태그가 모두 포함되어 있지 않습니다.
프로젝트에서 자주 사용되는 몇 가지 선택자를 나열했습니다. 실제로 그 직접적인 의미를 이해하는 한 우리 각자는 코드의 효율성이 효율적인지 여부에 따라 특정 JQ 코드를 작성할 수 있습니다.
요컨대, 기본적인 필수 기능을 구현하는 것은 첫 번째 단계일 뿐입니다!

팁: 이 선택기 $("#...")의 반환 값은 JQ 객체이며 클릭, 마우스 오버 등 JQ 내부 이벤트를 직접 조작할 수 있습니다. events

드디어 JQ 선택기 작성을 마쳤습니다. 읽어주셔서 감사합니다!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.