jQuery(內涵: jquery選擇器)


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基礎一


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM