Web前端JQuery面試題(二) 1.請寫出jquery的語法? 2.請問什麼是 對象? 對象, 為文本對象模型, 的每一個頁面都是一個 對象。通過 方法獲取頁面元素的對象,就是 對象。 3.請問什麼是 對象? 通過 自身的方法獲取頁面元素的對象,就是jquery對象。 4. 選擇器有哪些? 選擇 ...
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 點贊