好程式設計師web前端培訓JavaScript學習筆記--jQuery

好程式設計師 web 前端培訓 JavaScript 學習筆記 --jQuery 今天來說一些   jQuery   別的東西

元素操作

·  建立一個元素

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

·  內部插入元素

// 向 div 元素中插入一個 p 元素，放在最後 $( 'div' ).append($( '<p></p>' )) // 把 p 元素插入到 div 中去，放在最後 $( '<p>hello</p>' ).appendTo($( 'div' )) // 向 div 元素中插入一個 p 元素，放在最前 $( 'div' ).prepend($( '<p></p>' )) // 把 p 元素插入到 div 中去，放在最前 $( '<p>hello</p>' ).prependTo($( 'div' ))

·  外部插入元素

// 在 div 的後面插入一個元素 p $( 'div' ).after($( '<p></p>' )) // 在 div 的前面插入一個元素 p $( 'div' ).before($( '<p></p>' )) // 把 p 元素插入到 div 元素的後面 $( 'div' ).insertAfter($( '<p></p>' )) // 把 p 元素插入到 div 元素的前面 $( 'div' ).insertBefore($( '<p></p>' ))

·  替換元素

// 把 div 元素替換成 p 元素 $( 'div' ).replaceWith($( '<p></p>' )) // 用 p 元素替換掉 div 元素 $( '<p></p>' ).replaceAll($( 'div' ))

·  刪除元素

// 刪除元素下的所有子節點 $( 'div' ).empty() // 把自己從頁面中移除 $( 'div' ).remove()

·  克隆元素

// 克隆一個 li 元素// 接受兩個引數//   引數1： 自己身上的事件要不要複製，預設是 false//   引數2： 所有子節點身上的事件要不要複製，預設是 true $( 'li' ).clone()

元素尺寸

·  操作元素的寬和高

// 獲取 div 元素內容位置的高，不包含 padding 和 border $( 'div' ).height() // 設定 div 內容位置的高為 200px $( 'div' ).height( 200 ) // 獲取 div 元素內容位置的寬，不包含 padding 和 border $( 'div' ).width() // 設定 div 內容位置的寬為 200px $( 'div' ).width( 200 )

·  獲取元素的內建寬和高

// 獲取 div 元素內容位置的高，包含 padding 不包含 border $( 'div' ).innerHeight() // 獲取 div 元素內容位置的寬，包含 padding 不包含 border $( 'div' ).innerWidth()

·  獲取元素的外接寬和高

// 獲取 div 元素內容位置的高，包含 padding 和 border $( 'div' ).outerHeight() // 獲取 div 元素內容位置的高，包含 padding 和 border 和 margin $( 'div' ).outerHeight( true ) // 獲取 div 元素內容位置的寬，包含 padding 和 border $( 'div' ).outerWidth() // 獲取 div 元素內容位置的高，包含 padding 和 border 和 margin $( 'div' ).outerWidth( true )

元素位置

·  元素相對頁面的位置

// 獲取 div 相對頁面的位置 $( 'div' ).offset()   // 得到的是以一個物件 { left: 值, top: 值 } // 給 div 設定相對頁面的位置 $( 'div' ).offset({   left :   100 ,   top :   100   }) // 獲取定位到一個距離頁面左上角 100 100 的位置

·  元素相對於父元素的偏移量

// 獲取 div 相對於父元素的偏移量（定位的值） $( 'div' ).position()

·  獲取頁面捲去的高度和寬度

window .onscroll   =   function   ()   {

  // 獲取瀏覽器捲去的高度   console.log($( window ).scrollTop())} window .onscroll   =   function   ()   {

  // 獲取瀏覽器捲去的寬度   console.log($( window ).scrollLeft())}

元素事件

·  繫結事件的方法

// 給 button 按鈕繫結一個點選事件 $( 'button' ).on( 'click' ,   function   ()   {

  console.log( '我被點選了' )}) // 給 button 按鈕繫結一個點選事件，並且攜帶引數 $( 'button' ).on( 'click' ,   {   name :   'Jack'   },   function   (e)   {

  console.log(e)   // 所有的內容都再事件物件裡面   console.log(e.data)   // { name: 'Jack' } }) // 事件委託的方式給 button 繫結點選事件 $( 'div' ).on( 'click' ,   'button' ,   function   ()   {

  console.log( this )   // button 按鈕 }) // 事件委託的方式給 button 繫結點選事件並攜帶引數 $( 'div' ).on( 'click' ,   'button' ,   {   name :   'Jack'   },   function   (e)   {

  console.log( this )   // button 按鈕   console.log(e.data)})

