JQuery——第1課、基礎

1、JQuery簡介

一、jQuery 庫能夠經過一行簡單的標記被添加到網頁中。

二、在您開始學習 jQuery 以前，應該對如下知識有基本的瞭解：HTML、CSS、JavaScript。

三、什麼是JQuery？　　

　　jQuery是一個JavaScript函數庫，把咱們經常使用的一些功能進行了封裝，方便咱們來調用，提升咱們的開發效率，極大地簡化了 JavaScript 編程。

　　jQuery是一個輕量級的"寫的少，作的多"的JavaScript庫。

　　jQuery庫包含如下功能：

　　　　♦  HTML 元素選取

　　　　♦  HTML 元素操做

　　　　♦  CSS 操做

　　　　♦  HTML 事件函數

　　　　♦  JavaScript 特效和動畫

　　　　♦  HTML DOM 遍歷和修改

　　　　♦  AJAX

　　　　♦  Utilities

四、爲何要使用JQuery？　

　　目前網絡上有大量開源的 JS 框架, 可是 jQuery 是目前最流行的 JS 框架，並且提供了大量的擴展。而且不少大公司都在使用 jQuery，

2、JQuery  安裝

一、下載JQuery

進入官網：http://jquery.com/ 或者直接百度JQuery也是能夠找到JQuery官網的，

下載好之後 

二、應用JQuery

（1）、 進入Eclipse，建立一個項目（testJQuery）

（2）、右鍵WebContent創建一個js文件，而後建下載好的Jquery放在裏面

（3）、右鍵WebContent創建一個.jsp文件（test1.jsp）

（4）、引入JQuery

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

 src裏的爲所下載的JQuery文件地址

編寫個簡單的示例：JQuery中的Hello World 簡單程序

3、JQuery的語法 

一、jQuery 語法是經過選取 HTML 元素，並對選取的元素執行某些操做。

基礎語法： $(selector).action()

• $ 美圓符號定義 jQuery
• 選擇符（selector）"查詢"和"查找" HTML 元素
• jQuery 的 action() 執行對元素的操做

二、$()工廠函數

使用了jQuery的頁面，在寫js代碼時，通常都是以$(function(){...});形式開頭的。至關於$(document).ready(function(){...});  也就是一個函數變量的意思

返回的是一個jQuery對象,括號裏面的叫表達式

　

　

三、JQuery的基本選擇器

jQuery 選擇器容許您對 HTML 元素組或單個元素進行操做。

jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此以外，它還有一些自定義的選擇器。

jQuery 中全部選擇器都以美圓符號開頭：$()。

（1）、經過id獲取元素

jQuery #id 選擇器經過 HTML 元素的 id 屬性選取指定的元素，相似DOM的getElementById(id)方法來獲取元素。

頁面中元素的 id 應該是惟一的，因此您要在頁面中選取惟一的元素須要經過 #id 選擇器。

語法：$("#id")  

（2）、經過類名獲取元素

jQuery 類選擇器能夠經過指定的 class 查找元素。

語法：$(".className") 

（3）、經過標籤名獲取元素

經過指定的標籤名查找元素，指定須要操做的標籤名便可操控全部的標籤

語法：$("tagName")  

相似DOM的getElementsByTagName，經過標籤名得到多個標籤，CSS也常常這樣使用的

　　

　　

(4)、一次性獲取多個元素

能夠一次獲取徹底不相關的以標籤名，或者以id和類名爲標識的元素，這些標識之間用逗號分隔，最後會將這些獲取的元素封裝在一個包裝集中返回

語法：$("selector1,selector2,select3 ……")

4、常見的JQuery對象函數

一、text()

text() 方法方法設置或返回被選元素的文本內容。

當該方法用於返回一個值時，它會返回全部匹配元素的組合的文本內容

語法：$(selector).text() 

咱們也可使用text()設置所選取的div裏面的文本內容

二、html()

html() 方法返回或設置被選元素的內容 (inner HTML)。

若是該方法未設置參數，則返回被選元素的當前內容。

當使用該方法返回一個值時，它會返回第一個匹配元素的內容。

 語法：語法：$(selector).html() 

 

使用html()設置所選取的div裏面的內容

沒點擊前

點擊後

三、 val()

val() 方法返回或設置被選元素的值。

元素的值是經過 value 屬性設置的。該方法大多用於 input 元素。

若是該方法未設置參數，則返回被選元素的當前值。

返回第一個匹配元素的 value 屬性的值。

語法：$(selector).val(value)

使用val()設置所選取的input框裏面的value值

四、css()

css() 方法設置或返回被選元素的一個或多個樣式屬性。

（1）、’如需返回指定的 CSS 屬性的值，語法：css("propertyname")

 

 

 （2）、如需設置指定的CSS屬性，語法：css("propertyname","value")

 

 

（3）、如需設置多個 CSS 屬性，語法：css({"propertyname1":"value1","propertyname2":"value2",……});

 

五、attr()

attr() 方法設置或返回被選元素的屬性值。

根據該方法不一樣的參數，其工做方式也有所差別

返回被選元素的屬性值。

語法：$(selector).attr(attribute)

使用attr()設置被選元素的屬性值