您的位置：首页 > Web前端 > JQuery

初始jQuery

2019-06-25 23:43 906 查看

什么是jQuery？

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。它是一个轻量级的javascript类库

注意：就一个类“jQuery”，简写“$”

jQuery优点：
1.总是面向集合
2.多行操作集于一行

jquery的导入

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

jquery的程序入口
有三个程序入口

$(function () {
alert("hooll,早上好");
})

$(document).ready(function () {
alert("hooll,中午好");
})

window.onload =function(){
alert("hooll,晚上好");
}

接下来我们说一下 (fn)、(fn)、(fn)、(document).ready(fn)与window.onload的区别？
结论就是： (fn)、(fn) 、(fn)、(document).ready(fn)这两个是平等的，哪个代码在前面就那个先执行
jsp的dom树结构加载完毕即可调用方法
window.onload最后执行
jsp的dom树加载完毕，css,js等静态资源加载完毕执行

jQuery三种工厂方法;
（1）第一种工厂方法
通过选择器来创建jQuery实例，然后去调用click方法
（2）第二种工厂方法
我们可以把html串转换为Jquery的实例
（3）第三种工厂方法就是：Jquery里面放js对象就可以了

jquery的简单选择器

第一种标签选择器
利用a标签获取jquery实例

$(function () {
/*第一种标签选择器 */
/*利用a标签获取jquery实例 */
$("a").click(function () {
alert("刘霞被翻牌子了");
}) ;
})

第二种 id选择器
利用id=a3获取jquery实例

/*第二种 id选择器 */
/*利用id=a3获取jquery实例 */
$("#a3").click(function () {
alert("曹广利被翻牌子了");
});

第三种类选择器

/* 第三  类选择器 */

$(".c1").click(function () {
alert("小二被翻牌子了");
});

第四种包含选择器

$("p a").click(function () {
alert("小四被翻牌子了");
});

第五种组合选择器

$("a,span").click(function () {
alert("小五被翻牌子了");
});

给一个按钮添加一个点击事件，事件为：给它下拉框增加一个值

<%@ 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="jquery-easyui-1.5.1/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script><script type="text/javascript">
/**
* 第二种工厂方法
我们可以把html串转换为Jquery的实例
*/
$(function () {
/*自定义选择器  */
//找到input标签，然后筛选出name=1的
$(":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"）
});

})
</script>
</head>
<body>
<select id="selId1">
<option value="-1">---请选择---</option>
</select>
<select id="selId2">
<option value="-1">---请选择---</option>
</select>
<input name="name1" value="add1" type="button">
<input name="name2" value="add2" type="button">

<input type="hidden" id="h1" value="h1">
<input type="hidden" id="h2" value="h2">
<input type="hidden" id="h3" value="h3">

结果如下：
首先他们都没有值

接下来我们添加两个值
add1是添加一个省，aad2添加一个市,这些值自己定义
接下来我们看一下效果：

jquery与Js的转换

Jquery对象转js对象

//获取Jquery对象
var $h1=$("#h1");
alert($h1.val());
//Jquery对象 转js对象
//var h1Node=$h1.get(0);//把看成集合
var h1Node=$h1[0];//还可以看成数组
alert(h1Node.value);

js对象转换成Jquery对象

var h2Node= document.getElementById("h2");
alert(h2Node.value);
//js对象转换成Jquery对象
//这里我们要用到第三种工厂方法
//第三种工厂方法就是：Jquery里面放js对象就可以了： jQuery(element)
//     element：js对象，表示一个html元素对象
var $h2Node=$(h2Node);
alert(h2Node.val());

jquery插件

json的三种格式：

第一种 json对象的字符串体现形式

var jsonObj1={
sid:'s001',
sname:'zhangsan'
};
//用控制台去调试
console(jsonobj1);

第二种 json数组的字符串体现形式

var jsonArray=[1,2,3,4]
console.log(jsonArray);

第三种 json混合模式的字符串体现形式

