HTML5 모바일 개발을 향한 Xiaoqiang의 길(34) – jQuery의 선택기
- 黄舟원래의
- 2017-02-04 14:43:201405검색
1. jQuery란 무엇인가요?
jQuery는 미국인 John Resig에 의해 만들어졌으며 전 세계의 많은 JavaScript 전문가들이 합류했습니다.
jQuery의 창립자이자 기술 리더이며 현재 Mozilla에서 JavaScript 도구 개발 엔지니어로 일하고 있습니다. 그는 "Pro JavaScript Techniques"(예: "JavaScript 마스터하기")와 같은 고전적인 JavaScript 책의 저자입니다.
jQuery는 프로토타입 이후 또 다른 뛰어난 JavaScript 프레임워크입니다. 그 목적은 - 적게 쓰고, 더 많이 하고, 더 적은 코드를 작성하고, 더 많은 일을 하는 것입니다.
jQuery는 다른 js 라이브러리와 비교할 수 없는 경량 js 라이브러리(압축 후 21k)입니다. CSS3 및 다양한 브라우저와 호환됩니다.
다운로드 주소: http://jquery.com/download/
jQuery는 사용자가 HTML 문서, 이벤트를 보다 쉽게 처리하고 애니메이션 효과를 얻을 수 있게 해주는 빠르고 간결한 JavaScript 라이브러리입니다. 웹사이트에 AJAX 상호작용을 편리하게 제공합니다.
jQuery는 사용자의 html 페이지의 코드와 html 콘텐츠를 분리하여 유지할 수 있습니다. 즉, 명령을 호출하기 위해 html에 여러 js를 삽입할 필요가 없습니다. , Just id를 정의하세요.
2. 현재 인기 있는 자바스크립트 라이브러리
jQuery
EXTJS
프로토타입
DWR
Dojo
YUI
MooTools
3. 다음 기능
1. HTML 요소 선택
2. HTML 요소 작업
3. HTML 이벤트 기능
5. 자바스크립트 특수 효과 및 애니메이션
6. HTML DOM 탐색 및 수정
7. 유틸리티
4. jQuery 라이브러리 추가
는 Google 또는 Microsoft의 CDN jQuery
Google의 CDN
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
Microsoft의 CDN
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
를 추가할 수 있습니다. 참고: HTML5에서는 다음을 수행할 필요가 없습니다. type="text/javascript"라고 작성하세요. JavaScript는 HTML5와 모든 최신 브라우저의 기본 스크립팅 언어입니다.
다운로드할 수 있는 JQuery 버전은 두 가지가 있습니다. http://jquery.com/download/
1. 프로덕션 버전: 실제 사용됩니다. 웹사이트가 간소화되고 압축되었습니다.
2. 개발 버전: 테스트 및 개발에 사용되며 압축되지 않고 읽을 수 있습니다.
5. 간단하고 실용적인 방법
기본 구문은 다음과 같습니다. $(selector).action()
$: 달러 기호 정의 jQuery
selector: HTML 요소 쿼리 및 찾기
action(): 요소에 대한 작업 수행
예: $(this).hide 현재 HTML 요소 숨기기
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
<span style="white-space:pre"> </span>$(document).ready(function(){
<span style="white-space:pre"> </span>$("button").click(function(){
<span style="white-space:pre"> </span>$(this).hide();
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>위 코드를 주의 깊게 본 친구들은 다음 코드에 대해 헷갈릴 수 있습니다. 위
$(document).ready(function(){
--- jQuery functions go here ----
});이 코드는 문서가 완전히 로드되었을 때 jQuery 코드가 실행되지 않도록 하기 위한 것입니다. 그렇지 않으면 문제가 발생할 수 있습니다.
이 외에도 다른 방법으로도 요소 객체를 얻을 수 있습니다
1. 요소 선택기
$("# test"): id="test"인 요소입니다.
$("p"):
$(".test"): class="test"인 요소.
$("p.intro") : class="intro"의
요소입니다.
$("p#demo") : id="demo"인
2. 속성 선택기
jQuery는 XPath 표현식을 사용하여 주어진 속성을 가진 요소를 선택합니다.
$("[href]")는 href 속성이 있는 모든 요소를 선택합니다.
$("[href='#']")는 href 및 값이 #인 모든 요소를 선택합니다.
$("[href!='#']") href 값이 "#"과 같지 않은 모든 요소를 선택합니다.
$("[href$='.jpg']")는 href 값이 ".jpg"로 끝나는 모든 요소를 선택합니다.
3. CSS 선택기
jQuery CSS 선택기는 HTML 요소의 CSS 속성을 변경하는 데 사용할 수 있습니다.
$("p").css("background-color","red");6. jQuery 선택 테이블
选择器 实例 选取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
위는 Xiaoqiang의 HTML5 모바일 개발 로드(34) - jQuery의 내용입니다. 의 선택기에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참조하세요!