jquery的DOM與事件

php中世界最好的语言
發布: 2018-03-08 14:37:15
原創
1729 人瀏覽過

這次帶給大家jquery的DOM與事件,使用jquery的DOM與事件的注意事項有哪些,下面就是實戰案例,一起來看一下。

說說函式庫和框架的差別?
框架和類別庫最重要的區別是控制權的反轉。框架就像模具,它需要你把原料放在模具裡面,然後成品就出來了,由於模具已經造好,所以原料不能亂加,人家要什麼你就給什麼,控制權在模具。但是類別庫就不一樣了,控制權在你手中,想實現什麼功能就實現什麼功能,類別庫只是幫你封裝好了大量實用的函數,幫助你實現自己的目的,你要做的只是根據自己的需要合適地呼叫這些函數。

jquery 能做什麼?
操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此之外,jQuery提供API讓開發者編寫外掛程式。其模組化的使用方式使開發者可以很輕鬆的開發出功能強大的靜態或動態網頁。

jquery 物件和 DOM 原生物件有什麼差別?如何轉化?
區別:
1、jquery選擇器得到的jquery物件和標準的javascript中的document.getElementById()取得的dom物件是兩種不同的物件類型,兩者不等價; 
2、jQuery無法使用DOM物件的任何方法,同理DOM物件也不能使用jQuery裡的方法. 亂使用會報錯。
如何轉換:
jQuery物件轉換為DOM物件---兩種轉換方式:
1、jQuery物件是一個資料對象,透過[index]的方法
如:

var $v = $("#v") ;    //jQuery对象  
var v = $v[0]; //DOM对象 
登入後複製

 
2、jQuery本身提供,透過.get(index)方法
如:

var $v = $("#v"); //jQuery对象  
var v = $v.get(0); //DOM对象 
登入後複製

 
DOM物件轉為jQuery物件:  
#對於DOM物件,只要用$()把DOM物件包裝起來,就可得到jQuery物件
如:

var v=document.getElementById("v"); //DOM对象  
var $v=$(v); //jQuery对象
登入後複製

jquery中如何綁定事件? bind、unbind、delegate、live、on、off都有什麼作用?推薦使用哪一種?使用on綁定事件使用事件代理的寫入?
透過jquery提供的api進行事件綁定。
bind:為一個元素綁定一個事件處理程序。
unbind:從元素上刪除一個先前附加事件處理程序。
delegate:   將一個或多個事件處理器附加到符合元素的目前或未來的子元素。
live:   為目前或未來的配對元素新增一個或多個事件處理器
on:在選取的元素上綁定一個或多個事件處理函數。
off:移除一個事件處理函數。
推薦使用on,off。
on的用法:.on( events [, selector ] [, data ], handler(eventObject) )

jquery 如何顯示/隱藏元素?
使用show(),hide()來展示和隱藏元素。

jquery 動畫如何使用?
通常情況下使用.animate()來進行自訂動畫。

如何設定和取得元素內部 HTML 內容?如何設定和取得元素內部文字?
使用$('selector').html()取得HTML內容,$('selector').html(value)設定HTML內容使用
$('selector').text()取得元素內部文本,$('selector').text(value)設定文字內容

如何設定和取得表單使用者輸入或選擇的內容?如何設定和取得元素屬性?

$(‘selector’).val()获取表单内容
$(‘selector’).val(val)设置表单内容
$(‘selector’).attr(attributeName)获取元素属性
$(‘selector’).attr(attributeName,value)设置元素属性
$(‘selector’).removeAttr(attributeName)移除属性
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

怎麼讓瀏覽器變成編輯器

#簡單的冒泡以及雙向冒泡排序案列

以上是jquery的DOM與事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板