JQuery基本概念,語法,選擇器,事件

2021-08-06 07:36:20 字數 2362 閱讀 1769

基本概念

jquery是乙個js庫,能夠幫助我們輕鬆實現一些原本可能比較麻煩的功能。

jquery每個版本又有兩個小版本:壓縮版和未壓縮版,壓縮版檔案較小,但沒有排版和注釋,所以不便於閱讀;而未壓縮版檔案較大,有排版和注釋,便於閱讀。

jquery實際上就是乙個js檔案,載入到頁面就可以直接使用了。

src="../jquery-3.2.1.min.js">

script>

(選

擇器).

acti

on()

; 定義了這是乙個jquery的** 選擇器:按照一定的規則選擇dom元素,非常類似於css選擇器。 action:對選中元素執行的操作 方案一:使用js

第乙個段落p>

第二個段落p>

第三個段落p>

第四個段落p>

body>

var paras = document.getelementsbytagname("p");

for(var i in paras)

script>

方案二:

第乙個段落p>

第二個段落p>

第三個段落p>

第四個段落p>

body>

$("p").click(red);

function

red()

jquery的一行**

$(「p」).click(red);
相當於js的若干行**

var paras = document.getelementsbytagname("p");

for(var i in paras)

所以說jquery極大簡化了程式設計師的工作。

1.3選擇器

(1)元素選擇器

根據標籤名來獲取元素,比如 (「

p」):

表示獲取

所有的段

落(2)

id選擇

器 (「#p1」):表示選擇id=」p1」的元素

(3)class選擇器 (「

.top

2」):

表示選擇

所有cl

ass=

」top

2」的元

素(4)

後代選擇

器 (「div p」):表示選擇div裡面的段落

(5)屬性選擇器 (「

p[na

me]」

):表示

選中所有

具有na

me屬性

的段落 (「p[name=』second』]」):表示選中所有name=」second」的段落

(6)(「p

:fir

st」)

:表示選

擇p標籤

的第乙個

元素,相

當於cs

s中的偽

類選擇器

(「tr:even」):表示選中所有技術行的tr

1.4 事件

jquery中註冊事件的方法也是呼叫jquery物件的方法,

比如單擊事件

(「#div1」).click();  

滑鼠移入事件

(「#div1」).mouseenter();

而且方法名就是js中的事件名。

script>之前,我們所有的js**是放在之後的,如果放在之前呢?

實驗證明,如果放在body之前,在獲取元素時得到的結果為空,因為在執行此**時,文件還沒有載入完成,也就是說元素都還不存在。

那怎麼解決呢?

將**放在$(document).ready(function())中,也就是在文件載入完成之後才會去執行此**。

$(document).ready(function

());

});script>

id="div1">

div>

body>

jquery總結01 基本概念和選擇器

dom元素和jquery元素的區別 dom元素支援dom元素自帶的屬性和方法,jquery元素支援jquery元素自帶的屬性和方法 dom var div document.getelementbyid a jquery var div a dom轉jquery var a div jquery轉d...

選擇器的基本概念

1.選擇器 style標籤中定義的屬性具有選擇作用域的功能,因此我們把這種屬性稱為選擇器。2.選擇器的定義格式 選擇器名稱 選擇器的分類 分類 1.基礎選擇器 1.id選擇器 選擇具體的id屬性值的元素.建議在乙個html頁面中id值唯一 語法 id屬性值 2.元素選擇器 選擇具有相同標籤名稱的元素...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...