Java Web(2)-jQuery上
1、jQuery初體驗
使用jQuery給一個按鈕綁定單擊事件javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var butObj = document.getElementById("butId");
// butObj.onclick = function () {
// alert("js 單機事件")
// }
// }
// 1. 表示頁面加載完成以後，相似於 window.onload = function () {
$(function () {
var $butObj = $("#butId"); // 2. 按照id查詢標籤對象
$butObj.click(function () { // 3. 綁定單擊事件
alert("jQuery 單擊事件")
});
});
</script>
</head>
<body>
<button id="butId"> hello </button>
</body>
</html>
注意：css
- 使用 jQuery 必定要引入 jQuery 庫
- jQuery 中的$究竟是什麼？ 答案： 它是一個函數
- 怎麼爲按鈕添加點擊響應函數的？
- 使用 jQuery 查詢到標籤對象
- 使用標籤對象.click(function(){});
2、jQuery 核心函數
$ 是 jQuery 的核心函數，能完成 jQuery 的不少功能。$()就是調用$這個函數html
- 傳入參數爲 [ 函數 ] 時：
- 表示頁面加載完成以後。至關於 window.onload=function(){}
- 傳入參數爲 [HTML 字符串 ] 時：
- 會對咱們建立這個 html 標籤對象
- 傳入參數爲 [ 選擇器字符串 ] 時：
- $(「#id 屬性值」); id 選擇器，根據 id 查詢標籤對象
- $(「標籤名」); 標籤名選擇器，根據指定的標籤名查詢標籤對象
- $(「.class 屬性值」); 類型選擇器，能夠根據 class 屬性查詢標籤對象
- 傳入參數爲 [DOM 對象 ] 時：
- 會把這個 dom 對象轉換爲 jQuery 對象
3、jQuery 對象和 dom 對象區分
1. 什麼是 jQuery 對象，什麼是 dom 對象
Dom對象java
- 經過 getElementById()查詢出來的標籤對象是 Dom 對象
- 經過 getElementsByName()查詢出來的標籤對象是 Dom 對象
- 經過 getElementsByTagName()查詢出來的標籤對象是 Dom 對象
- 經過 createElement() 方法建立的對象，是 Dom 對象
DOM 對象 Alert 出來的效果是：[object HTML 標 籤 名 Element]jquery
jQuery對象程序員
經過 JQuery 提供的 API 建立的對象，是 JQuery 對象數組
經過 JQuery 包裝的 Dom 對象，也是 JQuery 對象dom
經過 JQuery 提供的 API 查詢到的對象，是 JQuery 對象ide
jQuery 對象 Alert 出來的效果是：[objectObject]函數
2. jQuery 對象的本質是什麼？
jQuery 對象是 dom 對象的數組 +jQuery 提供的一系列功能函數
3. jQuery 對象和 Dom 對象使用區別
jQuery 對象不能使用 DOM 對象的屬性和方法
DOM 對象也不能使用 jQuery 對象的屬性和方法
4. Dom 對象和 jQuery 對象互轉
dom對象轉化爲 jQuery 對象
- 先有 DOM 對象
- $(DOM 對象 ) 就能夠轉換成爲 jQuery 對象
jQuery 對象轉爲 dom 對象
- 先有 jQuery 對象
- jQuery 對象[下標]取出相應的 DOM 對象
4、jQuery選擇器
1. 基本選擇器
-
ID 選擇器：根據 id 查找標籤對象
- .class 選擇器：根據 class 查找標籤對象
- element 選擇器：根據標籤名查找標籤對象
- * 選擇器：表示任意的，全部的元素
- selector1，selector2 組合選擇器：合併選擇器 1，選擇器 2 的結果並返回
p.myClass
表示標籤名必須是 p 標籤，並且 class 類型還要是 myClass
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.選擇 id 爲 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function () {
// css() 方法 能夠設置和獲取樣式
$("#one").css("background-color","#bbffaa");
});
//2.選擇 class 爲 mini 的全部元素
$("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
//3.選擇 元素名是 div 的全部元素
$("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
});
//4.選擇全部的元素
$("#btn4").click(function () {
$("*").css("background-color","#bbffaa");
});
//5.選擇全部的 span 元素和id爲two的元素
$("#btn5").click(function () {
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
<h1>基本選擇器</h1>
</div> -->
<input type="button" value="選擇 id 爲 one 的元素" id="btn1" />
<input type="button" value="選擇 class 爲 mini 的全部元素" id="btn2" />
<input type="button" value="選擇 元素名是 div 的全部元素" id="btn3" />
<input type="button" value="選擇 全部的元素" id="btn4" />
<input type="button" value="選擇 全部的 span 元素和id爲two的元素" id="btn5" />
<br>
<div class="one" id="one">
id 爲 one,class 爲 one 的div
<div class="mini">class爲mini</div>
</div>
<div class="one" id="two" title="test">
id爲two,class爲one,title爲test的div
<div class="mini" title="other">class爲mini,title爲other</div>
<div class="mini" title="test">class爲mini,title爲test</div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini" title="tesst">class爲mini,title爲tesst</div>
</div>
<div style="display:none;" class="none">style的display爲"none"的div</div>
<div class="hide">class爲"hide"的div</div>
<div>
包含input的type爲"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>
2. 層級選擇器
- ancestor descendant 後代選擇器 ：在給定的祖先元素下匹配全部的後代元素
- parent>child 子元素選擇器：在給定的父元素下匹配全部的子元素
- prev+next 相鄰元素選擇器：匹配全部緊接在 prev 元素後的 next 元素
- prev~sibings 以後的兄弟元素選擇器：匹配 prev 元素以後的全部 siblings 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.選擇 body 內的全部 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 內, 選擇div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.選擇 id 爲 one 的下一個 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.選擇 id 爲 two 的元素後面的全部 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="選擇 body 內的全部 div 元素" id="btn1" />
<input type="button" value="在 body 內, 選擇div子元素" id="btn2" />
<input type="button" value="選擇 id 爲 one 的下一個 div 元素" id="btn3" />
<input type="button" value="選擇 id 爲 two 的元素後面的全部 div 兄弟元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 爲 one,class 爲 one 的div
<div class="mini">class爲mini</div>
</div>
<div class="one" id="two" title="test">
id爲two,class爲one,title爲test的div
<div class="mini" title="other">class爲mini,title爲other</div>
<div class="mini" title="test">class爲mini,title爲test</div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini" title="tesst">class爲mini,title爲tesst</div>
</div>
<div style="display:none;" class="none">style的display爲"none"的div</div>
<div class="hide">class爲"hide"的div</div>
<div>
包含input的type爲"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>
3. 過濾選擇器
基本過濾器：
- :first 獲取第一個元素
- :last 獲取最後個元素
- :not(selector) 去除全部與給定選擇器匹配的元素
- :even 匹配全部索引值爲偶數的元素，從 0 開始計數
- :odd 匹配全部索引值爲奇數的元素，從 0 開始計數
- :eq(index) 匹配一個給定索引值的元素
- :gt(index) 匹配全部大於給定索引值的元素 ,$("li:gt(2)") //下標大於 2 的li
- :lt(index) 匹配全部小於給定索引值的元素
- :header 匹配如 h1,h2,h3 之類的標題元素 :
- animated 匹配全部正在執行動畫效果的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1.選擇第一個 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.選擇最後一個 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.選擇class不爲 one 的全部 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.選擇索引值爲偶數的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.選擇索引值爲奇數的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.選擇索引值爲大於 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.選擇索引值爲等於 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.選擇索引值爲小於 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.選擇全部的標題元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.選擇當前正在執行動畫的全部元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
//11.選擇沒有執行動畫的最後一個div
$("#btn11").click(function(){
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="選擇第一個 div 元素" id="btn1" />
<input type="button" value="選擇最後一個 div 元素" id="btn2" />
<input type="button" value="選擇class不爲 one 的全部 div 元素" id="btn3" />
<input type="button" value="選擇索引值爲偶數的 div 元素" id="btn4" />
<input type="button" value="選擇索引值爲奇數的 div 元素" id="btn5" />
<input type="button" value="選擇索引值爲大於 3 的 div 元素" id="btn6" />
<input type="button" value="選擇索引值爲等於 3 的 div 元素" id="btn7" />
<input type="button" value="選擇索引值爲小於 3 的 div 元素" id="btn8" />
<input type="button" value="選擇全部的標題元素" id="btn9" />
<input type="button" value="選擇當前正在執行動畫的全部元素" id="btn10" />
<input type="button" value="選擇沒有執行動畫的最後一個div" id="btn11" />
<h3>基本選擇器.</h3>
<br><br>
<div class="one" id="one">
id 爲 one,class 爲 one 的div
<div class="mini">class爲mini</div>
</div>
<div class="one" id="two" title="test">
id爲two,class爲one,title爲test的div
<div class="mini" title="other">class爲mini,title爲other</div>
<div class="mini" title="test">class爲mini,title爲test</div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini" title="tesst">class爲mini,title爲tesst</div>
</div>
<div style="display:none;" class="none">style的display爲"none"的div</div>
<div class="hide">class爲"hide"的div</div>
<div>
包含input的type爲"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在執行動畫的div元素.</div>
</body>
</html>
內容過濾器：
- :contains(text) 匹配包含給定文本的元素
- :empty 匹配全部不包含子元素或者文本的空元素
- :parent 匹配含有子元素或者文本的元素
- :has(selector) 匹配含有選擇器所匹配的元素的元素
屬性過濾器：
- [attribute] 匹配包含給定屬性的元素。
- [attribute=value] 匹配給定的屬性是某個特定值的元素
- [attribute!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素。
- [attribute^=value] 匹配給定的屬性是以某些值開始的元素
- [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
- [attribute*=value] 匹配給定的屬性是以包含某些值的元素
- [attrSel1][attrSel2][attrSelN] 複合屬性選擇器，須要同時知足多個條件時使用
表單過濾器:
- :input 匹配全部 input,textarea,select 和 button 元素
- :text 匹配全部 文本輸入框
- :password 匹配全部的密碼輸入框
- :radio 匹配全部的單選框
- :checkbox 匹配全部的複選框
- :submit 匹配全部提交按鈕
- :image 匹配全部 img 標籤
- :reset 匹配全部重置按鈕
- :button 匹配全部 inputtype=button<button>按鈕
- :file 匹配全部 inputtype=file 文件上傳
- :hidden 匹配全部不可見元素 display:none 或 inputtype=hidden
表單對象屬性過濾器：
- :enabled 匹配全部可用元素
- :disabled 匹配全部不可用元素
- :checked 匹配全部選中的單選，複選，和下拉列表中選中的 option 標籤對象
- :selected 匹配全部選中的 option
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.對錶單內 可用input 賦值操做
$("#btn1").click(function(){
// val()能夠操做表單項的value屬性值
// 它能夠設置和獲取
$(":text:enabled").val("我是萬能的程序員");
});
//2.對錶單內 不可用input 賦值操做
$("#btn2").click(function(){
$(":text:disabled").val("管你可用不可用，反正我是萬能的程序員");
});
//3.獲取多選框選中的個數 使用size()方法獲取選取到的元素集合的元素個數
$("#btn3").click(function(){
alert( $(":checkbox:checked").length );
});
//4.獲取多選框，每一個選中的value值
$("#btn4").click(function(){
// 獲取所有選中的複選框標籤對象
var $checkboies = $(":checkbox:checked");
// 老式遍歷
// for (var i = 0; i < $checkboies.length; i++){
// alert( $checkboies[i].value );
// }
// each方法是jQuery對象提供用來遍歷元素的方法
// 在遍歷的function函數中，有一個this對象，這個this對象，就是當前遍歷到的dom對象
$checkboies.each(function () {
alert( this.value );
});
});
//5.獲取下拉框選中的內容
$("#btn5").click(function(){
// 獲取選中的option標籤對象
var $options = $("select option:selected");
// 遍歷，獲取option標籤中的文本內容
$options.each(function () {
// 在each遍歷的function函數中，有一個this對象。這個this對象是當前正在遍歷到的dom對象
alert(this.innerHTML);
});
});
})
</script>
</head>
<body>
<h3>表單對象屬性過濾選擇器</h3>
<button id="btn1">對錶單內 可用input 賦值操做.</button>
<button id="btn2">對錶單內 不可用input 賦值操做.</button><br /><br />
<button id="btn3">獲取多選框選中的個數.</button>
<button id="btn4">獲取多選框選中的內容.</button><br /><br />
<button id="btn5">獲取下拉框選中的內容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
<br>
多選框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">遼寧</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>遼寧</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
5、jQuery 元素篩選
- eq() 獲取給定索引的元素 功能跟 :eq() 同樣
- first() 獲取第一個元素 功能跟 :first 同樣
- last() 獲取最後一個元素 功能跟 :last 同樣
- filter(exp) 留下匹配的元素
- is(exp) 判斷是否匹配給定的選擇器，只要有一個匹配就返回，true
- has(exp) 返回包含有匹配選擇器的元素的元素 功能跟 :has 同樣
- not(exp) 刪除匹配選擇器的元素 功能跟 :not 同樣
- children(exp) 返回匹配給定選擇器的子元素 功能跟 parent>child 同樣
- find(exp) 返回匹配給定選擇器的後代元素 功能跟 ancestordescendant 同樣
- next() 返回當前元素的下一個兄弟元素 功能跟 prev+next 功能同樣
- nextAll() 返回當前元素後面全部的兄弟元素 功能跟 prev~siblings 功能同樣
- nextUntil() 返回當前元素到指定匹配的元素爲止的後面元素
- parent() 返回父元素
- prev(exp) 返回當前元素的上一個兄弟元素
- prevAll() 返回當前元素前面全部的兄弟元素
- prevUnit(exp) 返回當前元素到指定匹配的元素爲止的前面元素
- siblings(exp) 返回全部兄弟元素
- add() 把 add 匹配的選擇器的元素添加到當前 jquery 對象中
相關文章
- 1. 當java遇上springboot（上）
- 2. java上路
- 3. Eclipse java上手
- 4. java上位機
- 5. Java上位機
- 6. 【Java Scanner類 上】
- 7. Java上傳視頻
- 8. Java IO上---File類
- 9. Java CountDownLatch解析（上）
- 10. java-圖片上傳
- 更多相關文章...
- • SQLite - Java - SQLite教程
- • PHP 文件上傳 - PHP教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Java 8 Stream 教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 當java遇上springboot（上）
- 2. java上路
- 3. Eclipse java上手
- 4. java上位機
- 5. Java上位機
- 6. 【Java Scanner類 上】
- 7. Java上傳視頻
- 8. Java IO上---File類
- 9. Java CountDownLatch解析（上）
- 10. java-圖片上傳