進(jìn)階任務(wù)十四

題目1: jQuery 能做什么?

  • 選擇網(wǎng)頁元素

  • 改變結(jié)果集

  • 元素的操作:取值和賦值

  • 元素的操作: 移動

  • 元素的操作: 復(fù)制、刪除和創(chuàng)建

  • 工具方法

  • 事件操作

  • 特殊效果

  • AJAX

題目2: jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化?

  • jquery對象通常用jquery的方法$('')來得到,可以使用jquery提供的方法來操作html的數(shù)據(jù)

  • DOM原生對象只能用js提供的方法,如getElementById,getElementByTagName,有的獲取的是一個元素,有的獲取的是一個數(shù)組。

  • DOM對象才能使用DOM中的方法,jQuery對象是不可以用DOM中的方法。

  • JQuery對象轉(zhuǎn)化Dom對象:$('#id')[index]

  • DOM對象轉(zhuǎn)化JQuery對象:$(document.querySeletor('#id'))

題目3:jQuery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫法?

  • .on(event [,selector] [,data] [,handler(eventObject)])

    • event:一個dom事件類型字符串,在后面加.xx可以方便后面off(event.xx)

    • selector:事件代理時(shí)使用,指定觸發(fā)事件的元素,會隨著dom節(jié)點(diǎn)改變而改變

    • data:當(dāng)一個事件被觸發(fā),傳遞給處理函數(shù)的內(nèi)容,通過event.data訪問(好像沒啥卵用)

    • handler事件處理函數(shù)

  • .off(events [,selector] [,handler])

    • 移除 on 事件,當(dāng)有多個過濾參數(shù)時(shí)需全部匹配才可移除
  • .bind()

    • 是為一個元素綁定一個事件處理 (3.0中被表為棄用)
  • .unbind()

    • 是為一個元素綁定一個事件處理 (3.0中被表為棄用)
  • .delegate()

    • 為所有匹配選擇器的元素綁定一個或多個事件處理函數(shù),基于一個指定的根元素的子集 (3.0中被表為棄用)
  • .live()

    • 從jQuery1.7開始棄用,舊版本jq用.delegate()替代之

題目4:jQuery 如何展示/隱藏元素?

// css 操作
.status {
     display: none;
}

var $ul = $('ul')
$ul.addClass('statuse') //隱藏
$ul.removeClass('status') //展示

var $ul = $('ul')
$ul.css('display', 'block')
$ul.css('display', 'none')

// jQuery 動畫
var $ul = $('ul')
$ul.hide() //隱藏
$ul.show() // 展示

題目5: jQuery 動畫如何使用?

$(selector).animate(properties [,duration] [,easing] [,complete])

  • properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。

  • duration 持續(xù)時(shí)間,默認(rèn)是400毫秒

  • easing 線性變化

  • complete 動畫完成時(shí)執(zhí)行的函數(shù)

$('ul').click(function() {
  $('li').animate({
    opacity: 0.25,
    left: '+=50',
  }, 5000, function() {
    // Animation complete.
  });
});

題目6:如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本?

$(selector).html() //獲取html
$(selector).html('html元素') //設(shè)置html內(nèi)容
$(selector).text() // 獲取元素內(nèi)部文本
$(selector).text('paper') //設(shè)置內(nèi)部文本內(nèi)容 

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

$(selector).val() //獲取input的value值
$(selector).var(string) //設(shè)置input的value的值
$(selector).attr('attrbuteName') //獲取元素屬性
$(selector).attr('attrbuteName','newAttribute') //設(shè)置元素屬性的值

題目8: 使用 jQuery實(shí)現(xiàn)如下效果

代碼

題目9: 使用 jQuery實(shí)現(xiàn)如下效果

代碼

題目10: 使用 jQuery實(shí)現(xiàn)如下效果

代碼

題目11: 使用 jQuery實(shí)現(xiàn)如下效果

代碼

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

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

  • jQuery 能做什么 jQuery庫為Web腳本編程提供了通用(跨瀏覽器)的抽象層,使得它幾乎適用于任何腳本編程...
    RookieD閱讀 233評論 0 1
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,528評論 0 8
  • 1、 jQuery 能做什么? jquery是一個豐富的js庫,內(nèi)部對js的很多復(fù)雜的方法進(jìn)行了封裝和加工,比如j...
    zh_yang閱讀 1,513評論 6 13
  • 通過jQuery,您可以選?。ú樵?,query)HTML元素,并對它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 728評論 0 3
  • 黃山位于安徽省南部黃山市境內(nèi)(景區(qū)由市直轄),為三山五岳中三山之一,集中國各大名山的美景于一身,尤其以奇松...
    葬愛東少i閱讀 319評論 0 2

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