什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”
jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
怎么使用jQuery
1 导入js库（）
2 $(fn)做为程序入口
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
/* $(fn)、$(document).ready(fn)与indow.onload的区别？
* 项目维护时候需要用到
*/
$(function(){
alert("hello jquery1");
})
$(document).ready(function(){
alert("hello jquery2");
})
window.onload = function(){
alert("hello jquery3");
}
/* 结论： $(fn)、$(document).ready(fn)是等价的，哪个代码在前面哪个就先执行
jsp的dom树结构加载完毕即刻调用方法
indow.onload最后执行
jsp的dom树加载完，css、js等静态资源加载完毕执行*/
</script>
jQuery三种工厂方法
1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt
注1：选择器：css选择器 、标签选择器 ID选择器 类选择器
包含选择器：E1 E2 组合选择器：E1,E2,E3
自定义选择器：:exp
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//利用a标签获取jquery实例
/* $("a").click(function(){
alert("被翻牌子了");
}); */
//利用id=3标签获取jquery实例
/* $("#a3").click(function(){
alert("被翻牌子了");
}); */
//利用class=c1标签获取jquery实例
/* $(".c1").click(function(){
alert("被翻牌子了");
}); */
//利用p里面包含a标签获取jquery实例
/* $("p a").click(function(){
alert("被翻牌子了");
}); */
//组合标签
/* $("a,span").click(function(){
alert("被翻牌子了");
}); */
//讲解地二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加点击事件）
//如果第二个参数没有填写，那么默认是document，就是在整个jsp页面去找。
$("a","div").click(function(){
alert("被翻牌子了");
});
})
</script>
2 jQuery(html) （demo3.jsp）
html：基于html的一个字符串
3 jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//自定义选择器 []筛选
$(":input[name='name1']").click(function(){
//在id=selId1的select的jquery实例上追加"<option value='1'>湖南省</option>"的html jquery实例
$("#selId1").append("<option value='1'>湖南省</option>");
});
$(":input[name='name2']").click(function(){
//将"<option value='1'>长沙</option>"的html jquery实例追加到id=selId2的select标签jquery实例中
$("<option value='1'>长沙</option>").appendTo("#selId2");
/* //获取jquery对象
var $h1 = $("#h1");
alert($h1.val());
//jquery对象转js对象
//var h1Node = $h1.get(0);//第一种，看成集合
var h1Node = $h1[0];//第二种，看成数组
alert(h1Node.value); */
var h2Node = document.getElementById("h2");
alert(h2Node.value);
//js对象转jquery对象
var $h2Node = $(h2Node);
alert($h2Node.val());
});
})
注1：$就是jQuery简写
5. jQuery程序的入口
$(document).ready(fn)
$(fn);
6. this指针的作用 （demo4.jsp）
1 事件源（获取当前按钮的按钮值）
2 当前元素（点击按钮，获取所有a标签的值）
3 插件一章再讲
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$(":input").click(function(){
//方法里面出现的this指的是事件源
alert(this.value);
$("a").each(function(index,item){
//遍历里面的this指的是当前元素
alert(index+","+$(this).html()+","+item);
});
});
})
</script>
</head>
<body>
<p>
<a id="a1" class="c1" href="#">点我1</a>
</p>
<p>
<a id="a2" class="c2" href="#">点我2</a>
</p>
<p>
<a id="a3" class="c3" href="#">点我3</a>
</p>
<div>
<a id="a4" class="c1" href="#">点我4</a>
</div>
<div>
<p>
<a id="a5" class="c1" href="#">点我5</a>
</p>
</div>
<input type="button" value="ok">
</body>
</html>
使用jquery动态给table添加样式
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.fen {
background: #ff66ff;
}
.yello {
background: #ffff66;
}
.red {
background: #ff3333;
}
</style>
<script type="text/javascript">
$(function(){
$("table tr:eq(0)").addClass("yello");
$("table tr:gt(0)").addClass("red");
})
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
</body>
</html>
1. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2.1 json的三种格式
1 对象 {sid:‘s01’,sname:‘zs’}
2 列表/数组 [1,3,4,5]
3 混合模式 {id:3,hobby:[‘a’,‘b’,‘c’]}
2.2 . e x t e n d 和 .extend和 .extend和.fn.extend
1 $.extend：对象的扩展(或继承)
$.extend(obj1,obj2,obj3[,…])
$.extend(obj1,obj2)
.
e
x
t
e
n
d
(
o
b
j
1
)
/
.extend(obj1)/
.extend(obj1)/.method=function(options){…};
2 $.fn.extend
.
f
n
.
e
x
t
e
n
d
(
o
b
j
1
)
/
/
.fn.extend(obj1)//
.fn.extend(obj1)//.fn.method=function(options){…};
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//json对象的字符串体现形式
var jsonObj1 = {
sid:'s001',
sname:'zhangsan'
};
/* alert(jsonObj1.sid); */
console.log(jsonObj1);
//json数组的字符串体现形式
var jsonArray1=[1,2,3,4,5];
console.log(jsonArray1);
//json混合模式的字符串体现形式
var jsons = {id:3,hobby:['a','b','c','d']};
console.log(jsons);
var jsonObj3 = {
sid:'s002',
sname:'lisi',
hobby:['a','b','c','d']
};
//$.extend是用来扩充jquery类属性或者方法所用
var jsonObj2 = {};
//用后来的对象扩充第一个对象
//$.extend(jsonObj2,jsonObj1);
//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充。
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
$.extend({
hello:function(){
alert('说早安');
}
})
$.hello();
//$.fn.extend是用来扩充jquery实例的属性或者方法所用
$.fn.extend({
sayHello:function(){
alert('我来了');
}
});
$("#yellow").sayHello();
alert("yellow");
})
</script>
3. jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中
4. jQuery插件开发实例
1 命名
jquery.xxx.js
2 扩展实例方法
3 如何面向集合
4 如何多行集于一行
5 命名参数的写法
$.extend(defaults,options);
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.over{
background: #ff66ff;
}
.out{
background: #ffff66;
}
.head{
background: #ff3333;
}
</style>
<script type="text/javascript">
$(function(){
$("table").each(function(){
//给默认值
$("tr:eq(0)",this).addClass('head');
$("tr:gt(0)",this).addClass('out');
//添加动态效果
$("tr:gt(0)",this).hover(function(){
$(this).removeClass().addClass('over');
},function(){
$(this).removeClass().addClass('out');
});
});
})
</script>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url(js/bgColor/bgColor.css);
</style>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("table").bgColor({
head : 'yellow',
out : 'red',
over :'blue'
});
})
</script>
</head>
<body>
<table id="t1" border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
<table id="t2" border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
</body>
自己写的css
@charset "UTF-8";
.fen {
background: #ff66ff;
}
.yellow {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
js
$(function(){
var defaults = {
head : 'fen',
out : 'yellow',
over :'red'
}
$.fn.extend({
//使用return的原因是让该实例方法支持链编程，好比stringbuffer
bgColor:function(option){
$.extend(defaults,option);
//这里的this指的是插件本身，可以看成一个jquery实例
return this.each(function(){
//this指的是当前元素
$("tr:eq(0)",this).addClass(defaults.head);
$("tr:gt(0)",this).addClass(defaults.out);
//添加动态效果
$("tr:gt(0)",this).hover(function(){
$(this).removeClass().addClass(defaults.over);
},function(){
$(this).removeClass().addClass(defaults.out);
});
});
}
});
})
写一个通用头部的类，在jsp是可以调用
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<link href="${pageContext.request.contextPath}/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet" >
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/table/js/jquery.table.js"></script>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
