JQuery 선택 필터
82935 단어 jquery
View Code
JS 코드
1. DOM 객체 및 JQuery 패키지 세트
1. 문서를 통과합니다.getElementById(),document.get Elements ByName () 등은 DOM 대상이나 DOM 대상 집합입니다. 전자는 대상이고 후자는 DOM 대상 집합입니다.
var
text11_dom
=
document.getElementById(
"
text11
"
);
var
text11_dom
=
document.getElementsByName(
"
text11
"
)[
0
];
var
text11_dom
=
document.all.text11;
//
text11 name id
var
text11_dom
=
document.all[
10
];
2. JQuery가 제공하는 함수를 사용하려면 먼저 JQuery 패키지를 만들어야 한다. $()를 통해 되돌아오는 것이 바로 JQuery 패키지다.
var
text11_jquery
=
$(
"
#text11
"
);
2. JQuery 패키지 세트와 DOM 객체가 서로 변환됩니다. 1.DOM 대상은 JQuery 속성 방법을 사용할 수 없지만, DOM 대상은 $() 를 통해 JQuery 패키지 집합으로 변환할 수 있습니다
var
text11_dom
=
document.getElementById(
"
text11
"
);
var
text11_jquery
=
$(text11_dom);
2. JQuery 패키지는 DOM 대상의 속성 방법을 사용할 수 없지만 JQuery 패키지의 뒤에 중괄호와 색인 값을 붙여서 해당하는 DOM 대상을 얻을 수 있다
var
text11_dom
=
$(
"
#text11
"
)[
0
];
3. each가 순환하거나 이벤트를 촉발할 때의this도 DOM 대상이다
$(
"
#text11
"
).click(
function
(){
var
text11_dom_value
=
this
.value;
alert(text11_dom_value);
});
3. $기호는 JQuery에서 JQuery 대상에 대한 인용을 나타낸다. JQuery의 구조 방법은 네 가지가 있다.jQuery(html[, ownerDocument]): HTML 원본 문자열에 따라 Dom 요소 동적으로 만들기
$(
"
<div><p>Hello!</p></div>
"
).appendTo(
"
body
"
);
2. jQuery(elements): 한 개 이상의 Dom 대상을 jQuery 패키지 집합으로 봉함, 바로 위의 DOM 대상과 JQuery 패키지 집합 전환
3.jQuery( callback ):$(document).ready () 의 약자 방식
$(
function
(){
alert(
"
Hello!
"
);
});
4. JQuery(selector[,context]): 지정된 범위 내에서 조건에 맞는 JQuery 패키지를 찾습니다. context는 검색 범위이고 context는 DOM 대상 세트일 수도 있고 JQuery 패키지 세트일 수도 있습니다.
모든tr 태그에서 id가 text11 요소인 JQuery 패키지 세트 찾기
var
text11_query
=
$(
"
#text11
"
,
"
tr
"
);
===================jQuery 선택기 =============================
1. 기본 선택기 Basics1.태그 이름에 따라 선택
var
input_query
=
$(
"
input
"
);
2. id값에 따라 선택
var
text11_query
=
$(
"
#text11
"
);
3.class 값에 따라 선택
var
text11_query
=
$(
"
.text11
"
);
4. 여러 개의 조건에 맞는 JQuery 패키지 세트를 동시에 선택하고 번호 구분 조건
var
text_query
=
$(
"
#text11,.text12
"
);
5.모든 DOM 요소 선택
var
all_query
=
$(
"
*
"
);
2. 계층 선택기Hierarchy1.모든tr 탭에서 아래 id 값이text11인 요소를 가져옵니다
var
text11_query
=
$(
"
tr #text11
"
);
2.모든 td 탭 아래의 직접 input 하위 요소 가져오기
var
input_query
=
$(
"
td>input
"
);
3.id가text11원소 뒤의class가button11원소로 가져오고 조건에 맞는 원소만 가져옵니다.text11과button11은 지위상 동급 관계에 속한다
var
button11_query
=
$(
"
#text11+.button11
"
);
4. id가text11 요소 뒤에 있는class가button11인 요소 가져오기
var
button11_query
=
$(
"
#text11~.button11
"
);
3. 기본 필터 Basic Filters1.첫 번째 input 요소 가져오기
var
input_query
=
$(
"
input:first
"
);
2.마지막 input 요소 가져오기
var
input_query
=
$(
"
input:last
"
);
3. 선택되지 않은 input 요소 모두 가져오기
var
input_query
=
$(
"
input:not(:checked)
"
);
4. 첫 번째 input 원소를 계산하고 모든 홀수 개의 input 원소를 찾습니다
var
input_query
=
$(
"
input:even
"
);
5. 두 번째 input부터 계산하여 모든 짝수 input 요소를 찾습니다
var
input_query
=
$(
"
input:odd
"
);
6. 인덱스가 1인 input 요소를 찾으면 인덱스 값은 0부터 계산합니다
var
input_query
=
$(
"
input:eq(1)
"
);
7. 인덱스가 0보다 큰 모든 input 요소 찾기
var
input_query
=
$(
"
input:gt(0)
"
);
8. 인덱스 2보다 작은 모든 input 요소 찾기
var
input_query
=
$(
"
input:lt(2)
"
);
9. 페이지의 모든
var
h_query
=
$(
"
:header
"
);
10. 애니메이션 효과를 실행 중인 모든 요소 가져오기
var
animated_query
=
$(
"
:animated
"
);
4. 컨텐트 필터 Content Filters1.모든 html 내용 찾기 "안녕한 세상!"의 h1 요소
var
h1_query
=
$(
"
h1:contains(' ！')
"
);
2. 하위 탭이나 html 내용이 없는 모든 td 요소를 가져옵니다
var
td_query
=
$(
"
td:empty
"
);
3. input 서브 요소를 포함하는 td 요소를 모두 찾기
var
td_query
=
$(
"
td:has(input)
"
);
4. 하위 탭이나 html 내용이 있는 td 요소를 모두 찾기
var
td_query
=
$(
"
td:parent
"
);
5. 가시성 필터 Visibility Filters1.숨겨진 input 요소 모두 찾기
var
input_query
=
$(
"
input:hidden
"
);
2. 보이는 모든 input 요소 찾기
var
input_query
=
$(
"
input:visible
"
);
6. 속성 필터 Attribute Filters1.id 속성을 포함하는 input 요소 찾기
var
input_query
=
$(
"
input[id]
"
);
2.name 값이 text11인 input 요소 찾기
var
input_query
=
$(
"
input[name='text11']
"
);
3.name 값이 text11과 같지 않은 모든 input 요소를 찾습니다
var
input_query
=
$(
"
input[name!='text11']
"
);
4.name 값이 text로 시작하는 input 요소 찾기
var
input_query
=
$(
"
input[name^='text']
"
);
5.name 값이 11로 끝나는 모든 input 요소 찾기
var
input_query
=
$(
"
input[name$='11']
"
);
6.name 값에 ext가 포함된 모든 input 요소 찾기
var
input_query
=
$(
"
input[name*='ext']
"
);
7. id 속성을 포함하고name 값에 ext를 포함하는 input 요소를 모두 찾기
var
input_query
=
$(
"
input[id][name*='ext']
"
);
7. 하위 요소 필터 Child Filters1.부모 원소에 있는 모든 하위 원소 중 2위인 input 원소 nth-child ()에서 이벤트를 선택할 수 있는 매개 변수는 여기에서 짝수를 계산하고odd는 여기서 홀수를 계산합니다. n 임의의 수는 부모 원소가 있는 input 원소를 선택합니다. 숫자는 몇 번째 input 원소를 직접 선택하고 첫 번째 input 원소는 하나로 계산합니다.
var
input_query
=
$(
"
input:nth-child(2)
"
);
2. 부모 원소에 있는 모든 하위 원소 중 첫 번째 input 원소를 찾습니다
var
input_query
=
$(
"
input:first-child
"
);
3. 부모 원소의 모든 하위 원소에서 마지막 input 원소를 찾습니다
var
input_query
=
$(
"
input:last-child
"
);
4. 부모 원소 중 유일한 하위 원소인 input 원소를 모두 찾기
var
input_query
=
$(
"
input:only-child
"
);
8. 양식 선택기 Forms1.모든 input 요소 찾기
var
input_query
=
$(
"
:input
"
);
2.모든 텍스트 상자 요소 찾기
var
text_query
=
$(
"
:text
"
);
3. 모든 암호 상자 요소 찾기
var
password_query
=
$(
"
:password
"
);
4. 모든 확인란 찾기
var
checkbox_query
=
$(
"
:checkbox
"
);
5. 모든 제출 단추 요소 찾기
var
submit_query
=
$(
"
:submit");
6. 모든 이미지 필드 요소 찾기
var
image_query
=
$(
"
:image
"
);
7. 모든 재설정 버튼 요소 찾기
var
reset_query
=
$(
"
:reset
"
);
8. 모든 단추 요소 찾기
var
button_query
=
$(
"
:button
"
);
9.모든 파일 필드 요소 찾기
var
file_query
=
$(
"
:file
"
);
9. 양식 필터 Form Filters1.사용 가능한 모든 input 요소 찾기
var
input_query
=
$(
"
input:enabled
"
);
2. 사용할 수 없는 모든 input 요소 찾기
var
input_query
=
$(
"
input:disabled
"
);
3.선택한 모든 라디오 확인란 찾기
var
input_query
=
$(
"
input:checked
"
);
4.선택한 모든 드롭다운 상자 찾기
var
option_query
=
$(
"
option:selected
"
);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
