快捷導(dǎo)航

jQuery學(xué)習(xí)筆記之基礎(chǔ)中的基礎(chǔ)

更新時(shí)間：2015年01月19日 10:22:13 投稿：hebedich

本文是jQuery學(xué)習(xí)筆記系列文章的第一篇，跟大多數(shù)開篇文章一樣，我們來講解下jQuery最基礎(chǔ)的東西，希望大家能夠喜歡。

1.jQuery的簡(jiǎn)介

就像上節(jié)所將到的Ajax框架一樣，簡(jiǎn)單的說，jQuery是一個(gè)優(yōu)秀的javascript框架，它能夠讓用戶方便的處理html,events(冒泡)事件，動(dòng)畫效果，ajax交互等，它極大程度的改變了開發(fā)者使用javascript的習(xí)慣。jQuery自2006年最初創(chuàng)建，已經(jīng)吸引了眾多的javascript高手加入其團(tuán)隊(duì)，隨著事件推移，jQuery新版本一個(gè)一個(gè)發(fā)布，它越來越受到關(guān)注。

如今，jQuery發(fā)展到集各種javascript/css/dom和ajax功能于一體的強(qiáng)大框架?？梢院?jiǎn)單的用代碼實(shí)現(xiàn)各種網(wǎng)頁(yè)效果

目前jQuery主要提供以下功能：

1.訪問頁(yè)面框架的局部，這是DOM模型主要的功能之一，DOM有獲取頁(yè)面某個(gè)節(jié)點(diǎn)或者某一類節(jié)點(diǎn)有固定的方法，而jQuery大大簡(jiǎn)化其操作步奏。

2.修改頁(yè)面的表現(xiàn)。css的主要功能就是通過樣式風(fēng)格來修改頁(yè)面的表現(xiàn)，jquery也很好的解決了眾多瀏覽器對(duì)css3的支持程度，使得各個(gè)瀏覽器都能很好的使用css3標(biāo)準(zhǔn)，極大的豐富了css的運(yùn)用。

3.修改頁(yè)面的內(nèi)容。通過強(qiáng)大的api，jquery可以方便的修改頁(yè)面內(nèi)容，包括文本的內(nèi)容，插入新圖片，表單的選項(xiàng)，甚至整個(gè)頁(yè)面框架。

4.響應(yīng)事件。jquery可以方便的處理事件，而且開發(fā)人員不再需要討厭瀏覽器的兼容問題。

5.為頁(yè)面添加動(dòng)畫。使用javascript添加動(dòng)畫需要大量的代碼，而jquery大大簡(jiǎn)化了此過程，并且提供了大量可以自定義參數(shù)的動(dòng)畫效果。

6.與服務(wù)器交互。jquery提供一整套ajax的相關(guān)操作，大大方便了異步交互的開發(fā)和使用。

7.簡(jiǎn)化常用的javascript操作。jquery提供了很多附加功能來簡(jiǎn)化常用的javascript操作，例如數(shù)組的操作，迭代運(yùn)算等。

2.jquery的優(yōu)勢(shì)。

以表格隔行變色來具體說明jquery的優(yōu)勢(shì)

i.javascript和jquery實(shí)現(xiàn)的隔行變色

復(fù)制代碼代碼如下:

}
</script>

利用jquery實(shí)現(xiàn)

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function(){

                $("table#mytable tr:nth-child(odd)").addClass("altcss");

            })

        </script>

表格區(qū)域代碼

復(fù)制代碼代碼如下:

<table width="800" cellspacing="0" border="1" id="mytable">

            <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

        </table>