1.下載並導入JQuery
點擊此處下載
導入:
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>2.JQuery核心函數的使用
<head>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
jQuery(function() { // 用法一:頁面加載時執行
// 結論1:js對象 不能調用jquery的屬性和方法
// 結論2:jquery對象不能調用js的屬性和方法
// 用法二:可以使用表達式獲取頁面的標籤對象
jQuery("#myDiv").click(function() {
alert('你點擊了myDiv');
})
// 方法三:js與jquery的相互轉換
// js對象轉成jquery對象:jQuery(js對象)
// jquery對象轉成js對象:jQuery對象[0]或jQuery對象.get(0)
jQuery(document.getElementById("myDiv")).click(function() {
alert("js對象轉成jquery對象");
});
jQuery("#myDiv")[0].onclick = function() {
alert("query對象轉成js對象");
}
jQuery("#myDiv").get(0).onclick = function() {
alert("query對象轉成js對象");
}
// 方法四:將合法字符串轉成jQuery對象
var $h1 = jQuery("<h1>hello jQuery</h1>");
jQuery("body").append($h1)
});
</script>
</head>
<body>
<div id="myDiv" style="background: gray; width: 100px; height: 100px;">這是div1......</div>
</body>
</html>
3.JQuery選擇器的使用
3.1 常用的4個函數 each,size,index的使用
// 1．通過each() 在每個div元素前 加入 “Div標籤”
$("div").each(function() {
//alert($(this).html()); // 遍歷所有的內容
// alert(this.innerHTML); // 遍歷所有的內容
// alert($("div").html()); // 只顯示第一個
// 設置和獲取標籤內的數據
// $(this).html("Div標籤" + $(this).html());
this.innerHTML = "Div標籤" + this.innerHTML;
});
/*
length是屬性，size()是方法。
如果你只是想獲取元素的個數，兩者效果一樣， $("img").length 和 $("img").size() 獲取的值是一樣的；
但是如果是獲取字符串的長度就只得用length, 如 $("#text").val().length。*/
// 2．通過size() / length 打印頁面中 class屬性爲 itcast 的元素數量
console.info("size():" + $(".itcast").size())
console.info("length:" + $(".itcast").length)
// 3．通過index() 打印 id屬性爲foo 的div標籤 是頁面內的第幾個div標籤
// 對象.index(對象)
var _index = $('div').index($("#foo"));
console.info(_index)
--------------------------------------------------------------------------------------
<body>
<div>DIVAAAA</div>
<div class="itcast">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="itcast">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="itcast">PBBBB</p>
<p>PCCCC</p>
</body>3.2 層級選擇器
/**
空格: 選取 當前元素的所有後代元素
>: 選取 當前元素的所有子元素
+: 選取 當前元素的下一個兄弟元素
~: 選取 當前元素的所有兄弟元素
*/
$(function() {
// 1．將class屬性值爲itcast的元素下所有a元素字體變爲紅色
$(".itcast a").css("color", "red");
// 2．將class屬性值爲itcast的元素下直接a元素字體變爲藍色
$(".itcast>a").css("color", "blue");
// 3．將div元素後所有兄弟a元素，字體變爲黃色，大小變爲30px
$(".itcast~a").css("color", "yellow")
});
--------------------------------------------------------------------------------------
<body>
<div class="itcast">
<a>div link</a>
<p>
info
<a>p link</a>
</p>
</div>
<a>link</a>
<p class="itcast">
<a>p link</a>
</p>
<a>link</a>
</body>3.3 基本過濾選擇器
/*2.3.基本過濾選擇器
:first 選取第一個元素 $("tr:first")
:last 選取最後一個元素 $("tr:last")
:not(selector) 去除所有與給定選擇器匹配的元素 $("input:not(:checked)")
:even 選取所有元素中偶數索引的元素，從 0 開始計數 $("tr:even")
:odd 選取所有元素中奇數索引的元素 ，從 0 開始計數 $("tr:odd")
:eq(index) 選取指定索引的元素 $("tr:eq(1)")
:gt(index) 選取索引大於指定index的元素 $("tr:gt(0)")
:lt(index) 選取索引小於指定index的元素 $("tr:lt(2)")
:header 選取所有的標題元素 如：h1, h2, h3 $(":header")
:animated 匹配所有正在執行動畫效果的元素
*/
// 1．設置表格第一行，顯示爲紅色
$("table tr:first").css("background", "red")
// 2．設置表格除第一行以外 顯示爲藍色
// $("table tr:not(:first)").css("background", "blue")
$("table tr:gt(0)").css("background", "blue")
// 3．設置表格奇數行背景色 黃色
$("table tr:gt(0):even").css("background", "yellow")
// 4．設置表格偶數行背景色 綠色
$("table tr:gt(0):odd").css("background", "green")
// 5．設置頁面中所有標題 顯示爲灰色
$(":header").css("color", "gray")
// 6．設置頁面中正在執行動畫效果div背景黃色，不執行動畫div背景綠色
$("div").click(function() {
$(this).slideUp(); // 向上滑動
// 執行動畫效果的
$("div:animated").css("background", "yellow")
// 不執行的
$("div:not(:animated)").css("background", "green")
});
--------------------------------------------------------------------------------------
<h1>表格信息</h1>
<h2>這是一張商品表</h2>
<table border="1" width="600">
<tr>
<th>商品編號</th>
<th>商品名稱</th>
<th>售價</th>
<th>數量</th>
</tr>
<tr>
<td>001</td>
<td>冰箱</td>
<td>3000</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>洗衣機</td>
<td>2000</td>
<td>50</td>
</tr>
<tr>
<td>003</td>
<td>熱水器</td>
<td>1500</td>
<td>20</td>
</tr>
<tr>
<td>004</td>
<td>手機</td>
<td>2188</td>
<td>200</td>
</tr>
</table>
<div>slideDown(speed, [callback]) 概述
通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回調函數。
這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery
1.3中，上下的padding和margin也會有動畫，效果更流暢。 參數
speedString,Number三種預定速度之一的字符串("slow", "normal", or
"fast")或表示動畫時長的毫秒數值(如：1000) callback (可選)FunctionFunction在動畫完成時執行的函數</div>
<div>fadeOut(speed, [callback]) 概述
通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。 參數
speedString,Number三種預定速度之一的字符串("slow", "normal", or
"fast")或表示動畫時長的毫秒數值(如：1000) callback (可選)Function在動畫完成時執行的函數</div>
</body>
3.4 內容過濾器選擇器
/*2.4.內容過濾器選擇器
:contains(text) 選取包含text文本內容的元素 $("div:contains('John')")
:empty 選取不包含子元素或者文本節點的空元素 $("td:empty") <td></td>
:has(selector) 選取含有選擇器所匹配的元素的元素
$("div:has(p)").addClass("test");
:parent 選取含有子元素或文本節點的元素 $("td:parent")
*/
// 1．設置含有文本內容 ”傳智播客” 的 div 的字體顏色爲紅色
$("div:contains('傳智播客')").css("color", "red");
// 2．設置沒有子元素的div元素 文本內容 '這是一個空DIV'
$("div:empty").text("這是一個空的DIV");
// 3．設置包含p元素 的 div 背景色爲黃色
$("div:has(p)").css("background", "yellow");
// 4．設置所有span的子元素的字體爲藍色
$("span:parent").css("color", "blue");
--------------------------------------------------------------------------------------
<body>
<div>今天是個晴天</div>
<div>明天要去傳智播客學 java</div>
<div>
<span>JavaScript</span> 是網頁開發中腳本技術
</div>
<div>Ajax 是異步的 JavaScript和 XML</div>
<div>
<p>jQuery</p>
是 JavaScript一個 輕量級框架
</div>
<div></div>
<div>明天要去傳智播客學 java</div>
<span>
span文本節點
<span>span子元素</span>
<div>div元素</div>
</span>
</body>3.5 可見性過濾選擇器
/*
:hidden 選取所有不可見的元素
:visible 選取所有可見的元素
addClass(class|fn):爲每個匹配的元素添加指定的類名。
*/
// 1．爲表單中所有隱藏域 添加 class屬性，值爲itcast(瀏覽器f12可查看驗證)
$("form :hidden").addClass("itcast");
// $("form :hidden").attr("class", "itcast");
// 2．設置table所有 可見 tr 背景色 黃色
$("table tr:visible").css("background", "yellow");
// 3．設置table所有 隱藏tr 字體顏色爲紅色，顯示出來 ，並輸出tr中文本值
var $hidden_tr = $("table tr:hidden");
$hidden_tr.css("color", "red").show();
alert($hidden_tr.html())
--------------------------------------------------------------------------------------
<body>4444
2222
洗衣機
熱水器
<h1>隱藏頁面的標籤</h1>
<!--
visibility:hidden 可以實現隱藏效果, 但是佔用體積
display:none 可以實現隱藏效果, 不佔體積
-->
<!--<span style="visibility: hidden">3333</span>4444<br/>
<span style="display: none">1111</span>2222<br/> -->
<form>
<input type="hidden" value="aaa" />
<input type="text" value="bbb" style="display: none;" />
<input type="text" name="ccc" value="name" />
</form>
<table>
<tr>
<td>洗衣機</td>
</tr>
<tr>
<td>熱水器</td>
</tr>
<tr style="display: none">
<td>電冰箱</td>
</tr>
</table>
</body>3.6 屬性過濾器選擇器
/*2.6. 屬性過濾器選擇器
[attribute] 選取擁有此屬性的元素 $("div[id]")
[attribute=value] 選取指定屬性值爲value的所有元素: $("div[id='mydiv']")
[attribute != value] 選取屬性值不爲value的所有元素
[attribute ^= value] 選取屬性值以value開始的所有元素
[attribute $= value] 選取屬性值以value結束的所有元素
[attribute *= value] 選取屬性值包含value的所有元素
[selector1] [selector2]…[selectorN] 複合性選擇器，首先經[selector1]選擇返回集合A，集合A再經過[selector2]選擇返回集合B，集合B再經過[selectorN]選擇返回結果集合*/
// 1.設置所有含有id屬性的div，字體顏色紅色
$("div[id]").css("color", "red");
// 2.設置所有class屬性值 含有itcast元素背景色爲黃色
$("[class *= 'itcast']").css("background", "yellow")
// 3.對所有既有id又有class屬性div元素，添加一個點擊事件，打印div標籤中內容
$("div[id][class]").click(function() {
console.info($(this).html());
});
// 4 獲取屬性name="hobby"的input標籤, 打印value屬性值
$("input[name='hobby']").each(function() { // 遍歷
console.info($(this).val());
});
// 5.設置所有id屬性的值以my開頭的文本，字體顏色藍色
$("[id ^= 'my']").css("color", "blue")
--------------------------------------------------------------------------------------
<body>
<div>AAAA</div>
<div id="mydiv" class="itcast1">BBBB</div>
<div class="itcast2">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="itcast3">FFFF</div>
<p class="p-itcast">PPPPPP</p>
<input type="checkbox" name="hobby" value="高爾夫"/> 高爾夫
<input type="checkbox" name="hobby" value="蹦極"/> 蹦極
<input type="checkbox" name="hobby" value="足球"/> 足球
</body>3.7 子元素過濾器選擇器
$(function() {
/*2.7.子元素過濾器選擇器
:nth-child(index/even/odd) 選取索引爲index的元素、索引爲偶數的元素、索引爲奇數的元素 ----- index 從1開始 區別 eq
':eq(index)' 只匹配一個元素，而這個將爲每一個父元素匹配子元素
:first-child 此選擇符將爲每個父元素匹配第一個子元素
:last-child 此選擇符將爲每個父元素匹配最後一個子元素
:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配
*/
// 1.在每個表格 下3的倍數行，字體顏色爲紅色
$("table tr:nth-child(3n)").css("background", "red");
// 2.每個表格 奇數行 背景色 黃色
$("table tr:nth-child(odd)").css("background", "yellow");
// 3.每個表格 偶數行 背景色 灰色
$("table tr:nth-child(even)").css("background", "gray");
// 4.每個tr 只有一個td的 背景爲 藍色
$("table tr td:only-child").css("background", "blue");
});
--------------------------------------------------------------------------------------
<body>
<table border="1" width="400" id="mytable">
<tr>
<td>1</td>
<td>冰箱</td>
</tr>
<tr>
<td>2</td>
<td>洗衣機</td>
</tr>
<tr>
<td>3</td>
<td>熱水器</td>
</tr>
<tr>
<td>4</td>
<td>電飯鍋</td>
</tr>
<tr>
<td>5</td>
<td>電磁爐</td>
</tr>
<tr>
<td>6</td>
<td>豆漿機</td>
</tr>
<tr>
<td>7</td>
<td>微波爐</td>
</tr>
<tr>
<td>8</td>
<td>電視</td>
</tr>
<tr>
<td>9</td>
<td>空調</td>
</tr>
<tr>
<td>10</td>
<td>收音機</td>
</tr>
<tr>
<td>11</td>
<td>排油煙機</td>
</tr>
<tr>
<td>12</td>
<td>加溼器</td>
</tr>
<tr>
<td>13 電暖氣</td>
</tr>
</table>
</body>3.8 表單過濾器選擇器
/*2.8.表單過濾器選擇器
選取表單元素的過濾選擇器
:input 選取所有<input>、<textarea>、<select >和<button>元素
:text 選取所有的文本框元素 <input type="text">
:password 選取所有的密碼框元素 <input type="password">
:radio 選取所有的單選框元素 <input type="radio">
:checkbox 選取所有的多選框元素 <input type="checkbox">
:submit 選取所有的提交按鈕元素 <input type="submit">
:image 選取所有的圖像按鈕元素
:reset 選取所有重置按鈕元素
:button 選取所有按鈕元素 <input type="button"> <button>
:file 選取所有文件上傳域元素 <input type="file">
:hidden 選取所有不可見元素 <input type="hidden">
:checkbox 等價於 input[type='checkbox']
*/
//1．對所有text框和password框，添加離焦事件，校驗輸入內容不能爲空
/*$("input[type='text'], input[type='password']").blur(function() {
if($(this).val() == ""){
alert("內容不能爲空!");
}
});*/
$(":text, :password").blur(function() {
if($(this).val() == ""){
alert("內容不能爲空!");
}
});
//2．對button 添加 點擊事件，提交form表單
$(":button").click(function() {
$("form").submit();
});
--------------------------------------------------------------------------------------
<body>
<form action="http://ntlias-stu.boxuegu.com/#/login">
用戶名 <input type="text" name="username" /> <br/>
密碼 <input type="password" name="password" /> <br/>
<input type="button" value="提交" />
</form>
</body>3.9 表單對象屬性過濾器選擇器
/*2.9.表單對象屬性過濾器選擇器
:enabled 選取所有可用元素
:disabled 選取所有不可用元素
:checked 選取所有被選中的元素，如單選框、複選框 (經常使用)
:selected 選取所有被選中項元素，如下拉列表框、列表框 (經常使用)
*/
//需求1: 觀察只讀(readonly)和不可用(disable)標籤的聯繫和區別
// 聯繫: 只能看,不能修改
// 區別:
// 只讀雖然不能修改,但是可以隨表單一起提交
// 不可用不僅不能修改, 還不能表單一起提交
//需求2: 點擊button 打印radio checkbox select 中選中項的值
$(":button").click(function() {
/*$(":checked").each(function() { // 輸出單選框,複選框,下拉框
console.info($(this).val());
});
$(":selected").each(function() {
console.info($(this).val());
});*/
// 單選
console.info($("input[name='gender']:checked").val());
// 複選
$("input[name='hobby']:checked").each(function(){
console.info($(this).val());
});
// 下拉
console.info("city1" + $("select[name='city']").val());
console.info("city2" + $("select[name='city'] option:selected").val());
});
--------------------------------------------------------------------------------------
<body>
<form>
用戶名(只讀): <input type="text" readonly="readonly" name="username" value="zhangsan"/> <br/>
密碼(不可用): <input type="text" disabled="disabled" name="123" value="123"/> <br/>
性別
<input type="radio" value="男" name="gender"/>男
<input type="radio" value="女" name="gender"/>女 <br/>
愛好
<input type="checkbox" value="體育" name="hobby"/> 體育
<input type="checkbox" value="讀書" name="hobby" /> 讀書
<input type="checkbox" value="音樂" name="hobby" /> 音樂
<input type="checkbox" value="繪畫" name="hobby" /> 繪畫 <br/>
城市
<select name="city">
<option value="">請選擇</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</select> <br/>
<input type="button" value="打印" />
</form>
</body>4JQuery中的DOM對象
4.1 標籤的屬性操作
/*3.1.標籤的屬性操作
attr(name|pro|key,val|fn) :獲取/設置屬性
removeAttr(name) :移除屬性
prop(n|p|k,v|f)1.6+ :獲取/設置屬性
removeProp(name)1.6+ :移除屬性
attr 和 prop 都可以設置 標籤的屬性, 兩者之間的區別:
1 attr既可以設置標籤存在的屬性, 也可以設置標籤不存在的屬性, 而prop只能設置標籤已存在的屬性
2 prop比較適合 設置 單選、多選、下拉的選中狀態
*/
//1設置標籤存在的屬性
$("#btn1").click(function() {
$("a").attr("href", "http://ntlias-stu.boxuegu.com/#/login");
});
//2設置標籤不存在的屬性
$("#btn2").click(function() {
$("a").attr("itcast", "黑馬程序員");
});
//3通過attr獲取選中狀態
$("#btn3").click(function() {
console.info($("input[name='sex'], input[value='男']").attr("checked"));
$("input[name='sex']").each(function(){
console.info($(this).val() + $(this).attr("checked"));
});
});
//4通過prop獲取選中狀態
$("#btn4").click(function() {
// console.info($("input[name='sex'], input[value='男']").prop("checked"));
$("input[name='sex']").each(function(){
console.info($(this).val() + $(this).prop("checked"));
});
--------------------------------------------------------------------------------------
<body>
<a>百度</a> <br/>
<input type="button" id="btn1" value="設置標籤存在的屬性"/> <br/>
<input type="button" id="btn2" value="設置標籤不存在的屬性"/> <br/>
<hr/>
<input type="radio" name="sex" value="女"/>女
<input type="radio" name="sex" value="男" checked="checked"/>男 <br/>
<input type="button" id="btn3" value="通過attr獲取選中狀態"/> <br/>
<input type="button" id="btn4" value="通過prop獲取選中狀態"/>
</body>4.2 標籤的樣式操作
/*3.2.標籤的樣式操作
通過attr屬性設置/獲取 style屬性
attr("style","color:red");
設置CSS樣式屬性
css(name) 獲取一個CSS樣式屬性
css(name, value) 設置一個CSS樣式屬性
css(properties) 傳遞key-value對象，設置多個CSS樣式屬性
設置class屬性
addClass(class) 添加一個class屬性 attr(‘class’,’classValue’)
removeClass([class]) 移除一個class屬性
toggleClass(class) 如果存在（不存在）就刪除（添加）一個類
*/
// 需求: 背景變黃
$("#btn1").click(function() {
// 方式一:
//$("div").attr("style", "background: yellow;");
// 方式二:
//$("div").css("background", "yellow");
// 方式三:
$("div").addClass("changeBackYellow");
});
// 需求: 字體變藍
// 方式三:
$("#btn2").click(function() {
$("div").addClass("changeFontBlue");
});
// 需求: 背景變綠並且字體變紅
// 方式二 擴展
var _css = {background: 'green', color: 'red'};
$("#btn3").click(function() {
$("div").css(_css);
});
<style type="text/css">
.changeBackYellow {
background : yellow;
}
.changeFontBlue {
color : blue;
}
</style>
--------------------------------------------------------------------------------------
</head>
<body>
<div>心情不錯！</div>
<input type="button" value="背景變黃" id="btn1"/>
<input type="button" value="字體變藍" id="btn2"/>
<input type="button" value="背景變綠並且字體變紅" id="btn3"/>
</body>
</html>4.3 獲取標籤中的內容
<script type="text/javascript">
$(function(){
/*
讀取和設置某個元素中HTML內容
html() 獲取一個元素中html內容
html(val) 設置一個元素中html內容
這個函數不能用於XML文檔。但可以用於XHTML文檔
讀取和設置某個元素中的文本內容
text() 獲取一個元素中 文本內容
text(val) 設置一個元素中 文本內容
該方法既可以用於 XHTML 也可以用於 XML 文檔
文本框、下拉列表框、單選框 選中的元素值
val() 獲取文本框、下拉列表框、單選框 value值
val(val) 設置文本框、下拉列表框、單選框 value值
*/
// text()只輸出標籤內的文本內容，和js的innerText方法一樣
// html()當前標籤內的文本內容及 子標籤本身和子標籤內的文本
// val() 只針對標籤的value屬性的
// 1．<div><p>傳智播客</p></div> 獲取div中 html和text 對比
//console.info($("div").html());
//console.info($("div").text());
//$("div").html("<a href='http://ntlias-stu.boxuegu.com/#/login'>博學谷<a>");
//$("div").text("<a href='http://ntlias-stu.boxuegu.com/#/login'>博學谷<a>")
// 2．單擊pickBtn 使用val() 獲得文本框、下拉框、單選框選中的value
$("#pickBtn").click(function() {
// 文本框
console.info($("input[name='username']").val());
// 下拉框
console.info($("select").val());
// 單選框
console.info($("input[type=radio]:checked").val());
});
// 3．單擊setBtn 測試能否通過 val() 設置單選框、下拉框的選中效果 ？
$("#setBtn").click(function() {
// 下拉框
$("select").val("上海");
// 單選框
$("input[name='gender']").val(["女"]);
});
});
</script>
</head>
<body>
<div><p>傳智播客</p></div>
<form>
用戶名 <input type="text" name="username" /> <br/>
城市 <select>
<option value="">請選擇</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select><br/>
愛好 <input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="乒乓球" />乒乓球
<input type="checkbox" name="hobby" value="排球" />排球 <br/>
性別 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女 <br/>
<input type="button" value="取值" id="pickBtn" />
<input type="button" value="設值" id="setBtn" />
</form>
</body>
</html>4.4 添加節點
<script type="text/javascript">
$(function(){
/*3.4.添加節點
js操作
document.createElement(元素名稱); // 創建節點 <a></a>
element.setAttribute(name, value) ; // 設置元素屬性值 <a href=”#”></a>
element.innerHTML= 文本內容; // 瀏覽器不兼容 <a href=”#”>xxxx</a>
父節點.appendChild(elements); // 添加節點元素
jQuery操作
使用工廠函數 jQuery(html, [ownerDocument]) --- jQuery可以寫爲$
例如： $(“<div>你好，jQuery</div>”);
內部插入
$node.append($newNode)向每個匹配的元素內部的結尾處追加結尾處
$newNode.appendTo($node)將新元素追加到每個匹配元素內部的結尾處
$node.prepend($newNode) 向每個匹配的元素內部的結尾處追加開始處
$newNode.prependTo($node)將新元素追加到每個匹配元素內部的開始處
外部插入
$node.after($newNode) 向每個匹配的元素的之後插入內容，是並列兄弟
$newNode.insertAfter($node) 將新元素插入到每個匹配元素之後
$node.before($newNode) 向每個匹配的元素的之前插入內容
$newNode.insertBefore($node) 將新元素插入到每個匹配元素之前
*/
// 1.js操作
/*// 需求: 添加百度超鏈接顯示在瀏覽器中
// 獲取父節點
var e_body = document.getElementsByTagName("body")[0];
// 創建標籤
var e_a = document.createElement("a");
// 向標籤添加屬性
//e_a.setAttribute("href", "http://ntlias-stu.boxuegu.com/#/login");
// 向標籤添加內容
//e_a.innerText = "博學谷";
// 向標籤添加屬性/內容
e_a.innerHTML = "<a href='http://ntlias-stu.boxuegu.com/#/login'>博學谷</a>";
// 向父節點添加節點
e_body.appendChild(e_a);*/
//2.jQuery操作
var $a = $("<a href='http://ntlias-stu.boxuegu.com/#/login'>博學谷</a>");
$("body").append($a)
});
</script>4.5 插入節點
<script type="text/javascript">
$(function(){
/*
jQuery操作
使用工廠函數 jQuery(html, [ownerDocument]) --- jQuery可以寫爲$
例如： $(“<div>你好，jQuery</div>”);
內部插入
$node.append($newNode)向每個匹配的元素內部的結尾處追加結尾處
$newNode.appendTo($node)將新元素追加到每個匹配元素內部的結尾處
$node.prepend($newNode) 向每個匹配的元素內部的結尾處追加開始處
$newNode.prependTo($node)將新元素追加到每個匹配元素內部的開始處
外部插入
$node.after($newNode) 向每個匹配的元素的之後插入內容，是並列兄弟
$newNode.insertAfter($node) 將新元素插入到每個匹配元素之後
$node.before($newNode) 向每個匹配的元素的之前插入內容
$newNode.insertBefore($node) 將新元素插入到每個匹配元素之前
*/
// 插入大專學歷 （本科和高中之間）--- 外部插入
// var $dazhuan = $("<option value='大專'>大專</option>");
// $("option[value='本科']").after($dazhuan);
$("option[value='本科']").after($("<option value='大專'>大專</option>"));
// 插入幼兒園 （學歷列表最後） --- 內部插入
$("#edu").append($("<option value='幼兒園'>幼兒園</option>"))
});
</script>
</head>
<body>
<!-- 選擇學歷 -->
<select id="edu" name="edu">
<option value="">請選擇</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
<option value="中轉">初中</option>
<option value="小學">小學</option>
</select>
</body>
4.6 刪除節點###
<script type="text/javascript">
$(function(){
$("#inner").click(function(){
alert("敢點我...");
});
/*
js刪除節點
必須通過父節點刪除當前節點
當前節點對象.parentNode.removeChild(當前節點對象);
empty():清空文本數據
格式: $(表達式).remove() 刪除指定節點
雖然可以返回被刪除的節點對象的引用, 但是 事件丟失了.
格式2: $(表達式).detach() 刪除指定節點
不僅可以保留被刪除節點對象引用, 還可以 對象的事件.
*/
// 1 使用remove刪除標籤, 再將刪除標籤 重新加入body 查看事件是否存在
/*var $inner = $("#inner").remove();
$("body").append($inner);*/
// 2 使用detach刪除標籤, 再將刪除標籤 重新加入body 查看事件是否存在
var $inner = $("#inner").detach();
$("body").append($inner);
// 3 清空id='inner'的標籤內容
// $("#inner").empty();
});
</script>
</head>
<body>
<div id="outer" style="background:blue;width:300px;height:300px;">
<div id="inner" style="background:red;width:150px;height:150px;">你們的真的太棒了!!!</div>
</div>
</body>4.7 替換###
<title>Insert title here</title>
<style type="text/css">
div {
padding : 10px;
background-color : blue;
}
p {
background-color : red;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
/*
js操作
替換節點： 父節點.replaceChild(新節點, 原節點) ; 缺點: 會產生移動效果
複製節點： 節點.cloneNode(true/false) 要不要複製節點子節點 （默認false）
JQuery 替換節點
新節點.replaceAll(原節點) ;
原節點.replaceWith(新節點) ;
JQuery克隆節點
clone(參數一, 參數二) 參數一控制當前元素事件，參數二控制子元素的事件
*/
// 需求1:當點擊btn1時,將外面的p標籤 替換 裏面的p標籤
$("#btn1").click(function() {
// 舊換新 -- 剪切
$("#mydiv_p").replaceWith($("#myp"));
});
// 需求2:當點擊btn2時,將外面的p標籤 替換且克隆 裏面的p標籤
$("#btn2").click(function() {
// 克隆並舊換新 --- 先克隆,再剪切
$("#mydiv_p").replaceWith($("#myp").clone());
});
});
</script>
</head>
<body>
<div id="mydiv">
<p id="mydiv_p">AAAA</p>
</div>
<p id="myp">BBBB<a href="#">CCCC</a></p>
<input type="button" id="btn1" value="替換"/>
<input type="button" id="btn2" value="替換並克隆"/>
</body>
5 JQuery案例
5.1 全選/全不選
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function () {
// 全選
$("#checkall").click(function () {
// $("[name='items']").prop("checked", "checked");
$("[name='items']").prop("checked", true);
});
// 全部選
$("#checkallNo").click(function () {
// $("[name='items']").removeProp("checked");
$("[name='items']").prop("checked", false);
});
// 反選
$("#check_revsern").click(function () {
$("[name='items']").each(function () {
// $(this).prop("checked", !$(this).prop("checked"));
this.checked = !this.checked;
});
});
// 全選/全部選
$("#checkAllOrNot").click(function () {
$("[name='items']").prop("checked", this.checked);
});
});
</script>
</head>
<body>
您的愛好很廣泛!!!
<br>
<input type="checkbox" id="checkAllOrNot"/>全選/全不選<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全選"/>
<input type="button" name="checkall" id="checkallNo" value="全不選"/>
<input type="button" name="checkall" id="check_revsern" value="反選"/>
</body>5.2 表格隔行變色和選中後高亮
效果圖:
<style type="text/css">
table {
border: 1px red solid;
width: 500px;
margin: auto;
}
td {
border: 1px blue solid;
margin: 10px;
padding: 10px;
text-align: center;
}
th {
background-color: maroon;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.over {
background-color: aqua;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 1. 奇數行 one
$("table tr:odd").addClass("one");
// 2. 偶數行 two
$("table tr:even").addClass("two");
/*
// 3. 給每個tr綁定鼠標懸浮事件, 增加over樣式
$("table tr").mouseover(function(){
$(this).addClass("over");
});
// 4. 給每個tr綁定鼠標移出事件, 刪除over樣式
$("table tr").mouseout(function(){
$(this).removeClass("over");
});
*/
// 5 切換 懸浮和移出效果綁定到一起 (over, out)
$("table tr").hover(function () {
$(this).addClass("over");
}, function () {
$(this).removeClass("over");
})
});
</script>
</head>
<body>
<table>
<tr>
<th>分類ID</th>
<th>分類名稱</th>
<th>分類描述</th>
<th>操作</th>
</tr>
<tr class="one">
<td>1</td>
<td>手機數碼</td>
<td>手機數碼類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr class="two">
<td>2</td>
<td>電腦辦公</td>
<td>電腦辦公類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>5</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>6</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>7</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>8</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>9</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>10</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
</table>
</body>
5.3 元素移動
效果圖:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<!-- BODY {
font-family: "宋體";
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: no;
overflow-y: no;
background-color: #B8D3F4;
}
td {
font_size: 12px;
}
.default_input {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.default_input2 {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.nowrite_input {
border: 1px solid #849EB5;
height: 18px;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.default_list {
font-size: 12px;
border: 1px solid #849EB5;
}
.default_textarea {
font-size: 12px;
border: 1px solid #849EB5;
}
.nowrite_textarea {
border: 1px solid #849EB5;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color: #fff;
}
.wordtd_2 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd {
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2 {
text-align: center;
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg {
font-size: 12px;
}
.tb {
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2 {
line-height: 22px;
text-align: center;
background-color: #F6F6F6;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
}
.td4 {
background-color: #F6F6F6;
line-height: 20px;
}
.td5 {
border: #000000 solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
}
.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: "宋體";
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color: transparent;
text-align: left
}
-->
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 選中右移
$("#add").click(function() {
$("#second").append($("#first option:selected"));
});
// 全部右移
$("#add_all").click(function() {
$("#second").append($("#first option"));
});
// 選中左移
$("#remove").click(function() {
$("#first").append($("#second option:selected"));
});
// 全部左移
$("#remove_all").click(function() {
$("#first").append($("#second option"));
});
});
</script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:250px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同時選擇多個 size="10" 確定下拉選的長度-->
<select id="first" name="first" size="10" multiple="multiple" class="td3" >
<option value="選項1">選項1</option>
<option value="選項2">選項2</option>
<option value="選項3">選項3</option>
<option value="選項4">選項4</option>
<option value="選項5">選項5</option>
<option value="選項6">選項6</option>
<option value="選項7">選項7</option>
<option value="選項8">選項8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select id="second" name="second" size="10" multiple="multiple" class="td3" >
<option value="選項9">選項9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>6 JQuery操作Json字符串
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
/*
JSON對象格式
{"key":"value","key":"value",....}
鍵和值使用冒號分隔。
標準規範要求key必須使用雙引號，value如果沒有使用雙引號表示變量。
JSON數組
[ obj , obj , obj , ....]
表示一組值，多個值使用逗號分隔
*/
// 需求1: 遍歷數組
var arr = [111, 333, 555];
/*// 方式一
for(var i=0; i<arr.length; i++) {
document.write(arr[i] + " ");
}
document.write("<hr/>");
// 方式二
for(var i in arr ) {
document.write(arr[i] + " ");
}*/
document.write("<hr/>");
// 方式三
$(arr).each(function(){
document.write(this + " ");
});
document.write("<hr/>");
//需求2: 獲取簡單json的值
var studentJson = {"username":"張三", "age":"18"};
/*document.write(studentJson.username + " ===== "+ studentJson.age);
document.write("<hr/>");
document.write(studentJson['username'] + " ===== "+ studentJson['age']);
document.write("<hr/>");*/
for(var key in studentJson) {
document.write(key +"------"+ studentJson[key] + "<br/>");
}
document.write("<hr/>");
//需求3: 獲取複雜json的值
var studentJsonArr = [
{"username":"張三", "age":"18"},
{"username":"李四", "age":"30"},
{"username":"王五", "age":"40"},
{"username":"趙六", "age":"50"}
];
$(studentJsonArr).each(function(){
//var studentJson = this;
//document.write(studentJson.username + "===" + studentJson.age + "<br/>");
document.write(this.username + "===" + this.age + "<br/>");
})
</script>
</head>
<body>
</body>
</html>6.1省市2級聯動
效果圖:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市二級聯動</title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="cities.js"></script>
<script type="text/javascript">
$(function () {
// 初始化省級信息
var provinceStr = "<option value='none'>--請選擇省--</option>";
$(china).each(function () {
provinceStr += "<option value='" + this.p_id + "'>" + this.p_name + "</option>";
});
// 添加標籤
$("#province").html(provinceStr)
$("#province").change(function () {
var province_val = this.value;
$(china).each(function () { // 遍歷省
if (this.p_id == province_val) { // 顯示市
var city_str = "<option value=\"none\">--請選擇市--</option>";
// 遍歷市的信息
$(this.cities).each(function () { // 拼接二級聯動
city_str += "<option value=\"" + this.c_id + "\">" + this.c_name + "</option>";
});
$("#city").html(city_str)
}
});
});
});
</script>
</head>
<body>
<select id="province" name="province">
<option value="none">--請選擇省--</option>
</select>
<select id="city" name="city">
<option value="none">--請選擇市--</option>
</select>
</body>
</html>// cities.js
var china = [
{
"p_name": "吉林省",
"p_id": "jl",
"cities": [
{
"c_name": "長春",
"c_id": "cc"
},
{
"c_name": "四平",
"c_id": "sp"
},
{
"c_name": "通化",
"c_id": "th"
},
{
"c_name": "松原",
"c_id": "sy"
}
]
},
{
"p_name": "遼寧省",
"p_id": "ln",
"cities": [
{
"c_name": "瀋陽",
"c_id": "sy"
},
{
"c_name": "大連",
"c_id": "dl"
},
{
"c_name": "撫順",
"c_id": "fs"
},
{
"c_name": "鐵嶺",
"c_id": "tl"
}
]
},
{
"p_name": "山東省",
"p_id": "sd",
"cities": [
{
"c_name": "濟南",
"c_id": "jn"
},
{
"c_name": "青島",
"c_id": "qd"
},
{
"c_name": "威海",
"c_id": "wh"
},
{
"c_name": "煙臺",
"c_id": "yt"
}
]
},
{
"p_name": "上海市",
"p_id": "sh",
"cities": [
{
"c_name": "閔行區",
"c_id": "mh"
},
{
"c_name": "徐彙區",
"c_id": "xh"
},
{
"c_name": "黃浦區",
"c_id": "hp"
},
{
"c_name": "浦東新區",
"c_id": "pd"
}
]
}
];