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來完成。如果想做好一個性能好的軌跡回放功能,還是很有技術含量的,比如我要加一個時間軸,可以隨時拖動時間查詢,然後能快速響應顯示人的軌跡?這就... ...
  • Webpack 4 給我們帶來了一些變化。其中包括更快地打包,引入了SplitChunksPlugin,並淘汰掉之前的CommomsChunksPlugin。在本文,你將學習如何拆分輸出代碼以提高應用的性能。 ...
  • 將map平面的ground:"world-elevation"進行三維顯示 var map = new Map({ basemap:"hybrid", ground:"world-elevation" }); var view = new SceneView({ container:"viewDiv ...
  • 摘要: 對比GET與POST。 1. 前言 最近看了一些同學的面經,發現無論什麼技術崗位,還是會問到 get 和 post 的區別,而搜索出來的答案並不能讓我們裝得一手好逼,那就讓我們從 HTTP 報文的角度來擼一波,從而搞明白他們的區別。 2. 標準答案 在開擼之前嗎,讓我們先看一下標準答案長什麼 ...
  • 這個問題困擾了我一個多小時,各種測bug !始終測不出來! 直接上代碼(錯誤示範) 但是問題是:如果我們使用第三方組件這個方法並不奏效了 這時我們應該這麼寫 ) 註意:這是我們必須在@keyup.enter後面加一個native 來確保這個功能能夠得到實現 ...
  • 一。簡單工廠 定義:簡單工廠模式中,可以根據參數的不同返回不同類的實例。簡單工廠模式專門定義一個類來負責創建其他類的實例,被創建的實例通常都具有共同的父類。 比如你去專門賣滑鼠的地方你可以買各種各樣的滑鼠 二。工廠模式 定義:工廠方法模式中,工廠父類負責定義創建產品對象的公共介面,而工廠子類則負責生 ...
  • 一些常用的移動端的meta屬性設置 ... ...
  • js提交表單錯誤:document.form.submit() is not a function 或 $(...).submit is not a function 在最近的開發過程中,我遇到了一個很奇怪的問題,就是在利用Javascript控製表單提交時,瀏覽器提示 document.genFo ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...