Jquery常用面試題（總結）

單選：

1、下面哪一種不屬於Jquery的選擇器。（D）

A：基本選擇器 B：層次選擇器

C：表單選擇器 D：節點選擇器

2、使用jquery檢查<input type="hidden" id="id"name="id" />元素在網頁上是否存在。（B）

A：if($("#id")) { //do someing... }

B: if($("#id").length > 0) { //do someing... }

C: if($("#id").length()> 0) { //do someing... }

D: if($("#id").size> 0) { //do someing... }

3、<a href="xxx.jpg" title="溫家寶出席學校...">新聞</a>,獲取<a>元素title的屬性值。（C）

A：$("a").attr("title").val(); B：$("#a").attr("title");

C：$("a").attr("title"); D：$("a").attr("title").value;

4、執行下面語句

$(document).ready(function(){

$("#click").click(function(){

alert("clickone time");

});

$("#click").click(function(){

alert("clicktwo time");

});

單擊按鈕<input type="button"id="click" value="點選我"/>，這個會有什麼效果。（C）

A：彈出一次對話方塊，顯示click one time 。

B：彈出一次對話方塊，顯示click two time 。

C：彈出兩次對話方塊，依次顯示click one time，click two time。

D：js編譯錯誤。

5、頁面中有三個元素，如下：<div>div標籤</div><span>span標籤</span><p>p標籤</p>，如果這三個標籤要觸發同一個事件，那麼正確的寫法是（A）。

A：$("div,span,p").click(function(){ //… });

B：$("div || span || p").click(function(){ //… });

C：$("div + span + p").click(function(){ //… });

D：$("div ~ span ~ p").click(function(){ //… });

6、頁面中有一個select標籤，程式碼如下：

<optionvalue="0">請選擇</option>

<optionvalue="2">選項二</option>

<optionvalue="4">選項四</option>

</select>，要使“選項四”選中的正確寫法。（B）

A：$("#sel").val("選項四");

B：$("#sel").val("4");

C：$("#sel > option:eq(4)").checked;

D：$("#sel option:eq(4)").attr("selected");

7、頁面中有一個性別單選按鈕，請設定”男”為選中狀態。程式碼如下：

<input type="radio"name="sex"> 男

<inputtype="radio" name="sex"> 女正確的是（D）

A：$("sex[0]").attr("checked",true);

B：$("#sex[0]").attr("checked",true);

C：$("[name=sex]:radio").attr("checked",true);

D：$(":radio[name=sex]:eq(0)").attr("checked",true);

8、在頁面中有一個ul元素，程式碼如下：

<ul>

</ul>，下面對節點的操作哪一個說法不正確。（D）

A：var $li = $("<li title='香蕉'>香蕉</ii>"); 是建立節點。

B：$("ul").append($("<li title='香蕉'>香蕉</ii>")); 是給ul追加節點。

C：$("ul li:eq(1)").remove();是刪除ul下“橘子“那個節點。

D：以上說法都不對

9、頁面有一個<input type="text"id="name" name="name" value=""/>元素，動態設定該元素的值。正確的選項是。（A）

A：$("#name").val("動態設值");

B：$("#name").text("動態設值");

C：$("#name").html("動態設值");

D：$("#name").value("動態設值");

10、下面說法不正確的是（A）

A：$(":hidden")選取<input>的type型別是hidden的不可見元素。

B：$("div >span")選取<div>元素下元素名是<span>的子元素。

C：$("div :first")選取所有<div>元素中第一個<div>元素。

D：$("input:gt(1)")選取索引值大於1的<input>元素。

11、下面說法不正確的是（D）

A ：$("input:checked")選取所有被選中的<input>元素

B ：$("#form:disabled")選取id為form的表單內的所有不可用元素

C ：$("#name").is(":visible")是判斷id為name的元素的可見性

D ：$("div").addClass("background","url(img/up.gif) ")是設定樣式的

12、如果需要匹配包含文字的元素，用下面哪種來實現（B）

A：text() B：contains()

C：input() D：attr(name)

13、下面不屬於Jquery的ajax全域性事件的是（C）

A：ajaxComplete(callback) B：ajaxSuccess(callback)

C：$.post(url) D：ajaxSend(callback)

14、在jquey中，如果想要從DOM中刪除所有匹配的元素，下面哪一個是正確的（C）

A：delete() B：empty()

C：remove() D：removeAll()

15、在jquery中想要找到所有元素的同輩元素，下面哪一個是可以實現的（B）

A：nextAll([expr]) B：siblings([expr])

C：next() D：find([expr])

16、下面選項中哪一個是和$("#foo")等價的寫法。（D）

A：$("foo#") B：$(#"foo")

C：$ ("foo") D：jQuery("#foo")

多選：

1、獲取<div id="content">內容…</div>標籤裡的文字內容。（BC）

A: $("#content").val(); B: $("#content").html();

C: $("#content").text(); D: $("#content").innerHTML();

2、案例程式碼如下

<body>

<form>

使用者名稱：<input type="text"id="username" name="username" />

密碼：<input type="password" id="pwd"name=" pwd "/>

</form>

</body>

請用jquery選擇器選取username文字框輸入值的內容：（ABCD）

A: $("#username").val();

B: $("input")[0].value;

C: $("input[name=username]").val();

D: $(":input[name=username]").val();

3、案例程式碼如下：

<body>

<form>

<divclass="big">大字型</div>

<divclass="small">小字型</div>

</form>

</body>

請選取文字是"大字型"的div物件。（ACD）

A：$("div.big"); B：$("div .big");

C：$("div:contains('大字型')"); D：$("form > div.big");

填空：

1、假設頁面有<p>I would like to say: </p>一個元素，當執行$("p").append("<b>Hello</b>");時，頁面程式碼會動態載入為<p>Iwould like to say: <b>Hello</b> </p>。當執行$("p").affter("<b>Hello</b>");時, 頁面程式碼會動態載入為<p>I would like tosay: </p><b>Hello</b> 。

2、請寫出頁面元素的動態顯示和隱藏操作程式碼。

假設頁面有檢視按鈕，要控制檢視按鈕的可見性：<input type="button"id="query" value="檢視"/>，設定按鈕不可見：$("#query").hide();或者$("#query").css("display","none"); 設定按鈕可見：$("#query").show();或者$("#query").css("display","block");

3、執行下面程式碼：

$(document).ready(function(){

var array =['墨家','墨子'];

var str = "[";

$.each( array, function(parm1,parm2){

str += "{parm1:" + parm1 + "," + "parm2: " + parm2 + "},";

});

str = str.substring(0,str.length - 1) + "]";

alert(str);

});

請寫出列印結果： [{parm1:0,parm2: '墨家'},{parm1:1,parm2:'墨子'}]

4、執行下面程式碼：

$(document).ready(function(){

var result = $.extend({},{name:"Tom",age:21},{sex:"boy",age:27, email:"ydw@163.com"});

alert(result);

});

寫出result結構：{name:'Tom',age:27,sex:'boy',email:'ydw@163.com'}

基本選擇器

$("#myELement") 選擇id值等於myElement的元素，id值不能重複在文件中只能有一個id值是myElement所以得到的是唯一的元素

$("div") 選擇所有的div標籤元素，返回div元素陣列

$(".myClass") 選擇使用myClass類的css的所有元素

$("*") 選擇文件中的所有的元素，可以運用多種的選擇方式進行聯合選擇：例如$("#myELement,div,.myclass")

層疊選擇器：

$("form input") 選擇所有的form元素中的input元素

$("#main > *") 選擇id值為main的所有的子元素

$("label + input") 選擇所有的label元素的下一個input元素節點，經測試選擇器返回的是label標籤後面直接跟一個input標籤的所有input標籤元素

$("#prev ~ div") 同胞選擇器，該選擇器返回的為id為prev的標籤元素的所有的屬於同一個父元素的div標籤

基本過濾選擇器：

$("tr:first") 選擇所有tr元素的第一個

$("tr:last") 選擇所有tr元素的最後一個

$("input:not(:checked) + span")

過濾掉：checked的選擇器的所有的input元素

$("tr:even") 選擇所有的tr元素的第0，2，4... ...個元素（注意：因為所選擇的多個元素時為陣列，所以序號是從0開始）

$("tr:odd") 選擇所有的tr元素的第1，3，5... ...個元素

$("td:eq(2)") 選擇所有的td元素中序號為2的那個td元素

$("td:gt(4)") 選擇td元素中序號大於4的所有td元素

$("td:ll(4)") 選擇td元素中序號小於4的所有的td元素

$(":header")

$("div:animated")

內容過濾選擇器：

$("div:contains('John')") 選擇所有div中含有John文字的元素

$("td:empty") 選擇所有的為空（也不包括文字節點）的td元素的陣列

$("div:has(p)") 選擇所有含有p標籤的div元素

$("td:parent") 選擇所有的以td為父節點的元素陣列

視覺化過濾選擇器：

$("div:hidden") 選擇所有的被hidden的div元素

$("div:visible") 選擇所有的視覺化的div元素

屬性過濾選擇器：

$("div[id]") 選擇所有含有id屬性的div元素

$("input[name='newsletter']") 選擇所有的name屬性等於'newsletter'的input元素

$("input[name!='newsletter']") 選擇所有的name屬性不等於'newsletter'的input元素

$("input[name^='news']") 選擇所有的name屬性以'news'開頭的input元素

$("input[name$='news']") 選擇所有的name屬性以'news'結尾的input元素

$("input[name*='man']") 選擇所有的name屬性包含'news'的input元素

$("input[id][name$='man']") 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

子元素過濾選擇器：

$("ul li:nth-child(2)"),$("ulli:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回所有的div元素的第一個子節點的陣列

$("div span:last-child") 返回所有的div元素的最後一個節點的陣列

$("div button:only-child") 返回所有的div中只有唯一一個子節點的所有子節點的陣列

表單元素選擇器：

$(":input") 選擇所有的表單輸入元素，包括input, textarea,select 和 button

$(":text") 選擇所有的text input元素

$(":password") 選擇所有的password input元素

$(":radio") 選擇所有的radio input元素

$(":checkbox") 選擇所有的checkbox input元素

$(":submit") 選擇所有的submit input元素

$(":image") 選擇所有的image input元素

$(":reset") 選擇所有的reset input元素

$(":button") 選擇所有的button input元素

$(":file") 選擇所有的file input元素

$(":hidden") 選擇所有型別為hidden的input元素或表單的隱藏域

表單元素過濾選擇器：

$(":enabled") 選擇所有的可操作的表單元素

$(":disabled") 選擇所有的不可操作的表單元素

$(":checked") 選擇所有的被checked的表單元素

$("select option:selected") 選擇所有的select 的子元素中被selected的元素

Jquery常用面試題（總結）

相關文章