모든 장 >>>>
이 장의 내용
6.1 jQuery 개요
6.1.1 jQuery 알아보기
개발 과정에서 호환성 문제를 해결하기 위해 많은 JavaScript 라이브러리가 제작되었으며 현재 많이 사용되는 JavaScript 라이브러리는 jQuery, Prototype, Spry, Ext JS 등입니다.
가장 널리 사용되는 JavaScript 라이브러리는 2006 년에 만들어진 JavaScript 라이브러리 인 jQuery입니다.
- JavaScript, CSS, DOM 및 Ajax를 통합하는 강력한 프레임 워크 시스템
- 주요 목적은 적은 코드로 더 많은 기능을 달성하는 것입니다 (작게 작성하고 더 많은 작업 수행).
6.1.2 jQuery의 기본 기능
jQuery 기본 기능
- DOM 요소 액세스 및 조작
- 페이지 이벤트 처리
- 페이지에서 많은 수의 플러그인 사용
- Ajax 기술과의 완벽한 조합
- 개발 효율성 대폭 향상
6.1.3 jQuery 개발 환경 설정
- jQuery 파일 라이브러리 (http://jquery.com) 다운로드
- jQuery 파일 라이브러리 소개
페이지의 <head> </ head> 태그 쌍에 다음 코드를 추가합니다.
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
예 : 버튼을 클릭하면 숨겨진 <div>가 점차 확대되어 표시됩니다.
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$("#info").show(2000);//show(2000) 表示用 2 秒显示标签
});
});
</script>
<input type="button" value=" 显示 " id="btn"/>
<div id="info" style= "display:none">
<img src="../img/mobile.jpg" width="350"/>
</div>
6.1.4 간단한 jQuery 애플리케이션 작성
- $ (document) .ready (function () {}); JavaScript 코드와 유사 : window.οnlοad = function () {}
- $ (document) .ready는 페이지 프레임이 다운로드 된 후 실행됩니다. window.onload는 페이지가로드 된 후 실행되어야합니다 (그림 다운로드 포함).
- $ (document) .ready (function () {})는 $ (function () {})로 축약 될 수 있습니다.
- $ ( "# btn"). click (function () {}); click () 메서드를 사용하여 지정된 요소의 클릭 이벤트에 함수를 바인딩합니다. 단추를 클릭하면 바인딩 된 함수가 실행됩니다.
6.1.5 jQuery 코드의 특징
예 : <h3> 태그를 클릭하면 속성 값이 전환되고 후속 형제 요소가 표시 또는 숨김 상태로 전환됩니다.
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h3").click(function() {
$(this).toggleClass("highLight").next("ul").toggle();
});
});
</script>
- $ 기호 기호 : JQuery 객체의 약식이며 $ ()는 jQuery ()와 동일하며 jQuery 프로그램의 기호입니다.
- 암시 적 루프 : jQuery를 사용하여 요구 사항을 충족하는 요소를 찾을 때 각 요소를 하나씩 탐색 할 필요가 없으며 jQuery 명령을 통해 요구 사항을 충족하는 요소를 직접 조작 할 필요가 없습니다.
- 연쇄 쓰기 : 동일한 객체에 대해 여러 작업 명령을 한 문장으로 작성할 수 있으며 줄 바꿈 및 공백을 삽입 할 수도 있습니다.
6.1.6 연습 문제
6.2 jQuery 기본 선택기
6.2.1 jQuery 선택기 개요
jQuery 선택기를 사용하여 페이지 요소를 선택하고 jQuery 객체를 생성합니다. jQuery에서 메소드를 사용할 수 있습니다. jQuery의 페이지 요소 선택은 CSS 선택 자의 구문 규칙을 완전히 상속합니다.
6.2.2 기본 선택기
기본 선택기는 태그 ID, 클래스, 태그 이름 및 여러 선택 자로 구성됩니다.
| 선택자 |
풍모 |
반환 값 |
| #신분증 |
id 속성 값에 따라 요소 선택 |
단일 요소 |
| .수업 |
클래스 속성 값에 따라 요소 선택 |
요소 수집 |
| 요소 |
주어진 태그 이름을 기준으로 요소 선택 |
요소 수집 |
| * |
html 및 body를 포함한 모든 요소 선택 |
요소 수집 |
| selector1, selector2,…, selectorN |
각 선택기와 일치하는 요소를 결합하고 함께 반환 |
요소 수집 |
예 : jQuery를 사용하여 요소 표시 및 스타일 지정
<script type="text/javascript">
$(function() {
// 选取 <div> 和 <span> 元素，合并选取
$("div,span").css("display","block");
// 根据 id 属性值选取元素
$("#one").css("color","#f30");
// 根据给定的标签名选取元素
$("span").css("font-size","20px");
// 根据 class 属性值选取元素
$("div.two").css("background-color","#ccc");
$("#one,span").css("border-style","dashed");
});
</script>
<div id="one"> 设置了 div 的 id 属性 </div>
<div class="two"> 设置了 div 的 class 属性 </div>
<span>SPAN</span>
6.2.3 연습 문제
6.3 필터 선택기
6.3.1 기본 필터 선택기
필터 선택기는 모든 선택기의 뒷면에 연결되며, 작성시 콜론 (:)으로 시작하는 특정 필터 규칙을 통해 요소의 일부가 필터링됩니다.
필터 선택기는 다음과 같이 나눌 수 있습니다.
- 기본 필터 선택기
- 콘텐츠 필터 선택기
- 가시성 필터 선택기
- 속성 필터 선택기
| 선택자 |
풍모 |
반환 값 |
| first () 或 : 처음 |
첫 번째 요소 가져 오기 |
단일 요소 |
| last () 或 : last |
마지막 요소 가져 오기 |
단일 요소 |
| : not (선택기) |
주어진 선택기를 제외한 모든 요소 가져 오기 |
클래스가 제목이 아닌 <li> 요소를 얻기위한 $ ( "li : not (.title)")과 같은 요소 컬렉션 |
| :조차 |
인덱스 값이 짝수 인 요소를 가져옵니다. 인덱스 번호는 0부터 시작합니다. |
요소 수집 |
| :이상한 |
각 선택기와 일치하는 요소를 결합하고 함께 반환 |
요소 수집 |
| : eq (인덱스) |
인덱스 값이 인덱스와 같은 요소를 가져옵니다. 인덱스 번호는 0부터 시작합니다. |
$ ( "li : eq (1)")와 같은 단일 요소는 색인이 1 인 <li> 요소를 가져옵니다. |
| : gt (인덱스) |
인덱스 값이 인덱스보다 큰 요소를 가져옵니다. 인덱스 번호는 0부터 시작합니다. |
색인을 가져 오기위한 $ ( "li : gt (1)")과 같은 요소 컬렉션 1을 포함하지 않는 <li> 요소 |
| : lt (인덱스) |
인덱스 값이 인덱스보다 작은 요소를 가져옵니다. 인덱스 번호는 0부터 시작합니다. |
색인을 더 작게 만들기위한 $ ( "li : lt (1)")와 같은 요소 컬렉션 1을 포함하지 않는 <li> 요소 |
| :머리글 |
h1 ~ h6과 같은 모든 제목 요소 가져 오기 |
요소 수집 |
| :생기 있는 |
애니메이션 효과를 수행하는 요소 가져 오기 |
요소 수집 |
예 : 기본 필터를 사용하여 DOM 요소를 찾고 요소 스타일 변경
<script type="text/javascript">
$(function() {
$("#btnTitle").click(function() {
// 单独使用过滤选择器，等同于附加在基本选择器 * 的后面
$(":header").css("color","#f00");});
$("#btnEven").click(function() {
// 获取索引值为偶数的 <li> 元素
$("li:even").css("color","#00f");});
$("#btnOdd").click(function() {
// 获取索引值为奇数的 <li> 元素
$("li:odd").css("color","#f93");});
});</script>
6.3.2 콘텐츠 필터링 선택기
콘텐츠 필터 선택기는 요소의 텍스트 콘텐츠 또는 포함 된 하위 요소의 특성을 기반으로 요소를 가져옵니다.
| 선택자 |
풍모 |
반환 값 |
| : contains (텍스트) |
텍스트 콘텐츠가있는 요소를 텍스트로 가져옵니다. |
요소 수집 |
| :빈 |
하위 요소 또는 텍스트를 포함하지 않는 빈 요소 가져 오기 |
요소 수집 |
| : has (선택자) |
하위 요소가있는 요소를 선택기로 가져옵니다. |
요소 수집 |
| :부모의 |
하위 요소 또는 텍스트를 포함하는 비어 있지 않은 요소 가져 오기 |
요소 수집 |
: contains (text) 콘텐츠 필터 선택기에서 매개 변수 텍스트 콘텐츠가 일치하는 요소의 하위 요소에 나타나면 요소도 텍스트 콘텐츠 텍스트를 포함하는 것으로 간주됩니다. 매개 변수 텍스트가 영문자를 사용하는 경우 대소 문자가 다릅니다.
<input>, <img>, <br> 및 <hr>과 같은 태그는 하위 요소 및 텍스트를 포함하지 않는 빈 요소입니다.
예 : 콘텐츠 필터 선택기를 사용하여 DOM 요소를 찾고 요소 스타일 변경
$(function() {
$("#btnContain").click(function() {
// 获取含有文本内容为 A 的 div
$("div:contains('A')").css("background-color","#f00");
});
$("#btnEmpty").click(function() {
$("div:empty").css("background-color","#0f0"); //获取不包含后代元素或文本的div
});
$("#btnHas").click(function() {
$("div:has(span)").css("background-color","#00f"); //获取含有后代元素为span的元素
});
$("#btnParent").click(function() {
//获取含有后代元素或者文本的div元素
$("div:parent").css("background-color","white"); }); });
6.3.3 가시성 필터 선택기
가시성 필터 선택기는 요소의 가시성 여부 특성에 따라 요소를 얻습니다.
| 선택자 |
풍모 |
반환 값 |
| :숨겨진 |
보이지 않는 요소 선택 |
모든 숨겨진 요소를 선택하기위한 $ ( ": hidden")과 같은 요소 모음 |
| :명백한 |
보이는 요소 선택 |
모든 보이는 요소를 선택하기위한 $ ( ": visible")과 같은 요소 컬렉션 |
보이지 않는 요소에는 css 스타일에서 표시 속성 값이 없음 인 요소, 유형 속성 값이 숨겨진 <input> 요소, 너비와 높이가 0으로 설정된 요소가 포함됩니다.
예 : 가시성 필터 선택기를 사용하여 DOM 요소 잠금 및 요소 스타일 변경
<script type="text/javascript">
$(function() {
$("#btnShow").click(function() {
$(".pic:hidden").show().addClass("current");
});
$("#btnHidden").click(function() {
$(".pic:visible").hide();
});
});
</script>
<img src="../img/mobile.jpg" class="pic"/>
<p><input type="button" value=" 显示 " id="btnShow"/>
<input type="button" value=" 隐藏 " id="btnHidden"/></p>
6.3.4 속성 필터 선택기
속성 필터 선택기는 "["로 시작하고 "]"로 끝나는 요소의 특정 속성에 따라 요소를 가져옵니다.
| 선택자 |
기술 |
반환 값 |
| [속성] |
$ ( 'li [title]')과 같이이 속성을 가진 모든 요소 가져 오기는 title 속성을 포함하는 모든 <li> 요소 가져 오기를 의미합니다. |
요소 수집 |
| [속성 = 값] |
$ ( 'li [title = test2]')는 제목 속성을 포함하고 속성 값이 test2와 같은 모든 <li> 요소를 가져 오는 것과 같이 속성 값이 값인 모든 요소를 가져옵니다. |
요소 수집 |
| [속성! = 값] |
$ ( 'li [title! = test2]')와 같이 속성 값이 값과 같지 않은 모든 요소 가져 오기는 제목 속성을 포함하고 속성 값이 test2와 같지 않은 모든 <li> 요소를 가져 오는 것을 의미합니다. |
요소 수집 |
| [속성 ^ = 값] |
속성 값이 value로 시작하는 모든 요소를 선택합니다. 예를 들어 $ ( 'a [href ^ = "mailto :"]')는 href 속성을 포함하고 속성 값이 mailto로 시작하는 모든 <a> 요소를 가져 오는 것을 의미합니다. |
요소 수집 |
| [속성 $ = 값] |
$ ( 'a [href $ = ". zip"]')와 같이 속성 값이 값으로 끝나는 모든 요소를 선택하면 href 속성을 포함하고 속성 값이 .zip으로 끝나는 모든 <a> 요소를 가져옵니다. |
요소 수집 |
| [속성 * = 값] |
$ ( 'a [href * = "jquery.com"]')와 같이 속성 값에 값을 포함하는 모든 요소 선택은 href 속성을 포함하고 속성 값에 jquery.com을 포함하는 모든 <a> 요소를 가져 오는 것을 의미합니다. |
요소 수집 |
| [선택기 1] [선택기 2]… [선택기 N] |
여러 선택기를 결합하여 여러 조건을 충족합니다. 각 선택은 $ ( 'li [id] [title ^ = test]')와 같이 범위를 좁혀 속성 ID와 test로 시작하는 속성 제목이있는 모든 <li>를 선택합니다. 요소 |
요소 수집 |
예 : 속성 필터 선택기를 사용하여 DOM 요소 잠금, 모든 필터 상자 선택
<script type="text/javascript">
$(function() {// 页面加载事件
$("input[type='button']").click(function() {
$("input[name='songs']").attr("checked","checked");
});
});
</script>
<p>
请选择喜欢的歌曲：<br/>
<input type="checkbox" name="songs"/> 小幸运
<input type="checkbox" name="songs"/> 非酋
<input type="checkbox" name="songs"/> 佛系少女
<input type="checkbox" name="songs"/> 醉赤壁
</p>
<input type="button" value=" 全选 "/>
6.3.5 연습 문제
6.4 계층 적 선택기 및 양식 선택기
6.4.1 레벨 선택기
계층 적 선택기는 DOM 요소 간의 계층 적 관계를 통해 요소를 가져 오며 주요 계층 적 관계에는 자손, 부모-자식, 이웃 및 형제 관계가 포함됩니다. 계층 선택기는 두 개의 선택기로 구성됩니다.
| 이름 |
문법 |
풍모 |
반환 값 |
| 하위 선택기 |
선택자 1 선택자 2 |
selector1의 하위 요소에서 selector2를 선택합니다. |
元素集合，如 $(“#nav span”) 表示选取 #nav下所有的<span>元素 |
| 子选择器 |
selector1>selector2 |
从 selector1 的子元素里选取 selector2 |
元素集合，如("#nav>span")表示选取 #nav 的子元素<span> |
| 相邻元素选择器 |
selector1+selector2 |
从 selector1 后面的第一个 兄弟元素里选取 selector2 |
元素集合，如 $("h2+dl") 表示选取紧邻<h2>元素之后的同辈元素 <dl> |
| 同辈元素选择器 |
selector1~selector2 |
从 selector1 后面的所有兄 弟元素里选取 selector2 |
元 素 集 合， 如 $("h2~dl") 表 示 选 取<h2> 元素之后所有的同辈元素<dl> |
selector1 selector2 与 selector1>selector2 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系
selector1+selector2 可以使用 jQuery 对象的 next() 方法代替
selector1~selector2 从 selector1 后面的所有兄弟元素里选取 selector2，不能获取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法获取全部的相邻元素，不分前后
selector1 selector2 与 selector1:has(selector2) 虽然这两个选择器都要求 selector2 是 selector1 的后代元素，但是前者最终选取的是后代元素，后者最终选取的是拥有这些后代元素的元素
示例：使用层次选择器锁定 DOM 元素
<script type="text/javascript">
$(function() {// 页面加载完毕事件
// 设置标题的颜色
$(":header").css("color","red");
// 设置第一层无序列表的字体颜色
$(":header+ul>li").css("color","green");
// 设置第二层无序列表的字体颜色
$(":header+ul>li>ul>li").css("color","blue");
});
</script>
html代码略
6.4.2 表单选择器
| 选择器 |
功能 |
返回值 |
| :input |
获取 <input><textarea><select><button> 元素 |
元素集合 |
| :text |
获取符合 [type=text] 的 <input> 元素 |
元素集合 |
| :password |
获取符合 [type=password] 的 <input> 元素 |
元素集合 |
| :radio |
获取符合 [type=radio] 的 <input> 元素 |
元素集合 |
| :checkbox |
获取符合 [type=checkbox] 的 <input> 元素 |
元素集合 |
| :image |
获取符合 [type=image] 的 <input> 元素 |
元素集合 |
| :file |
获取符合 [type=file] 的 <input> 元素 |
元素集合 |
| :hidden |
参考“可见性过滤选择器” |
元素集合 |
| :button |
获取 <button> 元素和符合 [type=button] 的 <input> 元素 |
元素集合 |
| :submit |
获取符合 [type=submit] 的 <input> 元素 |
元素集合 |
| :reset |
获取符合 [type=reset] 的 <input> 元素 |
元素集合 |
表单对象属性过滤选择器
表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的范畴，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行过滤
| 选择器 |
功能 |
| :enabled |
选取可用的表单元素 |
| :disabled |
选取不可用的表单元素 |
| :checked |
选取被选中的 <input> 元素 |
| :selected |
选取被选中的 <option> 元素 |
示例：使用表单选择器和表单对象属性过滤选择器锁定 DOM 元素
$(function() {// 页面加载完毕事件
$("#pa :button").click(function() {
// 选择器 #pa 后的空格表示获取后代元素
$("#pa :text:enabled").css("border","1px solid red");
});
$("#pb :button").click(function() {
$("#pb :radio:checked").parent().css("background-color","#63c");
});
$("#pc :button").click(function() {
$("#pc :checkbox:checked").parent().css("background-color","#63c");
});
$("#pd :button").click(function() {
var info = " 你最喜欢的球星是："
info += $("#pd :input option:selected").val();
alert(info);
});
});
6.4.3 实践练习
总结:
- jQuery代码的特点：”$”标志、隐式循环、链式书写
- jQuery中基本选择器有“#id”、“.class”、“element”和“*”
- 基本过滤选择器有“:first”、“:last”、“:not”、“:even”、“：odd”、“:eq”、“:gt”、“:lt”、“:header”和“：animated”
- 内容过滤选择器有“：contains”、“:empty”、“:has”和“:parent” 可见性过滤选择器有“：hidden”和“:visible”
- 属性过滤选择器有“[attribute]”、“[attribute=value]”和“ [attribute=!value]”等
- 层次选择器有“selector1 selector2”、“ selector1> selector2”、“ selector1 +selector2”和“ selector1 ~selector2”
- 表单选择器有“:input”、“:text”、“:password”、“:radio”和“:checkbox”等