Jquery1
-
回顧 js_day2
-
阻止默認提交行爲 表單 οnsubmit=“return false” 超鏈 javascript:void(0)
-
事件對象event 獲取事件源target 橫縱座標clientx clienty
-
事件冒泡 內層事件擴散到外層 IE event.canceIBubble=true,Chrome exent.stopPropagation
-
DOM 文檔對象模型
-
將文檔看作一顆樹,樹上對應的節點對象就是頁面標籤對象
-
節點獲取 document.getElementById(“id的屬性值”)—>節點對象
-
節點修改 修改屬性 obj.屬性名="‘值’’ 內部元素innerTextinnerHTMl
-
節點創建 ducoment.createTextNode文本 標籤createElement()
-
節點刪除 父節點.removeChild(子節點)
-
-
BOM 瀏覽器對象模型
-
瀏覽器的一些組件看作是一個對象 window,document,location,history
-
方法
-
window3 提示
-
定時器
-
-
-
-
Jquery 引言
-
概念:是一個JavaScript的框架產品
-
解決javaScript存在的問題
-
編程複雜,語法複雜 獲取複雜
-
存在瀏覽器差異
-
-
-
搭建開發環境
- 在webroot下建js文件夾 引入文件
- jquery-1.8.3.js 學習時使用後 有註釋 有源碼
- jquery_1.8.3min.js 開發中用的文件小 用戶下載快
- 將jquery文件引入當前頁面
- script src = “js/jquery-1.8.3.js”
- 語法
- 獲取標籤文本內容
- $("#標籤").text();
- 注意
- 代碼的書寫要重新定義一個script標籤
- 代碼要放到引入的文件代碼之後
- js的和jquery的對象不是一個,方法和屬性不能混用,jquery對象中封裝js對象.
- 轉化
- js對象轉化jquery對象 $(js對象)
- 在webroot下建js文件夾 引入文件
-
Jquery中的選擇器(獲取標籤對象)
-
基本選擇器[常用必須掌握]
-
id選擇器 通過標籤的id屬性獲取標籤對象
語法:$("#id 屬性值");
-
類選擇器 通過標籤class屬性值獲取標籤對象
獲取對應的標籤對象 將其隱藏jqueryObj.css(“display”:none");
$(".class").css(“display”,“none”);
- 標籤選擇器 通過標籤的標籤名獲取標籤對象
語法:$(“標籤名”).css(“display”,“none”);
- 多路選擇器 通過多個選擇器的組合獲取標籤對象
語法:${選擇器1,選擇器2}
-
全選擇器
語法$(*);
-
-
層次選擇器
-
後代選擇器 獲取所有的子標籤
語法:$(選擇器+空格+選擇器)
示例:$(“ol+空格+li”).css(“display”,“none”);
-
直接子代選擇器 獲取父標籤的直接子標籤
語法:$(選擇器>選擇器);
示例:$(“ol>li”).css(“display”,“none”);
-
直接兄弟選擇器 獲取後續第一個兄弟標籤對象
語法:$(選擇器+選擇器)
-
所有兄弟選擇器 獲取後續所有兄弟標籤對象
語法:$(“選擇器~選擇器”)
注意:
- js中空白文本算一個子節點
- jquery空白文本不算節點
-
-
簡單過濾選擇器(在獲取到一組標籤對象之後再次進行篩選)
- : first 獲取一組標籤中的第一個標籤對象
語法:(“選擇器 : first”);
- : last 獲取一組標籤中的最後一個標籤對象
語法:(“選擇器 : last”);
- : eq(index) 獲取一組標籤中下標等於 index標籤對象
語法:(“選擇器 : eq(index)”);
- : gt(index)獲取一組標籤中下標大於 index標籤對象
語法:(“選擇器 : gt(index)”);
- : lt(index)獲取一組標籤中下標小於 index標籤對象
語法:(“選擇器 : lt(index)”);
- : even 獲取一組標籤中下標爲偶數的標籤對象
語法:(“選擇器 : even”);
- : odd 獲取一組標籤中下標爲奇數的標籤對象
語法:(“選擇器 : odd”);
- : not(選擇器) 獲取一組標籤中不包含某個選擇器的標籤對象
語法:(“選擇器 : not(選擇器)”);
-
內容過濾選擇器(從標籤中是否存在內容篩選標籤對象
- : empty 獲取內部爲空的標籤對象
- : parent 獲取內部有子標籤的標籤對象
- : contains(text)獲取包含指定文本的標籤對象
-
可見性過濾選擇器
-
hidden:獲取所有隱藏的標籤對象
語法:$(“標籤 : hidden”)
-
visible:獲取所有可見的標籤對象
語法:$(“標籤 : visible”)
-
-
屬性過濾選擇器(通過標籤對象的屬性篩選標籤對象)
-
獲取包含對應屬性名的標籤對象
語法:$("選擇器[屬性名])
-
獲取包含對應屬性名爲指定屬性值的標籤對象
語法:$("選擇器[屬性名=值])
-
獲取包含對應屬性名不是屬性值的標籤對象
語法:$("選擇器[屬性名!=值])
注意 : 屬性名!=值 沒有對應的屬性也算不等於
-
-
用於單選框和複選框相關的選擇器
-
:checked 獲取選中的單選框或複選框
示例:$(“input[type =checkbox] : checked”)
-
-
獲取下拉列表相關的選擇器
- :selected 獲取用戶選中的列表項
-
表單相關選擇器(便捷獲取表單元素使用)
- : text
- : file
- : image
- : button
- : hidden
- …
標籤的遍歷
-
for循環遍歷
- 遍歷過程中獲取的對象時 js原生DOM對象 需要轉換成jquery對象
-
Each遍歷
-
數組對象.each(function(){
//遍歷過程中的操作
當前元素$(this).text();
} );
-
注意: 獲取的對象時 js原生DOM對象 需要轉換成jquery對象
-
頁面結構的操作
-
頁面元素的創建
-
Js:document.createTextNode()
document.createElement()
-
jquery:$(“標籤”)
$("<標籤>文本</標籤>")
將對象放置到頁面中parentObj.append();
-
-
頁面元素的刪除
- 父標籤對象.empty(子標籤對象) 清空標籤內部的元素
- 父標籤對象.remove(子標籤對象) 刪除標籤本身連帶刪除子標籤
-
頁面元素的修改
-
input的value屬性的修改
獲取:$()obj.val() 獲取input框的value屬性值
修改:$()obj.val(“值”)
-
標籤文本的獲取和修改
$()obj.text()獲取文本信息
$()obj.text(“值”)修改文本信息
$()obj.html() 獲取內部標籤對象
$()obj.html(“值”) 修改內部標籤對象
-
標籤樣式的獲取和修改
$()obj.css(“屬性名”) 獲取屬性名對應的屬性值
$()obj.css(‘屬性名’’,“屬性值”) 修改對應屬性的屬性值
注意支持鏈式調用#()obj.css().css();
-
給標籤添加移除class屬性
$()obj.addClass() 添加Class屬性
$()obj.removerClass() 移除class屬性
-
操作標籤的屬性值獲取和修改
$()obj.attr(“屬性名”) 獲取標籤對應的屬性值
$()obj.attr(“屬性名”,“屬性值”) 修改標籤對象的屬性值
$()obj.prop(“屬性名”) 獲取標籤對應的屬性值
$()obj.prop(“屬性名”,“屬性值”) 修改標籤對象的屬性值
-
方法: 獲取當前標籤對象的父標籤對象 parent()
-
-