필터(FILTER) 3
마지막으로 입력 양식 필터와 기타 필터들이다.
입력양식 필터의 경우는 사용빈도가 은근히 많을거 같다. 뭐 다른필터들도 마찬가지겠지만
:text 문자열 입력 필드
:password 비밀번호 입력 필드
:button 버튼
:checkbox 체크 박스
:file 파일 업로드
:image 이미지
<body> <form> <label for="user">name</label> <label type="text" id="user" value="김상형"/><br/> <label for="pass">password</label> <input type="password" id="pass"/><br/> </form> <script> $('input:password').css('background', 'red'); // password를 찾는다. $('input:text').css('background', 'blue'); // text를 찾는다. </script> </body>
마지막으로 기타필터 들이다
:visible 보이는 엘리먼트들.
:hidden 숨겨진 엘리먼트들
이때 숨겨져있다의 기준은 아래와 같다.
1) display 속성이 none이다.
2) 입력 양식의 type 속성이 hidden이다.
3) 크기와 높이가 0이다.
4) 상위의 조상 엘리먼트가 숨겨져 있다.
그외에는 눈에는 안보여도 hidden상태가 아닌것들이다
:header h1~h6(제목) 태그
:root 문서의 루트태그 언제나 html태그이다
:not(s) 선택자의 선택여부를 반대로 한다
:animated 애니메이션중인 태그
:lang(la) lang 속성이 일치하는 엘리먼트
:target 문서의 ID와 같은 ID를 가진 엘리먼트
이상이다.
필터들은 무식하게 외우긴 보다는 계속 사용해보면서 자연스럽게 깨닫는게 좋을거같다.
근데 양이 꽤 많은거 같기도하다
'JavaScript > jquery' 카테고리의 다른 글
replace, replace all (0) | 2020.03.23 |
---|---|
eq() (0) | 2019.09.09 |
필터(FILTER) 1 (0) | 2017.10.03 |
jQuery 자식 선택자 (0) | 2017.09.18 |
jQuery 선택자 (selector) (0) | 2017.09.18 |
댓글
이 글 공유하기
다른 글
-
replace, replace all
replace, replace all
2020.03.23jquery에서 replace는 특이하게 맨첫번째 한개만 replace되는 특성을 가지고 있다. https://www.w3schools.com/jsref/jsref_replace.asp JavaScript String replace() Method JavaScript String replace() Method ❮ JavaScript String Reference --> Example Return a string where "Microsoft" is replaced with "W3Schools": var str = "Visit Microsoft!"; var res = str.replace("Microsoft", "W3Schools"); The result of res will be: Visit W3S ww… -
eq()
eq()
2019.09.09https://api.jquery.com/eq/ .eq() | jQuery API Documentation Description: Reduce the set of matched elements to the one at the specified index. Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies api.jquery.com eq는 index요소를 가지고 그 요소를 선택하는 jquery 요소 입니다. eq를 사용시 새로운 jquery 객체를 만… -
필터(FILTER) 1
필터(FILTER) 1
2017.10.03간단한 기본선택자보다 더 정밀하고 복잡한 선택이 필요할 경우에는 필터와 선택메서드를 이용한다. 일단 필터의 기본형태는 다음과 같다. $('선택자:필터').내용 그럼 먼저 순서에 관련한 필터부터 정리해야겠다. :first 첫 번째 객체 :last 마지막 객체 :eq(n) n번째 객체, 시작이 0이다 :gt(n) n번째 초과 객체 :lt(n) n번째 미만 객체 :odd 홀수 번째 객체 :even 짝수 번째 객체 다음 코드를 보면 훨씬 쉽게 이해될거같다. one two three four five six seven eight nine 숫자를 가지고 판단해보니 그렇게 어렵지는 않다. 그냥 첫번째 순서가 0부터 시작한다고 생각하는게 중요할거 같다. 다음은 even과 odd 및 nth-child이다. 내용 1 내용… -
jQuery 자식 선택자
jQuery 자식 선택자
2017.09.18이번에는 자식 선택자를 알아보겠다. css의 선택자와 같은 문법을 사용한다. 간단하게 p > c는 바로 아래의 자식 엘리먼트만 선택하는 것이고, p c는 모든 후손 엘리먼트를 선택하는 것이다. 예제를 봐야지 문단 안에 링크 태그가 있다. 두 번째 링크는 손자이다. 실행 시켜 보면 첫번째 링크에는 테두리에 굵은선이 표시되는것을 볼수있다. 위에 나와있듯이 $('h2 > a') 선택자는 h2의 직접 자식만을 선택하기 때문에 두번째 span에 둘러쌓여져있는 손자 태그는 선택되지 않는다. 하지만 $('h2 a')는 h2 후손의 모든 a태그에 영향을 주므로 배경색이 변경된다. 두번째 예제 형제 선택자에 대해 알아 봅시다. 텔레토비 가족을 소개합니다. 보라돌이 뚜비 나나 뽀 이것또한 실행 시켜보면 보라돌이만 굵은글씨…
댓글을 사용할 수 없습니다.