jQuery基本用法

2021-09-22 21:35:36 字數 2144 閱讀 2257

​ jquery就是乙個工具,它對獲取物件和操作物件進行了封裝,提供了非常簡單的解決方案。

jquery物件和js原生物件的區別:

​ jquery可以使用jquery封裝的各種便利的方法。

$(js原生物件)

​ jquery物件.get(0)

​ jquery物件[0]

獲取物件:

​ 利用css的選擇器獲取物件:

​ 基本選擇器:

​ #id

​ .class

​ 標籤名

​ 選擇器1, 選擇器2,…

​ 後代選擇器:

​ 層級選擇器: 祖先選擇器 後代選擇器

​ 直接後代選擇器: 父選擇器 > 子選擇器

​ 兄弟選擇器: 兄元素選擇器 + 弟元素選擇器

​ 所有弟弟們選擇器: 兄元素選擇器 ~ 弟元素選擇器

​ 過濾選擇器:

​ 基本的過濾選擇器:

​ 奇偶選擇器: :odd :even

​ 比較選擇器: gt(索引) lt(索引) eq(索引)

操作物件:

​ val(): 獲取或設定表單元素的value的值

​ text(): 獲取開始標籤和結束標籤之間的文字內容

​ html(): 獲取開始標籤和結束標籤之間的html內容

​ css(): 獲取或設定元素的樣式屬性, 只設定乙個屬性 css(「屬性名」, 「屬性值」) 設定多個屬性css()

​ hide(): 將元素隱藏

​ show(): 將元素顯示

$的應用的場景:

​ 1、在頁面載入完成時(所有的標籤元素載入完成)執行**

​ $(function())

​ 和onload事件的區別,頁面載入完成時(頁面所有的元素都載入完成,包括和css還有js),執行的時間點比jquery的時間點要晚。

​ onload事件只能繫結一次,jquery的入口函式可以有很多個

​ 2、將原生的js物件轉換為jquery物件

​ $(js原生物件)

​ 注意:function () this關鍵字是乙個原生js物件,要使用jquery的方法,必須將this使用$()包裹轉換為jquery物件。

​ $(this)

​ 3、使用選擇器獲取頁面上對應的元素的jquery物件

​ $(「選擇器」)

​ 注意:$(「選擇器」)中如果有多個元素物件的話,會有隱式遍歷的特性

​ 4、可以把html字串轉換為jquery物件

​ $(「html字串」)

​ $("")

獲取元素:

​ $(選擇器)

​ children(選擇器)

​ find(選擇器)

對元素進行操作:

​ 繫結事件:

​ click()

​ mouseover()

​ mouseout()

​ 對樣式的操作:

​ css()

​ addclass()

​ removeclass()

​ toggleclass()

​ hasclass()

​ 關於動畫的操作:

​ hide()

​ show()

$("#dv").css(「backgroundcolor」, 「red」)

$("#dv").css(「fontfamily」, 「宋體」);

鏈式程式設計:

​ 就是在函式功能性**之後,把原呼叫函式的物件作為返回值繼續返回。

function student(name, age){

​ this.name = name;

​ this.age = age;

​ this.sayhi = function(){

​ console.log("hi, " + this.name);

​ return this;

​ this.sayhello = function(){

​ console.log("hello, " + this.name);

var stu = new student(「zs」, 18);

stu.sayhi().sayhi();

stu.sayhello().sayhi();

$(「ul」).find(「li」)

jquery基本用法

原文出處 函式描述 selector hide 隱藏被選元素 selector show 顯示被選元素 selector toggle 切換 在隱藏與顯示之間 被選元素 selector slidedown 向下滑動 顯示 被選元素 selector slideup 向上滑動 隱藏 被選元素 sel...

JQuery基本用法總結

1.css選擇器 documnet css 選擇整個文件物件 myid 選擇id myid的元素 div myclass 選擇class為myclass的div元素 2.jquery特有的表示式 a first 選擇網頁中的第乙個a元素 tr odd 選擇 的奇數行 div visible 選擇可見...

jquery基本用法一

1.學習例項 一 1 顯示,隱藏和改變msg內容 hello,word 2 另一種方式如下 二 動態建立元素 1.通過dom建立動態元素 function createelement 2.通過jquery動態建立元素 innerhtml 3.第三種方式 jquery內部使用document.crea...