jQuery课程介绍、Query的介绍、Query初次体验、jQuery再次体验、jQuery中的顶级对象
生活随笔
收集整理的這篇文章主要介紹了
jQuery课程介绍、Query的介绍、Query初次体验、jQuery再次体验、jQuery中的顶级对象
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery課程介紹
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>/*** jQuery:* * 課程的安排:* * jquery的介紹,javascript庫的關系* 體驗jQuery** jQuery中的頂級對象,復習DOM中的頂級對象和頁面中的頂級對象** jQuery對象和DOM對象互轉的----常見的問題,熟練的使用** jQuery的選擇器----重點** 案例** 動畫的操作** jquery的元素創建及節點操作** jquery中的事件綁定** 插件的使用和制作jqueryUI** */</script> </head> <body></body> </html>jQuery的介紹
jquery官網:http://jquery.com/ <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>/*** jQuery:就是JavaScript庫的一種,免費的,所以咱們才學jQuery,很多優點** JavaScript把一些瀏覽器兼容性的代碼或者是常用的函數封裝在一個js文件中,這* 個文件就是一個JavaScript庫,common.js可以看成是一個js庫.** 封裝了很多js代碼的一個js文件,就是一個庫** 有的js庫封的代碼很少,小型的js庫* 有的js庫封裝的代碼很多,大型的js庫* 有的js庫是一個人編寫的,這樣的js庫可能是免費的* 有的js庫是一個團隊(公司)編寫,這樣的js庫可能是收費** 對象.on事件名字=匿名函數;** jQuery是JS庫的一種,* JS庫也叫JS函數庫* Prototype、YUI(網絡反響一般)、Dojo、ExtJS、jQuery等 都是JS庫** jQuery的優點:寫的少做的多,體積小,功能大,鏈式編程,隱式迭代.插件豐富,開源* 免費* */</script> </head> <body></body> </html>Query初次體驗
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div> <!-- 負責引入js文件的 --> <script src="jquery-1.12.1.js"></script> <script>// 點擊按鈕,設置div的寬和高,背景顏色// DOM方式實現// document.getElementById("btn").onclick = function(){// var dvObj = document.getElementById("dv");// dvObj.style.width = "200px";// dvObj.style.height = "100px";// dvObj.style.backgroundColor = "pink";// };// jQuery來實現,先引入jQuery的js文件// https://code.jquery.com/jquery/#jquery-all-1.x</script><script>// jQuery的js文件每個版本有兩個,第一個文件是正常的,第二個是壓縮的,開發的時候// 使用誰都可以,上線的時候使用壓縮的// 點擊按鈕,設置div的寬和高,及背景顏色$("#btn").click(function(){$("#dv").css({"width":"200px","height":"100px","backgroundColor":"yellow"});});// 引入jQuery的js文件</script></body> </html>jQuery再次體驗
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <input type="button" value="顯示效果" id="btn"> <p>第一個</p> <p>第二個</p> <p>第三個</p> <p>第四個</p> <p>第五個</p> <script src="jquery-1.12.1.js"></script> <script>// jQuery版本$("#btn").click(function(){$("p").text("我們都是p,我驕傲");}); </script> <script>// 點擊按鈕,改變所有的p中的內容// DOM版本的// 獲取按鈕,注冊點擊事件// document.getElementById("btn").onclick = function(){// var pObjs = document.getElementsByTagName("p");// for(var i=0;i<pObjs.length;i++){// pObjs[i].innerText = "我們都是p";// }// };// 獲取所有的p標簽</script></body> </html>jQuery中的頂級對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>/*** 瀏覽器中的頂級對象:window,瀏覽器和頁面中所有的東西都是window的* 頁面中的頂級對象:document,頁面中的某些東西是document* * jQuery中的頂級對象:jQuery----可以用$符號來代替,為了方便,jQuery(jQuery* 的js文件中的所有的東西都是jQuery或者都是$符號下的)** 如果想要使用jQuery中的屬性或者方法,那么需要jQuery,屬性或者jQuery.方法()* 來使用** 簡單的寫法:$.屬性,或者$.方法** 大多數情況下,jQuery中幾乎都是方法,屬性很少** jQuery中幾乎把DOM中的事件都封裝成一個方法,在jQuery中幾乎是把on去掉,然后* 變成方法** DOM中注冊事件* 例子:* document.getElementById("id屬性值").onclick = 匿名函數;* jQuery中注冊事件** 例子:* $("#id屬性值").click(匿名函數);* * */</script> </head> <body></body> </html>?
總結
以上是生活随笔為你收集整理的jQuery课程介绍、Query的介绍、Query初次体验、jQuery再次体验、jQuery中的顶级对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： activemq安全机制
- 下一篇： jQuery对象和DOM对象互转的问题、