Web前端JQuery面試題（一）

Web前端JQuery面試題（一）

一：選擇器

基本選擇器

1. 什么是#id，element，.class，*，selector1, selector2, selectorN？

答：

根據給定的id匹配一個元素，用于搜索，通過id的屬性給定值。

案例：查找id為da3的元素

html代碼：
<div id="da1"></div>
<div id="da2"></div>
<div id="da3"></div>jquery代碼：
$("#da3");結果：
[ <div id="da3"></div> ]html代碼：
<div id="da:q"></div>jquery代碼：
$("#da\\:q");

根據給定的元素名匹配所有元素

案例，查找div元素：

html代碼：
<div> da1 </div>
<div> da2 </div>
<p>da3</p>jquery代碼：
$("div");結果：
[ <div> da1 </div> , <div> da2 </div> ]

根據給定的類匹配元素

html代碼：
<div class="dashu"> dashu </div>
<div class="da"> da </div>jquery代碼:
$(".da");結果:
[ <div class="da"> da </div> ]

匹配所有元素*

html代碼：
<div> 1 </div>
<p> 2 </p>jquery代碼：
$("*");結果：
[ <div> 1 </div>, <p> 2 </p> ]

將每一個選擇器匹配到的元素合并后一起返回：

html代碼：
<div class="da"></div>
<p></p>
<span></span>jquery代碼：
$(".da, p, span");結果：
[ <div class="da"></div>, <p></p>, <span></span> ]

層級選擇器

2.后代選擇器，子代選擇器，next，siblings描述？

給祖先元素下匹配所有的后代元素

html代碼：
<table><input id="da"></input><input id="da2"></input><p></p>
</table>jquery代碼:
$("table input");結果：
[ <input id="da"></input>, <input id="da2"></input> ]

給父元素下匹配所有子元素：

html代碼：
<table><input id="da"></input><p><input id="da2"></input></p><p></p>
</table>jquery代碼:
$("table > input");
結果：
[ <input id="da"></input> ]

匹配所有prev元素后的next元素：

html代碼：
<table><p><input id="da"></input></p><p><input id="da2"></input></p><p></p>
</table>jquery代碼:
$("p + input");結果：
[ <input id="da"></input>, <input id="da2"></input> ]

匹配prev元素后的所有siblings元素：
找出同輩的元素

html代碼：
<table><p><input id="da"></input></p><p><input id="da2"></input></p><p></p>
</table>
<input id="da3"></input>jquery代碼：
$("table ~ input");結果：
[ <input id="da3"></input> ]

1. 基本選擇器:?

:first :last :not :even :odd :eq :gt :lt :header :animated

獲取第一個元素

<ul><li>1</li><li>2</li>
</ul>$("li").first();
或
$("li :first");[ <li>1</li> ]

獲取最后一個元素

<ul><li>1</li><li>2</li>
</ul>$('li').last();
$("li :last");[ <li>2</li> ]

去除所有與給定選擇器匹配的元素
查找所有未選中的 input 元素

<input name="da1" />
<input name="da2" checked="checked" />$("input:not(:checked)")[ <input name="da1" /> ]

匹配所有索引值為偶數的元素

<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr>
</table>$("tr:even")[ <tr><td>0</td></tr>, <tr><td>2</td></tr> ]

匹配所有索引值為奇數的元素

匹配所有索引值為奇數的元素<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr>
</table>$("tr:odd")[ <tr><td>1</td></tr> ]

匹配一個給定索引值的元素

<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr>
</table>$("tr:eq(1)")[ <tr><td>1</td></tr> ]

匹配所有大于給定索引值的元素

<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr>
</table>$("tr:gt(0)")[ <tr><td>1</td></tr>, <tr><td>2</td></tr> ]

匹配所有小于給定索引值的元素

<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr>
</table>$("tr:lt(2)")[ <tr><td>0</td></tr>, <tr><td>1</td></tr>]

匹配標題元素

<h1>1</h1>
<p>1</p>
<h2>2</h2>
<p>2</p>$(":header");[ <h1>1</h1>, <h2>2</h2>] 

匹配所有正在執行動畫效果的元素

4.內容選擇器的描述？

:contains :empty :has :parent

匹配包含給定文本的元素
匹配所有不包含子元素或者文本的空元素
匹配含有選擇器所匹配的元素的元素
匹配含有子元素或者文本的元素

5.可見性選擇器

:hidden :visible

匹配所有不可見元素

display:none

