jQuery

• 昨天講了 jQuery 的基本選擇器篩選器和屬性操作

• 今天來說一些 jQuery 別的東西

元素操作

• 創建一個元素

var div = $(')

• 內部插入元素

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

hello

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

hello

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

• 外部插入元素

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

• 替換元素

// 把 div 元素替換成 p 元素$('div').replaceWith($('))// 用 p 元素替換掉 div 元素$(').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學習筆記(三十)-- 設計模式?? JavaScript學習筆記(二十八)-- Promise? ?JavaScript學習筆記(二十六)-- cookie?? JavaScript學習筆記(二十五)-- HTTP???JavaScript學習筆記(二十一)-- 構造函數?苦逼的日子，有你真好看見這個分享了嗎，點它

總結

以上是生活随笔為你收集整理的jquery设置宽_JavaScript学习笔记（三十二） jQuery（中）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。