jQury選擇器_Dom操作_樣式_事件處理

1.說(shuō)說(shuō)庫(kù)和框架的區(qū)別?

  • 庫(kù)是一個(gè)數(shù)據(jù)倉(cāng)庫(kù),里面放了各種可以利用的API,由于庫(kù)的內(nèi)部已經(jīng)做了各種底層的封裝和各種兼容實(shí)現(xiàn),因此可以調(diào)用提供的API接口來(lái)實(shí)現(xiàn)我們需要的功能,而不需要復(fù)雜的代碼和加工,因此使代碼得到優(yōu)化,效率提高.

  • 框架相當(dāng)于一個(gè)模板,用來(lái)搭建一個(gè)項(xiàng)目的最基層的部分,框架內(nèi)部可以根據(jù)不同項(xiàng)目的需要填入不同的內(nèi)容。

  • 另外一種解釋是:1. 庫(kù)是跟著你的思維走;2.框架是牽著你的思維跟他走;


2.jQuery 能做什么?

  • 將原生DOM元素的功能實(shí)現(xiàn)并且滿足良好的兼容性,最重要的是,可以簡(jiǎn)化代碼。
  • jquery是一個(gè)豐富的js庫(kù),內(nèi)部對(duì)js的很多復(fù)雜的方法進(jìn)行了封裝和加工,比如js很多方法名很冗長(zhǎng),jquery封裝后方法就變得簡(jiǎn)便了,也考慮到了跨瀏覽器兼容問(wèn)題,這樣我們用js時(shí)需要考慮的很多問(wèn)題它都幫我們解決了,這樣我們使用時(shí)就比js代碼要方便,高效的多。

3.jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別?如何轉(zhuǎn)化?

  • DOM原生對(duì)象:是對(duì)象;擁有原生對(duì)象的屬性和方法;

  • jQuery對(duì)象:是DOM元升級(jí)對(duì)象經(jīng)過(guò)包裝之后,擁有jQuery的屬性和方法(對(duì)原生DOM對(duì)象的封裝);是類(lèi)數(shù)組;

  • 轉(zhuǎn)化方法:

  • jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象
    jquery提供了兩種方法將一個(gè)jquery對(duì)象轉(zhuǎn)換成一個(gè)dom對(duì)象,即[index]和get(index)

  • dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
    對(duì)于一個(gè)dom對(duì)象,只需要用$()把dom對(duì)象包裝起來(lái),就可以獲得一個(gè)jquery對(duì)象了,方法為$(dom對(duì)象)


4.jquery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫(xiě)法?

.bind()

$('a').bind('click',function(){ alert("harrisking")});
這是最簡(jiǎn)單的綁定方法了。JQuery掃描文檔找出所有的$(‘a(chǎn)’)
元素,并把a(bǔ)lert函數(shù)綁定到每個(gè)元素的click
事件上。

.unbind()

bind()的反向操作,從每一個(gè)匹配的元素中刪除綁定的事件。如果沒(méi)有參數(shù),則刪除所有綁定的事件,.unbind(type)刪除指定類(lèi)型事件;
$( "#foo" ).unbind();$( "#foo").unbind( "click" );

.live()

$('a').live('click',function(){ alert('harrisking')});
JQuery把a(bǔ)lert函數(shù)綁定到$(document)元素上,并使用’click’和’a’作為參數(shù)。任何時(shí)只要有事件冒泡到document節(jié)點(diǎn)上,它就查看該事件是否是一個(gè)click事件,以及該事件的目標(biāo)元素與’a’這一CSS選擇器是否匹配,如果都是的話,則執(zhí)行函數(shù)。

.delegate()

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

JQuery掃描文檔查找$(‘#container’),并使用click事件和a這一CSS選擇器作為參數(shù)把a(bǔ)lert函數(shù)綁定到$(‘#container’)上。任何時(shí)候只要有事件冒泡到$(‘#container’)上,它就查看該事件是否是click事件,以及該事件的目標(biāo)元素是否與CCS選擇器相匹配。如果兩種檢查的結(jié)果都為真的話,它就執(zhí)行函數(shù)。

為什么.delegate()要比.live()好用?

$('a').live('click', function() { blah()});

// 或者
$(document).delegate('a', 'click', function() {blah() });

后者實(shí)際上要快過(guò)前者,因?yàn)榍罢呤紫纫獟呙枵麄€(gè)的文檔查找所有的$(‘a(chǎn)’)元素,把它們存成jQuery對(duì)象。

