Web前端JQuery面試題（二）

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

Web前端JQuery面試題（二） 1.請寫出jquery的語法？ 2.請問什麼是 對象？ 對象， 為文本對象模型， 的每一個頁面都是一個 對象。通過 方法獲取頁面元素的對象，就是 對象。 3.請問什麼是 對象？ 通過 自身的方法獲取頁面元素的對象，就是jquery對象。 4. 選擇器有哪些？ 選擇 ...


Web前端JQuery面試題（二）

Web前端JQuery面試題（二）

1.請寫出jquery的語法？

<script type="text/javascript">
 $(document).ready(function(){
  // 程式段
 })
</script>

window.onload=function(){
 // 程式段
}

前者效率高
$(function(){
 // 程式段
})

2.請問什麼是DOM對象？

DOM對象，DOM為文本對象模型，DOM的每一個頁面都是一個DOM對象。通過JavaScript方法獲取頁面元素的對象，就是DOM對象。

var txt = document.getElementById("text").value;

3.請問什麼是jquery對象？

通過jquery自身的方法獲取頁面元素的對象，就是jquery對象。

var txt = $("#text").val();
$("#text").toggleClass("txtClick").html("點擊後切換樣式");

4.jquery選擇器有哪些？

jquery選擇器有：基本選擇器，層次選擇器，過濾選擇器，表單選擇器四大類。

過濾選擇器分6種：簡單過濾選擇器，內容過濾選擇器，可見性過濾選擇器，屬性過濾選擇器，子元素過濾選擇器，表單對象屬性過濾選擇器。

基本選擇器：

#id 根據給定的id進行匹配一個元素
element 根據給定的元素名進行匹配所有元素
.class 根據給定的類匹配該類的所有元素
* 匹配所有元素
selector1,selector2 匹配給定的元素，合併一起

層次選擇器：

ancestor descendant 根據祖先元素匹配所有後代的元素
祖先和後代的關係
parent > child 根據父元素匹配所有的子元素
父子的關係
prev + next 根據prev元素匹配後面的所有相鄰元素
於.next()相同，prev元素後的下一個元素
prev ~ siblings 匹配prev元素後的所有兄弟元素
於.nextAll()相同，prev元素後的所有相鄰元素，獲取元素後面的全部相鄰元素
.siblings()方法，獲取前後所有相鄰的元素

簡單過濾選擇器器：

:animated 獲取執行正在動畫效果的元素
:header 獲取所有標題類型的元素
:lt(index) 獲取小於給定索引值的元素
:gt(index) 獲取大於給定索引值的元素
:eq(index) 獲取給定的索引值的元素，從0開始
:odd 獲取奇數的元素
:even 獲取偶數的元素
:not(selector) 獲取除給定選擇器外的所有元素
first() 或 :first 獲取第一個元素
last() 或 :last 獲取最後一個元素

內容過濾選擇器：

:contains(text) 獲取包含給定文本的元素
:empty 獲取所有不包含子元素或文本的空元素
如：<div></div>
:has(selector) 獲取含所選擇器的所有元素
:parent 獲取含有子元素或文本的元素
如：<div>dashu</div>, <div><p></p></div>

可見性過濾選擇器:

:hidden 獲取所有不可見元素
:visible 獲取所有的可見元素

屬性過濾選擇器：

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

子元素過濾選擇器：

:nth-child 
從1開始的，匹配每個父元素下第n個元素
$("ul li:nth-child(2)"); 獲取2 3 4。。

:first-child
匹配每個父元素下的第一個子元素

:last-child
匹配每個父元素下的最後一個子元素

:only-child
匹配父元素中只有唯一的子元素，如果父元素中有多個子元素，就不會被匹配

表單對象屬性過濾選擇器：

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

表單選擇器：

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

5.請問你能寫出dom結構嗎？

html下head,body
head下title,style
body下table,div,p,ul
table下tr
div下span
ul下li

6.給定屬性操作，描述作用

attr(): 可以獲取元素的屬性和屬性值

attr(key,value)：可以設置元素的屬性

removeAttr():可以刪除指定的屬性

html()： 獲取Html內容
html(val)： 設置Html內容

text()： 獲取元素的文本內容
text(val)： 設置元素的文本內容

val()：
獲取元素的值
val(val)：
為元素設置值
val().join(",")：
獲取選中的多個選項值，用於獲取select中多個選項值

設置元素樣式
css(name,value); name 樣式名稱，value樣式值

添加樣式
addClass(class) 和 addClass(class0 class1 ...)

切換樣式
toggleClass(class) 如果有該類class就刪除，如果沒有就添加
進行方法間的切換效果

刪除類
removeClass(class);

創建節點元素，動態創建頁面元素: $(html)

