Web前端JQuery面試題（一）

来源:https://www.cnblogs.com/dashucoding/archive/2019/02/20/10409989.html
-Advertisement-
Play Games

Web前端JQuery面試題（一） 一：選擇器 基本選擇器 1. 什麼是 ，`element .class `， ？ 答： 根據給定的 匹配一個元素，用於搜索，通過 的屬性給定值。 案例：查找 為`da3`的元素 根據給定的元素名匹配所有元素 案例，查找 元素： 根據給定的類匹配元素 匹配所有元素 ...


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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 01. Overview Redis 關於Redis
    LOGO The tags of features: 開源，記憶體數據存儲，被用作為資料庫，cache and message 中間人/中間件 一個實例：單進程（無子進程），單線程，I/O多路復用( multiplexing and non-blocking I/O)處理客戶端的TCP連接。 支持的數 ...
  • OC 知識：Foundation 框架及相關類詳盡總結
    本文用來介紹Foundation框架的相關知識，以及Foundation框架所提供類的相關知識總結。 1. 框架介紹 框架是由很多類、方法、函數和文檔按照一定的邏輯組織起來的集合，以使開發程式變得更加容易。在OS X系統下有100多個框架，這些框架可以用來開發應用程式。 2. Foundation框 ...
  • Flutter 即學即用系列博客——05 StatelessWidget vs StatefulWidget
    Flutter 即學即用系列博客第五彈來了。 自定義 Widget 讓你對 UI 瞭解更加深入。 還有 dart 語法糖
  • 糧草先行——Android摺疊屏開發技術點（二）
    繼該系列的第一篇和番外篇之後，今天我們來聊一聊多視窗開發的註意事項。實際上，與其說“多視窗開發”，不如說讓我們的APP 適應多視窗模式 。 可能有朋友會問，為什麼要提到多視窗模式呢？ 這是因為： 1. 摺疊屏在展開後的屏幕會變大，而變大帶來的變化就是多視窗運行； 2. 多視窗模式在很早之前就已經被G ...
  • 安卓開發中實現自動點擊功能、獲取網路信息’-博客新人初來乍到，歡迎大佬多多指教。
    本人做安卓開發三個月，不是本專業的（興趣轉行），是一枚萌新，目前公司的項目是一個游戲的腳本，但畢竟一個項目所用到的知識是有限的，所以決定開通博客，堅持每天學習（目前也沒發現好的學習資源，知識比較老）並分享，這幾天將分享公司項目用到的技術同時還有自己學習的東西，請多多指教！！！ github後期同步更 ...
  • C#-Xamarin的Android項目開發(二)——控制項應用
    相信我，這不是一篇吐槽文章。。。。 基礎控制項 Android的控制項和控制項樣式非常特別，它是一種內聯特別高的設計模式，換句話說，它是非常爛的設計。。。。 但在這種特別的關係里還是有一定的規律的，下麵我們一起來看看控制項的使用方式。 首先我們定義一個ImageButton，如下： 如上代碼所示，我們定義了 ...
  • OC 知識：徹底理解 iOS 記憶體管理（MRC、ARC）
    1. 什麼是記憶體管理 程式在運行的過程中通常通過以下行為，來增加程式的的記憶體占用 創建一個OC對象 定義一個變數 調用一個函數或者方法 而一個移動設備的記憶體是有限的，每個軟體所能占用的記憶體也是有限的 當程式所占用的記憶體較多時，系統就會發出記憶體警告，這時就得回收一些不需要再使用的記憶體空間。比如回收一些 ...
  • JS常見的字元串操作
    1、charAt() 獲取字元串指定位置的字元 用法：strObj是字元串對象，index是指定的位置，（位置從0開始數） 2、 indexOf() 方法可返回某個指定的字元串值在字元串中首次出現的位置 用法：stringObject是字元串對象，searchvalue是指定的字元串值，fromin ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類