JQuery课堂学习笔记

2022-06-01 10:43:50

第1课 JQuery技术简介

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>

<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

JQuery课堂学习笔记

//这里面是一个匿名函数

$(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内置函数

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对象

JQuery课堂学习笔记

$(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课堂学习笔记

//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课堂学习笔记

//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课堂学习笔记

//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课堂学习笔记

//JQuery的隐式迭代，不会报错（让页面尽可能少报错误！！）

$(function() {

//調錯技巧

var elements = $("#btn1");

if (elements.length <= 0) {

alert("没有找到指定的按钮！！！");

//退出该语句

return;

}

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

alert("鼠标移动上来了！");

});*/

else {

elements.mouseover(function() {

alert("鼠标移动上来了！");

});

}

});

第7课节点遍历

JQuery课堂学习笔记

//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课堂学习笔记

//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过滤选择器

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>

JQuery课堂学习笔记

//#表示按照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的使用

JQuery课堂学习笔记

//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表单选择器

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操作

JQuery课堂学习笔记

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

});

JQuery课堂学习笔记

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

JQuery课堂学习笔记

//实现点击按钮删除指定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练习题

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课节点操作

JQuery课堂学习笔记

//标签替换案例

$(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课样式操作

JQuery课堂学习笔记

/* //给页面中的所有便签使用该样式

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的操作

JQuery课堂学习笔记

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

});

JQuery课堂学习笔记

//全选，不选，反选

$(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课堂学习笔记

//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课堂学习笔记

//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风格空间案例

JQuery课堂学习笔记

//制作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

JQuery课堂学习笔记

Cookie是存储在浏览器中的数据

JQuery课堂学习笔记

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