1场刑、說說庫和框架的區(qū)別?
如果把做一個(gè)網(wǎng)站比喻成搭建一個(gè)房子蚪战,庫就是搭建房子的各種工具牵现,比如扳手,錘子邀桑,使用工具瞎疼,可以把原本復(fù)雜的事情變得簡單。如果不使用工具壁畸,一樣可以達(dá)到目的贼急,只不過過程會(huì)比較復(fù)雜茅茂,JQuery封裝了很多功能,在我們想使用時(shí)太抓,直接調(diào)用即可空闲,而如果用原生JS,則要自己一步步用代碼去實(shí)現(xiàn)
框架就類似于房子的框架走敌,它已經(jīng)為我們準(zhǔn)備好了大體的結(jié)構(gòu)碴倾,我們需要按照框架的要求和限制,不斷地往框架里面填充內(nèi)容掉丽,這樣就能搭好房子
2跌榔、 jQuery 能做什么?
jQuery 是一個(gè) JavaScript 庫捶障,它提供了一些方便使用的 API僧须,能讓一些繁復(fù)的 JavaScript 工作變得簡單,比如:HTML 文檔元素的遍歷和操作项炼、事件的處理担平、動(dòng)畫效果、Ajax 請求等芥挣。
jQuery 將這些基本地功能都封裝起來驱闷,并且這些功能都是跨瀏覽器的,讓你不用再操心細(xì)節(jié)和瀏覽器兼容性空免。
3空另、jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化蹋砚?
DOM原生對象是JS調(diào)用document的API
JQuery對象是將原生DOM對象封裝過的JQuey對象,是JQ特有的扼菠。
它們各自有各自的一套邏輯與使用方法,兩者不可混淆坝咐,JQuery語法相對于原生JS更加簡單
var btn = document.querySelector('#btn');
var $btn = $('#btn');
//DOM原生對象轉(zhuǎn)換jQuery對象
var $btn1 = $(btn); //相當(dāng)于調(diào)用$函數(shù)
//jQuery對象轉(zhuǎn)換DOM原生對象
var btn1 = $btn[0];//利用數(shù)組下標(biāo)
4循榆、jquery中如何綁定事件?bind墨坚、unbind秧饮、delegate、live泽篮、on盗尸、off都有什么作用?推薦使用哪種帽撑?使用on綁定事件使用事件代理的寫法泼各?
jQuery 中綁定事件,用on:$(selector).on(events [,selector ][,data ], handler(eventObject))
bin 和 unbind 是 jQuery 早期版本中的綁定事件和解綁事件的方法亏拉,現(xiàn)已棄用
delegate 和 live是 jQuery 早期版本中的進(jìn)行事件代理的方法扣蜻,現(xiàn)已棄用
on 和 off 是現(xiàn)在最新版本的 jQuery 推薦使用的事件綁定和解綁的方法
例如
$('ul').on('click', 'li', function(){
console.log($(this).text())
$(this).toggleClass('click')
})
在這里的選擇器逆巍,簡單的選擇器比復(fù)雜的選擇器性能更好,比如
$( "#commentForm" ).on( "click", ".addNew", addComment )
比下面這種寫法更好
$( "body" ).on( "click", "#commentForm .addNew", addComment )
.
5莽使、jQuery 如何展示 / 隱藏元素锐极?
- $(selector).show()
- $(selector).hide()
6、jQuery 動(dòng)畫如何使用吮旅?
語法:
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是css屬性溪烤,如width,height,left等,但background-color不能使用動(dòng)畫庇勃,即這個(gè)屬性是可以用數(shù)值來衡量計(jì)算的
比如
$("#right").click(function () {
$(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
$(".block").animate({ left: '-50px' }, "slow");
});
也可以同時(shí)修改多個(gè)屬性
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000,'swing');
7檬嘀、如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本责嚷?
$(selector).html(HTMLString)
$(selector).html()
$(selector).text(textString)
$(selector).text()
8鸳兽、如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性罕拂?
$(selector).val(string)
$(selector).val()
$(selector).attr(attributeName, attributeValue)
$(selector).attr(attributeName)