jQuery(內涵: jquery選擇器)
jQuery就是把我們js常用的方法寫到一個框架庫里面.
這個是jQuery的官網,大家有時間看一下.
jquery.com
一、jquery的下載
二、加載jquery文件
然后刷新一下。
好,那么學習jquery能達到理解其編程的思想,做到能使用jquery進行常見網頁效果開發是我們目前學習的目標。
參考書目就是:《鋒利的jQuery》(高清掃描版-有書簽)
jQuery在線API:http://api.jquery.com
什么是JavaScript框架庫?
普通JavaScript的缺點:每種控件的操作方式不統一,不同瀏覽器下有區別,要編寫跨瀏覽器的程序非常麻煩。因此出現了很多對JavaScript的封裝庫。
常見的JavaScript框架庫
Prototype【‘prəutə.taip 】、YUI、Dojo【’dodʒo ,豆粥】、ExtJS、jQuery等,這些庫對JavaScript進行了封裝,簡化了開發。這些庫是對JavaScript的封裝,內部都是用JavaScript實現的。(聯想SQLHelper)
三、新建ASP網站
四、ASP網站為我們加載的內容
jQuery:
jQuery就是JavaScript語法寫的一些函數類,內部仍然是調用JavaScript實現的,所以並不是代替JavaScript的。使用jQuery的代碼、編寫jQuery的擴展插件等仍然需要JavaScript的技術,jQuery本身就是一堆JavaScript函數。
jQuery是最火的JavaScript庫,已經被集成到VS2010了,得到了MS的支持,MS的Ajax toolkit和jQuery結合也是最方便,jQuery的擴展插件也是非常多。
jQuery的特點?Write Less,Do More
很好的解決了不同瀏覽器的兼容問題(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
問題:一般出現問題的時候想想是不是css兼容性的問題。
對於不同控件具有統一的操作方式。
體積小(幾十KB)、使用簡單方便(Write Less Do More)
鏈式編程$("#div1").draggble().show().hide().fly() 、隱式迭代
、插件豐富、開源、免費。
讓編寫JavaScript程序更簡單、更強大!
很多功能沒有腫麼辦?到網上搜非常的多。個人寫的插件非常的多。
如果是vs2008版本,沒有智能提示,需要安裝sp1布丁。
VisualStudio 2008SP1下載地址:
http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61
再安裝 VS90SP1-KB958502-x86下載地址:
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
第三步再把
jquery-1.4.1-vsdoc.js【vs2008下,智能提示需要的文件】
所以推薦大家用vs2010
下面介紹下:jQuery中的頂級對象$
五、引進來
六、頂級對象的另外一種寫法
接下來我們寫段小代碼:
七、提示
我先不着急寫jQuery代碼,我們先看這樣一個問題。
八、兩個小問題
九、$(document)介紹
十、jq的准備ready事件
十一、window.onload與$(document).ready()的區別
十二、推薦寫法
想用jq寫window.onload怎么寫?
十三、在jq里面調window.load
下面我們看下jquery中的$.map和$.each
十四、jquery中的$.map
十五、map方法的作用
看下map方法內部怎么返回這個函數?
十六、F12看下map內部怎么實現的?
十七、看jq源代碼
當我們想用js寫點東西,但不會寫,可以看看jq中的方法是怎么實現的。這是一種很好的自學方法。
十八、未寫數組長度的情況
接下來我們看兩個例題.
十九、兩道map例題
二十、以前遍歷的方法
二十一、調試each
二十二、each遍歷鍵值對
下面看下用each遍歷普通數組是什么樣的值:
三十三、用each遍歷普通數組
大家想一想這為什么使用return false 跳出循環呢?建議設個斷點調試一下。
三十四、調試,明白為什么return false
接下來我們看下:jQuery中的trim()
三十五、$.trim
三十六、內部調用了正則
接下來我們看看,jquery對象和Dom對象的轉換。
三十七、把dom對象轉換為jquery對象
把dom對象轉換為jquery對象演示
下面看下新的需求
三十八、把jquery對象再轉換為dom對象的兩種方式
再來說說jquery中的一些個方法:
.text()方法相當於innerText或textContent
.val("ddd") 沒有參數表示獲取,有參數表示設置值
.html("")/html()相當於innerHTML
簡單說一下,待會我們用到哪個再詳細說下。
Array(數組)對象有沒有對應的jQuery對象?
數組本身就不是Dom對象。不存在與jQuery對象之間的轉換。使用jQuery語句可以直接使用數組,就像$.each()或$.map();
補充:通過document.getElementsByTagName()或者document.getElementsByName()獲取的返回值是一個類似於數組的值,但不是數組,沒有數組特有的方法,比如reverse()等,類似於C#中的string可以看成是一個char數組,但是其實不是,string是對char數組的封裝。
parseInt()\Array這些是不需要轉換的。
下面我們重點說下jquery選擇器:
三十九、三種選擇器介紹
三種選擇器的演示
接下來我們看兩個案例:
案例1:設置某個div中顯示的內容,通過Id選擇器
案例2:為某個按鈕注冊單擊事件,單擊的時候設置頁面上所有的p標簽中顯示文字為“川川是狗狗”。//隱式迭代
四十、兩道練習題的代碼
兩道練習題的演示
四十一、設置css樣式
四十二、鏈式編程
傳進去的值主要是看js怎么進行判斷。
下面介紹下標簽+類選擇器
四十三、標簽加類選擇器
標簽加類選擇器演示
接下來說說多條件選擇器:
四十四、多條件選擇器
接下來說說層次選擇器:
又分四種:
四十五:層次選擇器四種代碼
注意:選擇器表達式中的空格不能多不能少。易錯!過濾器與表單選擇器時注意。
next(); //當前元素之后的緊鄰着的第一個兄弟元素(下一個)
nextAll();//當前元素之后的所有兄弟元素
prev();//當前元素之前的緊鄰着的兄弟元素(上一個)
prevAll();//當前元素之前的所有兄弟元素
siblings();//當前元素的所有兄弟元素
接下來我們看兩個案例:
四十六、案例1
案例1演示
四十七、案例2-評分控件代碼
案例2-評分控件演示
下面,請大家判斷下頁面上的元素是否存在
四十八、報錯的第一種情況
四十九、錯誤的第二種情況
五十、包裝集
接下來再說下怎樣通過jq來操作類樣式css
五十一、通過jq來操作類樣式css
接下來我們做個一點就“關燈”的功能。
五十二、“關燈”代碼
開關燈及通過jq來操作類樣式css演示
作者近期文章列表:
C#基礎教程(完全免費,獻給代碼愛好者的最好禮物。注:本作者分享自己精心整理的C#基礎教程,無任何商業目的。 希望與更多的代碼愛好者交流心得,也請高手多多指點!!!) |
|
三層 | 三層(一) |
三層相關案例(及常見的錯誤) | |
三層實例(內涵Sql CRUD) | |
SQL數據庫 ADO.net | 數據庫的應用圖解一 |
數據庫的應用詳解二 | |
ADO.NET(內涵效率問題) | |
面向過程,面向對象中高級 | 面向過程,面向對象的深入理解一 |
面向過程,面向對象的深入理解二 | |
面向對象的深入理解三 | |
winform基礎 | Winform基礎 |
winform中常用的控件 | |
面向過程 | 三種循環的比較 |
C#中的方法(上) | |
我們常見的數組 | |
面向對象 | 思想的轉變 |
C#中超級好用的類 | |
C#中析構函數和命名空間的妙用 | |
C#中超級好用的字符串 | |
C#中如何快速處理字符串 | |
值類型和引用類型及其它 | |
ArrayList和HashTable妙用一 | |
ArrayList和HashTable妙用二 | |
文件管理File類 | |
多態 | |
C#中其它一些問題的小節 | |
GDI+ | 這些年我收集的GDI+代碼 |
這些年我收集的GDI+代碼2 | |
HTML概述以及CSS | 你不能忽視的HTML語言 |
你不能忽視的HTML語言2精編篇 | |
你不能忽視的HTML語言3 | |
CSS基本相關內容--中秋特別奉獻 | |
CSS基本相關內容2 | |
JavaScript基礎 | JavaScript基礎一 |