1.說說庫和框架的區(qū)別绊含?
庫類似于工具,在寫代碼時能更方便炊汹,例如封裝$DOM元素之類
框架類似于房子的戶型躬充,已經(jīng)設計好了,但是內(nèi)部裝潢還沒有OK
2.jquery 能做什么讨便?
主要是封裝好了各種DOM充甚,方法,事件霸褒,和動畫的操作津坑,比原生JS更方便的去調(diào)用和使用
3.jquery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化傲霸?
jquery對象是 DOM 原生對象包裝后形成的疆瑰。 Jquery對象有自己特有的方法(對原生 DOM 對象方法的封裝)眉反。DOM 原生對象只能用 DOM 對象的方法, Jquery 對象 只能用 Jquery 對象的方法穆役。
//原生對象裝jquery對象
var box=document.getElementsByTagName("div")[0]; //box是DOM對象var $box=$(box); // $box是jqeury對象
$box.css("color","red") //使用jquery方法
// $("div")是jquery對象寸五,是所有div的合集var box=$("div")[0] //方法一:,box是DOM對象var box=$("div").get(0) //方法二:box是DOM對象box.style.color="red"; //使用DOM對象的方法
4.jquery中如何綁定事件?bind耿币、unbind梳杏、delegate、live淹接、on十性、off都有什么作用?推薦使用哪種塑悼?使用on綁定事件使用事件代理的寫法劲适?
a.bind( ):為一個元素綁定一個事件處理程序,在jQuery3.0版本中厢蒜,已被標記為棄用霞势。
$( ele ).bind( "click", function( e ) {} ); //相當于下面on( )的寫法
$( ele ).on( "click", function( e ) {} );
b.unbind( ):用來解除bind綁定的事件。同樣在jQuery3.0版本中斑鸦,標記為棄用
$(ele).unbind();
c.live( ): 事件代理機制愕贡,委托給$(document)
$( "ele" ).live( "click", function( e ) {} ); //相當于下面on( )的寫法
$( document ).on( "click", "ele", function( e ) {} );
d.delegate( ), 事件代理機制,委托給$( “#members” )
$( "#members" ).delegate( "li a", "click", function( e ) {} );//相當于下面on( )的寫法
$( "#members" ).on( "click", "li a", function( e ) {} );
e.on( )語法:$ele.on(event [,selector] [,data] ,handler(obj))
,方括號內(nèi)為可選參數(shù)巷屿。
$("ele").on("click", "li", {name:"candy"},
function(e){ console.log(e.target.textContent) //打印出所點擊的li標簽中的內(nèi)容
console.log("hello" + event.data.name) // hello candy})
f.off( ) 刪除綁定的事件
$("ele").off("click", "mouseup") //刪除綁定在元素上的click和mouseup事件
$("ele").off() //刪除綁定在元素上的所有事件
5.jquery 如何展示/隱藏元素固以?
展示: .show()
語法:$(selector).show(speed,callback);
speed:可選參數(shù),規(guī)定元素從隱藏到完全可見的速度嘱巾,默認為0嘴纺,也可寫fast(200ms)或slow(600ms)。
callback:show函數(shù)執(zhí)行完之后浓冒,要執(zhí)行的函數(shù)栽渴。本質(zhì)上show方法是修改元素的display為block。
$('#btn').on('click', function() { $('.div1').show("slow"稳懒,function(){ alert("動畫結(jié)束") }); });
隱藏: .hide()語法:$(selector).show(speed,callback) ;
speed:可選參數(shù)闲擦,規(guī)定元素從可見到完全隱藏的速度,默認為0场梆,也可寫fast(200ms)或slow(600ms)墅冷。
callback:hide函數(shù)執(zhí)行完之后,要執(zhí)行的函數(shù)或油。本質(zhì)上hide方法是修改元素的display為block寞忿。
$('#btn').on('click', function() { $('.div1').hide(3000,function(){ alert("動畫結(jié)束") }); });
6.jquery 動畫如何使用顶岸?
語法:$(selector).animate({params} [,speed] [,callback]);
樣例:
$("#btn").on("click",function(){
$(".div1").animate({
width:"100px",
height:"100px",
left:"50px"http://向左移動50px ,(前提是設置過定位腔彰,css中也能實現(xiàn)移動)
},5000)
.animate({ },3000);
.animate({ });});
7.如何設置和獲取元素內(nèi)部 HTML 內(nèi)容叫编?如何設置和獲取元素內(nèi)部文本?
用html()方法可以設置和獲取元素內(nèi)部HTML內(nèi)容霹抛。需要注意的是搓逾,.html()獲取的是匹配元素集合中第一個元素的Html內(nèi)容(包括html標簽),.html(string)設置的是匹配元素集合中每個元素的html內(nèi)容杯拐。
用text()方法可以設置和獲取元素內(nèi)部文本內(nèi)容霞篡。需要注意的是,.text()
獲取的是匹配元素集合中每個元素的(包括它們的后代)文本的合并端逼,text(string)設置的是匹配元素集合中每個元素的文本朗兵。
<div>AA
<p>BB
<span>CC</span>
</p>
</div>
<div>aa
<p>bb
<span>cc</span>
</p>
</div>
<script >
$("div").html() // 返回的是第一個div中的html,"AA<p>BB<span>CC</span></p>"
$("div").text() //返回的是兩個div(包括它們的后代)的文本的合集顶滩,"AABBCCaabbcc"
$("div").html("<span>hh</span>") //[<div><span>hh</span>??</div>?, <div><span>hh</span></div>?]
$("div").text("kk") //[<div>?kk?</div>?, <div>?kk?</div>?]
</script>
8.如何設置和獲取表單用戶輸入或者選擇的內(nèi)容余掖?如何設置和獲取元素屬性?
通過val()方法可以設置和獲取表單用戶輸入或者選擇的內(nèi)容需要注意的是诲祸,獲取的的是匹配元素集合中第一個元素的當前值浊吏,設置的是匹配元素集合中每個元素的值
$('input').val(); //獲取所有匹配的input集合中的第一個input的value值
$('input').val('饑人谷'); //設置所有input的value值為“饑人谷”
通過attr() 方法可以設置或返回元素的屬性而昨。
$('img').attr('src'); //獲取所有匹配的input集合中的第一個img的src
/$('img').attr('src','http://'); //設置所有img的src