·  移除事件

// 給 button 按鈕繫結一個 點選事件，執行 handler 函式 $( 'button' ).on( 'click' ,   handler) // 移除事件使用 off $( 'button' ).off( 'click' ,   handler)

·  只能執行一次的事件

// 這個事件繫結再 button 按鈕身上// 當執行過一次以後就不會再執行了 $( 'button' ).one( 'click' ,   handler)

·  直接觸發事件

// 當程式碼執行到這裡的時候，會自動觸發一下 button 的 click 事件 $( 'button' ).trigger( 'click' )

可以直接使用的常見事件

·  可以直接使用的事件就是可以不利用  on  來繫結，直接就可以使用的事件方法

·  click

// 直接給 div 繫結一個點選事件 $( 'div' ).click( function   ()   {

  console.log( '我被點選了' )}) // 給 div 繫結一個點選事件並傳遞引數 $( 'div' ).click({   name :   'Jack'   },   function   (e)   {

  console.log(e.data)})

·  dblclick

// 直接給 div 繫結一個雙擊事件 $( 'div' ).dblclick( function   ()   {

  console.log( '我被點選了' )}) // 給 div 繫結一個雙擊事件並傳遞引數 $( 'div' ).dblclick({   name :   'Jack'   },   function   (e)   {

  console.log(e.data)})

·  scroll

// 直接給 div 繫結一個滾動事件 $( 'div' ).scroll( function   ()   {

  console.log( '我被點選了' )}) // 給 div 繫結一個滾動事件並傳遞引數 $( 'div' ).scroll({   name :   'Jack'   },   function   (e)   {

  console.log(e.data)})

·  hover

// 這個事件要包含兩個事件處理函式// 一個是移入的時候，一個是移出的時候觸發 $( 'div' ).hover( function   ()   {

  console.log( '我會再移入的時候觸發' )},   function   ()   {

  console.log( '我會在移出的時候觸發' )})

動畫

·  show

// 給 div 繫結一個顯示的動畫 $( 'div' ).show()   // 如果元素本身是 display none 的狀態可以顯示出來 // 給 div 繫結一個顯示的動畫// 接受三個引數// $('div').show('毫秒', '速度', '回撥函式') $( 'div' ).show( 1000 ,   'linear' ,   function   ()   {

  console.log( '我顯示完畢' )})  

·  hide

// 給 div 繫結一個隱藏的動畫 $( 'div' ).hide()   // 如果元素本身是 display block 的狀態可以隱藏起來 // 給 div 繫結一個顯示的動畫// 接受三個引數// $('div').show('毫秒', '速度', '回撥函式') $( 'div' ).hide( 1000 ,   'linear' ,   function   ()   {

  console.log( '我隱藏完畢' )})  

·  toggle

// 給 div 繫結一個切換的動畫 $( 'div' ).hide()   // 元素本身是顯示，那麼就隱藏，本身是隱藏那麼就顯示 // 給 div 繫結一個顯示的動畫// 接受三個引數// $('div').show('毫秒', '速度', '回撥函式') $( 'div' ).toggle( 1000 ,   'linear' ,   function   ()   {

  console.log( '動畫執行完畢' )})  

·  animate

// 定義一個自定義動畫 $( '.show' ).click( function   ()   {

  $( 'div' ).animate({

  width :   500 ,

  height :   300

     },   1000 ,   'linear' ,   function   ()   {

  console.log( '動畫運動完畢' )

     })})

·  stop

// 立刻定製動畫 $( 'div' ).stop()   // 就停止再當前狀態

·  finish

// 立刻結束動畫 $( 'div' ).finish()   // 停止在動畫結束狀態