.on()

$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

.off()

off():移除用on()綁定的事件處理程序
從所有的p中移除所有的事件:$( "p" ).off();

從所有的p中移除click的事件:$( "p" ).off( "click", "**" );
將事先綁定的方法作為第三個(gè)參數(shù)傳參來(lái)移除綁定事件:

var method = function() {}
$( "body" ).on( "click", "p", method );
$( "body" ).off( "click", "p", method );

通過(guò)命名空間移除綁定函數(shù):

var method = function() {}
$( ".abc" ).on( "click.validator",  method );
$( ".abc" ).on( "keypress.validator",  method );
$( ".abc" ).off( ".validator" );

5.jquery 如何展示/隱藏/切換元素?

 <script>
$('.btn1').on('click',function(){ $('.content').hide(1000); 
$('.btn2').on('click',function(){ $('.content').show(1000); });
$('.btn3').on('click',function(){ $('.content').toggle(1000); }) 
</script> 

6.jquery 動(dòng)畫(huà)如何使用?

<!DOCTYPE html>
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>animate</title>
    <style> 
      .ct{  border:1px solid #ccc; 
            border-radius: 50%;
            display: inline-block;
            background-color: red; 
            width:100px;
            height:100px;
            position: relative;
          }    
     </style>
 </head> 
<body>
 <div class="ct"></div> <button class="btn">點(diǎn)我</button>
 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" > </script> 
<script type="text/javascript"> $('.btn').on('click',function(){ $('.ct').animate({top: '0px',left:'200px'},500) .animate({top:'200px',left:'200px'},1000) .animate({top:'200px',left:'0px'},2000) .animate({top:'0px',left:'0px'},500) })
   </script> 
</body>
</html>

動(dòng)畫(huà)有隊(duì)列的概念,即當(dāng)需要連續(xù)執(zhí)行多個(gè)動(dòng)畫(huà)時(shí),不需要一層層的放入函數(shù)中,而是直接下列即可,每次點(diǎn)擊(操作)時(shí),會(huì)向隊(duì)列中添加這些操作,點(diǎn)擊n次,則添加n次,執(zhí)行n次。解決方法具體請(qǐng)點(diǎn)擊3

7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本?

  • 設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容:

$('#test').html();

  • 設(shè)置和獲取元素內(nèi)部文本:
    $('#test').text();

8.如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性?

  • 設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容:

$('input').val();
$('input').val('value');
設(shè)置和獲取元素屬性:
$('#test').attr();
$('#test').attr('test','test');


9.

地址

10.

地址

11

地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 題目1: 說(shuō)說(shuō)庫(kù)和框架的區(qū)別? 框架也算是庫(kù)的一種,但傾向于重量級(jí)一些,傾向于提供整套的解決方案,傾向于創(chuàng)造一些需...
    漂于行閱讀 318評(píng)論 0 0
  • 1.說(shuō)說(shuō)庫(kù)和框架的區(qū)別? 庫(kù):是一個(gè)數(shù)據(jù)倉(cāng)庫(kù),里面放了各種可以利用的API,由于庫(kù)的內(nèi)部已經(jīng)做了各種底層的封裝和各...
    clark124閱讀 180評(píng)論 0 0
  • 題目1: 說(shuō)說(shuō)庫(kù)和框架的區(qū)別? 庫(kù)是很多工具的集合,類(lèi)似于jquery,封裝了很多簡(jiǎn)化的方法;而框架類(lèi)似一個(gè)架子,...
    饑人谷_js_chen閱讀 268評(píng)論 0 0
  • 題目1: 說(shuō)說(shuō)庫(kù)和框架的區(qū)別? 庫(kù)是一個(gè)數(shù)據(jù)倉(cāng)庫(kù),里面放了各種可以利用的API,由于庫(kù)的內(nèi)部已經(jīng)做了各種底層的封裝...
    大大的蘿卜閱讀 165評(píng)論 0 0
  • 文/一吻作別 “從前車(chē)馬很遠(yuǎn),書(shū)信很慢,一生只夠愛(ài)一個(gè)人”。 最近這幾天,陰云一直包圍著這個(gè)異鄉(xiāng)的小...
    一吻作別閱讀 414評(píng)論 8 2

友情鏈接更多精彩內(nèi)容