前端全套視頻HTML+CSS+JS+jQuery筆記(十)

4. jQuery

4.1 jQuery概念及特點

在這裏插入圖片描述

4.2 jQuery的封裝原理

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
function函數名仍然能夠被覆蓋
在這裏插入圖片描述

在這裏插入圖片描述
問題:只執行一次,且無法接收返回值
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
用全局區域的值去記錄局部變量的值
加粗樣式在這裏插入圖片描述
所以使用jQuery,$都能直接使用jQuery的內容

4.3 jQuery的選擇器

在這裏插入圖片描述
參考鏈接:jquery選擇器
在這裏插入圖片描述
返回只有一個元素的數組,val()方法是數組的;
value方法是html元素的
在這裏插入圖片描述
返回一個數組,看input框有幾個
在這裏插入圖片描述
加了[1],由一個數組轉爲了一個html元素,所以不能使用val(),要使用value
在這裏插入圖片描述
:first 仍是一個數組
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
不要表頭,td[屬性]

4.4 jQuery操作元素屬性

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

4.5 jQuery操作元素內容

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
可解析;相當於js的 innerHtml
在這裏插入圖片描述
相當於js的 innerText

4.6 jQuery操作元素樣式

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
使用json對象修改css屬性
在這裏插入圖片描述
注意這是追加屬性,不會覆蓋。
在這裏插入圖片描述
在這裏插入圖片描述

4.7 jQuery操作文檔結構

在這裏插入圖片描述
在這裏插入圖片描述
在後面追加文本內容
在這裏插入圖片描述
把u1內的內容放到div中
在這裏插入圖片描述
放到前面
在這裏插入圖片描述
外部插入,可以用來在每個驗證框後插入嗎?需要試驗
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

4.8 jQuery操作事件

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
注意:使用js方式是覆蓋;而使用jQuery是追加,也可以添加多個事件
在這裏插入圖片描述
把click整個事件解綁
在這裏插入圖片描述
一次性筷子事件
在這裏插入圖片描述
在這裏插入圖片描述
簡寫方式,都是頁面載入

4.9 jQuery動畫效果

在這裏插入圖片描述
toogle(毫秒)與當前狀態相反;hide-show
在這裏插入圖片描述
加全局標記判斷
菜單下拉與回收
在這裏插入圖片描述

第二種寫法:不在lable上加onclick事件,而是通過頁面載入,添加click事件
在這裏插入圖片描述
在這裏插入圖片描述
mouseover方式
在這裏插入圖片描述
在這裏插入圖片描述
先隱藏

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章