var jsons={id:3,hobby:['a','b','c']};
console.log(jsons);

extend的扩充

$.extend：是用来扩充jqyery类属性或者方法所用
下面的代码我都打了注释，方便理解：

var jsonObj2={};
//用后面的对象扩充第一个对象
//$.extend(jsonObj2,jsonObj1);
//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性会继续扩充
//它还支持多个
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);

扩充方法

$.extend({
hello:function(){
alert('刘霞带着钱向我走来了');
}
});

$.hello();

$.fn.extend 是用来扩充jqyery的实例属性或者方法所用

$.fn.extend({
sayHello:function(){
alert('走吧');
}
});
$("#yellow").sayHello();
alert("yellow");
})

extend的实列

$(function() {
//	原生态写法
//给默认值
$("table[id='t1'] tr:eq(0)").addClass('green');
$("table[id='t1'] tr:gt(0)").addClass('blue');

//添加动态效果
$("table[id='t1'] tr:gt(0)").hover(function(){
$(this).removeClass().addClass('yello');
},function(){
$(this).removeClass().addClass('blue');
});

//给默认值
$("table[id='t2'] tr:eq(0)").addClass('fen');
$("table[id='t2'] tr:gt(0)").addClass('hui');

//添加动态效果
$("table[id='t2'] tr:gt(0)").hover(function(){
$(this).removeClass().addClass('red');
},function(){
$(this).removeClass().addClass('hui');
});
})

ajax的转换

利用jQuery的ajax做一个省市县三级联动
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
思路：利用map集合存储数据，然后利用把数据以json格式传入前台，然后jsp页面利用ajax接收，转译Json格式，然后给市和县添加change事件。

JsonBaseDao
我们写JsonBaseDao的好处就是不要建实体类，他操作的是Map集合,它支持多表连查

public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) {
return super.executeQuery(sql, pageBean, new Callbac<Map<String, Object>>() {
public List<Map<String, Object>> foreach(ResultSet rs) {
List<Map<String, Object>> list=new ArrayList<>();
//				获取源数据
ResultSetMetaData md = rs.getMetaData();
int count=md.getColumnCount();
Map<String, Object> map=null;
while(rs.next()) {
map=new HashMap<>();
for (int i = 1; i < count; i++) {
map.put( md.getColumnName(i), rs.getObject(i));
}
list.add(map);
}
return list;
}
});
}

RegionDao

public List<Map<String, Object>> list(Map<String, String[]> paramMap,PageBean pageBean){
String id = JsonUtils.getParamVal(paramMap, "ID");
String sql="select * from ch_region where 1=1";
if(StringUtils.isBlank(id)) {
sql+=" and parent_id=7459";
}
else {
sql+=" and parent_id="+id;
}
return super.executeQuery(sql, pageBean);
}

RegionServlet

public class RegionServlet extends HttpServlet {

private static final long serialVersionUID = 6826185684173095882L;
private RegionDao regionDao=new RegionDao();

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
ObjectMapper om=new ObjectMapper();

out.println(om.writeValueAsString(list).toString());
out.flush();
out.close();
}

}

jsp页面

<title>ajax实现省市县三级联动</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"/reg.do",
success:function(data){
for(index in data){
//把数据追加到后面
$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});

$("#province").change(function(){
$("option:gt(0)","#city").remove();//清空追加的值
$.ajax({
url:"/reg.do?ID="+this.value,//直接的id值
success:function(data){
for(index in data){
$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});
})

$("#city").change(function(){
$("option:gt(0)","#county").remove();//清空追加的值
$.ajax({
url:"/reg.do?ID="+this.value,//直接的id值
success:function(data){
for(index in data){
$("#county").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});
})
})
</script>
</head>
<body>
地址：&nbsp;&nbsp;
<select id="province">
<option selected="selected">---请选择省份---</option>
</select>
<select id="city">
<option sel
1bb8c
ected="selected">---请选择城市---</option>
</select>
<select id="county">
<option selected="selected">---请选择县区---</option>
</select>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航