這篇文章給大家介紹如何理解JavaScript中的jQuery，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

目前成都創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、豐南網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

元素操作

· 創(chuàng)建一個(gè)元素

var div = $('

')

· 內(nèi)部插入元素

// 向 div 元素中插入一個(gè) p 元素，放在最后$('div').append($('

'))// 把 p 元素插入到 div 中去，放在最后$('

hello

').appendTo($('div'))// 向 div 元素中插入一個(gè) p 元素，放在最前$('div').prepend($('

'))// 把 p 元素插入到 div 中去，放在最前$('

hello

').prependTo($('div'))

· 外部插入元素

// 在 div 的后面插入一個(gè)元素 p$('div').after($('

'))// 在 div 的前面插入一個(gè)元素 p$('div').before($('

'))// 把 p 元素插入到 div 元素的后面$('div').insertAfter($('

'))// 把 p 元素插入到 div 元素的前面$('div').insertBefore($('

'))

· 替換元素

// 把 div 元素替換成 p 元素$('div').replaceWith($('

'))// 用 p 元素替換掉 div 元素$('

').replaceAll($('div'))

· 刪除元素

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

· 克隆元素

// 克隆一個(gè) li 元素// 接受兩個(gè)參數(shù)//   參數(shù)1： 自己身上的事件要不要復(fù)制，默認(rèn)是 false//   參數(shù)2： 所有子節(jié)點(diǎn)身上的事件要不要復(fù)制，默認(rèn)是 true$('li').clone()

元素尺寸

· 操作元素的寬和高

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

· 獲取元素的內(nèi)置寬和高

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

· 獲取元素的外置寬和高

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

元素位置

· 元素相對(duì)頁(yè)面的位置

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

· 元素相對(duì)于父元素的偏移量

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

· 獲取頁(yè)面卷去的高度和寬度

window.onscroll = function () {

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

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

元素事件

· 綁定事件的方法

// 給 button 按鈕綁定一個(gè)點(diǎn)擊事件$('button').on('click', function () {

 console.log('我被點(diǎn)擊了')})// 給 button 按鈕綁定一個(gè)點(diǎn)擊事件，并且攜帶參數(shù)$('button').on('click', { name: 'Jack' }, function (e) {

 console.log(e) // 所有的內(nèi)容都再事件對(duì)象里面 console.log(e.data) // { name: 'Jack' }})// 事件委托的方式給 button 綁定點(diǎn)擊事件$('div').on('click', 'button', function () {

 console.log(this) // button 按鈕})// 事件委托的方式給 button 綁定點(diǎn)擊事件并攜帶參數(shù)$('div').on('click', 'button', { name: 'Jack' }, function (e) {

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

· 移除事件

// 給 button 按鈕綁定一個(gè) 點(diǎn)擊事件，執(zhí)行 handler 函數(shù)$('button').on('click', handler)// 移除事件使用 off$('button').off('click', handler)

· 只能執(zhí)行一次的事件

// 這個(gè)事件綁定再 button 按鈕身上// 當(dāng)執(zhí)行過一次以后就不會(huì)再執(zhí)行了$('button').one('click', handler)

· 直接觸發(fā)事件

// 當(dāng)代碼執(zhí)行到這里的時(shí)候，會(huì)自動(dòng)觸發(fā)一下 button 的 click 事件$('button').trigger('click')

可以直接使用的常見事件

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

· click

// 直接給 div 綁定一個(gè)點(diǎn)擊事件$('div').click(function () {

 console.log('我被點(diǎn)擊了')})// 給 div 綁定一個(gè)點(diǎn)擊事件并傳遞參數(shù)$('div').click({ name: 'Jack' }, function (e) {

 console.log(e.data)})

· dblclick

// 直接給 div 綁定一個(gè)雙擊事件$('div').dblclick(function () {

 console.log('我被點(diǎn)擊了')})// 給 div 綁定一個(gè)雙擊事件并傳遞參數(shù)$('div').dblclick({ name: 'Jack' }, function (e) {

 console.log(e.data)})

· scroll

// 直接給 div 綁定一個(gè)滾動(dòng)事件$('div').scroll(function () {

 console.log('我被點(diǎn)擊了')})// 給 div 綁定一個(gè)滾動(dòng)事件并傳遞參數(shù)$('div').scroll({ name: 'Jack' }, function (e) {

 console.log(e.data)})

· hover

// 這個(gè)事件要包含兩個(gè)事件處理函數(shù)// 一個(gè)是移入的時(shí)候，一個(gè)是移出的時(shí)候觸發(fā)$('div').hover(function () {

 console.log('我會(huì)再移入的時(shí)候觸發(fā)')}, function () {

 console.log('我會(huì)在移出的時(shí)候觸發(fā)')})

動(dòng)畫

· show

// 給 div 綁定一個(gè)顯示的動(dòng)畫$('div').show() // 如果元素本身是 display none 的狀態(tài)可以顯示出來// 給 div 綁定一個(gè)顯示的動(dòng)畫// 接受三個(gè)參數(shù)// $('div').show('毫秒', '速度', '回調(diào)函數(shù)') $('div').show(1000, 'linear', function () {

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

· hide

// 給 div 綁定一個(gè)隱藏的動(dòng)畫$('div').hide() // 如果元素本身是 display block 的狀態(tài)可以隱藏起來// 給 div 綁定一個(gè)顯示的動(dòng)畫// 接受三個(gè)參數(shù)// $('div').show('毫秒', '速度', '回調(diào)函數(shù)') $('div').hide(1000, 'linear', function () {

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

· toggle

// 給 div 綁定一個(gè)切換的動(dòng)畫$('div').hide() // 元素本身是顯示，那么就隱藏，本身是隱藏那么就顯示// 給 div 綁定一個(gè)顯示的動(dòng)畫// 接受三個(gè)參數(shù)// $('div').show('毫秒', '速度', '回調(diào)函數(shù)') $('div').toggle(1000, 'linear', function () {

 console.log('動(dòng)畫執(zhí)行完畢')}) 

· animate

// 定義一個(gè)自定義動(dòng)畫$('.show').click(function () {

 $('div').animate({

 width: 500,

 height: 300

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

 console.log('動(dòng)畫運(yùn)動(dòng)完畢')

    })})

· stop

// 立刻定制動(dòng)畫$('div').stop() // 就停止再當(dāng)前狀態(tài)

· finish

// 立刻結(jié)束動(dòng)畫$('div').finish() // 停止在動(dòng)畫結(jié)束狀態(tài)

關(guān)于如何理解JavaScript中的jQuery就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章名稱：如何理解JavaScript中的jQuery-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://weahome.cn/article/cssdcs.html