jQuery動畫與ajax

jQuery 中, $(document).ready()是什么意思?

  • 描述: 當DOM準備就緒時勘究,指定一個函數(shù)來執(zhí)行愕撰。
  • 雖然JavaScript提供了load事件刹衫,當頁面執(zhí)呈現(xiàn)時用來執(zhí)行這個事件,直到所有的東西搞挣,如圖像已被完全接收前带迟,此事件不會被觸發(fā)。在大多數(shù)情況下囱桨,只要DOM結(jié)構(gòu)已完全加載時仓犬,腳本就可以運行。傳遞處理函數(shù)給.ready()方法舍肠,能保證DOM準備好后就執(zhí)行這個函數(shù)搀继。當使用的腳本依賴 CSS 屬性值時窘面,需要特別注意,要保證外部的樣式或內(nèi)嵌的樣式被加載完后律歼,再調(diào)用腳本民镜。

$node.html()和$node.text()的區(qū)別?

  • html()用于獲取集合中第一個匹配元素的HTML內(nèi)容 或 設置每一個匹配元素的html內(nèi)容。
  • text()用于得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合险毁,包括他們的后代制圈,或設置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容。
  • 區(qū)別:傳給html()的參數(shù)會被當作html代碼解析畔况,而傳給text()的參數(shù)只會被當作文本鲸鹦。

$.extend 的作用和用法?

  • 作用: 將兩個或更多對象的內(nèi)容合并到第一個對象。

  • 用法:

    var a = {a:1, b:2}
    var b = {b:3, c:4, d:5}
    $.extend(a, b) //{a: 1, b: 3, c: 4, d: 5}
    a //{a: 1, b: 3, c: 4, d: 5}
    
    var c = {}
    $.extend(c, a, b) //{a: 1, b: 3, c: 4, d: 5}
    c //{a: 1, b: 3, c: 4, d: 5}
    

jQuery 的鏈式調(diào)用是什么跷跪?

  • 可以連續(xù)的使用 jQuery 方法的過程叫做 鏈式調(diào)用馋嗜。
  • jQuery是通過在調(diào)用方法后返回這個調(diào)用對象來實現(xiàn)鏈式調(diào)用的。

jQuery 中 data 函數(shù)的作用

  • 作用:在匹配元素上存儲任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值吵瞻。示例:

    <div>
      The values stored were
    <span></span>
      and
    <span></span>
    </div>
    <script>
    // 從div元素儲存一個值葛菇。
    $("div").data("test", { first: 16, last: "pizza!" });
    // 從div元素儲存的值中取出值。
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);
    </script>
    

寫出以下功能對應的 jQuery 方法:

  • 給元素 $node 添加 class active橡羞,給元素 $noed 刪除 class active

    $node.addClass('active')
    $node.removeClass('active')
    
  • 展示元素$node, 隱藏元素$node

    $node.show()
    $node.hide()
    
  • 獲取元素$node 的 屬性: id眯停、src、title卿泽, 修改以上屬性

    var id = $node.attr('id')
    var src = $node.attr('src')
    var title = $node.attr('title')
    $node.attr({
      id: '001',
      src: './img.gif',
      title: 'img'
    })
    
  • 給$node 添加自定義屬性data-src

    $node.attr("data-src", "123")
    
  • 在$ct 內(nèi)部最開頭添加元素$node

    $ct.prepend($node)
    
  • 在$ct 內(nèi)部最末尾添加元素$node

    $ct.append($node)
    
  • 刪除$node

    $node.remove()
    
  • 把$ct里內(nèi)容清空

    $ct.empty()
    
  • 在$ct 里設置 html <div class="btn"></div>

    $ct.html('<div class="btn"></div>')
    
  • 獲取莺债、設置$node 的寬度、高度(分別不包括內(nèi)邊距签夭、包括內(nèi)邊距齐邦、包括邊框、包括外邊距)

    內(nèi)容高度第租、寬度:
    $node.height()
    $node.height(100)
    $node.width()
    $node.width(100)
    
    包括內(nèi)邊距:
    $node.innerHeight()
    $node.innerWidth()
    
    包括內(nèi)邊距措拇、邊框:
    $node.outerHeight()
    $node.outerWidth()
    
    包括內(nèi)邊距、邊框慎宾、外邊距:
    $node.outerHeight(true)
    $node.outerWidth(true)
    
    內(nèi)邊距儡羔、邊框、外邊框設置:
    $node.css({
      border: '1',
      padding: '10',
      margin: '10'
    })
    
  • 獲取窗口滾動條垂直滾動距離

    $node.scrollTop()
    
  • 獲取$node 到根節(jié)點水平璧诵、垂直偏移距離

    var offset = $node.offset()
    offset.left
    offset.top
    
  • 修改$node 的樣式,字體顏色設置紅色仇冯,字體大小設置14px

    $node.css({
      color: 'red',
      font-size: '14'
    })
    
  • 遍歷節(jié)點之宿,把每個節(jié)點里面的文本內(nèi)容重復一遍

    $node.each(function(i) {
      var str = $(this).text()
      $(this).text(str + str)
    })
    
  • 從$ct 里查找 class 為 .item的子元素

    $ct.find('.item')
    
  • 獲取$ct 里面的所有孩子

    $ct.children()
    
  • 對于$node,向上找到 class 為'.ct'的父親苛坚,在從該父親找到'.panel'的孩子

    $node.parents('.ct').children('.panel')
    
  • 獲取選擇元素的數(shù)量

    $('div').length
    
  • 獲取當前元素在兄弟中的排行

    $node.index()
    