var $p = $("<p>dashucoding</p>");

內部插入

append(content) : 向所選擇的元素內部插入內容
$("body").append($div);
append(function (index,html)) 同上

appendTo: 把選擇的元素追加到另一個指定的元素中

appendTo(content)將一個元素插入另一個指定的元素中
前部分的內容插入其後部分的內容

$("span").appentTo($("div"));

prepend(coontent): 向每個所選擇的的元素內部前置內容
prepend(function(index,html))
prependTo(content)

外部插入

after(content): 向所選擇的元素外部後面插入內容
after(function)

before(content): 向所選擇的元素外部前面插入內容
before(function)

insertAfter(content) 選擇的元素插入另一個元素外部後面
insertBefore(content) 選擇元素插入另一個元素外部前面

複製節點

clone()複製元素本身和clone(true)複製元素和所有功能

$(this).clone().appendTo("span"); 和 $(this).clone(true).apendTo("span");

替換節點

replaceWith(content)
將選擇的元素替換成指定內容

$("span").replaceWith("<p>dashu</p>");

replaceAll(selector)
將選擇的元素替換成指定的selector的元素

$("<p>dashu</p>").replaceAll("#text");

包裹節點

wrap(html): 將所有選擇的元素用其他字元串代碼包裹起來
wrap(elem): 將所有選擇的元素用其他Dom元素包裹起來

wrap(fn)
unwrap() 移除所選元素的父元素或包裹的標記

wrapAll(html),wrapAll(elem)

wrapInner(html),wrapInner(elem)

wrapInner(fn)

wrap(html), wrapInner(html);

包裹外部元素
包裹元素內部的文本

<p><span>da</span></p>

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

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

遍歷元素

each()方法進行元素的遍歷

刪除元素

remove()刪除該元素和empty()清空全部節點或所有後代元素

結言

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

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

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

結語

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

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

-Advertisement-
Play Games
更多相關文章
  • 如何使用JS來開發室內三維地圖的軌跡回放功能
    在製作完成室內三維地圖的功能後，最經常有的需求就是如何做人員的軌跡回放，一般流程都是從資料庫中查詢軌跡坐標後，經過後臺查詢介面返回給前端，接下來的事情都交給JS來完成。如果想做好一個性能好的軌跡回放功能，還是很有技術含量的，比如我要加一個時間軸，可以隨時拖動時間查詢，然後能快速響應顯示人的軌跡？這就... ...
  • Webpack 4教程 - 第四部分，使用SplitChunksPlugin分離代碼
    Webpack 4 給我們帶來了一些變化。其中包括更快地打包，引入了SplitChunksPlugin，並淘汰掉之前的CommomsChunksPlugin。在本文，你將學習如何拆分輸出代碼以提高應用的性能。 ...
  • 顯示/隱藏地面高程
    將map平面的ground:"world-elevation"進行三維顯示 var map = new Map({ basemap:"hybrid", ground:"world-elevation" }); var view = new SceneView({ container:"viewDiv ...
  • 都2019年了，還問GET和POST的區別
    摘要： 對比GET與POST。 1. 前言 最近看了一些同學的面經，發現無論什麼技術崗位，還是會問到 get 和 post 的區別，而搜索出來的答案並不能讓我們裝得一手好逼，那就讓我們從 HTTP 報文的角度來擼一波，從而搞明白他們的區別。 2. 標準答案 在開擼之前嗎，讓我們先看一下標準答案長什麼 ...
  • 當使用vue的按鍵修飾符不起效果的時候怎麼辦?如@keyup.enter = '' ;
    這個問題困擾了我一個多小時，各種測bug !始終測不出來！ 直接上代碼(錯誤示範） 但是問題是：如果我們使用第三方組件這個方法並不奏效了 這時我們應該這麼寫 ） 註意：這是我們必須在@keyup.enter後面加一個native 來確保這個功能能夠得到實現 ...
  • 淺談js抽象工廠模式
    一。簡單工廠 定義：簡單工廠模式中，可以根據參數的不同返回不同類的實例。簡單工廠模式專門定義一個類來負責創建其他類的實例，被創建的實例通常都具有共同的父類。 比如你去專門賣滑鼠的地方你可以買各種各樣的滑鼠 二。工廠模式 定義：工廠方法模式中，工廠父類負責定義創建產品對象的公共介面，而工廠子類則負責生 ...
  • HTML:5meta標簽
    一些常用的移動端的meta屬性設置 ... ...
  • js提交表單錯誤：document.form.submit() is not a function
    js提交表單錯誤：document.form.submit() is not a function 或 $(...).submit is not a function 在最近的開發過程中，我遇到了一個很奇怪的問題，就是在利用Javascript控製表單提交時，瀏覽器提示 document.genFo ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類