jquery 선택기와 CSS 선택기의 차이점은 무엇입니까?
- 青灯夜游원래의
- 2020-11-13 15:03:495648검색
차이점: 1. 둘의 기능은 다릅니다. CSS 선택기는 요소를 찾은 후 요소의 스타일을 설정하고, jQuery 선택기는 요소를 찾은 후 동작을 추가합니다. 브라우저 호환성 3. CSS 선택기와 jQuery 선택기의 효율성이 다릅니다.
jQuery 선택기와 CSS 선택기는 둘 다 암시적 반복의 특성을 가지고 있으며 선택기 요구 사항을 충족하는 각 요소를 반복할 필요가 없습니다. 일반적으로 CSS 선택기는 $("")로 래핑되어
| CSS selector | jQuery selector | |
| ID selector | #myID | $("# myID") |
| 클래스 선택기 | .myClass | $(".myClass") |
| 태그 선택기 | p | $("p") |
| 레벨 선택기 | p > ; Strong | $("p>strong") |
| css는 의사 클래스 선택자라고 합니다. jQuery는 필터 선택자라고 합니다. |
p:nth-child(3) | $("p: nth-child (3)") |
아래 예를 참조하세요. CSS는 각 단락의 텍스트를 14px로 설정하고 색상은 빨간색입니다. jQuery에서는 jquery가 동작을 설정하기 때문에 텍스트는 16px로 설정되고 색상은 파란색입니다. DOM 로딩 후 모든 단락은 파란색, 16픽셀 단어로 표시됩니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
p { font-size: 14px; color:#F00 }
p:nth-child(3){color:#690}
</style>
<script src="jquery/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("p").css({"color":"#00f","font-size":"16px"});
$("p:nth-child(3)").css({"font-size":"24px"});
});
</script>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
</body>
</html>그럼 둘의 차이점은 무엇인가요?
1. 둘은 서로 다른 기능을 가지고 있습니다. CSS 선택기는 요소를 찾은 후 요소의 스타일을 설정하고, jQuery 선택기는 요소를 찾은 후 동작을 추가합니다.
2. jQuery 선택기는 브라우저 간 호환성이 더 좋습니다.
3. 선택기의 효율성.
CSS 선택기의 효율성
1. ID 선택기(#myid)
2. 클래스 선택기(.myclassname)
3. 태그 선택기(p, h1, p)
4. )
5, 하위 선택기(ul > li)
6, 하위 선택기(li a)
7, 와일드카드 선택기(*)
8, 속성 선택기(a[ rel="external"])
9. 유사 클래스 선택기(a:hover, li:nth-child)
위 9개 선택기의 효율성은 높은 순으로 나열되며, ID 선택기가 기본으로 효율성이 가장 높습니다. 의사 클래스 선택자의 수가 가장 낮습니다. 자세한 소개를 보려면 효율적인 CSS 선택기 작성(주소: http://csswizardry.com/2011/09/writing-efficient-css-selectors/)을 참조하세요.
jQuery 선택기의 효율성
1. ID 선택기 $('#id') 및 요소 레이블 선택기 $('form')
2. 클래스 선택기 $('.className')
3. '[속성=값]') 및 의사 클래스 선택기 $(':hidden')
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 코스를 방문하세요! !
위 내용은 jquery 선택기와 CSS 선택기의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!