java web 之JQuery選擇器

MVC設計模式
M(Model)數據模型
主要指JavaBean,用來封裝和處理業務數據。
V (view)視圖
主要指jsp,html,用來顯示數據
C(Controller) 控制器
主要指Servlet,用於業務邏輯的控制,比如頁面跳轉、數據庫的訪問等。

JQuery
JQuery是對JavaScript的封裝,用於簡化js代碼。
JQuery語法
$(選擇器).action()
$(document).ready();//當DOM節點加載後(不需要節點的內容(比如圖片,視頻等)加載完成)立即執行。
常用語法
css(“屬性”,“屬性值”); //設置元素的css屬性值
addClass(“類名”);//給元素增加類名
next();//該元素其後緊鄰的同輩元素
html();//獲取元素的html內容
JQuery選擇器:
標籤選擇器
直接使用html標籤名作爲選擇器 ("p")<p>使class("p") 表示選擇頁面中所有的<p>標籤 類選擇器 使用標籤的class屬性值作爲選擇器,(".btn") 表示選擇頁面中class值爲btn的元素
id選擇器
使用元素的id值作爲選擇器,$("#title") 表示選取頁面中id爲title的元素
並集選擇器
多個選擇器之間使用逗號隔開, $(".btn,#title") 表示選擇class爲btn的元素以及id爲title的元素
交集選擇器
標籤選擇器.類選擇器 $(“p.myp”) 表示選取

標籤中class爲myp的標籤
標籤選擇器#id選擇器 $(“p#title”) 表示選取

標籤中id爲title的標籤
全局選擇器
$("*") 表示選擇所有的元素
後代選擇器
使用空格隔開 $(“body div”) 表示body中的所有的標籤

作爲選擇器(包括子標籤或者後代標籤中的div)
子選擇器
使用>, $("#title>span") 表示id爲title元素的子標籤作爲選擇器
相鄰元素選擇器
使用+ $(“h2+p”) 表示緊鄰在h2元素之後的同輩p元素
同輩元素選擇器
使用~ $(“h2~p”) 表示h2之後的所有同輩的p元素

屬性選擇器
按照屬性名選擇元素
$("[ href]") 表示選擇所有具有href屬性的元素
按照屬性值來選擇元素
$("[href=’#’]") 表示選擇href屬性值爲“#”的所有元素
$("[href!=’#’]") 表示選擇href屬性值不等於“#”的所有元素
$("[href^=‘en’]") 表示選擇href屬性值以en開頭的元素
("[href("[href=’.jpg’ ]") 表示選擇href屬性值以.jpg結尾的元素
$("[href*=‘txt’] ")表示href屬性值中含有text的元素
滿足多個符合條件的屬性
$(“li[id][title=‘要點’]”) 表示選擇具有id屬性,並且title屬性值爲“要點”的li元素

過濾選擇器
使用:,表示在冒號前面的選擇器中篩選出符合冒號後特徵的元素
:first表示選擇第一個元素
:last 表示選擇最後一個元素
:even 表示選擇索引是偶數的元素(索引從0開始)
:odd 表示選擇索引是奇數的元素
:eq(index) 表示選擇索引值等於index 的元素
:gt(index)表示索引大於index的元素
:lt(index)表示索引小於index的元素
:not(selector)選擇不匹配selector選擇器的元素
:header 選擇標題元素
:focus 選擇當前獲取焦點的元素
:visable 選擇所有可見的元素
:hidden 選擇所有隱藏的元素

表單元素選擇器
:表單元素
比如 :input 選擇表單中所有的input標籤
:radio 選擇表單中的單選按鈕

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