當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery课堂学习笔记

發布時間：2023/12/31 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery课堂学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第1課 JQuery技術簡介

<%@ 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>

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

<!--

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

????-->

<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("文件加載完畢");

????}

????$(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中可以使用οnlοad=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中可以使用οnlοad=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>

????????????<td>姓名</td>

????????????<td>成績</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>相對定位</h2>

????<div style="border: 1px solid red">

????????<div id="div1">

????????????<ul>

????????????????<li>abcdefgh123456</li>

????????????</ul>

????????</div>

????</div>

????<div style="border: 1px solid blue">

????????<div id="div2">

????????????<ul>

????????????????<li>abcdefgh123456</li>

????????????</ul>

????????</div>

????</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");

????});

????<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");

????});

????//動態創建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>

????<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>動態創建Dom節點</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 class="testitem">aaaaa</li>

????</ul>

????<ul id="test2">

????????<li>bbbb</li>

????</ul>

????<input type="button" value="removeUL" id="remove" />

//實現點擊按鈕刪除指定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>

????<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練習題

//計算器

????$(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" />+

????<input type="text" id="text2" />

????<input type="button" value="=" id="eq">

????<input type="text" id="text3">

????<br>

????<input type="button" value="開始計算">

//不用問在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+"秒");

????????}

????}

????<textarea rows="20" cols="30"></textarea>

????<input type="button" id="btnReg" value="同意" />

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

????$(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>

????<table id="tbContent">

????????<tr>

????????????<td>匿名</td>

????????????<td>沙發</td>

????????</tr>

????</table>

????<input type="text" id="title" />

????<br />

????<textarea id="textbody" rows="30" cols="30"></textarea>

????<br />

????<input type="button" value="發表評論" id="btnPost" />

//文本框案例【如果文本框的內容為空就顯示為紅色，有內容就顯示為白色】

????$(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>");

????????});

????});

????<div style="border: 1px solid red; float: left;">

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

????????<br/>

????????<input type="button" value="標簽替換測試" id="labeltest"/>

????</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>

????<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="關閉" ο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");

????????????//對每一個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课堂学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： STR树 —— R-tree的构建方案之
下一篇：使用commons httpclient

编程问答

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