1、說說庫和框架的區別?
如果把做一個網站比喻成搭建一個房子,庫就是搭建房子的各種工具,比如扳手,錘子,使用工具,可以把原本復雜的事情變得簡單。如果不使用工具,一樣可以達到目的,只不過過程會比較復雜,JQuery封裝了很多功能,在我們想使用時,直接調用即可,而如果用原生JS,則要自己一步步用代碼去實現
框架就類似于房子的框架,它已經為我們準備好了大體的結構,我們需要按照框架的要求和限制,不斷地往框架里面填充內容,這樣就能搭好房子
2、 jQuery 能做什么?
jQuery 是一個 JavaScript 庫,它提供了一些方便使用的 API,能讓一些繁復的 JavaScript 工作變得簡單,比如:HTML 文檔元素的遍歷和操作、事件的處理、動畫效果、Ajax 請求等。
jQuery 將這些基本地功能都封裝起來,并且這些功能都是跨瀏覽器的,讓你不用再操心細節和瀏覽器兼容性。
3、jQuery 對象和 DOM 原生對象有什么區別?如何轉化?
DOM原生對象是JS調用document的API
JQuery對象是將原生DOM對象封裝過的JQuey對象,是JQ特有的。
它們各自有各自的一套邏輯與使用方法,兩者不可混淆,JQuery語法相對于原生JS更加簡單
var btn = document.querySelector('#btn');
var $btn = $('#btn');
//DOM原生對象轉換jQuery對象
var $btn1 = $(btn); //相當于調用$函數
//jQuery對象轉換DOM原生對象
var btn1 = $btn[0];//利用數組下標
4、jquery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫法?
jQuery 中綁定事件,用on:$(selector).on(events [,selector ][,data ], handler(eventObject))
bin 和 unbind 是 jQuery 早期版本中的綁定事件和解綁事件的方法,現已棄用
delegate 和 live是 jQuery 早期版本中的進行事件代理的方法,現已棄用
on 和 off 是現在最新版本的 jQuery 推薦使用的事件綁定和解綁的方法
例如
$('ul').on('click', 'li', function(){
console.log($(this).text())
$(this).toggleClass('click')
})
在這里的選擇器,簡單的選擇器比復雜的選擇器性能更好,比如
$( "#commentForm" ).on( "click", ".addNew", addComment )
比下面這種寫法更好
$( "body" ).on( "click", "#commentForm .addNew", addComment )
.
5、jQuery 如何展示 / 隱藏元素?
- $(selector).show()
- $(selector).hide()
6、jQuery 動畫如何使用?
語法:
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是css屬性,如width,height,left等,但background-color不能使用動畫,即這個屬性是可以用數值來衡量計算的
比如
$("#right").click(function () {
$(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
$(".block").animate({ left: '-50px' }, "slow");
});
也可以同時修改多個屬性
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000,'swing');
7、如何設置和獲取元素內部 HTML 內容?如何設置和獲取元素內部文本?
$(selector).html(HTMLString)
$(selector).html()
$(selector).text(textString)
$(selector).text()
8、如何設置和獲取表單用戶輸入或者選擇的內容?如何設置和獲取元素屬性?
$(selector).val(string)
$(selector).val()
$(selector).attr(attributeName, attributeValue)
$(selector).attr(attributeName)