如何理解JavaScript中的jQuery

這篇文章給大家介紹如何理解JavaScript中的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() // 停止在動畫結束狀態

關于如何理解JavaScript中的jQuery就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。