JQuery課堂學習筆記

時間 2019-11-20

標籤 jquery 課堂學習筆記欄目 JQuery 简体版

原文原文鏈接

第1課 JQuery技術簡介

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> javascript

<% css

String path = request.getContextPath(); html

String basePath = request.getScheme() + "://" java

+ request.getServerName() + ":" + request.getServerPort() node

+ path + "/"; jquery

%> 編程

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> json

<html> 數組

<head> 瀏覽器

<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>

<script type="text/javascript">

$(function() {

//alert("Jquery testing……………………")

$("#btn").click(function() {

alert($("#un").val());

$("div").click(function() {

$(this).hide("");

});

</script>

</head>

<body>

<input type="text" id="un" />

<input type="button" id="btn" value="show" />

<div>1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一12112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一12112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一箇中國人1212112我是一12112我是一箇中國人1212112我是一箇中國人1212112我是一</div>

</body>

</html>

第2課 JQuery之Ready

//這裏面是一個匿名函數

$(document).ready(function (){

alert("網頁加載完畢");

});

//方法二

$(document).ready(myready);

function myready(){

alert("文件加載完畢");

}

<script type="text/javascript">

$(function() {

//alert("Jquery testing……………………")

$("#btn").click(function() {

alert($("#un").val());

$("div").click(function() {

$(this).hide("");

});

//這裏面是一個匿名函數

//在全部的Dom元素加載完成後，就會顯示特效

$(document).ready(function() {

alert("網頁加載完畢");

});

//方法二

//能夠實現頁面較高的響應速度

$(document).ready(myready);

function myready() {

//alert("文件加載完畢");

}

//js直接來

window.onload = function() {

alert("onload111");

};

//會自動把前面的響應事件覆蓋掉

//只有等網頁都加載完畢了纔會出現特效

window.onload = function() {

alert("onload222");

};

//把window也加載成爲JQuery對象

$(window).load(function() {

alert("window onload have ready!");

});

//加載方式三，$()其實就是一個函數

$(function() {

alert("ready3333");

});

</script>

第3課 JQuery內置函數

//相似遍歷元素，對每一個元素從新賦值，再返回

var array = [ 3, 4, 5 ];

//對array中的每個元素*2，獲得一個新數組

var array2 = $.map(array, function(item) {

return item * 2;

});

alert(array2);//6 8 10

//定義一個JSon數據

var dict = {

"name1" : "zhansan",

"name2" : "lisi"

};

//若是用for循環去便利，會麻煩不少

$.each(dict, function(key, value) {

//能夠遍歷json數據

alert("key: " + key + "value: " + value);

});

//用each對數組進行遍歷

var arr = [ 3, 4, 5 ];

$.each(arr, function(key, value) {

alert("key: " + key + "value: " + value);

});

//item指的是key(數組下標)

$.each(arr, function(item) {

alert("item: " + item); //0 1 2

});

//不加參數，獲取的數組的元素值

$.each(arr, function() {

alert(this); //3 4 5

});

//this指的是當前操做數據對象中的元素

$.each(dict, function() {

alert(this);

});

//【注意：】普通數組推薦用無參方法，對於json數據實驗key, value方式進行遍歷便可

第4講 JQuery對象、Dom對象

$(function() {

//$("#div1")把Dom對象轉換成爲JQuery對象,(取出HTML文件中的全部文字)

var con = $("#div1").html();

window.alert(con);

//兩種方法是等價的, document.getElementById("div1")獲取到的是dom對象

var con2 = document.getElementById("div1").innerText;

window.alert(con2);

window.alert(document.getElementById("div1").innerHTML);

//注意jquery對象也不能調用dom方法

alert($("#div1").innerHTML); //error

//Jquery賦值

$("#div1").html("<a href='http://www.baidu.com'>百度首頁</a>");

//讓JQuery對象隱藏

//$("#div1").hide("");

//注意區分Array是JS自己的對象，不是Dom對象，所以無需將其轉換爲JQuery對象才能使用

//將JQuery對象轉換成爲一個dom對象

var jObj = $("#div1");

//將dom對象轉換成爲JQuery對象

var dObj = $(jObj)[0];

var dObj2 = $(jObj).get(0);

alert(jObj.html());

//獲取對象上的HTML源代碼

alert(dObj.innerHTML);

//獲取對象上的文本

alert(dObj2.innerText);

//修改JQuery對象樣式

$(function() {

//修改元素的屬性值

$("#div1").css("background", "red");

//讀取元素屬性的值

alert($("#div1").css("background-color"));

$("#text").val(new Date().toLocaleString());

alert($("#text").val());

$("#div1").html("<a href='#'><font color=yellow size=5>"+new Date().toLocaleString()+"</font></a>");

alert($("#div1").text);

alert($("#div1").text());

});

第5講 JQuery選擇器

//JQuery選擇器（id選擇器 TagName選擇器）

//若是直接在這裏就開始對p標籤註冊監聽，就不會出現效果，

//【緣由】程序自上而下執行，執行到這裏的時候，尚未找到p標籤對象（只有dom元素解析完畢的時候我才能找到p標籤）

//【解決方案】1.利用JQuery()來解決 2.把這一塊的代碼移植到p標籤的下面便可 3.在dom中可使用onload=initEvent()也可解決

$("p").click(function() {

alert("我是p標籤！");

}); //error

function initEvent1(){

//取出全部的p標籤, 這也是一個隱式迭代，給全部取出的p標籤增長click事件響應

$("p").click(function() {

alert("我是p標籤！");

});

var p =document.getElementsByTagName("p");

alert(p.length);

}

//當頁面加載完成ready以後，對這些標籤添加監聽事件

$(function() {

$("p").click(function() {

alert("我是p標籤！"); //ok

});

$("#div").html();

//JQuery選擇器（id選擇器 TagName選擇器）

//若是直接在這裏就開始對p標籤註冊監聽，就不會出現效果，

//【緣由】程序自上而下執行，執行到這裏的時候，尚未找到p標籤對象（只有dom元素解析完畢的時候我才能找到p標籤）

//【解決方案】1.利用JQuery()來解決 2.把這一塊的代碼移植到p標籤的下面便可 3.在dom中可使用onload=initEvent()也可解決

$("p").click(function() {

alert("我是p標籤！");

}); //error

function initEvent1() {

//取出全部的p標籤, 這也是一個隱式迭代，給全部取出的p標籤增長click事件響應

$("p").click(function() {

alert("我是p標籤！");

});

var p = document.getElementsByTagName("p");

alert(p.length);

}

//當頁面加載完成ready以後，對這些標籤添加監聽事件

$(function() {

$("p").click(function() {

alert("我是p標籤！"); //ok

});

//$("#div").html();

//對全部的類選擇器名稱爲test的標籤增長click事件

$(function() {

//指定類選擇器監聽

$(".test").click(function() {

alert($(this).text());

});

//Jquery多條件選擇器[注意選擇器表達式中的空格不能多也不能少，易錯點！！]

$(function() {

$("p, div, span").click(function() {

alert("p, dic, span選擇器都被監聽了！！！");

});

//層次選擇器

$(function() {

//獲取div下面的全部li元素

alert($("div li").length); //2

//獲取div下面的直接li子元素

alert($("div > li").length); //1

//獲取樣式名爲test以後的第一個div元素

alert($(".test + div").length); //0

//獲取樣式名爲test以後的全部div元素

alert($(".test ~ div").length); //2

});

# 對應ID選擇器

. 對應class選擇器

第6課 JQuery的隱式迭代

//JQuery的隱式迭代，不會報錯（讓頁面儘量少報錯誤！！）

$(function() {

//調錯技巧

var elements = $("#btn1");

if (elements.length <= 0) {

alert("沒有找到指定的按鈕！！！");

//退出該語句

return;

}

/*$("#btn").mouseover(function() {

alert("鼠標移動上來了！");

});*/

else {

elements.mouseover(function() {

alert("鼠標移動上來了！");

});

}

});

第7課節點遍歷

//Jquery節點遍歷

$(function() {

$("p").click(function() {

//獲取當前的dom節點,轉爲JQuery對象

//獲取下一個節點中的文本

var text = $(this).next().text();

alert("我正在節點遍歷呢： " + text);

//獲取下一個p節點（緊挨着的第一個元素）

var p = $(this).next("p").text();

alert("獲取下一個p節點" + p);

alert("nextall() " + $(this).nextAll().text());

alert("nextall() " + $(this).nextAll("p").text());

});

$.each(dict, function(key, value) {

//能夠遍歷json數據

alert("key: " + key + "value: " + value);

});

//點擊一個節點，其後的全部節點都變色

$(function() {

//獲取全部的p元素

$("p").click(function() {

//獲取全部的p節點，這個this指的是我當前點擊的div

var nodeP = $(this).nextAll("p");

//開始遍歷點擊標籤後面的全部節點

$.each(nodeP, function() {

alert("this is" + this.innerText);

alert("this2 is" + $(this).text());

});

//開始用each進行遍歷

$.each(nodeP, function() {

//此時的this指的就是元素【當前點擊元素後面的div】

//alert(nodeP.text())，對每一個div改變css樣式;

$(this).css("background", "black");

});

//代碼優化後1

$(function() {

$("p").click(function() {

$.each($(this).nextAll("p"), function() {

//$.each($(this)迭代會很麻煩

$(this).css("color", "orange");

$(this).css("font-size", "25");

});

//代碼優化後2

$(function() {

$("p").click(function() {

//此處無需利用each進行再次迭代， $(this).nextAll("p")這個方法中隱藏迭代了

$(this).nextAll("p").css("background", "pink");

});

//siblings測試：獲取全部的同輩元素

//點擊一個元素，本身變白，其餘元素變紅

$(function() {

$("p").click(function() {

//當前的元素變白

$(this).css("background", "white");

//讓其餘全部的元素變pink（這裏是本身的兄弟們都變色）

$(this).siblings("p").css("background", "pink");

});

第8課 JQuery鏈式編程

//JQuery鏈式編程

$(function() {

$("p").click(

function() {

//鏈式編程

$(this).css("background", "white").siblings("p").css(

"background", "pink");

});

//該功能實現點擊那個那個變色

$(function() {

$("#rating td").html("<img src='images/star1.jpg' />").mouseover(

function() {

//先把全部的

//$("#rating td").siblings("#rating td").html("<img src='images/star1.jpg' />");

//$(this).html("<img src='images/star2.jpg' />");

});

//實現點擊的圖片以後的星星都變色

$(function() {

$("#rating td").html("<img src='images/star1.jpg' />").mouseover(

function() {

//$("#rating td").html("<img src='images/star2.jpg' />");

//$(this).nextAll().html("<img src='images/star.jpg' />");

});

$(function() {

$("#rating td").html("<img src='images/star1.jpg' />").mouseover(

function() {

$(this).siblings().html("<img src='images/star2.jpg' />");

//這裏存在的問題就是最後一個不行

$(this).nextAll().html("<img src='images/star1.jpg' />");

});

第9課 JQuery過濾選擇器

$(function() {

//第一行爲大字體

$("#table1 tr:first").css("font-size", "30px");

//正文前三行大字體(gretter_than, less_than);lt(5)是從gt（0）中取出的新序列的編號

$("#table1 tr:gt(0):lt(5)").css("font-size", "18px");

//最後一行，紅色字體

$("#table1 tr:last").css("color", "red");

//奇數行變紅(大於0的奇數行)【表頭不算】， gt(0)用於去掉表頭

$("#table1 tr:gt(0):even").css("color", "blue");

//偶數行變黃[中間的內容部分]

$("#table1 tr:gt(0):lt(5):odd").css("color", "yellow");

});

//若是用Dom實現呢？？

$(function() {

//var aa = document.getElementById("table1");

var bb = document.getElementsByTagName("td");

//alert(aa.length + " " + bb.length);

for (var i = 0; i < bb.length; i++) {

//alert(bb[i].innerText);

//bb[i]至關因而全部的td對象

if (bb[i].innerText == "80") {

//bb[i].style.size = "10px";

bb[i].innerText = "DOM測試中………………";

bb[i].onclick = function() {

alert("我也註冊監聽了");

};

bb[i].onmouseover = function() {

alert("鼠標註冊監聽事件成功！！！");

};

}

});

$(function() {

//div1的事件

$("#div1").click(function() {

//相對於當前元素

$("ul", $(this).css("background", "red"));

});

$("#div2").click(function() {

//相對於當前元素,第二個參數傳入了一個JQuery對象，表示相對於這個對象爲基準進行相對的選擇

$("ul", $(this).css("background", "yellow"));

});

//修改點擊行td的背景色

$("#table1 tr").click(function() {

//設置我選擇行的全部td的背景色

$("td", $(this).css("background", "green"));

});

//#表示按照id進行選擇，若是什麼都不寫，就按照tagName進行選擇

<h1>基本過濾選擇器</h1>

<table id="table1"

style="border:1px solid red; border-collapse: collapse;">

<tr>

</tr>

<tr>

<td>zhansan</td>

</tr>

<tr>

</tr>

<tr>

<td>wangwu</td>

</tr>

<tr>

<td>zhaosi</td>

</tr>

<tr>

<td>zhouzhu</td>

</tr>

<tr>

</tr>

</table>

<ul>

<li>abcdefgh123456</li>

</ul>

</div>

<ul>

<li>abcdefgh123456</li>

</ul>

</div>

//#表示按照id進行選擇，若是什麼都不寫，就按照tagName進行選擇

$(function() {

/* $("input[value='show']").click(function() {

//alert($("input:cheked").val()); //error

$("input:checked").css("background-color", "red");

}); */

//alert("ok");

$("input[value=show]").click(function() {

//alert("ok");

//注意input:checked之間不能有空格

$("input:checked").css("background", "red");

alert($("input:checked").val());

});

第10課 Each的使用

//Each的使用

$(function() {

$("input[name=names]").click(function() {

var arr = new Array();

//對選中的元素進行each遍歷, 這裏的value就是選中的文本框對象

$("input[name=names]:checked").each(function(key, value) {

arr[key] = $(value).val();

//alert(key+" "+value); //注意key是從0開始的

});

//把數組元素取出來，並用逗號隔開

$("#name").text("您共選擇了"+arr.length+"項："+arr.join(","));

});

<input type="checkbox" value="北京" name="names" />北京

<br />

<input type="checkbox" value="北京" name="names" />北京

<br />

<input type="checkbox" value="北京" name="names" />北京

第11課 JQuery表單選擇器

//取出全部能夠提交到服務器的表單

$(function(){

//獲取全部的單行文本框

var aa = $(":text");

//獲取全部的inout, textarea,select, button

var bb = $(":input");

var cc = $(":password");

alert(cc.length);

$("input[type=text]").click(function(){

alert("text listening………………");

});

$(":input").click(function(){

alert("input listening………………");

});

第12課 JQuery的Dom操做

$(function() {

$("a:first").attr("href", "http://www.baidu.com");

$("a:eq(1)").attr("href", "http://www.baidu.com");

$("a:eq(5)").attr("href", "http://www.baidu.com");

});

$(function() {

$("a:first").attr("href", "http://www.baidu.com");

$("a:eq(1)").attr("href", "http://www.baidu.com");

$("a:eq(5)").attr("href", "http://www.baidu.com");

});

//動態建立dom節點

$(function() {

//建立

var link = $("<a href='http://www.baidu.com'>Baidu</a>");

//添加到div（動態加載網站列表，動態分頁）

//$("div:last").append(link);

var img = $("<br/><img src='images/star2.jpg'/>");

//$("div:last").append(img);

//$()建立的就是JQuery對象

var input = $("<input type=text value='create node'/>");

//$("div:last").append(input);

});

//動態建立表格

$(function() {

var data = {

"baidu" : "http://www.baidu.com",

"Sina" : "http://www.sina.com"

};

//動態加載數據並建立【動態加載網站列表，動態無刷訊頁面】

$.each(data, function(key, value) {

var tr = $("<tr><td>" + key + "</td><td><a href="+value+">" + key

+ "</a></td></tr>");

;

$("#table").append(tr);

//$("#table").prepend(tr);

});

<h1>JQuery的Dom操做</h1>

<h2>動態建立Dom節點</h2>

<ul>

<li>aaaaa</li>

<li class="testitem">aaaaa</li>

<li>aaaaa</li>

<li class="testitem">aaaaa</li>

</ul>

</ul>

//實現點擊按鈕刪除指定UL

$(function() {

$("#remove").click(function() {

//alert("ok");

//書暗中ul中有testitem樣式的元素

var list = $("ul li.testitem").remove();

//能夠把移除的元素添加到新的節點上面,接在第二個IDtest2上面

$("#test2").append(list);

});

//權限管理界面

$(function() {

$("#add").click(function() {

var items = $("select option:selected").remove();

$("#select2").append(items);

});

<h2>權限管理界面</h2>

</select>

<input type="button" value=">" id="add" /> <br> <input

type="button" value=">" /> <br>

</div>

</div>

第13課 JQuery練習題

//計算器

$(function() {

$("#eq").click(function() {

//注意這裏面不要使用$("#text1").value, 不要使用dom的方法在JQuery中去使用

//使用JQuery的【方法】去獲取他的數值

//注意val是方法，不是屬性；$("#text1")是一個JQuery對象

//【總結：】使用的時候注意看清楚對象是一個Dom對象仍是一個JQuery對象便可！

var num1 = $("#text1").val();

num1 = parseInt(num1);

var num2 = $("#text2").val();

num2 = parseInt(num2);

//錯誤說法：JQuery如何將字符串轉換成int？？？

//好笑說法：JQuery要幹掉JavaScript？？？

//var result = $("#text1").val() + $("#text2").val(); error(默認會當作是字符串進行加減)

var result = num1 + num2;

$("#text3").val(result);

//document.getElementById("text3").value = result; [JQuery與Dom混着用麼偶問題，可是儘可能不要這麼作！！！]

});

<input type="text" id="text1" />+

<br>

//不用問在JQuery中如何使用JavaScript中的****

//用戶註冊

var leftSecond = 10;

var intervalId ;

$(function(){

//可使用attr來設置JQuery沒有封裝的屬性

//使得一個按鈕變爲不可使用的狀態

$("#btnReg").attr("disabled", "true");

intervalId = setInterval(countDown, 1000);

});

//給function抱一個 $()的意思是讓他在把全部的dom元素加載完成的時候在執行

//這是一個普通的函數

function countDown(){

if (leftSecond <= 0){

$("#btnReg").val("贊成");

$("#btnReg").attr("disabled", false);

//時間爲0的時候就清空定時器

clearInterval(intervalId);

//退出循環

return ;

}

else{

//alert(leftSecond);

leftSecond --;

$("#btnReg").val("請仔細閱讀"+leftSecond+"秒");

}

//發佈帖子案例[無刷新評論]

$(function(){

$("#btnPost").click(function(){

var title = $("#title").val();

var body = $("#textbody").val();

var tr = $("<tr><td>"+title+"</td><td>"+body+"</td></tr>");

$("#tbContent").append(tr);

$("#title").val("");

$("#textbody").val("");

});

<h2>無刷新評論</h2>

<p>這是個人第一個帖子，哈哈！</p>

<tr>

</tr>

</table>

<br />

<br />

//文本框案例【若是文本框的內容爲空就顯示爲紅色，有內容就顯示爲白色】

$(function() {

//獲取全部的文本框[會觸發鼠標焦點離開時的事件]

$(":text").blur(function() {

//這個this指的是發生事件的文本框

if ($(this).val().length <= 0) {

$(this).css("background", "red");

} else {

$(this).css("background", "white");

}

});

//籃球案例[鼠標移動上去就變色]

$(function() {

//鏈式編程

$("#ul1 li").css("cursor", "pointer").mouseover(

function() {

$(this).css("background", "red").siblings().css(

"background", "white");

}).click(function() {

//先去掉點擊的空間樣式，而後在附加上去

$(this).css("background", "white").appendTo("#ul2");

});

第14課節點操做

//標籤替換案例

$(function(){

$("#labeltest").click(function(){

//把br標籤替換爲hr標籤【能夠實現批量添加操做】

$("br").replaceWith("<hr/>");

});

//標籤替換案例

$(function(){

$("#labeltest").click(function(){

//把br標籤替換爲hr標籤【能夠實現批量添加操做】

$("br").replaceWith("<hr/>");

//把標籤用另一個便籤包裹[讓全部的p便籤都讓 font標籤包裹起來]

$("p").wrap("<font color='red' size='10px'></font>");

});

<p>haha</p><br /><p>017</p><br />7<br />22

<br/>

</div>

第15課樣式操做

/* //給頁面中的全部便籤使用該樣式

input{

font-size: 20px;

}

body{

filter:gray;

} */

.testitem {

background: red;

color: yellow;

}

.class1 {

border: 5px solid red;

float: left;

background: red;

width: 20px;

height: 50px;

}

.class2 {

font-size: 20px;

border: 5px solid red;

float: left;

background: yellow;

width: 20px;

height: 50px;

}

.day {

background: white;

filter: gray;

}

.night {

background: black;

}

//標籤替換案例

$(function() {

$("#labeltest").click(function() {

//把br標籤替換爲hr標籤【能夠實現批量添加操做】

$("br").replaceWith("<hr/>");

//把標籤用另一個便籤包裹[讓全部的p便籤都讓 font標籤包裹起來]

$("p").wrap("<font color='red' size='10px'></font>");

});

//動態增長樣式【網頁開關燈效果】---》》並不會影響其餘樣式

$(function() {

$("#styleAdd").click(function() {

//對div5添加class樣式

$("#div5").addClass("class1");

//修改樣式

//$("#div5").addClass("class2");

});

$("#styleReplace").click(function() {

//移除樣式[有樣式就刪除，沒有該樣式就添加]

$("#div5").toggleClass("class1");

});

$("#styleRemove").click(function() {

//移除樣式

$("#div5").removeClass("class1");

});

//開關燈效果

$(function() {

$("#kgd").click(function() {

//網頁默認爲白色，有就建立黑色，不然就刪除

$(document.body).toggleClass("night");

if ($(document.body).hasClass("day")) {

$(document.body).removeClass("day");

alert("刪除白天class成功！");

} else {

alert("未發現白天的類！");

}

});

$(function() {

$("#qiehuan").click(function() {

$(document.body).toggleClass("day");

});

//點擊表格行，被點擊的高亮顯示

$(function() {

$("table tr").click(

function() {

$(this).addClass("tablecolor").siblings().css("cursor",

"pointer").removeClass("tablecolor");

});

//聚焦的控件高亮的顯示

$(function() {

//取得body下面的全部控件

$("body *").click(

function() {

$(this).addClass("tablecolor").siblings().css("cursor",

"pointer").removeClass("tablecolor");

});

【軟件補充】IECollection該軟件能夠實現幾乎全部版本的不一樣IE瀏覽器版本

//搜索框案例

$(function() {

$("#keyword").val("請輸入關鍵詞").addClass("waiting").blur(function() {

//焦點離開的時候

if ($(this).val() == "") {

$("#keyword").val("請輸入關鍵詞").addClass("waiting");

}

}).focus(function() {

//聚焦的時候

if ($("#keyword").val() == "請輸入關鍵詞") {

$("#keyword").val("").removeClass("waiting");

}

});

第16課 Radiobutton的操做

$("#setvalue").click(function() {

//alert("haha");

//設置默認選中的Radio，注意val中的[]也不能少

$(":radio[name=sex]").val([ "male" ]);

//alert($(":radio[name=sex]:checked").val());

alert("ok");

//對checkbox的選中

$(":checkbox").val([ "北京", "上海" ]);

//選中特定的一個項[單獨設定廣州]

$(":checkbox[value=廣州]").attr("checked", "true");

});

//全選，不選，反選

$(function() {

//alert("ok");

//有：回去找他的標籤，沒有：是去找他本身的子標籤

$("#selAll").click(function() {

alert("ok");

$(":checkbox").attr("checked", true);

});

$("#unselAll").click(function() {

$(":checkbox").attr("checked", false);

});

$("#reverAll").click(function() {

$(":checkbox").each(function() {

//對他的每一個狀態取反

$(this).attr("checked", !($(this).attr("checked")));

});

第17課 JQuery事件

//JQuery事件

$(function() {

$("#action").mouseover(function() {

$(this).text("客官來了");

});

$("#action").mouseleave(function() {

$(this).text("大爺慢走");

});

//事件的合成

$("#action").hover(function() {

$(this).text("大爺來了！");

}, function() {

$(this).text("大爺慢走哈！");

});

//事件冒泡

$(function() {

$("#p").click(function() {

alert("p");

});

$("#tr").click(function() {

alert("tr");

});

//阻止事件冒泡， e表示的就是這個window.event對象

$("#td").click(function(e) {

alert("td");

//組織事件繼續往上冒泡

e.stopPropagation();

});

//JQuery事件2

$(function() {

$("a").click(function(e) {

alert("link have stopped!");

//會取消超連接的跳轉

e.preventDefault();

});

//空數據禁止提交

$(function() {

$(":submit").click(function(e) {

var len = $("#submitText").val().length;

if (len <= 0) {

alert("用戶名不能爲空！！！");

//會阻止表單的提交

e.preventDefault();

}

});

//JQuery其餘事件

$(function(){

$("#p").click(function(e){

alert(e.pageX+" "+e.pageY);

alert($(e.html()));

alert($(e.target()).html());

});

//target指的就是冒泡的事件源

//this指的是當前觸發該事件的那個對象

$("#tr").click(function(e){

alert($(e.html()));

alert($(e.target()).html());

});

//注意keycode和charcode，小鍵盤的keyCode和主鍵盤的keyCode不同； charCode(二者的ASCII碼是同樣的)

});

//一次性事件

$(function(){

$("#btnonce").one("click", function(){

alert("我是一個一次性事件");

});

//事件的綁定

$("#btnonce").bind("click", function(){

alert("hahahhaha");

});

第18課 JQuery鼠標

//JQuery鼠標（跟着鼠標飛的圖片）

$(function(){

//注意body知識元素的顯示範圍， document是整個文檔

//$("body").mousemove(function(e){

$(document).mousemove(function(e){

//要讓圖片移動，首先必需要把圖片設置爲絕對定位

$("#img2").css("left", e.pageX).css("top", e.pageY);

});

var data = {

"images/0011.jpg" : [ "images/001.jpg", "風景1", "風景很美" ],

"images/0022.jpg" : [ "images/002.jpg", "風景2", "風景很美" ],

"images/0033.jpg" : [ "images/003.jpg", "風景3", "風景很美" ]

};

//圖片解析

$(function() {

$.each(data, function(key, value) {

//alert(key + " ;" + value);

//先取出小圖片的路徑

var smallImage = $("<img src="+key+" />");

smallImage.attr("imgpath", value[0]);

smallImage.attr("imgname", value[1]);

smallImage.attr("imgintro", value[2]);

//對每個小圖片設置鼠標監聽事件

smallImage.mouseover(function(e) {

//設置大圖的詳細信息

$("#detailImg").attr("src", $(this).attr("imgpath"));

$("#detailHeight").text($(this).attr("imgname"));

$("#detailNmae").text($(this).attr("imgintro"));

//設置樣式

$("#details").css("top", e.pageY).css("left", e.pageX).css(

"display", "");

});

$("body").append(smallImage);

});

$("#hideDetail").click(function(){

$("#details").css("display", "none");

});

</script>

</head>

<body>

<h1>圖片解析圖</h1>

<p>

</p>

</div>

</body>

</html>

【正宗代碼】

<style type="text/css">

body{

pading:0;

margin:0;

height:1000px;

}

#box {

position: absolute;

top: 50px;

left: 130px;

display: none;

}

li {

width: 250px;

height: 130px;

margin: 20px;

border: 1px solid gray;

}

</style>

<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>

<script type="text/javascript" src="js/jquery.cookie.js" charset="utf-8"></script>

<script type="text/javascript">

$(function() {

$("ul li").each(function() {

//alert("ok");

//對每個li標籤設置監聽事件

$(this).mouseover(function(e) {

//alert($(this).children('a').attr("href"));

var pic = $(this).children('a').attr("href");

//alert(pic);

var box = "<div id='box'><img src='"+pic+"' /></div>";

$("#box").css("top", e.pageY + 10).css("left", e.pagex + 10);

//添加元素到body

$("body").append(box);

//顯示控件

$("#box").show("slow");

}).mousemove(function(e) {

$("#box").css("top", e.pageY + 10).css("left", e.pageX + 10);

}).mouseout(function() {

$("#box").remove();

});

$(document).mousemove(function() {

});

</script>

</head>

<body>

<div id="box" style="">

<img src="images/001.jpg" />

</div>

<ul>

<li><a href="images/001.jpg"><img src="images/0011.jpg" /></a></li>

<li><a href="images/002.jpg"><img src="images/0022.jpg" /></a></li>

<li><a href="images/003.jpg"><img src="images/0033.jpg" /></a></li>

<li><a href="images/004.jpg"><img src="images/0044.jpg" /></a></li>

</ul>

</body>

</html>

第19課動畫及QQ風格空間案例

//製做QQ滾動版界面

$(function() {

//給偶數行添加body這種樣式

$("#qq li:odd").addClass("body");

//奇數行添加header這種樣式

$("#qq li:even").addClass("header").click(

function() {

//$(this).next("li.body").show("slow").siblings("li.body").hide("slow");

$(this).next("li.body").show("slow").siblings("li.body")

.hide("slow");

});

//剛進來時候的效果【在這裏能夠模擬點擊元素】

$("#qq li:first").click();

});

【易錯點】

//動態建立元素易錯點

$(function(){

var link = $("<a href='http://www.baidu.com' id='link1'>百度</a>");

//只有append以後纔會放入該超連接到界面上面

$("body").append(link);

//$("#link1").text("Google")必須放在append（建立到界面上之後，我才能夠去操做這個）

$("#link1").text("Google");

});

【方案二】

<style type="text/css">

.ul {

display: none;

}

li {

list-style: none;

font-size: 20px;

}

.list .sub {

display: none;

}

#nav {

background: #69F;

width: 200px;

height: 350px;

}

/* 思路：主要是看有沒有list這個class類，若是有，就顯示；沒有就關閉 */

#nav .list span.open {

display: block;

background: url(images/open.jpg) no-repeat;

}

#nav span {

display: block;

background: url(images/close.jpg) no-repeat;

}

</style>

<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>

<script type="text/javascript" src="js/jquery.cookie.js" charset="utf-8"></script>

<script type="text/javascript">

$(function() {

$("#nav li:has('ul')").click(function() {

//alert($(this).html());

//$(this).css("cursor", "pointer").toggleClass("list");

//根據一級菜單是否含有list這個類，來控制顯示和隱藏

//alert($(this).hasClass("list"));

if ($(this).hasClass("list")) {

//刪除本身的類

$(this).removeClass("list");

//給同級的增長class

$(this).siblings().addClass("list");

} else {

$(this).addClass("list");

}

});

</script>

</head>

<body>

<ul id="nav">

<li class="list"><span class="open">國內事件</span>

<ul class="sub">

<li>11111</li>

</ul></li>

<li class="list"><span class="open">國外事件</span>

<ul class="sub">

<li>11111</li>

</ul></li>

<li class="list"><span class="open">其餘事件</span>

<ul class="sub">

<li>11111</li>

</ul></li>

</ul>

</body>

</html>

第20課利用JQuery操做Cookie

Cookie是存儲在瀏覽器中的數據

//JQuery cookie的使用

//實現點擊登陸按鈕後利用cookie記住用戶名的功能

$(function() {

//alert("Cookie: "+$.cookie("用戶名"));

//寫入數據到cooke

//$.cookie("用戶名", "WWW.XXX.COM");

if ($.cookie("username")) {

$("#username").val($.cookie("username"));

alert("cookie read from file succeed!!!");

}

$("#button1").click(function() {

if ($.cookie("username")==null) {

$.cookie("username", $("#username").val());

//同時也能夠設定網站cookie的保存時間

alert("cookie write to file succeed!!!");

}

});

//自定義網站的背景色

$(function() {

//先從cookie中取出

var color = $.cookie("color");

//alert(color);

$("#red").click(function() {

$("body").css("background", "red");

//開始寫入cookie

$.cookie("color", "red");

});

$("#green").click(function() {

$("body").css("background", "green");

//開始寫入cookie

$.cookie("color", "green");

});

$("#yellow").click(function() {

$("body").css("background", "yellow");

//開始寫入cookie

$.cookie("color", "yellow");

});

$("body").css("background", color);

});

//方案二

$(function(){

$("#bgcolor td").click(function(){

//alert($(this).css("background-color"));

//這裏不須要在mouseover的時候再去設置背景色

$("body").css("background", $(this).css("background-color")).css("cursor", "pointer");

});

//代碼優化後

$(function() {

$("#bgcolor td").click(

function() {

//alert($(this).css("background-color"));

$("body")

.css("background", $(this).css("background-color"))

.css("cursor", "pointer");

$.cookie("color", $(this).css("background-color"));

});

//下次進來的時候直接去cookie裏面取出數據

var color = $.cookie("color");

if (color) {

//設定cookie的保存時間

$("body").css("background", color, {

expires : 10

});

}

});

第21課 JQuery插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JQuery課堂學習筆記

第1課 JQuery技術簡介

第2課 JQuery之Ready

第3課 JQuery內置函數

第4講 JQuery對象、Dom對象

第5講 JQuery選擇器

第6課 JQuery的隱式迭代

第7課 節點遍歷

第8課 JQuery鏈式編程

第9課 JQuery過濾選擇器

第10課 Each的使用

第11課 JQuery表單選擇器

第12課 JQuery的Dom操做

第13課 JQuery練習題

//文本框案例【若是文本框的內容爲空就顯示爲紅色， 有內容就顯示爲白色】

第14課 節點操做

第15課 樣式操做

第16課 Radiobutton的操做

第17課 JQuery事件

第18課 JQuery鼠標

第19課 動畫及QQ風格空間案例

第20課 利用JQuery操做Cookie

第21課 JQuery插件

第7課節點遍歷

//文本框案例【若是文本框的內容爲空就顯示爲紅色，有內容就顯示爲白色】

第14課節點操做

第15課樣式操做

第19課動畫及QQ風格空間案例

第20課利用JQuery操做Cookie