MelonPeach

jQuery/Selector → (7)건

7. jquery Selector [ :odd] - 홀수 인덱스의 요소를 선택하는 선택자

7. jquery Selector [ :odd] - 홀수 인덱스의 요소를 선택하는 선택자 문법 $(":odd") 예를 들어 1. $("p:odd") 2. $("div:odd") 1. p태그 중 홀수 인덱스의 요소를 선택합니다. 2. div태그 중 홀수 인덱스의 요소를 선택합니다. 예제 코드 1. Melon 2. Melon 3. Peach 4. Peach 5. Banana 6. Banana 7. Melon 8. Melon 9. Peach 10. Peach 11. Banana 12. Banana 실행 테스트
jQuery/Selector 2020. 2. 18. 11:05

6. jquery Selector [ :nth-child() ] - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

6. jquery Selector [ :nth-child() ] - 형제 요소 중 an+b번째 요소들을 선택하는 선택자 문법 $(":nth-child(n)") -설명- 1. a와 b는 상수이고, n은 변수 2. n은 (0, 1, 2, 3, 4, ...) 차례대로 대입 3. an+b 대신 even, odd 사용 가능 예제 코드 L O L A B C D E F G H I J $("#ul0 li:nth-child(3)").css("color", "green"); - id가 ul0인 태그안에 li태그의 형제들중 3번째 요소를 선택하고 color를 green으로 바꿉니다. $("#ul1 li:nth-child(n+1)").css("color", "red"); - n은 0부터 1씩증가하기 때문에 nth-child(..
jQuery/Selector 2020. 2. 14. 14:35

5. jquery Selector [ :has()] - 특정요소를 포함하고있는 요소를 선택하는 선택자

5. jquery Selector [ :has()] - 특정요소를 포함하고있는 요소를 선택하는 선택자 문법 $(":has()") 예를 들어 1. $("p:has(span)") 1. p태그안에 span태그가 있는 p태그를 선택합니다. 예제 코드 Melon Peach Melon Peach p태그안에 span태그가 있는 p태그를 선택합니다. 그럼 p태그안에 span태그가 있어서 a태그도영향을 받게되어 color이 빨간색으로 나오게됩니다. 실행 테스트
jQuery/Selector 2020. 2. 13. 18:15

4. jquery Selector [ :even] - 짝수 인덱스의 요소를 선택하는 선택자

4. jquery Selector [ :even] - 짝수 인덱스의 요소를 선택하는 선택자 문법 $(":even") 예를 들어 1. $("p:even") 2. $("div:even") 1. p태그 중 짝수 인덱스의 요소를 선택합니다. 2. div태그 중 짝수 인덱스의 요소를 선택합니다. 예제 코드 1. Melon 2. Melon 3. Peach 4. Peach 5. Banana 6. Banana 7. Melon 8. Melon 9. Peach 10. Peach 11. Banana 12. Banana $("p:even").css("color", "red"); - p태그 중 짝수 인덱스 요소를 선택하여 color을 red로 바꿔줍니다. $("div:even").css("color", "blue"); - di..
jQuery/Selector 2020. 2. 13. 14:05

3. jquery Selector [ :empty ] - 내용이 없는 빈 요소를 선택하는 선택자

3. jquery Selector [ :empty ] - 내용이 없는 빈 요소를 선택하는 선택자 문법 $(":empty") 예를 들어 1. $("div:empty") 2. $("td:empty") 1. div태그에 내용이 없는것을 선택합니다. 2. td태그에 내용이 없는것을 선택합니다. 예제 코드 aaaaa 12 13 23 내용이 비어있는 p태그와 td태그에 내용을 추가하는 코드입니다. 실행 테스트
jQuery/Selector 2020. 2. 13. 11:23

2. jquery Selector [ :contains() ] - 특정 문자열을 포함한 요소를 선택하는 선택자

2. jquery Selector [ :contains() ] - 특정 문자열을 포함한 요소를 선택하는 선택자 문법 $(":contains(텍스트)") 특정 문자열을 포함한 요소를 선택하는 선택자 예를 들어 1. $("p:contains('Love')").css("color", "red"); 2. $("p:contains('2002')").css("color", "blue"); 1. Love 라는 문자가 포함된 p태그를 선택 2. 2002 라는 문자가 포함된 p태그를 선택 예제 코드 I will always remember The day you kissed my lips Light as a feather And it went just like this No, it's never been better Th..
jQuery/Selector 2020. 2. 12. 20:53

1. jquery Selector [ :button ] - type이 button인 요소를 선택하는 선택자

1. jquery Selector [ :button ] - type이 button인 요소 선택 요소를 선택하는 선택자 문법 $(":button") type가 button인 모든 요소를 선택합니다. 예를 들어 1. $('.a:button').css('color', 'red'); 1. class가 a인 button의 색을 red로 변경 예제 코드 [ $(":button").css("font-style", "italic"); ] 모든 버튼의 글자스타일을 이태릭체로 바꿉니다. [ $(".a:button").css("color", "red"); ] class가 a이고 type이 button인 버튼의 글자색을 red로 바꿉니다. [ $(".b:button").css("color", "gray"); ] class가 ..
jQuery/Selector 2020. 2. 12. 19:55
◀ 1 ▶

티스토리툴바