1. 下面哪一項描述是錯誤的?(B)
- A.
$("ul li:gt(5):not(:last)")
選取ul標記里面索引值大于5且不是最后一個的li元素 - B.
$("div").find("span")
選取div元素的子元素span - C.
$("div.showmore > a")
選取class屬性值為showmore的div元素的子元素a - D.
$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")
選取文本包含佳能或尼康或奧林巴斯的li元素
[!NOTE]
代碼
$("div").find("span")
實際上并不是選取 div 元素的子元素 span,而是選取 div 元素的后代元素中的 span 元素。如果要選取 div 元素的直接子元素中的 span 元素,可以使用
$("div > span")
。這樣的選擇器將選取所有直接作為 div 元素子元素的 span 元素。
2. 下面哪一項描述是錯誤的?(A)
- A.
$("div~span")
選取<div>
標記所有的同輩元素<span>
- B.
$("div>span")
選取<div>
標記里的標記名為<span>
的子元素標記 - C.
$("#two>*")
選取id屬性值為two的標記的所有子元素 - D.
$(".one+span")
選取class屬性值為one的標記的向下緊相鄰的同輩元素<span>
[!NOTE]
$("div~span")
并不是選取<div>
標記所有的同輩元素<span>
。
$("div~span")
是一種 jQuery 選擇器語法,用于選取所有與div
元素同級且在div
元素后面的所有兄弟元素中的 span 元素。例如,考慮以下 HTML 結構:
<div></div> <span></span> <div></div> <span></span> <span></span> <div></div>
在這個結構中,
$("div~span")
會選取第二個和第四個 span 元素,因為它們是與 div 元素同級的,并且在 div 元素后面的所有兄弟元素中。
3. 有如下HTML結構代碼:
<body><h1>這是標題1</h1><h2>這是標題2</h2><div class="one" id="one">id為one,class為one的div<div class="mini">class為mini</div></div><div class="one" id="two" title="test">id為two,class為one,title為test的div<div class="mini" title="other">class為mini,title為other</div><div class="mini" title="test">class為mini,title為test</div></div><div class="one" ><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini"></div></div>
</body>
執行代碼: alert($(“div”).eq(2).index());輸出結果是下面哪一項?(B)
- A. 4
- B. 3
- C. 2
- D. 1
[!NOTE]
這是因為
$("div")
選取了文檔中所有的 div 元素,然后.eq(2)
針對這些元素取得第三個元素,即 id 為 two 的<div>
元素,它在所有 div 元素中的索引位置是2。而.index()
方法返回的是元素在其同級元素中的索引位置(從 0 開始計數),所以結果是 3。
4. 有如下HTML 代碼:
<table width="400" border="1" cellspacing="0" cellpadding="0"><tr><td>1.</td><td>jQuery內容過濾選擇器<span>第1行</span></td></tr><tr><td>2.</td><td>jQuery內容過濾選擇器第2行</td></tr><tr><td>3.</td><td>jQuery內容過濾選擇器第3行</td></tr><tr><td>4.</td><td>jQuery第4行</td></tr><tr><td>5.</td><td>jQuery第5行</td></tr><tr><td>6.</td><td>第6行</td></tr><tr><td>7.</td><td>第7行</td></tr><tr><td>8.</td><td></td></tr>
</table>
則下面描述哪一項是錯誤的? (A)
- A.
$("td:empty")
選擇的是第8行的第1個單元格 - B.
$("td:parent")
選擇的是含有子元素或文本的td元素 - C.
$("tr:contains('內容')")
選擇的是第1,2,3行 - D.
$("tr:has('span')")
選擇的是第1行
[!NOTE]
$("td:empty")
是一個 jQuery 選擇器,用于選取所有不包含任何內容(即無子元素和無文本)的<td>
元素。
因此,它選取的是第 8 行的第二個單元格,而不是第一個。
5. 有如下HTML 代碼:
<div class="box"><div>visibile</div><div style="display:none">Hidden1</div><div style="visibility:hidden">Hidden2</div><div class="classHidden">Hidden3</div><input type="hidden"/>
</div>
$("div :hidden")
選擇的是哪些元素? (C)
則jQuery 程序中的代碼: - A.
<div style="visibility:hidden">Hidden2</div>
- B.
<div style="display:none">Hidden1</div>
- C.
<div style="display:none">Hidden1</div>,<input type="hidden" />
- D.
<input type="hidden" />
[!NOTE]
$("div :hidden")
是一個 jQuery 選擇器,用于選取所有被隱藏的<div>
元素及其他隱藏元素。在給定的 HTML 代碼中,有以下元素是被隱藏的:
<div style="display:none">Hidden1</div>
<input type="hidden" />
6. 下面哪一項描述是錯誤的? (A)
- A.
$("input:lt(1)")
選取索引值大于1的<input>
元素 - B.
$("input:even")
選取索引值是偶數的<input>
元素 - C.
$("div:last")
選取所有<div>
元素中最后一個<div>
- D.
$("input:not(.myClass)")
選取class屬性值不是myClass的<input>
元素
[!NOTE]
$("input:lt(1)")
是一個 jQuery 選擇器,用于選取索引值小于 1 的<input>
元素。而不是大于 1。
7. 有如下HTML 代碼:
<form><label>Name:</label><input name="name" type="text" /><fieldset><label>Newsletter:</label><input name="newsletter" type=""text /></fieldset>
</form>
<input name="none" type="text"/>
則jQuery 程序中的代碼:$(“form>input”)選擇的是哪些元素?(D)
- A.
<input name="name" type="text"/>, <input name="newsletter" type="text" />
- B.
<input name="newsletter" type="text" />
- C.
<nput name="none" type="text"/>
- D.
<input name="name" type="text" />
[!NOTE]
$("form>input")
是一個jQuery選擇器,它用于選擇所有直接位于<form>
元素內部的<input>
元素。在這個選擇器中,
form
表示選擇所有<form>
元素,>
表示選擇其中的直接子元素,input
表示選擇所有<form>
元素的直接子元素中是<input>
元素的元素。因此,
$("form>input")
選擇的是所有直接位于<form>
元素內部的<input>
元素。
8. 有如下程序代碼:
<!doctype html>
<html><head><meta charset="utf-8"><title>菜單關聯</title><script src="jquery-1.12.4.js" type="text/javascript"></script><style type="text/css">* {margin: 0;padding: 0}body {font-size: 12px;font-family: "宋體", "微軟雅黑";}ul,li {list-style: none;}link,a:visited {text-decoration: none;}div.list {width: 210px;margin: 40px auto 0 auto;}.list a {display: block;font-weight: bold;height: 36px;line-height: 36px;}.list ul li {background-color: #467ca2;border-bottom: solid 1px #316a91;}.list ul li a {padding-left: 10px;color: #fff;}.list ul li ul {display: none;}.list ul li ul li {background-color: #6196bb;border-bottom: solid 1px #467ca2;}.list ul li ul li ul {display: none;}.list ul li ul li a {padding-left: 20px;color: #9FC;}.list ul li ul li ul li {background-color: #d6e6f1;border-bottom: solid 1px #6196bb;}.list ul li ul li ul li a {padding-left: 30px;color: #316a91;}</style><script>$(function () {$("a.inactive").click(function () {if ($(this).next("ul").___(1)_____) $(this).next("ul").hide();else $(this).next("ul").show().___(2)___.siblings().___(3)____.hide();})})</script>
</head><body><div><ul><li><a href="#">學校概況</a><ul><li><a href="#">科大簡介</a><ul><li><a href="#">校園分布</a></li><li><a href="#">校園風光</a></li></ul></li><li><a href="#">現任領導</a></li><li><a href="#">組織機構</a><ul><li><a href="#">黨委機關</a></li><li><a href="#">團委機關</a></li><li><a href="#">行政機關</a></li><li><a href="#">群團組織</a></li></ul></li></ul></li><li> <a href="#">教育教學</a><ul><li><a href="#">本科生教育</a></li><li><a href="#">研究生教育</a></li><li><a href="#">繼續教育</a></li></ul></li><li> <a href="#">招生就業</a><ul><li><a href="#">本科生招生</a></li><li><a href="#">研究生招生</a></li><li><a href="#">繼續教育招生</a></li><li><a href="#">就業信息網</a></li></ul></li></ul></div>
</body></html>
補充完整功能實現,實現如下功能:
(1)單擊菜單使下面的子菜單顯示或隱藏;
(2)單擊菜單使其下面的子菜單互斥顯示。
效果如下圖所示:(B)
-
A.
(1)
is(":visible")
(2)parent()
(3)children("ul")
-
B.
(1)
is(":visible")
(2)parent()
(3)find("ul")
-
C.
(1)
is("visible")
(2)parent()
(3)find("ul")
-
D.
(1)
is(":visible")
(2)prev()
(3)find("ul")
[!NOTE]
is(“:visible”):判斷是否顯示
find(“ul”):ul的所有后代節點
siblings():查找所有兄弟的節點
parent():查找父親節點
9. 下面哪一項描述是錯誤的?(A)
- A.
$("#two>*")
與$("#two").siblings()
等價 - B.
$(".one+span")
與$(".one").next("span")
等價 - C.
$("div~span")
與$("div").nextAll("span")
等價 - D.
$("div+span")
與$("div").next("span")
等價
[!NOTE]
$("#two>*")
表示選擇#two
下的所有子元素,而$("#two").siblings()
表示選擇#two
的兄弟元素,因此它們并不等價。
10. 有如下HTML 代碼:
<p>one</p>
<div><p>two</p></div>
<p>three</p>
則jQuery 程序中的代碼: $(“div>p”)選擇的是哪些元素?( B )
- A.
<p>three</p>
- B.
<p>two</p>
- C.
<div><p>two</p></div>
- D.
<p>one</p>
11. 在HTML頁面中有如下結構的代碼: ( D )
<div id=""header""><h3><span>S3N認證考試</span></h3><ul><li>一</li><li>二</li><li>三</li><li>四</li></ul>
</div>
請問下面哪一個選項所示的jQuery代碼,不能夠讓漢字“四”的顏色變成紅色?
- A.
$("#header li:eq(3)").css("color","red")
- B.
$("#header ul li:eq(3)").css("color","red")
- C.
$("#header li:last").css("color","red")
- D.
$"#header li:gt(3)").css("color","red")
[!NOTE]
$("header li:gt(3)")
表示選擇header
下索引大于3的所有li
元素,而題目中要求的是選擇第4個li
元素,所以這個代碼并不能達到要求。
12. 有如下程序代碼:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title><style>ul,li {padding: 0;margin: 0;list-style: none;text-align: center;}#wrap {width: 330px;margin: 30px auto 0;height: 30px;background-color: blue;border-radius: 5px;padding: 0 5px;}#wrap>ul {height: 30px;}#wrap>ul>li {float: left;width: 100px;background-color: yellow;height: 30px;line-height: 30px;margin: 0 5px;}a {text-decoration: none;color: red;}#wrap .uu {background-color: pink;display: none;}</style><script src="jquery-1.12.4.js"></script><script>$(function () {$("li").mouseenter(function () {$(this).___(1)___.show();}).mouseleave(function () {$(this).___(2)_____.hide();})})</script>
</head><body><div id="wrap"><ul><li><a href="javascript:;">一級菜單1</a><ul><li>二級菜單11</li><li>二級菜單12</li><li>二級菜單13</li></ul></li><li><a href="javascript:;">一級菜單2</a><ul><li>二級菜單21</li><li>二級菜單22</li><li>二級菜單23</li></ul></li><li><a href="javascript:;">一級菜單3</a><ul><li>二級菜單21</li><li>二級菜單22</li><li>二級菜單23</li></ul></li></ul></div>
</body></html>
從下面選項中選擇正確的答案補充完整程序,實現鼠標移動到一級菜單上時顯示對應的子菜單,離開一級菜單時子菜單隱藏。效果如下圖所示: (C)
-
A.
(1)
next("ul")
(2)
next("ul")
-
B.
(1)
prev("ul")
(2)
prev("ul")
-
C.
(1)
children("ul")
(2)
children("ul")
-
D.
(1)
find()
(2)
find()
[!NOTE]
children("ul")
是 jQuery 中的一個方法調用。它的意思是選擇當前元素的所有直接子元素中符合指定選擇器的元素,其中"ul"
是選擇器,表示選擇所有標簽名為<ul>
的子元素。<div class="parent"><ul><li>Item 1</li><li>Item 2</li></ul><p>Paragraph</p><ul><li>Item 3</li><li>Item 4</li></ul> </div>
如果你使用
$(".parent").children("ul")
,它會選擇class
為"parent"
的<div>
元素的所有直接子元素中標簽名為<ul>
的元素,也就是第一個和第二個<ul>
元素。
next("ul")
是 jQuery 中的一個方法調用。它的意思是選擇當前元素的下一個兄弟元素中符合指定選擇器的元素,其中"ul"
是選擇器,表示選擇下一個兄弟元素中標簽名為<ul>
的元素。<div class="parent"><ul><li>Item 1</li><li>Item 2</li></ul><p>Paragraph</p><ul><li>Item 3</li><li>Item 4</li></ul> </div>
如果你使用
$("p").next("ul")
,它會選擇標簽名為<p>
的元素的下一個兄弟元素中標簽名為<ul>
的元素,也就是第二個<ul>
元素。
13. HTML代碼如下:
<div class="one" id="one">id為one,class為one的div<div class="mini">class為mini</div>
</div>
<div class="one"><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini"></div>
</div>
選擇第一個div元素,用以下哪個選擇器?(B)
- A.
$("div eq(0)")
- B.
$("div:first")
- C.
$("div:eq(1)")
- D.
$("div :first")
[!NOTE]
選項 A 中的選擇器
$("div eq(0)")
包含了兩個部分,分別是:
div
:選擇所有<div>
元素。eq(0)
:從匹配的元素集合中選取索引為 0 的元素。然而,這個選擇器有一個語法錯誤,應該修改為
$("div:eq(0)")
,才能正確選擇第一個<div>
元素。
14. 有如下HTML 代碼:
<html><head><meta charset="UTF-8"><title>Document</title><script src='jquery-1.12.4.js'></script><script>$(function () {alert($("*").length);})</script>
</head><body><p>河南科技大學</p><div>DIV</div><span>SPAN</span><p>P</p>
</body></html>
則jQuery 程序中的代碼:alert($(“*”).length)輸出的結果是(D)?
- A. 4
- B. 6
- C. 10
- D. 11
15. 有如下HTML代碼:
<!doctype html>
<html><head><meta charset="utf-8"><title>復選框效果</title><style type="text/css">td {text-align: center;font-size: 24px;line-height: 36px;}input {display: inline-block;width: 24px;height: 24px;}input[type=button] {width: 100px;}</style><script src="jquery-1.12.4.js"></script><script> $(function () {$("#all").click(function () {var ch = this.checked;$("input[name=product]").each(function () {this.checked = ch;})})$("input[name=product]").click(function () {if ($("input[name=product]:checked").length == $("input[name=product]").length) $("#all")[0].checked = true; else $("#all")[0].checked = false;})}) </script>
</head><body><table border="1" cellspacing="0" cellpadding="0" width="600px;" id="tb1"><tr><td> <input type="checkbox" id="all" value="全選" />全選 </td><td>商品名稱</td><td>價格</td></tr><tr><td><input type="checkbox" name="product" /></td><td>網頁設計</td><td>25</td></tr><tr><td><input type="checkbox" name="product" /></td><td>css + div布局</td><td>26</td></tr><tr><td><input type="checkbox" name="product" /></td><td>JavaScript程序設計</td><td>28</td></tr><tr><td><input type="checkbox" name="product" /></td><td>JQuery程序設計</td><td>28</td></tr></table>
</body></html>
從下面選項中選擇正確的答案補充完整程序,實現如下功能:(1)點擊全選按鈕后,根據全選按鈕的選中狀態來控制下面所有子復選框的狀態相應的功能。(2)單擊下面的單個復選框時,需要根據當前下面所有復選框的狀態來確定全選復選框的狀態,當下面所有復選框都選中時,全選復選框才選中,否則全選復選框不能選中。(A)
-
A.
(1)
each
(2)
this.checked
(3)
input[name=product]
(4)
input[name=product]:checked
-
B.
(1)
each
(2)
this.checked
(3)
input[name=product]
(4)
input:checked
-
C.
(1)
each
(2)
$(this).checked
(3)
input
(4)
input[name=product]:checked
-
D.
(1)
each
(2)
this.checked
(3)
:checkbox
(4)
input[name=product]:checked
16. 有如下程序代碼:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title><style>ul{list-style: none;width: 160px;}ul,li{padding:0;margin:0;border-bottom: 1px solid #fff;}li>span{display: block;background-color: pink;}li>div{height: 120px;background-color: yellow;display: none;}</style><script src="jquery-1.12.4.js"></script><script> $(function(){$("span").click(function(){$(this).___(1)____.show().____(2)___.siblings().____(3)____.hide();});})</script></head><body><ul><li><span>標題1</span><div>我是彈出來的div1</div></li><li><span>標題2</span><div>我是彈出來的div2</div></li><li><span>標題3</span><div>我是彈出來的div3</div></li><li><span>標題4</span><div>我是彈出來的div4</div></li></ul></body>
</html>
補充完整功能實現,實現單擊標題使其下面的div元素互斥顯示。 效果如下圖所示: (D)
-
A.
(1)fin()
(2)parent()
(3)children(“div”)
-
B.
(1)next()
(2)parent()
(3)children()
-
C.
(1)next()
(2)parent()
(3)find()
-
D.
(1)next()
(2)parent()
(3)children(“div”)
[!NOTE]
在程序中,單擊標題元素時,需要顯示其下面的div元素,并隱藏其他兄弟元素的div。因此,我們需要先找到標題元素所在的
<li>
元素,再從<li>
元素中找到它的直接子元素<div>
,將其顯示出來,同時將其他兄弟元素的<div>
元素隱藏掉。具體來說,答案D中的代碼含義如下:
next()
方法:選擇當前元素的下一個同級元素,即<div>
元素。
parent()
方法:選擇當前元素的父節點,即<li>
元素。
children("div")
方法:選擇當前元素的所有直接子元素中的<div>
元素。綜上所述,答案D能夠實現題目要求的功能。
17. 有如下程序代碼:
<html><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.4.js"></script><script>$(function(){var att="";for(i=0;i<$("*").length;i++) att+=$("*")[i].tagName+"\n";//深度優先遍歷alert(att);});</script></head><body><ul><li>我是第1個列表項</li></ul><div>我是div元素</div></body>
</html>
運行后結果是( A)。
-
A.
HTML
HEAD
META
TITLE
SCRIPT
SCRIPT
BODY
UL
LI
DIV -
B.
HTML
HEAD
META
TITLE
SCRIPT
SCRIPT
BODY
UL
DIV
LI -
C.
HTML
HEAD
META
TITLE
BODY
UL
DIV
LI
SCRIPT
SCRIPT -
D.
HTML
HEAD
BODY
META
TITLE
SCRIPT
SCRIPT
UL
DIV
LI
[!NOTE]
輸出所有標簽,按照優先遍歷的順序輸出
18. 有如下程序代碼:
<html><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1-12.4.js" type="text/javascript"></script><script type="text/javascript">$(function(){$("p").click(function(){ ____(1)_____; });})</script></head><body><p>段落一</p><p>段落二</p><p>段落三</p></body>
</html>
補充程序實現單擊頁面的p元素,其內容變為紅色。(A)
- A. (1)
this.style.color="red"
- B. (1)
$(this)[0].css("color","red)
- C. (1)
this.css("color","red)
- D. (1)
$(this).style.color="red"
19. HTML代碼如下:
<form id="form1" action="#"><input type="button" value="Button" /><br /><button>提交</button><input type="image" /><br /><input type="reset" /><br /><input type="submit" value="提交" /><br />
</form>
執行代碼alert($(“:button”).length);輸出結果是哪一個?(C)
- A.3
- B.1
- C.2
- D.4
[!NOTE]
根據給定的 HTML 代碼,有兩個類型為 “button” 的元素:一個是
<input type="button">
,另一個是<button>
。因此,alert($(":button").length)
將輸出 2。
20. 有如下HTML代碼:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>精品展示</title><style>ul,li {padding: 0;margin: 0;list-style: none;}.wrapper {width: 298px;height: 243px;margin: 100px auto 0;border: 1px solid pink;}#left,#center,#right {float: left;height: 243px;}#left,#right {width: 80px;}#center {width: 138px;height: 243px;}#left li,#right li {background-color: rgba(200, 200, 200, 0.3);height: 27px;}#left li a,#right li a {display: block;height: 26px;border-bottom: 1px solid pink;line-height: 26px;text-align: center;color: red;text-decoration: none;font-size: 12px;}#left li a:hover,#right li a:hover {color: blue;background-color: yellow;text-decoration: underline;}#center li {height: 243px;background-color: rgba(255, 255, 0, 0.3);}#center li a {display: block;height: 243px;line-height: 243px;text-align: center;font-size: 40px;text-decoration: none;color: #000;}#center>li {display: none;}#center>li:nth-child(1) {display: block;}</style><script src="jquery-1.12.4.js"></script><script>$(function () {$("#left>li").mouseenter(function () {var index = ___(1)____; $("#center>li:eq(" + index + ")").show().siblings().hide(); }) $("#right>li").mouseenter(function () { var index = ___(2)_____;$("#center>li:eq(" + index + ")").show().siblings().hide(); }) })</script>
</head><body><div><ul id="left"><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女褲</a></li><li><a href="#">羽絨服</a></li><li><a href="#">牛仔褲</a></li></ul><ul id="center"><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女褲</a></li><li><a href="#">羽絨服</a></li><li><a href="#">牛仔褲</a></li><li><a href="#">女包</a></li><li><a href="#">男包</a></li><li><a href="#">登山鞋</a></li><li><a href="#">皮帶</a></li><li><a href="#">圍巾</a></li><li><a href="#">皮衣</a></li><li><a href="#">男毛衣</a></li><li><a href="#">男棉服</a></li><li><a href="#">男靴</a></li></ul><ul id="right"><li><a href="#">女包</a></li><li><a href="#">男包</a></li><li><a href="#">登山鞋</a></li><li><a href="#">皮帶</a></li><li><a href="#">圍巾</a></li><li><a href="#">皮衣</a></li><li><a href="#">男毛衣</a></li><li><a href="#">男棉服</a></li><li><a href="#">男靴</a></li></ul></div>
</body></html>
從下面選項中選擇正確的答案補充完整程序,實現當鼠標移動到下圖某個菜單項時,在中間顯示相應的文字,效果如下圖所示。(D)
-
A.
(1)this.index
(2)this.index+9
-
B.
(1)$(this).index()
(2)$(this).index()
-
C.
(1)this.index()
(2)this.index()+9
-
D.
(1)$(this).index()
(2)$(this).index()+9