JQuery基礎一

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
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末救氯,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子歌憨,更是在濱河造成了極大的恐慌着憨,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件务嫡,死亡現(xiàn)場離奇詭異甲抖,居然都是意外死亡,警方通過查閱死者的電腦和手機心铃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門准谚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人去扣,你說我怎么就攤上這事柱衔。” “怎么了愉棱?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵唆铐,是天一觀的道長。 經(jīng)常有香客問我奔滑,道長艾岂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任朋其,我火速辦了婚禮王浴,結(jié)果婚禮上脆炎,老公的妹妹穿的比我還像新娘。我一直安慰自己叼耙,他們只是感情好腕窥,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著筛婉,像睡著了一般簇爆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上爽撒,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天入蛆,我揣著相機與錄音,去河邊找鬼硕勿。 笑死哨毁,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的源武。 我是一名探鬼主播扼褪,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼粱栖!你這毒婦竟也來了话浇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤闹究,失蹤者是張志新(化名)和其女友劉穎幔崖,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渣淤,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡赏寇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了价认。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嗅定。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖用踩,靈堂內(nèi)的尸體忽然破棺而出渠退,到底是詐尸還是另有隱情,我是刑警寧澤捶箱,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布智什,位于F島的核電站,受9級特大地震影響丁屎,放射性物質(zhì)發(fā)生泄漏荠锭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一晨川、第九天 我趴在偏房一處隱蔽的房頂上張望证九。 院中可真熱鬧删豺,春花似錦、人聲如沸愧怜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拥坛。三九已至蓬蝶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間猜惋,已是汗流浹背丸氛。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留著摔,地道東北人缓窜。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像谍咆,于是被迫代替她去往敵國和親禾锤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 通過jQuery摹察,您可以選榷髦馈(查詢,query)HTML元素港粱,并對它們執(zhí)行“操作”(actions)螃成。 jQuer...
    枇杷樹8824閱讀 652評論 0 3
  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式旦签。設計者無需花費時間糾纏JS復雜的高級特性查坪。 1....
    LaBaby_閱讀 1,330評論 0 2
  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性宁炫。 1....
    LaBaby_閱讀 1,167評論 0 1
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,146評論 0 3
  • 對 HTML 進行分類(設置類)偿曙,使我們能夠為元素的類定義 CSS 樣式。 為相同的類設置相同的樣式羔巢,或者為不同的...
    Leathy閱讀 337評論 0 0