本文详细介绍了jQuery的基础概念，包括其轻量级特性、选择器的使用、事件处理及DOM操作，深入探讨了jQuery插件机制与AJAX技术，同时提供了多个实践案例，帮助读者快速掌握jQuery并应用于网页开发。
1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”
2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3. hello jQuery
3.1 导入js库（<script type="text/javascript" src=""></script>）
3.2 $(fn)做为程序入口
(fn)、(fn)、(fn)、(document).ready(fn)与window.onload的区别？
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 导入js库 -->
<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)与window.onload的区别？ */
$(function() {
alert("hello wupeng1");
})
$(document).ready(function() {
alert("hello wupeng2");
})
window.onload=(function() {
alert("hello wupeng3");
})
/* 结论：$(fn)、$(document).ready(fn)是等价的 那个在前面那个先执行
* （jsp的dom树结构加载完毕即刻调用方法）
*/
/* window.onload最后执行（jsp的dom树加载完，css、js等静态资源加载完毕执行）*/
</script>
</head>
<body>
</body>
</html>
结论：(fn)、(fn)、(fn)、(document).ready(fn)是等价的 那个在前面那个先执行（jsp的dom树结构加载完毕即刻调用方法）
window.onload最后执行（jsp的dom树加载完，css、js等静态资源加载完毕执行）
4. jQuery三种工厂方法
标签选择器
//标签选择器，利用a标签获取jquert实例
/*$("a").click(function() {
alert("123")
});*/
ID选择器
//id选择器，利用id=a1获取jquert实例
/*$("#a1").click(function () {
alert("a1");
});*/
类选择器
//类选择器
/* $(".c1").click(function () {
alert("c1");
}); */
包含选择器：E1 E2
// 包含选择器：E1 E2
/* $("p a").click(function () {
alert("123");
}); */
组合选择器：E1,E2,E3
//组合选择器：E1,E2,E3
/* $("a,span").click(function () {
alert("123");
}); */
自定义选择器：:exp
//讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
//自定义选择器：:exp
$("a","div").click(function () {
alert("123");
});
4.2 jQuery(html)
<script type="text/javascript">
$(function () {
$(":input[name='name1']").click(function () {
$("#selId1").append("<option value='1'>湖南</option>")
});
$(":input[name='name2']").click(function () {
$("<option value='1'>长沙</option>").appendTo("#selId2");
});
})
</script>
4.3 jQuery(element)
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
var $h1=$("#h1");
alert($h1.val);
//jqery对象转js对象
var h1=$h1[0];
alert(h1.value);
var h2 = document.getElementById("#h2");
alert($h2.value);
//js对象转jqery对象
$h2=$(h2);
alert($h2.val());
5. jQuery程序的入口
$(document).ready(fn)
$(function () {
alert("hello jquery");
})
$(document).ready(function () {
alert("hello jquery");
})
window.onload = function(){
alert("hello jquery");
}
6. this指针的作用
6.1 事件源（获取当前按钮的按钮值）
<script type="text/javascript">
$(function () {
$(":input").click(function () {
//this指的就是事件源
alert(this.value);
})
})
</script>
6.2 当前元素（点击按钮，获取所有a标签的值）
$(function () {
$(":input").click(function () {
alert(this.value);
// 遍历所有的a标签
$("a").each(function(index,item) {
alert(index+","+$(this).html()+","+$(item).html());
})
})
7、使用jquery动态给table添加样式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.fen {
background: pink;
}
.yello {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
</style>
<script type="text/javascript">
$(function () {
$("table tr:eq(0)").addClass("green");
$("table tr:gt(0)").addClass("fen");
$("table tr:gt(0)").hover(function(){
$(this).removeClass().addClass("fen");
},function(){
$(this).removeClass().addClass("hui");
});
});
</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>
二、jQuery插件
1. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式
2.1 对象
{sid:‘s01’,sname:‘zs’}
2.2 列表/数组
[1,3,4,5]
2.3 混合模式
{id:3,hobby:[‘a’,‘b’,‘c’]}
<script type="text/javascript">
$(function () {
// json对象的字符串体现形式
var jsonObj1={sid:'s001',sname:'zhangsan'}
// 控制台里看json对象属性
console.log(jsonObj1);
// json数组的字符串体现形式
var jsonArray=[1,2,3,4];
console.log(jsonArray);
// json混合模式 的字符串体现形式
var jons={id:3,hobby:['a','b','c']}
console.log(jons)
})
</script>
2. .extend和.extend和.extend和.fn.extend
2.1 $.extend：对象的扩展(或继承)
//用后面对象的扩充前面的对象
var jsonObj2={};
$.extend(jsonObj2,jsonObj1)
console.log(jsonObj2);
//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象覆盖，如果后面对面对象有新的属性，就会继续扩充
var jsonObj2={};
$.extend(jsonObj2,jsonObj1,jsonObj3)
console.log(jsonObj2);
2.2 $.fn.extend
$.extend({
hello:function(){
alert("无比");
}
})
$.hello();
// $.fn.extend是用来扩充实例的属性或者方法所用
$.fn.extend({
sayhello:function(){
alert("无比");
}
})
$("#yellow").sayhello(){
alert("yellow");
}
$.sayhello();
4. jQuery插件开发实例（demo7.jsp demo8.jsp demo9.jsp）
$(function(){
var defaults={
head:'green',
out:'hui',
over:'blue'
}
$.fn.extend({
//使用retrun的原因是让该实例方法支持链编程，好比Stringbuffer
bgColor:function(option){
$.extend(defaults,option);
// 这里的this指的是插件本身
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);
});
});
}
});
});
<script type="text/javascript">
$(function () {
$("table").bgColor({
head:'blue',
out:'green',
over:'green'
})
})
</script>
三 ajax
1. jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));
2.1 JavaBean/Map
Student stu=new Student("s001","zhangsan");
ObjectMapper mapper=new ObjectMapper();
System.out.println(mapper.writeValueAsString(stu));
2.2 数组/List/Set
Student stu1=new Student("s002","李四");
List<Student> list=new ArrayList<>();
list.add(stu1);
list.add(stu);
System.out.println(mapper.writeValueAsString(list));
2.3 类里嵌类
混合模式
Map<String,Object> map=new HashMap<>();
map.put("total", 2);
map.put("stus",list);
System.out.println(mapper.writeValueAsString(map));
3. java->json死循环
忽略双向关联的一个方向即可
@JsonIgnore/程序控制
package com.houyitao;
import java.util.HashSet;
import java.util.Set;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
Student stu1 = new Student("s001", "aa");
Student stu2 = new Student("s002", "bb");
Teacher tea1 = new Teacher("t001", "cc", null);
Teacher tea2 = new Teacher("t002", "dd", null);
Set<Teacher> teas = new HashSet<>();
teas.add(tea1);
teas.add(tea2);
stu1.setTeas(teas);
Set<Student> stus = new HashSet<>();
stus.add(stu1);
stus.add(stu2);
tea1.setStus(stus);
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
}
}
扫一扫
4883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
