本文深入介绍JQuery的基础概念，包括其轻量级特性、优点如兼容性和链式语法，详细解析三种工厂方法及this指针的用法。同时，文章提供了丰富的实例，如动态给table添加样式、插件机制及AJAX实现的三级联动效果，帮助读者掌握JQuery的高级应用。
1.什么是JQuery？
Jquery是一个轻量级的Javascript类库，重量级：ext
2.jQuery的优点
2.1 兼容性 2.2 选择器（与CSS选择器语法相似）
2.3 面向集合（面向集合方式操作DOM元素）
2.4 链式语法
3.jQuery三种工厂方法
3.1 jQuery(exp[,context])
exp:选择器
context:上下文 容器/环境 默认：document
1）元素选择器
2）类选择器
3）ID选择器
4）组合选择器（E1，E2）
5）包含选择器（E1 E2）
6）属性选择器
3.2 jQuery(html)
html:基于html的一个字符串
3.3 jQuery(element)
element:js对象，表示一个html元素
4.this指针
4.1 this的用法
this:当前上下文DOM对象
$(this):当前上下文jQuery对象，可以调用jQuery的方法和属性
4.2 作用域:each
首先导入js文件
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
$(fn)、$(document).ready(fn)是等价的。那个代码在前面哪个先执行。
jsp的dom树结构加载完毕即刻调用方法，window.onload最后执行，jsp的dom树加载完,css,js等静态资源加载完毕执行
<%@ 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>
<script type="text/javascript">
/*
* $(fn)、$(document).ready(fn)与window.onload的区别？项目维护时用到
*/
window.onload=function(){
alert("3")
}
$(document).ready(function(){
alert("2")
})
$(function(){
alert("1");
})
</script>
</head>
<body>
</body>
</html>
jquery六大选择器
<%@ 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">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//利用a标签获取jquery实例
/* $("a").click(function(){
alert("被翻牌子了");
}); */
//利用ID=a3标签获取jquery实例
/* $("#a3").click(function(){
alert("被翻牌子了");
}); */
/* $(".c1").click(function(){
alert("被翻牌子了");
}); */
/* $("p a").click(function(){
alert("被翻牌子了");
}); */
/* $("a,span").click(function(){
alert("被翻牌子了");
}); */
//讲解第二个参数的作用(在DIV标签内部寻找到a标签，然后给找到的标签添加事件)
//如果第二个参数没有填写，那么默认是document
$("a","div").click(function(){
alert("被翻牌子了");
});
})
</script>
</head>
<body>
</body>
</html>
jquery对象转js对象，js对象转jquery对象 //jquery对象转js对象
var h1Node=$h1.get(0);
alert(h1Node.value); */
var h2Node=document.getElementById("h2");
alert(h2Node.value);
//js对象转jquery对象
$h2Node=$(h2Node);
alert(h2Node.val());
});
})
this指针
<script type="text/javascript">
$(function(){
$(":input").click(function(){
//指得是事件源
alert(this.value);
$("a").each(function(index,item){
//指得是当前元素
alert(index+","+$(this).html()+","+$(this).html());
});
});
})
</script>
使用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>
<style type="text/css">
.fen {
background: #ff66ff;
}
.yello {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
</style>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("table tr:eq(0)").addClass("yello");
$("table tr:gt(0)").addClass("red");
$("table tr:gt(0)").hover(function(){
$(this).removeClass().addClass("fen");
},function(){
$(this.removeClass().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插件
jquery的类方法跟类属性，跟类实例化
<%@ 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>
<script type="text/javascript">
$(function() {
//json对象的字符串体现形式
var jsonObj1 = {
sid:'s001',
sname:'zhangsan'
};
console.log(jsonObj1);
//json数组的字符串体现形式
var jsonArray1 = [1,3,4,5];
console.log(jsonArray1);
//json混合模式的字符串体现形式
var jsons = {id:3,hobby:['a','b','c']};
console.log(jsons);
var jsonObj3 = {
sid:'s001',
sname:'lisi',
hobby:['a','b','c']
};
//$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>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>
插件开发实例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);
});
});
}
});
})
css样式
.fen {
background: #ff66ff;
}
.yellow {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
使用jquery+ajas实现三级联动
jsp页面
<%@ 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>
<base href="${pageContext.request.contextPath }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
query($("#prov"),7459)
$("#prov").change(function(){
query($("#city"),$(this).val())
});
$("#city").change(function(){
query($("#town"),$(this).val())
})
$("#prov").change(function(){
query($("#town"),$(this).val())
})
});
function query(obj,pid){
$.ajax({
url:'RegionAction',
data:{"parent_id":pid},
dataType:'json',
type:'post',
success:function(data){
obj.find("option:not(:first)").remove();
$.each(data,function(idx,elem){
obj.append("<option value='"+elem.id+"'>"+elem.region_name+"</option>")
});
}
});
}
</script>
</head>
<body>
<select id="prov">
<option value="">请选择</option>
</select>
<select id="city">
<option value="">请选择</option>
</select>
<select id="town">
<option value="">请选择</option>
</select>
</body>
</html>
运行结果
扫一扫
4890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
