JQuery课堂学习笔记
第1課 JQuery技術(shù)簡(jiǎn)介
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% ????String path = request.getContextPath(); ????String basePath = request.getScheme() + "://" ????????????+ request.getServerName() + ":" + request.getServerPort() ????????????+ path + "/"; %> ? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一12112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一12112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一12112我是一個(gè)中國(guó)人1212112我是一個(gè)中國(guó)人1212112我是一</div> </body> </html> |
第2課 JQuery之Ready
|
????//這里面是一個(gè)匿名函數(shù) ????$(document).ready(function (){ ????????alert("網(wǎng)頁(yè)加載完畢"); ????}); ???? ????//方法二 ????$(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(""); ????????????}); ????????}); ????}); ? ????//這里面是一個(gè)匿名函數(shù) ????//在所有的Dom元素加載完成后， 就會(huì)顯示特效 ????$(document).ready(function() { ????????alert("網(wǎng)頁(yè)加載完畢"); ????}); ? ????//方法二 ????//可以實(shí)現(xiàn)頁(yè)面較高的響應(yīng)速度 ????$(document).ready(myready); ????function myready() { ????????//alert("文件加載完畢"); ????} ? ????//js直接來(lái) ????window.onload = function() { ????????alert("onload111"); ????}; ???? ????//會(huì)自動(dòng)把前面的響應(yīng)事件覆蓋掉 ????//只有等網(wǎng)頁(yè)都加載完畢了才會(huì)出現(xiàn)特效 ????window.onload = function() { ????????alert("onload222"); ????}; ? ????//把window也加載成為JQuery對(duì)象 ????$(window).load(function() { ????????alert("window onload have ready!"); ????}); ????//加載方式三，$()其實(shí)就是一個(gè)函數(shù) ????$(function() { ????????alert("ready3333"); ????}); </script> |
第3課 JQuery內(nèi)置函數(shù)
|
????//類似遍歷元素， 對(duì)每個(gè)元素重新賦值， 再返回 ????var array = [ 3, 4, 5 ]; ????//對(duì)array中的每一個(gè)元素*2， 得到一個(gè)新數(shù)組 ????var array2 = $.map(array, function(item) { ????????return item * 2; ????}); ????alert(array2);//6 8 10 ? ????//定義一個(gè)JSon數(shù)據(jù) ????var dict = { ????????"name1" : "zhansan", ????????"name2" : "lisi" ????}; ? ????//如果用for循環(huán)去便利， 會(huì)麻煩很多 ????$.each(dict, function(key, value) { ????????//可以遍歷json數(shù)據(jù) ????????alert("key: " + key + "value: " + value); ????}); ? ????//用each對(duì)數(shù)組進(jìn)行遍歷 ????var arr = [ 3, 4, 5 ]; ????$.each(arr, function(key, value) { ????????alert("key: " + key + "value: " + value); ????}); ? ????//item指的是key(數(shù)組下標(biāo)) ????$.each(arr, function(item) { ????????alert("item: " + item); //0 1 2 ????}); ? ????//不加參數(shù)， 獲取的數(shù)組的元素值 ????$.each(arr, function() { ????????alert(this); //3 4 5 ????}); ???? ????//this指的是當(dāng)前操作數(shù)據(jù)對(duì)象中的元素 ????$.each(dict, function() { ????????alert(this); ????}); ????//【注意：】普通數(shù)組推薦用無(wú)參方法， 對(duì)于json數(shù)據(jù)實(shí)驗(yàn)key, value方式進(jìn)行遍歷即可 ? |
第4講 JQuery對(duì)象、Dom對(duì)象
|
????$(function() { ????????//$("#div1")把Dom對(duì)象轉(zhuǎn)換成為JQuery對(duì)象,(取出HTML文件中的所有文字) ????????var con = $("#div1").html(); ????????window.alert(con); ????????//兩種方法是等價(jià)的, document.getElementById("div1")獲取到的是dom對(duì)象 ????????var con2 = document.getElementById("div1").innerText; ????????window.alert(con2); ????????window.alert(document.getElementById("div1").innerHTML); ? ????????//注意jquery對(duì)象也不能調(diào)用dom方法 ????????alert($("#div1").innerHTML); //error ? ????????//Jquery賦值 ????????$("#div1").html("<a href='http://www.baidu.com'>百度首頁(yè)</a>"); ????????//讓JQuery對(duì)象隱藏 ????????//$("#div1").hide(""); ????????//注意區(qū)分Array是JS本身的對(duì)象， 不是Dom對(duì)象， 因此無(wú)需將其轉(zhuǎn)換為JQuery對(duì)象才能使用 ????????//將JQuery對(duì)象轉(zhuǎn)換成為一個(gè)dom對(duì)象 ????????var jObj = $("#div1"); ????????//將dom對(duì)象轉(zhuǎn)換成為JQuery對(duì)象 ????????var dObj = $(jObj)[0]; ????????var dObj2 = $(jObj).get(0); ? ????????alert(jObj.html()); ????????//獲取對(duì)象上的HTML源代碼 ????????alert(dObj.innerHTML); ????????//獲取對(duì)象上的文本 ????????alert(dObj2.innerText); ? ????????//修改JQuery對(duì)象樣式 ????????$(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選擇器） ????//如果直接在這里就開(kāi)始對(duì)p標(biāo)簽注冊(cè)監(jiān)聽(tīng)， 就不會(huì)出現(xiàn)效果， ????//【原因】程序自上而下執(zhí)行， 執(zhí)行到這里的時(shí)候， 還沒(méi)有找到p標(biāo)簽對(duì)象（只有dom元素解析完畢的時(shí)候我才能找到p標(biāo)簽） ????//【解決方案】1.利用JQuery()來(lái)解決 2.把這一塊的代碼移植到p標(biāo)簽的下面即可 3.在dom中可以使用οnlοad=initEvent()也可解決 ????$("p").click(function() { ????????????alert("我是p標(biāo)簽！"); ????????}); //error ????function initEvent1(){ ????//取出所有的p標(biāo)簽, 這也是一個(gè)隱式迭代， 給所有取出的p標(biāo)簽增加click事件響應(yīng) ????????$("p").click(function() { ????????????alert("我是p標(biāo)簽！"); ????????}); ????????var p =document.getElementsByTagName("p"); ????????alert(p.length); ????} ???? ????//當(dāng)頁(yè)面加載完成ready之后， 對(duì)這些標(biāo)簽添加監(jiān)聽(tīng)事件 ????$(function() { ????????$("p").click(function() { ????????????alert("我是p標(biāo)簽！"); //ok ????????}); ????}); ????$("#div").html(); ?
? ????//JQuery選擇器（id選擇器 TagName選擇器） ????//如果直接在這里就開(kāi)始對(duì)p標(biāo)簽注冊(cè)監(jiān)聽(tīng)， 就不會(huì)出現(xiàn)效果， ????//【原因】程序自上而下執(zhí)行， 執(zhí)行到這里的時(shí)候， 還沒(méi)有找到p標(biāo)簽對(duì)象（只有dom元素解析完畢的時(shí)候我才能找到p標(biāo)簽） ????//【解決方案】1.利用JQuery()來(lái)解決 2.把這一塊的代碼移植到p標(biāo)簽的下面即可 3.在dom中可以使用οnlοad=initEvent()也可解決 ????$("p").click(function() { ????????alert("我是p標(biāo)簽！"); ????}); //error ????function initEvent1() { ????????//取出所有的p標(biāo)簽, 這也是一個(gè)隱式迭代， 給所有取出的p標(biāo)簽增加click事件響應(yīng) ????????$("p").click(function() { ????????????alert("我是p標(biāo)簽！"); ????????}); ????????var p = document.getElementsByTagName("p"); ????????alert(p.length); ????} ? ????//當(dāng)頁(yè)面加載完成ready之后， 對(duì)這些標(biāo)簽添加監(jiān)聽(tīng)事件 ????$(function() { ????????$("p").click(function() { ????????????alert("我是p標(biāo)簽！"); //ok ????????}); ????}); ????//$("#div").html(); ? ????//對(duì)所有的類選擇器名稱為test的標(biāo)簽增加click事件 ????$(function() { ????????//指定類選擇器監(jiān)聽(tīng) ????????$(".test").click(function() { ????????????alert($(this).text()); ????????}); ????});
//Jquery多條件選擇器[注意選擇器表達(dá)式中的空格不能多也不能少， 易錯(cuò)點(diǎn)！！] ????$(function() { ????????$("p, div, span").click(function() { ????????????alert("p, dic, span選擇器都被監(jiān)聽(tīng)了！！！"); ????????}); ? ????}); ? ????//層次選擇器 ????$(function() { ????//獲取div下面的所有l(wèi)i元素 ????????alert($("div li").length); //2 ????????//獲取div下面的直接li子元素 ????????alert($("div > li").length); //1 ????????//獲取樣式名為test之后的第一個(gè)div元素 ????????alert($(".test + div").length); //0 ????????//獲取樣式名為test之后的所有div元素 ????????alert($(".test ~ div").length); //2 ????}); ? # 對(duì)應(yīng)ID選擇器 . 對(duì)應(yīng)class選擇器 |
第6課 JQuery的隱式迭代
|
????//JQuery的隱式迭代， 不會(huì)報(bào)錯(cuò)（讓頁(yè)面盡可能少報(bào)錯(cuò)誤！！） ????$(function() { ????//調(diào)錯(cuò)技巧 ????????var elements = $("#btn1"); ????????if (elements.length <= 0) { ????????????alert("沒(méi)有找到指定的按鈕！！！"); ????????????//退出該語(yǔ)句 ????????????return; ????????} ????????/*$("#btn").mouseover(function() { ? ????????????alert("鼠標(biāo)移動(dòng)上來(lái)了！"); ????????});*/ else { ????????????elements.mouseover(function() { ? ????????????????alert("鼠標(biāo)移動(dòng)上來(lái)了！"); ????????????}); ????????} ????}); |
第7課 節(jié)點(diǎn)遍歷
|
????//Jquery節(jié)點(diǎn)遍歷 ????$(function() { ????????$("p").click(function() { ????????????//獲取當(dāng)前的dom節(jié)點(diǎn),轉(zhuǎn)為JQuery對(duì)象 ????????????//獲取下一個(gè)節(jié)點(diǎn)中的文本 ????????????var text = $(this).next().text(); ????????????alert("我正在節(jié)點(diǎn)遍歷呢： " + text); ????????????//獲取下一個(gè)p節(jié)點(diǎn)（緊挨著的第一個(gè)元素） ????????????var p = $(this).next("p").text(); ????????????alert("獲取下一個(gè)p節(jié)點(diǎn)" + p); ????????????alert("nextall() " + $(this).nextAll().text()); ????????????alert("nextall() " + $(this).nextAll("p").text()); ????????}); ????}); ? ????/* ????$.each(dict, function(key, value) { ????????//可以遍歷json數(shù)據(jù) ????????alert("key: " + key + "value: " + value); ????}); ???? */ ? ????//點(diǎn)擊一個(gè)節(jié)點(diǎn)， 其后的所有節(jié)點(diǎn)都變色 ????$(function() { ????????//獲取所有的p元素 ????????$("p").click(function() { ????????????//獲取所有的p節(jié)點(diǎn)，這個(gè)this指的是我當(dāng)前點(diǎn)擊的div ????????????var nodeP = $(this).nextAll("p"); ? ????????????//開(kāi)始遍歷點(diǎn)擊標(biāo)簽后面的所有節(jié)點(diǎn) ????????????$.each(nodeP, function() { ????????????????alert("this is" + this.innerText); ????????????????alert("this2 is" + $(this).text()); ????????????}); ????????????//開(kāi)始用each進(jìn)行遍歷 ????????????$.each(nodeP, function() { ????????????????//此時(shí)的this指的就是元素【當(dāng)前點(diǎn)擊元素后面的div】 ????????????????//alert(nodeP.text())， 對(duì)每個(gè)div改變css樣式; ????????????????$(this).css("background", "black"); ????????????}); ????????}); ????}); ? ????//代碼優(yōu)化后1 ????$(function() { ????????$("p").click(function() { ????????????$.each($(this).nextAll("p"), function() { ????????????????//$.each($(this)迭代會(huì)很麻煩 ????????????????$(this).css("color", "orange"); ????????????????$(this).css("font-size", "25"); ????????????}); ????????}); ????}); ? ????//代碼優(yōu)化后2 ????$(function() { ????????$("p").click(function() { ????????????//此處無(wú)需利用each進(jìn)行再次迭代， $(this).nextAll("p")這個(gè)方法中隱藏迭代了 ????????????$(this).nextAll("p").css("background", "pink"); ????????}); ????}); ? ????//siblings測(cè)試：獲取所有的同輩元素 ????//點(diǎn)擊一個(gè)元素， 自己變白， 其他元素變紅 ????$(function() { ????????$("p").click(function() { ????????//當(dāng)前的元素變白 ????????????$(this).css("background", "white"); ????????????//讓其他所有的元素變pink（這里是自己的兄弟們都變色） ????????????$(this).siblings("p").css("background", "pink"); ????????}); ????}); |
第8課 JQuery鏈?zhǔn)骄幊?
|
????//JQuery鏈?zhǔn)骄幊?/span> ????$(function() { ????????$("p").click( ????????????????function() { ????????????????????//鏈?zhǔn)骄幊? ????????????????????$(this).css("background", "white").siblings("p").css( ????????????????????????????"background", "pink"); ????????????????}); ????}); ? ????//該功能實(shí)現(xiàn)點(diǎn)擊那個(gè)那個(gè)變色 ????$(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' />"); ? ????????????????}); ? ????}); ? ????//實(shí)現(xiàn)點(diǎn)擊的圖片之后的星星都變色 ????$(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' />"); ???????????????????? ????????????????????//這里存在的問(wèn)題就是最后一個(gè)不行 ????????????????????$(this).nextAll().html("<img src='images/star1.jpg' />"); ????????????????}); ????}); |
第9課 JQuery過(guò)濾選擇器
|
$(function() { ????????//第一行為大字體 ????????$("#table1 tr:first").css("font-size", "30px"); ????????//正文前三行大字體(gretter_than, less_than);lt(5)是從gt（0）中取出的新序列的編號(hào) ????????$("#table1 tr:gt(0):lt(5)").css("font-size", "18px"); ????????//最后一行， 紅色字體 ????????$("#table1 tr:last").css("color", "red"); ? ????????//奇數(shù)行變紅(大于0的奇數(shù)行)【表頭不算】， gt(0)用于去掉表頭 ????????$("#table1 tr:gt(0):even").css("color", "blue"); ????????//偶數(shù)行變黃[中間的內(nèi)容部分] ????????$("#table1 tr:gt(0):lt(5):odd").css("color", "yellow"); ????}); ????//如果用Dom實(shí)現(xiàn)呢？？ ????$(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]相當(dāng)于是所有的td對(duì)象 ????????????if (bb[i].innerText == "80") { ????????????????//bb[i].style.size = "10px"; ????????????????bb[i].innerText = "DOM測(cè)試中………………"; ????????????????bb[i].onclick = function() { ????????????????????alert("我也注冊(cè)監(jiān)聽(tīng)了"); ????????????????}; ????????????????bb[i].onmouseover = function() { ????????????????alert("鼠標(biāo)注冊(cè)監(jiān)聽(tīng)事件成功！！！"); ????????????????}; ????????????} ????????} ????}); ? ????$(function() { ????????//div1的事件 ????????$("#div1").click(function() { ????????????//相對(duì)于當(dāng)前元素 ????????????$("ul", $(this).css("background", "red")); ????????}); ????????$("#div2").click(function() { ????????????//相對(duì)于當(dāng)前元素,第二個(gè)參數(shù)傳入了一個(gè)JQuery對(duì)象， 表示相對(duì)于這個(gè)對(duì)象為基準(zhǔn)進(jìn)行相對(duì)的選擇 ????????????$("ul", $(this).css("background", "yellow")); ????????}); ? ????????//修改點(diǎn)擊行td的背景色 ????????$("#table1 tr").click(function() { ????????????//設(shè)置我選擇行的所有td的背景色 ????????????$("td", $(this).css("background", "green")); ? ????????}); ????}); ? ????//#表示按照id進(jìn)行選擇， 如果什麼都不寫(xiě)， 就按照tagName進(jìn)行選擇 <h1>基本過(guò)濾選擇器</h1> ????<table id="table1" ????????style="border:1px solid red; border-collapse: collapse;"> ????????<tr> ????????????<td>姓名</td> ????????????<td>成績(jī)</td> ????????</tr> ????????<tr> ????????????<td>zhansan</td> ????????????<td>98</td> ????????</tr> ????????<tr> ????????????<td>lisi</td> ????????????<td>95</td> ????????</tr> ????????<tr> ????????????<td>wangwu</td> ????????????<td>87</td> ????????</tr> ????????<tr> ????????????<td>zhaosi</td> ????????????<td>79</td> ????????</tr> ????????<tr> ????????????<td>zhouzhu</td> ????????????<td>60</td> ????????</tr> ????????<tr> ????????????<td>平均分</td> ????????????<td>80</td> ????????</tr> ????</table> ? ????<h2>相對(duì)定位</h2> ????<div style="border: 1px solid red"> ????????<div id="div1"> ????????????<ul> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????</ul> ????????</div> ????</div> ????<div style="border: 1px solid blue"> ????????<div id="div2"> ????????????<ul> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????????<li>abcdefgh123456</li> ????????????</ul> ????????</div> ????</div> ?
????//#表示按照id進(jìn)行選擇， 如果什麼都不寫(xiě)， 就按照tagName進(jìn)行選擇 ????$(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(); ????????????//對(duì)選中的元素進(jìn)行each遍歷, 這里的value就是選中的文本框?qū)ο? ????????????$("input[name=names]:checked").each(function(key, value) { ????????????????arr[key] = $(value).val(); ????????????????//alert(key+" "+value); //注意key是從0開(kāi)始的 ????????????}); ????????????//把數(shù)組元素取出來(lái)， 并用逗號(hào)隔開(kāi) ????????????$("#name").text("您共選擇了"+arr.length+"項(xiàng)："+arr.join(",")); ????????}); ????}); ? ? <input type="checkbox" value="北京" name="names" />北京 ????<br /> ????<input type="checkbox" value="北京" name="names" />北京 ????<br /> ????<input type="checkbox" value="北京" name="names" />北京 <p id="name"></p> ? |
第11課 JQuery表單選擇器
|
? ????//取出所有可以提交到服務(wù)器的表單 ????$(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"); ????}); ? ????<a href="">圖片1</a> ????<a href="">圖片2</a> ????<a href="">圖片3</a> ????<a href="">圖片4</a> ????<a href="">圖片5</a> ????<a href="">圖片6</a>
$(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"); ????}); ? ????//動(dòng)態(tài)創(chuàng)建dom節(jié)點(diǎn) ????$(function() { ????????//創(chuàng)建 ????????var link = $("<a href='http://www.baidu.com'>Baidu</a>"); ????????//添加到div（動(dòng)態(tài)加載網(wǎng)站列表 ， 動(dòng)態(tài)分頁(yè)） ????????//$("div:last").append(link); ????????var img = $("<br/><img src='images/star2.jpg'/>"); ????????//$("div:last").append(img); ????????//$()創(chuàng)建的就是JQuery對(duì)象 ????????var input = $("<input type=text value='create node'/>"); ????????//$("div:last").append(input); ????}); ? ????//動(dòng)態(tài)創(chuàng)建表格 ????$(function() { ????????var data = { ????????????"baidu" : "http://www.baidu.com", ????????????"Sina" : "http://www.sina.com" ????????}; ? ????????//動(dòng)態(tài)加載數(shù)據(jù)并創(chuàng)建【動(dòng)態(tài)加載網(wǎng)站列表， 動(dòng)態(tài)無(wú)刷訊頁(yè)面】 ????????$.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> ????<a href="">圖片1</a> ????<a href="">圖片2</a> ????<a href="">圖片3</a> ????<a href="">圖片4</a> ????<a href="">圖片5</a> ????<a href="">圖片6</a> ? ????<h2>動(dòng)態(tài)創(chuàng)建Dom節(jié)點(diǎn)</h2> ????<div style="border: 1px solid red; height: 200px;"></div> ????<table id="table"></table> ????<ul> ????????<li>aaaaa</li> ????????<li class="testitem">aaaaa</li> ????????<li>aaaaa</li> ????????<li>aaaaa</li> ????????<li class="testitem">aaaaa</li> ????</ul> ????<ul id="test2"> ????????<li>bbbb</li> ????</ul> ? ????<input type="button" value="removeUL" id="remove" />
//實(shí)現(xiàn)點(diǎn)擊按鈕刪除指定UL ????$(function() { ? ????????$("#remove").click(function() { ????????????//alert("ok"); ????????????//書(shū)暗中ul中有testitem樣式的元素 ????????????var list = $("ul li.testitem").remove(); ????????????//可以把移除的元素添加到新的節(jié)點(diǎn)上面,接在第二個(gè)IDtest2上面 ????????????$("#test2").append(list); ????????}); ????}); ? ????//權(quán)限管理界面 ????$(function() { ????????$("#add").click(function() { ????????????var items = $("select option:selected").remove(); ????????????$("#select2").append(items); ????????}); ????}); ? ? <h2>權(quán)限管理界面</h2> ????<div style="float: left; border: 1px solid red; width: 250px;"> ????????<select multiple="multiple" style="float:left;"> ????????????<option>添加</option> ????????????<option>修改</option> ????????????<option>查詢</option> ????????????<option>刪除</option> ????????????<option>打印</option> ????????</select> ????????<div style="float: left; width: 50px;"> ????????????<input type="button" value=">" id="add" /> <br> <input ????????????????type="button" value=">" /> <br> ????????</div> ????????<div style="float: left;width: 50px;"> ????????????<select style="float:left;" multiple="multiple" id="select2"></select> ????????</div> ????</div> |
第13課 JQuery練習(xí)題
|
//計(jì)算器 ????$(function() { ? ????????$("#eq").click(function() { ????????????//注意這里面不要使用$("#text1").value, 不要使用dom的方法在JQuery中去使用 ????????????//使用JQuery的【方法】去獲取他的數(shù)值 ????????????//注意val是方法， 不是屬性；$("#text1")是一個(gè)JQuery對(duì)象 ????????????//【總結(jié)：】使用的時(shí)候注意看清楚對(duì)象是一個(gè)Dom對(duì)象還是一個(gè)JQuery對(duì)象即可！ ????????????var num1 = $("#text1").val(); ????????????num1 = parseInt(num1); ????????????var num2 = $("#text2").val(); ????????????num2 = parseInt(num2); ????????????//錯(cuò)誤說(shuō)法????：JQuery如何將字符串轉(zhuǎn)換成int？？？ ????????????//可笑說(shuō)法：JQuery要干掉JavaScript？？？ ????????????//var result = $("#text1").val() + $("#text2").val(); error(默認(rèn)會(huì)當(dāng)做是字符串進(jìn)行加減) ????????????var result = num1 + num2; ????????????$("#text3").val(result); ????????????//document.getElementById("text3").value = result; [JQuery與Dom混著用么偶問(wèn)題， 但是盡量不要這么做！！！] ????????}); ????}); ? <h2>計(jì)算器</h2> ????<input type="text" id="text1" />+ ????<input type="text" id="text2" /> ????<input type="button" value="=" id="eq"> ????<input type="text" id="text3"> ????<br> ????<input type="button" value="開(kāi)始計(jì)算"> ? //不用問(wèn)在JQuery中如何使用JavaScript中的**** ????//用戶注冊(cè) ????var leftSecond = 10; ????var intervalId ; ????$(function(){ ????//可以使用attr來(lái)設(shè)置JQuery沒(méi)有封裝的屬性 ????//使得一個(gè)按鈕變?yōu)椴豢梢允褂玫臓顟B(tài) ????????$("#btnReg").attr("disabled", "true"); ????????intervalId = setInterval(countDown, 1000); ????}); ???? ????//給function抱一個(gè) $()的意思是讓他在把所有的dom元素加載完成的時(shí)候在執(zhí)行 ????//這是一個(gè)普通的函數(shù) ???? ????function countDown(){ ????????if (leftSecond <= 0){ ????????????$("#btnReg").val("同意"); ????????????$("#btnReg").attr("disabled", false); ????????????//時(shí)間為0的時(shí)候就清空定時(shí)器 ????????????clearInterval(intervalId); ????????????//退出循環(huán) ????????????return ; ????????} ????????else{ ????????//alert(leftSecond); ????????????leftSecond --; ????????????$("#btnReg").val("請(qǐng)仔細(xì)閱讀"+leftSecond+"秒"); ????????} ????} ? <h2>用戶注冊(cè)</h2> ????<textarea rows="20" cols="30"></textarea> ????<input type="button" id="btnReg" value="同意" /> ? ????//發(fā)布帖子案例[無(wú)刷新評(píng)論] ????$(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>無(wú)刷新評(píng)論</h2> ????<p>這是我的第一個(gè)帖子，哈哈！</p> ????<table id="tbContent"> ????????<tr> ????????????<td>匿名</td> ????????????<td>沙發(fā)</td> ????????</tr> ????</table> ????<input type="text" id="title" /> ????<br /> ????<textarea id="textbody" rows="30" cols="30"></textarea> ????<br /> ????<input type="button" value="發(fā)表評(píng)論" id="btnPost" /> ? ? //文本框案例【如果文本框的內(nèi)容為空就顯示為紅色， 有內(nèi)容就顯示為白色】????$(function() { ????????//獲取所有的文本框[會(huì)觸發(fā)鼠標(biāo)焦點(diǎn)離開(kāi)時(shí)的事件] ????????$(":text").blur(function() { ????????????//這個(gè)this指的是發(fā)生事件的文本框 ????????????if ($(this).val().length <= 0) { ????????????????$(this).css("background", "red"); ????????????} else { ????????????????$(this).css("background", "white"); ????????????} ? ????????}); ????}); ? ????//籃球案例[鼠標(biāo)移動(dòng)上去就變色] ????$(function() { ????????//鏈?zhǔn)骄幊? ????????$("#ul1 li").css("cursor", "pointer").mouseover( ????????????????function() { ????????????????????$(this).css("background", "red").siblings().css( ????????????????????????????"background", "white"); ????????????????}).click(function() { ????????????????//先去掉點(diǎn)擊的空間樣式， 然后在附加上去 ????????????$(this).css("background", "white").appendTo("#ul2"); ????????}); ????}); ? ? |
第14課 節(jié)點(diǎn)操作
|
? //標(biāo)簽替換案例 ????$(function(){ ????????$("#labeltest").click(function(){ ????????//把br標(biāo)簽替換為hr標(biāo)簽【可以實(shí)現(xiàn)批量添加操作】 ????????????$("br").replaceWith("<hr/>"); ????????}); ????}); ? ????//標(biāo)簽替換案例 ????$(function(){ ????????$("#labeltest").click(function(){ ????????//把br標(biāo)簽替換為hr標(biāo)簽【可以實(shí)現(xiàn)批量添加操作】 ????????????$("br").replaceWith("<hr/>"); ????????????//把標(biāo)簽用另外一個(gè)便簽包裹[讓所有的p便簽都讓 font標(biāo)簽包裹起來(lái)] ????????????$("p").wrap("<font color='red' size='10px'></font>"); ????????}); ????}); ? <h1 style="float: left; width: 1300px">節(jié)點(diǎn)操作</h1> ????<div style="border: 1px solid red; float: left;"> ????????<p>haha</p><br /><p>017</p><br />7<br />22 ????????<br/> ????????<input type="button" value="標(biāo)簽替換測(cè)試" id="labeltest"/> ????</div> ? |
第15課 樣式操作
|
/* //給頁(yè)面中的所有便簽使用該樣式 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; } ? ? //標(biāo)簽替換案例 ????$(function() { ????????$("#labeltest").click(function() { ????????????//把br標(biāo)簽替換為hr標(biāo)簽【可以實(shí)現(xiàn)批量添加操作】 ????????????$("br").replaceWith("<hr/>"); ????????????//把標(biāo)簽用另外一個(gè)便簽包裹[讓所有的p便簽都讓 font標(biāo)簽包裹起來(lái)] ????????????$("p").wrap("<font color='red' size='10px'></font>"); ????????}); ????}); ? ????//動(dòng)態(tài)增加樣式【網(wǎng)頁(yè)開(kāi)關(guān)燈效果】---》》并不會(huì)影響其他樣式 ????$(function() { ????????$("#styleAdd").click(function() { ????????????//對(duì)div5添加class樣式 ????????????$("#div5").addClass("class1"); ????????????//修改樣式 ????????????//$("#div5").addClass("class2"); ? ????????}); ????????$("#styleReplace").click(function() { ????????????//移除樣式[有樣式就刪除， 沒(méi)有該樣式就添加] ????????????$("#div5").toggleClass("class1"); ????????}); ????????$("#styleRemove").click(function() { ????????????//移除樣式 ????????????$("#div5").removeClass("class1"); ????????}); ????}); ? //開(kāi)關(guān)燈效果 ????$(function() { ? ????????$("#kgd").click(function() { ????????????//網(wǎng)頁(yè)默認(rèn)為白色， 有就創(chuàng)建黑色， 否則就刪除 ????????????$(document.body).toggleClass("night"); ????????????if ($(document.body).hasClass("day")) { ????????????????$(document.body).removeClass("day"); ????????????????alert("刪除白天class成功！"); ????????????} else { ????????????????alert("未發(fā)現(xiàn)白天的類！"); ????????????} ????????}); ????}); ???? ????$(function() { ????????$("#qiehuan").click(function() { ????????????$(document.body).toggleClass("day"); ????????}); ????}); ? //點(diǎn)擊表格行， 被點(diǎn)擊的高亮顯示 ????$(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"); ????????????????}); ????}); ? 【軟件補(bǔ)充】IECollection該軟件可以實(shí)現(xiàn)幾乎所有版本的不同IE瀏覽器版本 ? //搜索框案例 ????$(function() { ????????$("#keyword").val("請(qǐng)輸入關(guān)鍵詞").addClass("waiting").blur(function() { ????????????//焦點(diǎn)離開(kāi)的時(shí)候 ????????????if ($(this).val() == "") { ????????????????$("#keyword").val("請(qǐng)輸入關(guān)鍵詞").addClass("waiting"); ????????????} ????????}).focus(function() { ????//聚焦的時(shí)候 ????????????if ($("#keyword").val() == "請(qǐng)輸入關(guān)鍵詞") { ????????????????$("#keyword").val("").removeClass("waiting"); ????????????} ????????}); ????}); ? |
第16課 Radiobutton的操作
|
????????$("#setvalue").click(function() { ????????????//alert("haha"); ????????????//設(shè)置默認(rèn)選中的Radio， 注意val中的[]也不能少 ????????????$(":radio[name=sex]").val([ "male" ]); ????????????//alert($(":radio[name=sex]:checked").val()); ????????????alert("ok"); ? ????????????//對(duì)checkbox的選中 ????????????$(":checkbox").val([ "北京", "上海" ]); ????????????//選中特定的一個(gè)項(xiàng)[單獨(dú)設(shè)定廣州] ????????????$(":checkbox[value=廣州]").attr("checked", "true"); ????????}); ????});
//全選， 不選， 反選 ????$(function() { ????????//alert("ok"); ????????//有：回去找他的標(biāo)簽， 沒(méi)有：是去找他自己的子標(biāo)簽 ????????$("#selAll").click(function() { ????????????alert("ok"); ????????????$(":checkbox").attr("checked", true); ????????}); ????????$("#unselAll").click(function() { ????????????$(":checkbox").attr("checked", false); ????????}); ????????$("#reverAll").click(function() { ????????????$(":checkbox").each(function() { ????????????????//對(duì)他的每個(gè)狀態(tài)取反 ????????????????$(this).attr("checked", !($(this).attr("checked"))); ? ????????????}); ????????}); ????}); ? |
第17課 JQuery事件
|
????//JQuery事件 ????$(function() { ????????/* ????????????$("#action").mouseover(function() { ????????????????$(this).text("客官來(lái)了"); ????????????}); ????????????$("#action").mouseleave(function() { ????????????????$(this).text("大爺慢走"); ????????????}); ???????? */ ????????//事件的合成 ????????$("#action").hover(function() { ????????????$(this).text("大爺來(lái)了！"); ? ????????}, function() { ????????????$(this).text("大爺慢走哈！"); ????????}); ????}); ? ????//事件冒泡 ????$(function() { ????????$("#p").click(function() { ????????????alert("p"); ????????}); ????????$("#tr").click(function() { ????????????alert("tr"); ????????}); ???????? ????????//阻止事件冒泡， e表示的就是這個(gè)window.event對(duì)象 ????????$("#td").click(function(e) { ????????????alert("td"); ????????????//組織事件繼續(xù)往上冒泡 ????????????e.stopPropagation(); ????????}); ????}); ? ????//JQuery事件2 ????$(function() { ????????$("a").click(function(e) { ????????????alert("link have stopped!"); ????????????//會(huì)取消超鏈接的跳轉(zhuǎn) ????????????e.preventDefault(); ????????}); ????}); ????//空數(shù)據(jù)禁止提交 ????$(function() { ????????$(":submit").click(function(e) { ????????????var len = $("#submitText").val().length; ????????????if (len <= 0) { ????????????????alert("用戶名不能為空！！！"); ????????????????//會(huì)阻止表單的提交 ????????????????e.preventDefault(); ????????????} ????????}); ????});
????//JQuery其他事件 ????$(function(){ ????????$("#p").click(function(e){ ????????????alert(e.pageX+" "+e.pageY); ????????????alert($(e.html())); ????????????alert($(e.target()).html()); ????????}); ????????//target指的就是冒泡的事件源 ????????//this指的是當(dāng)前觸發(fā)該事件 的那個(gè)對(duì)象 ????????$("#tr").click(function(e){ ????????????alert($(e.html())); ????????????alert($(e.target()).html()); ????????}); ????????//注意keycode和charcode， 小鍵盤(pán)的keyCode和主鍵盤(pán)的keyCode不一樣； charCode(兩者的ASCII碼是一樣的) ????}); ????//一次性事件 ????$(function(){ ????????$("#btnonce").one("click", function(){ ????????????alert("我是一個(gè)一次性事件"); ????????}); ????}); //事件的綁定 $("#btnonce").bind("click", function(){ ????????????alert("hahahhaha"); ????????}); |
第18課 JQuery鼠標(biāo)
| //JQuery鼠標(biāo)（跟著鼠標(biāo)飛的圖片） ????$(function(){ ????//注意body知識(shí)元素的顯示范圍， document是整個(gè)文檔 ????//$("body").mousemove(function(e){ ????????$(document).mousemove(function(e){ ????????????//要讓圖片移動(dòng)， 首先必須要把圖片設(shè)置為絕對(duì)定位 ????????????$("#img2").css("left", e.pageX).css("top", e.pageY); ????????}); ????}); ? <img src="images/star2.jpg" id="img2" style="position: absolute;"/> ? <script type="text/javascript"> ????var data = { ????????"images/0011.jpg" : [ "images/001.jpg", "風(fēng)景1", "風(fēng)景很美" ], ????????"images/0022.jpg" : [ "images/002.jpg", "風(fēng)景2", "風(fēng)景很美" ], ????????"images/0033.jpg" : [ "images/003.jpg", "風(fēng)景3", "風(fēng)景很美" ] ????}; ????//圖片解析 ????$(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]); ? ????????????//對(duì)每一個(gè)小圖片設(shè)置鼠標(biāo)監(jiān)聽(tīng)事件 ????????????smallImage.mouseover(function(e) { ????????????????//設(shè)置大圖的詳細(xì)信息 ????????????????$("#detailImg").attr("src", $(this).attr("imgpath")); ????????????????$("#detailHeight").text($(this).attr("imgname")); ????????????????$("#detailNmae").text($(this).attr("imgintro")); ????????????????//設(shè)置樣式 ????????????????$("#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> ? ????<div style="display: none; positon: absolute;" id="details"> ????????<img id="detailImg" src="" /> ????????<p id="detailHeight"></p> ????????<p id="detailNmae"></p> ????????<p> ????????????<input type="button" value="關(guān)閉" οnclick="hideDetails()" id="hideDetail"/> ????????</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"); ????????????//對(duì)每一個(gè)li標(biāo)簽設(shè)置監(jiān)聽(tīng)事件 ????????????$(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課 動(dòng)畫(huà)及QQ風(fēng)格空間案例
|
? ????//制作QQ滾動(dòng)版界面 ????$(function() { ????????//給偶數(shù)行添加body這種樣式 ????????$("#qq li:odd").addClass("body"); ????????//奇數(shù)行添加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"); ????????????????}); ????????//剛進(jìn)來(lái)時(shí)候的效果【在這里可以模擬點(diǎn)擊元素】 ????????$("#qq li:first").click(); ????}); ? ? 【易錯(cuò)點(diǎn)】 ? ????//動(dòng)態(tài)創(chuàng)建元素易錯(cuò)點(diǎn) ????$(function(){ ????????var link = $("<a href='http://www.baidu.com' id='link1'>百度</a>"); ????????//只有append之后才會(huì)放入該超鏈接到界面上面 ????????$("body").append(link); ????????//$("#link1").text("Google")必須放在append（創(chuàng)建到界面上以后， 我才可以去操作這個(gè)） ????????$("#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; } ? /* 思路： 主要是看有沒(méi)有l(wèi)ist這個(gè)class類， 如果有， 就顯示； 沒(méi)有就關(guān)閉 */ #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"); ????????????//根據(jù)一級(jí)菜單是否含有l(wèi)ist這個(gè)類， 來(lái)控制顯示和隱藏 ????????????//alert($(this).hasClass("list")); ????????????if ($(this).hasClass("list")) { ????????????????//刪除自己的類 ????????????????$(this).removeClass("list"); ????????????????//給同級(jí)的增加class ????????????????$(this).siblings().addClass("list"); ????????????} else { ????????????????$(this).addClass("list"); ????????????} ????????}); ????}); </script> </head> ? <body> ????<ul id="nav"> ????????<li class="list"><span class="open">國(guó)內(nèi)事件</span> ????????????<ul class="sub"> ????????????????<li>11111</li> ????????????????<li>11111</li> ????????????????<li>11111</li> ????????????</ul></li> ????????<li class="list"><span class="open">國(guó)外事件</span> ????????????<ul class="sub"> ????????????????<li>11111</li> ????????????????<li>11111</li> ????????????????<li>11111</li> ????????????</ul></li> ????????<li class="list"><span class="open">其他事件</span> ????????????<ul class="sub"> ????????????????<li>11111</li> ????????????????<li>11111</li> ????????????????<li>11111</li> ????????????</ul></li> ????</ul> </body> </html> |
第20課 利用JQuery操作Cookie
|
Cookie是存儲(chǔ)在瀏覽器中的數(shù)據(jù)
????//JQuery cookie的使用 ????//實(shí)現(xiàn)點(diǎn)擊登錄按鈕后利用cookie記住用戶名的功能 ????$(function() { ????????//alert("Cookie: "+$.cookie("用戶名")); ????????//寫(xiě)入數(shù)據(jù)到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()); ????????????????//同時(shí)也可以設(shè)定網(wǎng)站cookie的保存時(shí)間 ????????????????alert("cookie write to file succeed!!!"); ????????????} ? ????????}); ????}); ? ? ????//自定義網(wǎng)站的背景色 ????$(function() { ????????//先從cookie中取出 ????????var color = $.cookie("color"); ????????//alert(color); ????????$("#red").click(function() { ? ????????????$("body").css("background", "red"); ????????????//開(kāi)始寫(xiě)入cookie ????????????$.cookie("color", "red"); ? ????????}); ????????$("#green").click(function() { ? ????????????$("body").css("background", "green"); ????????????//開(kāi)始寫(xiě)入cookie ????????????$.cookie("color", "green"); ? ????????}); ????????$("#yellow").click(function() { ? ????????????$("body").css("background", "yellow"); ????????????//開(kāi)始寫(xiě)入cookie ????????????$.cookie("color", "yellow"); ? ????????}); ????????$("body").css("background", color); ????}); ???? ????//方案二 ????$(function(){ ????????$("#bgcolor td").click(function(){ ????????????//alert($(this).css("background-color")); //這里不需要在mouseover的時(shí)候再去設(shè)置背景色 ????????????$("body").css("background", $(this).css("background-color")).css("cursor", "pointer"); ????????}); ????}); ? ? //代碼優(yōu)化后 ????$(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")); ????????????????}); ????????//下次進(jìn)來(lái)的時(shí)候直接去cookie里面取出數(shù)據(jù) ????????var color = $.cookie("color"); ????????if (color) { ????????????//設(shè)定cookie的保存時(shí)間 ????????????$("body").css("background", color, { ????????????????expires : 10 ????????????}); ????????} ????}); |
第21課 JQuery插件
|
? ? ? |
總結(jié)
以上是生活随笔為你收集整理的JQuery课堂学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： STR树 —— R-tree的构建方案之
- 下一篇： 使用commons httpclient