1. 概念入门
随着WEB2.0的兴起，JavaScript越来越受到重视，一系列JavaScript程序也蓬勃发展起来，从早期的prototype，DOJO到06年的jQuery，再到07年的ExtJs，互联网正在掀起异常JavaScript风暴，jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人追捧。-- 《锋利的jQuery》
概念： jQuery，JavaScript Query，简称JQ，是一个优秀的开源JS库，它的设计宗旨是 Write Less，Do More，优化HTML文档操作，事件处理，动画设计和Ajax交互，2005年8月，John Resig 提议改进prototype的Behaviour库，于是他在blog上发表了自己的想法，并用了3个例子做简单的流程说明，当时John的想法很简单，他发现这种语法相对现有的JS库更为简洁，但他没想到的是，这篇文章一经发布就引起了业界的关注，于是John开始认真思考着这件事情，即编写语法更为简洁的JS程序库，直到2006年1月14日，John正式宣布以jQuery的名称发布自己的程序库：
- 加载函数：当页面的DOM元素加载完毕后就会触发JQ加载函数，若存在多个时会依次执行：
- 原始写法：
$(document).ready(() => {})，参数可替换为ES5的function函数。 - 简单写法：
$(() => {})，参数可替换为ES5的function函数。
- 原始写法：
- 对象转换：JS原生对象（HTMLXXXElement）和JQ对象（Object）的方法不互通，但支持相互转换：
- JS转JQ：
$(JS原生对象)。 - JQ转JS：
JQ对象[0]或JQ对象.get(0)。
- JS转JQ：
- 多库冲突：当引入的多个JS库的标识符都是
$时会产生冲突，此时先引入的库会失去$的使用权，所以建议将JQ在其他库之后引入，并使用jQuery.noConflict()放弃$使用权，再之后：- 方案1：使用
jQuery作为新的标识符。 - 方案2：接收
noConflict()的返回值作为一个新的标识符。 - 方案3：使用
jQuery($ => {})声明一个jQuery专属代码函数并在函数内继续使用$。
- 方案1：使用
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log("hello JQ-01...");
});
$(document).ready(() => {
console.log("hello JQ-02...");
});
$(function () {
console.log("hello JQ-03...");
});
$(() => {
console.log("hello JQ-04...");
});
</script>
</body>
</html>
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="js-to-jq-btn" type="button">JS转JQ</button>
<br/>
<button id="jq-to-js-btn" type="button">JQ转JS</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
let jsToJqBtn = document.querySelector("#js-to-jq-btn");
// alert(jsToJqBtn);
jsToJqBtn.onclick = () => {
console.log(jsToJqBtn.innerText);
console.log($(jsToJqBtn).text());
console.log(jsToJqBtn.text());
};
let jqToJsBtn = $("#jq-to-js-btn");
// alert(jqToJsBtn);
jqToJsBtn[0].onclick = () => {
console.log(jqToJsBtn.text());
console.log(jqToJsBtn[0].innerText);
console.log(jqToJsBtn.get(0).innerText);
console.log(jqToJsBtn.innerText);
};
});
</script>
</body>
</html>
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="plan-a-btn" type="button">方案a</button>
<br/>
<button id="plan-b-btn" type="button">方案b</button>
<br/>
<button id="plan-c-btn" type="button">方案c</button>
<br/>
<script type="text/javascript" src="../../script/prototype.js"></script>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
$("#plan-a-btn")[0].onclick = () => {
jQuery.noConflict();
console.log(jQuery("#plan-a-btn").text());
};
$("#plan-b-btn")[0].onclick = () => {
let my$ = jQuery.noConflict();
console.log(my$("#plan-b-btn").text());
};
$("#plan-c-btn")[0].onclick = () => {
jQuery.noConflict();
jQuery($ => {
console.log($("#plan-c-btn").text());
});
};
})
</script>
</body>
</html>
2. 选择器
概念： JQ的选择器完全继承了CSS的风格，内置容错，兼容性好，并为部分选择器提供了等价方法，以解决选择器字符串过于复杂而导致的解析慢的问题，且兼容性优于CSS风格写法。
2.1 基本选择器
概念：
$("*")：全部选择器，选择页面上所有的DOM元素，并不建议在全局范围内使用。$("#test")：ID选择器，通过ID来选择某个DOM元素，内置容错，速度最快。$(".test")：CLASS选择器，通过元素的class属性值来选择某些DOM元素：$(".a.b")：选择class="a b"的元素，注意.a和.b间不能加空格。
$("section")：TAG选择器，通过标签名选择某些DOM元素。$("选择器列表")：群组选择器，通过逗号分隔可以一次性选择某些DOM元素。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#id-btn {
color: red; /*无容错功能*/
}
</style>
</head>
<body>
<div class="aaa bbb">CLASS选择器测试DIV</div>
<section>TAG选择器测试SECTION001</section>
<section>TAG选择器测试SECTION002</section>
<hr/>
<button id="all-btn" type="button">全部选择器</button>
<br/>
<button id="id-btn" type="button">ID选择器001</button>
<br/>
<button id="id-btn" type="button">ID选择器002</button>
<br/>
<button id="class-btn" type="button">CLASS选择器</button>
<br/>
<button id="tag-btn" type="button">标签选择器</button>
<br/>
<button id="group-btn" type="button">群组选择器</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
$("#all-btn")[0].onclick = () => {
console.log($("*"));
};
$("#id-btn")[0].onclick = () => {
console.log($("#id-btn"));
};
$("#class-btn")[0].onclick = () => {
console.log($(".aaa.bbb"));
};
$("#tag-btn")[0].onclick = () => {
console.log($("section"));
};
$("#group-btn")[0].onclick = () => {
console.log($("#id-btn,.aaa.bbb,section"));
};
});
</script>
</body>
</html>
2.2 家族选择器
概念： 家族选择器等价写法默认参数均为 *：
$("A").find("B")：选择A的所有后代B，同$("A B")。$("A").children("B")：选择A的所有子辈B，同$("A > B")。$("A").next("B")：选择A后面的首个同辈B，若首个不是B则失效，同$("A + B")。$("A").nextAll("B")：选择A后面的所有同辈B，同$("A ~ B")。$("A").prev("B")：选择A前面的首个同辈B，若首个不是B则失效，无CSS写法。$("A").prevAll("B")：选择A前面的所有同辈B，无CSS写法。$("A").siblings("B")：选择A前后的所有同辈B，无CSS写法。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="yy">杨业
<div>大郎-杨延平</div>
<div>二郎-杨延定</div>
<div>三郎-杨延光</div>
<div>四郎-杨延辉</div>
<div>五郎-杨延德</div>
<div id="yyz">六郎-杨延昭
<div>杨文广</div>
<div>杨宗保</div>
</div>
<div>七郎-杨延嗣</div>
<div>八郎-杨延顺</div>
</div>
<section id="btn-sec">
<button type="button" onclick="yy()">杨业</button>
<br/>
<button type="button" onclick="yyhd()">杨业后代</button>
<br/>
<button type="button" onclick="yjbz()">杨家八子</button>
<br/>
<button type="button" onclick="yys()">七郎杨延嗣</button>
<br/>
<button type="button" onclick="yyzdddm()">杨延昭的弟弟们</button>
<br/>
<button type="button" onclick="yyd()">五郎杨延德</button>
<br/>
<button type="button" onclick="yyzdggm()">杨延昭的哥哥们</button>
<br/>
<button type="button" onclick="yyzdxdm()">杨延昭的兄弟们</button>
<br/>
</section>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
function yy() {
console.log($("#yy"));
}
function yyhd() {
console.log($("#yy div"));
console.log($("#yy").find("div"));
}
function yjbz() {
console.log($("#yy > div"));
console.log($("#yy").children("div"));
}
function yys() {
console.log($("#yyz + div"));
console.log($("#yyz").next("div"));
}
function yyzdddm() {
console.log($("#yyz ~ div"));
console.log($("#yyz").nextAll("div"));
}
function yyd() {
console.log($("#yyz").prev("div"));
}
function yyzdggm() {
console.log($("#yyz").prevAll("div"));
}
function yyzdxdm() {
console.log($("#yyz").siblings("div"));
}
</script>
</body>
</html>
2.3 表单选择器
概念： 表单选择器建议使用某个表单或表单元素做为前置范围：
$(":input")：选择全部<input>系列，<select>和<textarea>。$(":text")/$(":password")：选择全部单行文本框 / 密码框。$(":radio")/$(":checkbox")：选择全部单选按钮 / 多选按钮。$(":button")：选择全部普通，提交，重置按钮和input写法的普通按钮。$(":submit")/$(":reset")：选择全部提交 / 重置按钮，包括input写法的提交和重置按钮。$(":file")/$(":image")：选择全部文件按钮 / 图片提交按钮。$(":hidden")：选择全部隐藏表单域，<option>和拥有hidden属性的元素。$(":enabled")/$(":disabled")：选择全部没有 / 拥有disabled属性的元素。$(":checked")：选择全部拥有checked和selected属性的元素。$(":selected")：选择全部拥有selected属性的元素。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="login-form">
<label><input type="text"/></label>
<label><input type="text" disabled="disabled"/></label>
<label><input type="password"/></label>
<label><input type="radio"/></label>
<label><input type="radio" checked="checked"/></label>
<label><input type="checkbox"/></label>
<label><input type="file"/></label>
<label><input type="image" src="" alt=""/></label>
<label><input type="hidden"/></label>
<label><input type="button" value="普通按钮"/></label>
<label><input type="submit" value="提交按钮"/></label>
<label><input type="reset" value="重置按钮"/></label>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<label>
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
</select>
</label>
<label><textarea></textarea></label>
<span hidden="hidden"></span>
</form>
<hr/>
<section>
<a href="javascript:" id="input-a">:input</a><br/>
<a href="javascript:" id="text-a">:text</a><br/>
<a href="javascript:" id="password-a">:password</a><br/>
<a href="javascript:" id="radio-a">:radio</a><br/>
<a href="javascript:" id="checkbox-a">:checkbox</a><br/>
<a href="javascript:" id="button-a">:button</a><br/>
<a href="javascript:" id="submit-a">:submit</a><br/>
<a href="javascript:" id="reset-a">:reset</a><br/>
<a href="javascript:" id="file-a">:file</a><br/>
<a href="javascript:" id="image-a">:image</a><br/>
<a href="javascript:" id="hidden-a">:hidden</a><br/>
<a href="javascript:" id="enabled-a">:enabled</a><br/>
<a href="javascript:" id="disabled-a">:disabled</a><br/>
<a href="javascript:" id="checked-a">:checked</a><br/>
<a href="javascript:" id="selected-a">:selected</a><br/>
</section>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
let loginForm = $("#login-form");
$("#input-a")[0].onclick = () => {
console.log(loginForm.find(":input"));
};
$("#text-a")[0].onclick = () => {
console.log(loginForm.find(":text"));
};
$("#password-a")[0].onclick = () => {
console.log(loginForm.find(":password"));
};
$("#radio-a")[0].onclick = () => {
console.log(loginForm.find(":radio"));
};
$("#checkbox-a")[0].onclick = () => {
console.log(loginForm.find(":checkbox"));
};
$("#button-a")[0].onclick = () => {
console.log(loginForm.find(":button"));
};
$("#submit-a")[0].onclick = () => {
console.log(loginForm.find(":submit"));
};
$("#reset-a")[0].onclick = () => {
console.log(loginForm.find(":reset"));
};
$("#file-a")[0].onclick = () => {
console.log(loginForm.find(":file"));
};
$("#image-a")[0].onclick = () => {
console.log(loginForm.find(":image"));
};
$("#hidden-a")[0].onclick = () => {
console.log(loginForm.find(":hidden"));
};
$("#enabled-a")[0].onclick = () => {
console.log(loginForm.find(":enabled"));
};
$("#disabled-a")[0].onclick = () => {
console.log(loginForm.find(":disabled"));
};
$("#checked-a")[0].onclick = () => {
console.log(loginForm.find(":checked"));
};
$("#selected-a")[0].onclick = () => {
console.log(loginForm.find(":selected"));
};
});
</script>
</body>
</html>
3. 过滤器
概念： 过滤器负责对那些由选择器选择出来的元素进行进一步的条件筛选，所有过滤器的CSS风格都以冒号开头，部分具有JQ等价方法。
3.1 基本过滤器
概念： 从前到后选择为正寻，角标从0开始，从后向前选择为倒寻，角标从1开始：
$("A").first()：选择第一个A，同$(A:first)。$("A").last()：选择最后一个A，同$(A:last)。$("A").not(.B)：选择class不为B的A，同$(A:not(.B))。$("A").eq(n)：选择索引为n的A，同$(A:eq(n))，n小于0时倒寻。$("A").slice(m, n)：选择[m ,n)之间的所有A，n小于0时倒寻，n缺省表示操作到最后，无CSS风格写法。$(A:even)/$(A:odd)：选择索引为偶数 / 奇数的A，从0开始，无JQ等价方法。$(A:gt(n))/$(A:lt(n))：选择索引大于 / 小于n的A，n小于0时倒寻，无JQ等价方法。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section>
<div class="box1">-111-</div>
<div class="box2">-222-</div>
<div class="box3">-333-</div>
<div class="box4">-444-</div>
<div class="box5">-555-</div>
</section>
<hr/>
<button id="first-btn" type="button">first</button>
<br/>
<button id="last-btn" type="button">last</button>
<br/>
<button id="not-btn" type="button">not</button>
<br/>
<button id="eq-btn" type="button">eq</button>
<br/>
<button id="slice-btn" type="button">slice</button>
<br/>
<button id="odd-btn" type="button">odd</button>
<br/>
<button id="even-btn" type="button">even</button>
<br/>
<button id="gt-btn" type="button">gt</button>
<br/>
<button id="lt-btn" type="button">lt</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
let divs = $("div");
$("#first-btn")[0].onclick = () => {
console.log($("div:first"));
console.log(divs.first());
};
$("#last-btn")[0].onclick = () => {
console.log($("div:last"));
console.log(divs.last());
};
$("#not-btn")[0].onclick = () => {
console.log(divs.not(".box3"));
};
$("#eq-btn")[0].onclick = () => {
console.log($("div:eq(2)"));
console.log(divs.eq(2));
console.log(divs.eq(-2));
};
$("#slice-btn")[0].onclick = () => {
console.log(divs.slice(1, 4));
console.log(divs.slice(2));
console.log(divs.slice(2, -2));
};
$("#odd-btn")[0].onclick = () => {
console.log($("div:odd"));
};
$("#even-btn")[0].onclick = () => {
console.log($("div:even"));
};
$("#gt-btn")[0].onclick = () => {
console.log($("div:gt(2)"));
console.log($("div:gt(-2)"));
};
$("#lt-btn")[0].onclick = () => {
console.log($("div:lt(3)"));
console.log($("div:lt(-3)"));
};
});
</script>
</body>
</html>
3.2 属性过滤器
概念： 属性过滤器操作的都是元素的属性，可以组合叠加使用：
$("A[k]")：选择拥有k属性名的所有A。$("A[k=v]")：选择拥有k属性且k值等于v的所有A。$("A[k!=v]")：选择不拥有k属性，或拥有k但k值不等于v的所有A。$("A[k^=v]")：选择拥有k属性且k值以v开始的所有A。$("A[k$=v]")：选择拥有k属性且k值以v结束的所有A。$("A[k*=v]")：选择拥有k属性且k值包含v的所有A。$("A[k|=v]")：选择拥有k属性且k值以v-或v为前缀的所有A。$("A[k~=v]")：选择拥有k属性且k值按空格拆分后包含v的所有A。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section>
<div>爷爷</div>
<div>蛇精</div>
<div skill="力大无穷">大娃-红娃：力大无穷</div>
<div skill="眼观耳听">二娃-橙娃：眼观耳听</div>
<div skill="刀枪不入">三娃-黄娃：刀枪不入</div>
<div skill="喷火吞火">四娃-绿娃：喷火吞火</div>
<div skill="喷水吞水">五娃-青娃：喷水吞水</div>
<div skill="隐身透体">六娃-蓝娃：隐身透体</div>
<div skill="吸收万物">七娃-紫娃：吸收万物</div>
<div skill="力大无穷-眼观耳听 刀枪不入 喷火吞火 喷水吞水 隐身透体 吸收万物">小金刚：全能</div>
</section>
<hr/>
<button type="button" onclick="fn1();">拥有skill这个属性的人物</button>
<br/>
<button type="button" onclick="fn2();">拥有隐身透体能力的葫芦娃</button>
<br/>
<button type="button" onclick="fn3();">能力不是力大无穷的葫芦娃</button>
<br/>
<button type="button" onclick="fn4();">能力以"喷"字开头的葫芦娃</button>
<br/>
<button type="button" onclick="fn5();">能力以"物"字结尾的葫芦娃</button>
<br/>
<button type="button" onclick="fn6();">能力包含"吞"字的葫芦娃</button>
<br/>
<button type="button" onclick="fn7();">能力为"力大无穷"或以"力大无穷-"为前缀的</button>
<br/>
<button type="button" onclick="fn8();">能力按空格分割后，含"刀枪不入"的葫芦娃</button>
<br/>
<button type="button" onclick="fn9();">能力包含"吞"且以"喷"开头且不喷水吞水的葫芦娃</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
function fn1() {
console.log($(`div[skill]`));
}
function fn2() {
console.log($(`div[skill="隐身透体"]`));
}
function fn3() {
console.log($(`div[skill!="力大无穷"]`));
}
function fn4() {
console.log($(`div[skill^="喷"]`));
}
function fn5() {
console.log($(`div[skill$="物"]`));
}
function fn6() {
console.log($(`div[skill*="吞"]`));
}
function fn7() {
console.log($(`div[skill|="力大无穷"]`));
}
function fn8() {
console.log($(`div[skill~="刀枪不入"]`));
}
function fn9() {
console.log($(`div[skill*="吞"][skill^="喷"][skill!="喷水吞水"]`));
}
</script>
</body>
</html>
3.3 内容过滤器
概念： 内容过滤器就是对某元素包含内容的状态进行的一种过滤选择：
$(A:contains(B))：选择所有包含了文本B的A，无JQ等价写法。$(A:empty)：选择所有不包含任何子元素（包括文本）的A，无JQ等价写法。$(A:parent)：选择所有包含子元素（包括文本）的A，无JQ等价写法。$("A").has(".B")：选择后代元素中存在"class=B"的A，同$(A:has(.B))。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>凉风有幸</div>
<div></div>
<p></p>
<p>秋月无边</p>
<p class="a">亏我思娇</p>
<p><span class="a">的情绪好比</span></p>
<p><span><span class="a">度日如年</span></span></p>
<hr/>
<button id="contains-btn" type="button">contains</button>
<br/>
<button id="empty-btn" type="button">empty</button>
<br/>
<button id="parent-btn" type="button">parent</button>
<br/>
<button id="has-btn" type="button">has</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
$("#contains-btn")[0].onclick = () => {
console.log($(`div:contains("凉风有幸")`));
};
$("#empty-btn")[0].onclick = () => {
console.log($("div:empty"));
};
$("#parent-btn")[0].onclick = () => {
console.log($("p:parent"));
};
$("#has-btn")[0].onclick = () => {
console.log($("p:has(.a)"));
console.log($("p").has(".a"));
};
});
</script>
</body>
</html>
3.4 可见性过滤器
概念：
$(A:hidden)：选择所有隐藏表单域，拥有hidden属性和拥有display:none样式的A元素。$(A:visible)：选择所有拥有visibility:hidden样式的A元素。元素.show()：将拥有display:none样式的元素和拥有hidden属性的元素显示出来。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section id="hidden-sec">
<div style="display: none">display: none</div>
<div hidden="hidden">hidden="hidden"</div>
<div style="visibility: hidden">visibility: hidden</div>
<input type="hidden" value="hidden-input"/>
</section>
<hr/>
<button id="hidden-btn" type="button">:hidden</button>
<br/>
<button id="visible-btn" type="button">visible</button>
<br/>
<button id="show-btn" type="button">show</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
let hiddenSec = $("#hidden-sec");
$("#hidden-btn")[0].onclick = () => {
console.log(hiddenSec.find(":hidden"));
};
$("#visible-btn")[0].onclick = () => {
console.log(hiddenSec.find(":visible"));
};
$("#show-btn")[0].onclick = () => {
hiddenSec.find("div").eq(0).show();
hiddenSec.find("div").eq(1).show();
hiddenSec.find("div").eq(2).show();
hiddenSec.find("input").eq(0).show();
};
});
</script>
</body>
</html>
3.5 子类过滤器
概念： 找到A的父元素，然后再从父元素开始向下过滤：
$(A:first-child)：若A是其父元素的第一个子元素，就被选择。$(A:last-child)：若A是其父元素的最后一个子元素，就被选择。$(A:only-child)：若A是其父元素的唯一的一个子元素，就被选择。$(A:nth-child(odd))：若A是其父元素的奇数个子元素，就被选择。$(A:nth-child(even))：若A是其父元素的偶数个子元素，就被选择。$(A:nth-child(n))：若A是其父元素的第n个子元素，被就选择，n从1开始。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>span1-1</span>
<span>span1-2</span>
<span>span1-3</span>
<span>span1-4</span>
</div>
<div>
<span>span2-1</span>
</div>
<button id="first-child-btn" type="button">first-child</button>
<br/>
<button id="last-child-btn" type="button">last-child</button>
<br/>
<button id="only-child-btn" type="button">only-child</button>
<br/>
<button id="odd-child-btn" type="button">odd-child</button>
<br/>
<button id="even-child-btn" type="button">even-child</button>
<br/>
<button id="nth-child-btn" type="button">nth-child</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
$("#first-child-btn")[0].onclick = () => {
console.log($("span:first-child"));
};
$("#last-child-btn")[0].onclick = () => {
console.log($("span:last-child"));
};
$("#only-child-btn")[0].onclick = () => {
console.log($("span:only-child"));
};
$("#odd-child-btn")[0].onclick = () => {
console.log($("span:nth-child(odd)"));
};
$("#even-child-btn")[0].onclick = () => {
console.log($("span:nth-child(even)"));
};
$("#nth-child-btn")[0].onclick = () => {
console.log($("span:nth-child(0)"));
console.log($("span:nth-child(1)"));
};
});
</script>
</body>
</html>
3.6 其他过滤器
概念：
$("A").is(B)：若A是B，则返回true，只做判断不做选择。$("A").parent()：选择A的父元素，括号中可以指定父元素类型。$("A").parents()：选择A的所有祖先元素，括号中可以指定父元素类型。$("A").parentsUntil(B)：选择A的所有祖先元素，直到遇到祖先元素B，不包含B。$("A").contents()：选择A的子元素，包括文本，括号中可以指定子元素类型。$("A").children()：选择A的子元素，不包括文本，括号中可以指定子元素类型。$("A").filter(".a,#b")：按照指定条件过滤，只留拥有class=a或id=b的A。$(":header")：选择标题元素（H#）。$("A:focus")：选择当前获得焦点的元素。$("A:animated()")：选择当前正在执行animated动作的A。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="first-letter"></span>
<span id="second-letter"></span>
<section id="father">
<article>
<p id="son"></p>
</article>
</section>
<footer class="footer" id="footer"></footer>
<footer class="footer"></footer>
<h1></h1>
<hr/>
<button id="is-btn" type="button">is</button>
<br/>
<button id="has-class-btn" type="button">has-class</button>
<br/>
<button id="parent-btn" type="button">parent</button>
<br/>
<button id="parents-btn" type="button">parents</button>
<br/>
<button id="parentsUntil-btn" type="button">parentsUntil</button>
<br/>
<button id="contents-btn" type="button">contents</button>
<br/>
<button id="children-btn" type="button">children</button>
<br/>
<button id="filter-btn" type="button">filter</button>
<br/>
<button id="header-btn" type="button">header</button>
<br/>
<button id="focus-btn" type="button">focus</button>
<br/>
<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(() => {
$("#is-btn")[0].onclick = () => {
let spans = $("span");
let firstLetter = $("#first-letter");
console.log(spans.eq(0).is(firstLetter));
console.log(spans.eq(1).is(firstLetter));
};
$("#parent-btn")[0].onclick = () => {
let son = $("#son");
console.log(son.parent());
console.log(son.parent("article"));
console.log(son.parent("div"));
};
$("#parents-btn")[0].onclick = () => {
let son = $("#son");
console.log(son.parents());
console.log(son.parents("article"));
};
$("#parentsUntil-btn")[0].onclick = () => {
let son = $("#son");
console.log(son.parentsUntil("section"));
console.log(son.parentsUntil("body"));
};
$("#contents-btn")[0].onclick = () => {
let father = $("#father");
console.log(father.contents());
console.log(father.contents("article"));
};
$("#children-btn")[0].onclick = () => {
let father = $("#father");
console.log(father.children());
console.log(father.children("article"));
};
$("#filter-btn")[0].onclick = () => {
let footer = $("footer");
console.log(footer.filter(".footer"));
console.log(footer.filter(".footer,#footer"));
};
$("#header-btn")[0].onclick = () => {
console.log($(":header"));
};
$("#focus-btn")[0].onclick = () => {
console.log($(":focus"));
};
});
</script>
</body>
</html>