用jQuery實現(xiàn)以下操作

用 jQuery ajax 實現(xiàn)如下效果比被。`當點擊加載更多會加載數(shù)據(jù)展示到頁面效果預覽364

天氣預報頁面

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末色难,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子等缀,更是在濱河造成了極大的恐慌枷莉,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尺迂,死亡現(xiàn)場離奇詭異笤妙,居然都是意外死亡,警方通過查閱死者的電腦和手機噪裕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進店門蹲盘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人膳音,你說我怎么就攤上這事召衔。” “怎么了祭陷?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵苍凛,是天一觀的道長。 經(jīng)常有香客問我兵志,道長醇蝴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任毒姨,我火速辦了婚禮哑蔫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘弧呐。我一直安慰自己闸迷,他們只是感情好,可當我...
    茶點故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布俘枫。 她就那樣靜靜地躺著腥沽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪鸠蚪。 梳的紋絲不亂的頭發(fā)上今阳,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天,我揣著相機與錄音茅信,去河邊找鬼盾舌。 笑死,一個胖子當著我的面吹牛蘸鲸,可吹牛的內(nèi)容都是我干的妖谴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼膝舅!你這毒婦竟也來了嗡载?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤仍稀,失蹤者是張志新(化名)和其女友劉穎洼滚,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體技潘,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡遥巴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了崭篡。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挪哄。...
    茶點故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖琉闪,靈堂內(nèi)的尸體忽然破棺而出迹炼,到底是詐尸還是另有隱情,我是刑警寧澤颠毙,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布斯入,位于F島的核電站,受9級特大地震影響蛀蜜,放射性物質(zhì)發(fā)生泄漏刻两。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一滴某、第九天 我趴在偏房一處隱蔽的房頂上張望磅摹。 院中可真熱鬧,春花似錦霎奢、人聲如沸户誓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帝美。三九已至,卻和暖如春晤硕,著一層夾襖步出監(jiān)牢的瞬間悼潭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工舞箍, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留舰褪,地道東北人。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓疏橄,卻偏偏與公主長得像占拍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,585評論 2 359

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

  • 1. jQuery 中刷喜, $(document).ready()是什么意思? 當DOM準備就緒時立砸,指定一個函數(shù)來執(zhí)...
    billa_8f6b閱讀 223評論 0 1
  • 一掖疮、 jQuery 中, $(document).ready()是什么意思颗祝? 為了防止文檔在完全加載(就緒)之前運...
    婷樓沐熙閱讀 324評論 2 1
  • 1: jQuery 中浊闪, $(document).ready()是什么意思? 當DOM加載完成時螺戳,執(zhí)行其中的代碼搁宾。...
    hhg121閱讀 266評論 0 0
  • 題目1: jQuery 中, $(document).ready()是什么意思倔幼? 相當于window.onload...
    漂于行閱讀 271評論 0 0
  • 1:jQuery 中盖腿, $(document).ready()是什么意思? $(document).ready()...
    LINPENGISTHEONE閱讀 324評論 0 1