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,stylebody下table,div,p,ultable下trdiv下spanul下li6.給定屬性操作，描述作用
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)
$("<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()清空全部節點或所有後代元素
結言
好了，歡迎在留言區留言，與大家分享你的經驗和心得。
感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。
作者簡介
達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關注，歡迎分享，置頂尤佳。
推薦閱讀：