type="hidden"

匹配所有的可見元素

1. 屬性選擇器的描述？

[attribute]
[attribute = value] 
匹配給定的屬性是某個特定值的元素
[attribute != value] 
匹配所有不含有特定的屬性
[attribute ^= value]
匹配給定的屬性以某值開始的元素
[attribute $= value]
匹配給定的屬性以某值結尾的元素
[attribute *= value]
匹配有包含某些值的特定元素
[selector1][selector2]
同時滿足多個條件使用

$("div[id]");<div><p></p>
</div>
<div id="da"></div>獲取
[<div id="da"></div>]

$("div [id='da']")

1. 選擇器-子元素有哪些？

:nth-child 
從1開始的，匹配父元素下第n個元素
$("ul li:nth-child(2)"); 獲取2 3 4。。:first-child
匹配每個父元素下的第一個子元素:last-child
匹配每個父元素下的最后一個子元素:only-child
匹配父元素中只有唯一的子元素，如果父元素中有多個子元素，就不會被匹配

1. 表單元素有哪些？

:input
會獲取所有input,textarea,select,button
:text
匹配所有單行文本元框
:password
匹配所有密碼框
:radio
匹配所有單選按鈕
:checkbox
匹配所有復選框
:submit
匹配所有提交按鈕
:image
匹配所有圖像
:reset
匹配所有重置按鈕
:button
匹配所有按鈕
:file
匹配所有文本域
:hidden
匹配所有不可見元素

1. 選擇器表單對象屬性有哪些？

:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有選中元素
:selected
匹配所有選中option元素

1. 在jquery中有哪些屬性？

attr(name); 
獲取屬性值
attr(properties);
以“名/值對”對象添加屬性
attr(key,value);
為所匹配的元素設置屬性值
attr(key, function(index, attr));
為所匹配的元素設置屬性值
removeAttr(name);
刪除屬性

1. css 類屬性有哪些?

addClass(class);
添加一個類名 $("p").addClass("selected");
addClass(function(index, class));
添加類名 $('ul li:last').addClass(function() {})removeClass([class]);
刪除指定類
removeClass(function(index, class))
刪除指定類
toggleClass(class);
有切換效果，如果有這個屬性值就刪除如果沒有就添加
toggleClass(class, switch);
switch為ture添加class，反之刪除
toggleClass(function(index, class), [switch]);
switch為ture添加class，反之刪除

1. html代碼？

html()
獲取html內容
html(val)
設置html內容的值
html(function(index, html));
設置html內容的值

1. 文本有哪些？

text()
獲取元素內容
text(val)
設置內容文本
text(function(index, text))
設置內容文本

1. 關于val有哪些？

val()
獲取元素的當前值
val(val)
設置匹配元素的值
val(array)
賦值作用
val(function(index, value))
設置元素值

1. 過濾選擇器

eq(index): 獲取第n個元素 $("p").eq(1)first()： 獲取第一個元素 $('li').first()last()：獲取最后一個元素 $('li').last()hasClass(class)：判斷是否有給類filter(expr)：選出表達式匹配的元素is(expr)：進行判斷map(callback)：$.map()has(expr)：保留 .has()
not(expr)： .not()

1. 一些方法？

children();
獲取子元素
find();
用于查找表達式
next();
獲取下一個元素
nextAll();
獲取下一個所有元素
parent();
獲取父元素
parents();
獲取所有匹配元素的祖先元素的集合
prev();
獲取前一個元素
prevAll();
獲取之前所有同輩元素
siblings(); $("div").siblings()

add(); $("p").add("span")$("p").add("<span>da</span>");<p></p> <span>da</span>

1. 文檔處理

append()
中間插入
<p></p>
$("p").append("<div></div>");
<p><div></div></p>appendTo();<p></p>
<div><div>$("p").appendTo("div");
<div><p></p></div>

prepend() 元素內部前置內容
<p>hello</p>$("p").prepend("<b></b>");<p><b></b>hello</p>$("p").prependTo("<b></b>");<b><p></p></b>

after(); 在后面追加
before(); 在前面追加$("p").insertAfter("#foo");
<div id="foo">da</div><p>da</p>$("p").insertBefore("#foo");
<p></p><div id="foo"></div>

wrap();$("p").wrap("<div></div>");<div><p></p></div>

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

達叔小生：往后余生，唯獨有你
You and me, we are family !
90后帥氣小伙，良好的開發習慣；獨立思考的能力；主動并且善于溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