jquery 快速入門學習總結

jquery 快速入門學習總結

jquery簡介

    jquery 是一個免費,開源的javascript 庫.

jquery作用

    方便完成web前端的工作,例如節點操作,元素操作,事件綁定,ajax操作,并且解決了大部分的兼容問題

jquery使用配置

   1.本地配置

   1.1 下載jquery文件,  www.jquery.com

   1.2 引入,放在文件同目錄

      <script type="text/javascript" src="jquery.1.8.3.min.js"></script>

   2.遠程訪問文件

      <script src="http://www.xiaohigh.com/jquery.js"></script>

   3.檢測配置

        alert($);  $ 是jquery對象的簡寫
        alert(jQuery);

   4.元素基本獲取

     4.1 通過id查找元素 $('$id');

     4.2 通過標簽名或者元素獲取 $('div');

     4.3 通過class屬性獲取 $('.class');

     4.4 逗號并列獲取 $('$id,.class');

     4.5 空格層級獲取 $('$id .class')    //中間有空格

   5.過濾獲取

     5.1 獲取第一個元素$('li:first')

    5.2 獲取最后一個元素$('li:last')

    5.3 獲取指定索引的元素 $('li:eq(5)') 或者 $('li').eq(5);

    5.4 獲取包含指定文本的元素$('li:contains("國")')

    5.5 通過屬性查找元素 $('input[name=username]') 通過單個屬性名和屬性值查找

      $('input[type=text][name=phone]') 通過多個屬性名和屬性值進行查找

   6.父子節點獲取(重點)

    6.1 獲取所有的子元素$('ul').children()

    6.2 獲取第一個子元素$('ul li:first-child')

    6.3 獲取最后一個元素$('ul li:last-child')

    6.4 獲取指定索引的元素$('ul li:nth-child(1)')

    6.5 獲取下一個元素 $('#id').next()

    6.6 獲取上一個元素$('#id').prev()

    6.7 獲取父級元素$('#id').parent()

    6.8 獲取先輩元素$('#id').parents('tr')  (重點)

     6.9 獲取同輩元素$('#id').siblings()

    6.10 在父級元素中查找元素$('ul').find('.class')

   7.元素的操作

    7.1 attr()

    attr傳兩個參數的時候是設置,傳一個的時候是獲取

    可以對屬性進行操作,例:<div id='dvs'></div>

    $('#dvs').attr('class','cur');  設置屬性

    $('#dvs').attr('class');    獲取屬性

    7.2 removeAtrr()

    $('#dvs').removeAttr('src');  移除屬性

   8.樣式操作

    8.1 css()

     例:$('#divs').css('width','200px'); 設置css屬性 在括號內可通過中括號進行多個屬性設置

    8.2 addclass()

     添加類樣式   

    8.3 removeClass()

     移除類樣式

   9.文本操作    

    9.1 text()

    $('#dvs').text('<a href="">汽車</a>'); 設置結果會包含a標簽

     9.2 html()

    $('#dvs').html('<a href="">生活</a>');設置結果只有值(生活)

    9.2 from元素的值操作

    值的獲取和設置

    9.2.1 $(element).val() 獲取

    9.2.2 $(element).val('牛') 設置

    9.3 其他

    9.3.1 相對于文檔的偏移量 offset()

        $('#dvs').offset().left

    9.3.2 獲取元素相對于父級的偏移量 position()

        $('#dvs').position()

    9.3.3 元素的滾動距離(既可以獲取也可以設置)  scrollLeft() scrollTop()

    9.3.4 寬度和高度   

    width 獲取可視區域的寬度 $(window).width()

          獲取整個文檔的寬度$('document').width()

          獲取元素的寬 $('element').width()

    height 獲取可視區域的高度 $(window).height()

          獲取整個文檔的高度 $('document').height()

          獲取元素的寬 $('element').height()

     10 節點操作

    10.1 創建節點操作

    $('<div></div>')

    $('<div class='cur'><span>hello world</span></div>')

    10.2 插入節點

     10.2.1 內部尾部添加

    $(parent).append(newNode)

    newNode.appendTo(parent)

    10.2.2 內部頭部添加

    $(parent).prepend(newNode)

    $(newNode).prependTo(parent)

    10.2.3 元素外部之后添加

    $(element).after(newNode)

    newNode.insertAfter(element)

    10.2.4 元素外部之前添加

    $(element).before(newNode)

    newNode.insertBefore(element)

    10.3 刪除節點

    $(element).remove()  刪除當前節點

    $(element).empty()   清空節點

    10.4 替換節點

    替換節點  $(element).replaceWith(newNode)

    10.5 克隆節點 

    克隆節點 $(element).clone(true)

    10.6 包裹元素

    包裹元素   $(element).wrap('<div></div>')   當前的元素被其他的元素包裹

    $(element).unwrap()   解除包裹

    11. 事件綁定

    基本綁定

    $(element).click(function(){})

    $(element).dblclick(function(){})

    加載完畢事件

    $(document).ready(function(){})  //和onload一樣

    $(function(){})

    方法綁定

    $(element).bind('click',function(){})

    $(element).unbind()

    $(element).on('click', function(){})

    動態綁定

    $(element).live('click', function(){})    可以多個同時綁定,點擊之后同時出發一個函數

    11.2 事件觸發

    $(element).trigger('click')     //自動觸發事件

    11.3 阻止事件冒泡和默認行為

    return false

    11.4 獲取當前鼠標的位置和按鍵

    $(element).click(function(e){})

    var cx = e.clientX

    var cy = e.clientY

    var px = e.pageX

    var py = e.pageY

    12 ajax

    $.get('1.php',{a=100&b=200},function(data){})

    $.post('1.php',{num=10&id=10},function(data){})

    $.ajax({

    url: '1.php',   url請求的腳本

    data: 'id=100&page=10',    data發送的數據

    dataType: 'json',    dataType數據的類型

    type: 'GET',    type請求的類型  get或post

    success: function(data){},    success成功的執行代碼

    error: function(){},         error失敗的執行代碼

    timeout:3000,     timeout 超時時間

    async: false    async是否異步

    })

    重點:在php中的數組返回給javascript 讀取

    $arr = ['name'=>'世強','age'=>21,'height'=>'167cm'];

    $res=json_encode($arr);

    echo $res;

    //get發送ajax

$.get('4.php',{a:100},function(data){

// console.log(data);

//第一種

//eval('var arr ='+data);

// console.log(data);

//第二種

//var arr = JSON.parse(data);

console.log(arr);

//第三種 json

}.json)

    13特效

    快速顯示和隱藏

    $(element).hide()

    $(element).show()

    滾動顯示和隱藏

    $(element).slideDown()

    $(element).slideUp()

    漸隱漸顯

    $(element).fadeIn()

    $(element).fadeOut()

    自定義動畫

    $(element).animate({},2000)

    停止

    $(element).stop()

    延時

    $(element).delay(2000)