Web前端JQuery面試題（一）

程式設計師哆啦A夢發表於2020-11-05
Web前端jQuery面試題

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 點贊

相關文章