Eclipse18:Jquery

最新推荐文章于 2022-08-02 14:47:15 发布

菜鸟界的菜鸟

最新推荐文章于 2022-08-02 14:47:15 发布

阅读量974

点赞数

分类专栏： Java 文章标签： jquery javascript ajax

Java 专栏收录该内容

37 篇文章 4 订阅

订阅专栏

一、jQuery概述

1.1 jQuery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

我们使用jquery可以更好完成以下操作

html文档操作，对于dom相关操作优化
jquery提供更加方便与丰富事件处理
jquery提供简单动画特效
jquery提供ajax交互

我们知道，要使用任何一个js框架，都是需要导入相关的js文件

关于其它常用js框架:

dojo 面向对象的js框架
extjs 学习成本比较高它提供大量的丰富组件，它效果展示非常好
prototype 早期比较流行js框架
angularJS 它是一个mvc js框架，它提供双向数据绑定。

jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构

1.2 jQuery快速入门

http://jquery.com/ jquery官网。jquery最新版本3.1.1 我们学习的版本1.8.3

对于jquery它从jquery2.x以后对浏览器支持不是特别好。在pc端开发使用比较主流的是1.x版本.

对于开发中，我们需要导入的是min.js文件，在学习阶段我们导入 jquery-1.8.3.js.

案例:页面加载完成后，弹出一个框显示hello jquery.

//原JS方式实现弹框，当多次弹窗时只有最后一次的生效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript">
//页面加载完成后，加载函数,原JS实现方式
	window.onload=function(){
		alert("hello");
	};
	window.onload=function(){
		alert("hello222");
	};
</script>
</head>
<body>

</body>
</html>

//Jquery实现方式:允许多次绑定，按序执行，先弹出hello111,再弹出hello222
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
//第一步：导入JS文件
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//第二步：完成操作：jQuery实现弹窗
    $(function(){
		alert("hello111");
	});
    $(function(){
		alert("hello222");
	});
</script>
</head>
<body>

</body>
</html>

注意:源生的js绑定，它只能绑定一次，而jquery允许绑定多次。

二、jQuery核心函数

2.1 jQuery(callback)

jQuery(callback)它是$(document).ready()的简写。

$(document).ready(function(){});页面加载完成后，指定的函数执行。

在jquery的源代码.window.jQuery=window.$=jQuery

2.2 jQuery(html,[ownerDocument])

jQuery(html代码)它的作用是将一个dom对象包装成jquery对象。

问题:什么是jquery对象?

我们的jquery中定义的方法与属性，只有jquery对象可以调用。

这个核心函数的作用是将一个dom对象包装成了jquery对象而它的第一个参数是html代码.

它的第二个参数是可选，它用于设置dom的相关属性.

2.3 jQuery([selector,[context]])

这个函数我们使用它的主要作用是用于在页面上查找，根据css选择器.

参数1就css选择器 jquery中提供了九种选择器

参数2 context 就是指定要查找的dom集.

2.4 关于jquery对象与dom对象转换

对于dom对象-----jquery对象 $(dom)

对于jquery对象----dom对象 jquery对象[0] 或 jquery.get(0)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//得到一个Dom对象
	var div = document.getElementById("d");
	//得到一个jQuery对象
	var jquery = $("#d");
	
	//互相转换
	//Dom转换为Jquery,加$符号
	$(div).html("hello");
	//Jquery转换为Dom,get(0)
	jquery.get(0).innerHTML="hello2";		
})
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>

三、jQuery选择器(重要)

3.1 基本选择器

#id 根据 id属性查找一个元素

Element 根据元素的标签名称查找元素

.class 根据元素的class属性查找元素

*匹配所有元素

Select1,selector2…将每一个选择器匹配到元素合并后一起返回

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//1.得到id为d1的元素并显示
var html = $("#d1").html();
alert(html);
//html()和text()的区别，当div中的内容为超链接时，html()显示的是完整内容，而text()只显示<a>内部的
//弹出<a>demo11</a>
var html1 = $("#d2").html();
alert(html1);
//弹出demo11
var html2= $("#d2").text();
alert(html2);
//2.将class=d元素中的内容后面添加欢迎你
//因为获取class=d2的元素有2个，所以要用each
$(".d3").each(function(){
	$(this).html($(this).html()+"欢迎你");
});
//3.得到id=d1这个div在整个页面上是第几个div。index()函数
//3.1 得到所有的div:$("div")
//3.2 得到id=d1的div:$("#d1")
var index = $("div").index($("#d1"));
alert(index);// 此处弹出0.index()，从0开始

//4.得到class=d3的元素有几个.size()函数
var size = $(".d3").size();
alert(size);

//5.将所有的class=d3或id=d1元素中的内容设置为java
$(".d3,#d1").html("java");

})
</script>
</head>
<body>
<div id="d1">demo</div> 
<div id="d2"><a>demo11</a></div> 
<div class="d3">demo</div> 
<div class="d3">demo1</div> 
<div>demo1</div>
<div>demo1</div>
</body>
</html>

方法总结：
a.   html ()方法，无参数代表获取元素中的html代码，如果有参数代表设置元素的html信息
b.   text()方法，无参数代表获取元素中的文本信息，如果有参数代表设置元素的文本信息
c.   each()方法，它的使用可以帮助我们遍历元素，可以传递一个函数 each(function(n)),n就代表的是每一个元素的序号，在函数中可以通过this来获取其dom对象
d.   index()方法，它可以判断元素的序号

e. size()方法，获得元素的个数

3.2 层级选择器

层级选择器是根据元素的关系来获取。关系是指父子关系，兄弟关系

1.	空格 得到元素下的所有子元素(包含直接子元素与间接子元素)
2.	大于号>  只获取直接的子元素
3.	加号+  只获取直接的一个兄弟元素
4.	波浪线~ 所有的后边的兄弟元素

练习：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.	获取id=d的所有<a>子元素
	alert($("#d a").size());
	//2.	获取id=d 的直接<a>子元素
	alert($("#d>a").size());
	//3.	获取id=d第一个<p>兄弟元素
	alert($("#d+p").html());
	//4.	获取id=d的所有<p>兄弟元素
	alert($("#d~p").size());
	//5.	将id=d下的所有子元素<a>的文字颜色设置成红色
	$("#d a").css("color","red");
	$("#d a").css({color:"red",background:"blue"});

})
</script>
</head>
<body>
<div id="d">
	<a>demo1</a>
	<p>
		<a>demo01</a>
	</p>
	<a>demo1</a>
</div> 
<p>demo2</p>
<p>demo3</p>
</body>
</html>

css()方法，它可以设置元素的样式,如果只有一个值 css(name,value),如果有多值,css({name:value,name:value})

3.3 过滤器

过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是”:”开头，除了属性过滤选择器。

3.3.1 基本过滤选择器

first:匹配到的第一个。

not:取反。

even：奇数个。

gt:大于；

header:取标题元素

练习：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.	设置表格第一行显示为红色。first
	$("tr:first").css("color","red");
	//2.	设置表格除了第一行外，显示为蓝色,not,gt
	$("tr:not(tr:first)").css("color","blue");//方法1
	$("tr:gt(0)").css("color","red");//方法2
	//3.	设置表格的奇数行和偶数行颜色不一致
	$("tr:odd").css("color","red");    //偶数行
	$("tr:even").css("color","red");
	//4.	设置页面上的标题为灰色，header找出的是h1,h2,...这类元素
	$(":header").css("color","gray");
})
</script>
</head>
<body>
<h1>商品信息</h1>
<table border='1'>
	<tr>
		<td>商品编号</td>
		<td>商品名称</td>
		<td>价格</td>
		<td>数量</td>
	</tr>
	<tr>
		<td>001</td>
		<td>电视机</td>
		<td>2100</td>
		<td>100</td>
	</tr>
	<tr>
		<td>002</td>
		<td>洗衣机</td>
		<td>1600</td>
		<td>200</td>
	</tr>
</table>
</body>
</html>

3.3.2 内容过滤选择器

内容过滤选择器它是根据元素内部文本内容进行选中。

contains():包含某项内容 empty:空的 has：有某个子元素 parent:含有子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.	设置含有文本内容JAVA的div字体颜色设置为红色
	$("div:contains('JAVA')").css("color","red");
	//2.	设置没有子元素的div文本内容为"这是一个空的div"
	$("div:empty").html("这是一个空的div");
	//3.	设置包含<a>元素的div字体颜色为黄色
	$("div:has(a)").css("color","yellow");    
	//4.	设置所有含有子元素的span颜色为蓝色
	$("span:parent").css("color","blue"); 
})
</script>
</head>
<body>
<div>demo1 JAVA</div>
<div></div>
<div>demo2</div>
<div>
	<a>demo01</a>
</div>
<div>
	demo02<a>JAVA</a>
</div>
<div>
	<span>demo3</span>
</div>
</body>
</html>

3.3.3 可见性过滤选择器

可见性过滤选择器它匹配display:none或表单中input hidden这样的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.	获取表单中隐藏域的值
	alert($("input:hidden").val());   //弹出10
	//2.	设置table中所有可见背景色为蓝色
	$("tr:visible").css("color","blue");
	//3.	获取table中所有隐藏tr中的文本值
	alert($("tr:hidden").text());
	//并将隐藏的tr显示出来
	$("tr:hidden").show();
	//原来显示的tr隐藏起来
	$("tr:visible").hide();
 

})
</script>
</head>
<body>
<form>
	<input type="text" name="email"><br>
	<input type="hidden" name="id" value="10">
</form>
<table>
	<tr style="display:none">
		<td>Value1</td>
	</tr>
	<tr>
		<td>Value2</td>
	</tr>
</table>
</body>
</html>

方法总结

val() 获取元素当前的值 value值
show() 让元素显示出来
hide() 让元素隐藏起来

3.3.4 属性过滤选择器

根据元素的属性来过滤

^=匹配开始

$=匹配结尾

*=匹配包含

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.	设置所有含有id属性的div字体颜色为红色
	$("div[id]").css("color","red");
	//2.	获取name=username的value值
	alert($("[name='username']").val());
	//3.	设置所有多选框被选中
	$("input[type='checkbox']").attr("checked",true);
	//4.	设置class包含demo的多选框被选中
	$("input[type='checkbox'][class*='demo']").attr("checked",true);//设置属性
	$("input[type='checkbox'][class='demo1']").attr("name");//获取属性
})
</script>
</head>
<body>
<div id="d">DIV</div>
<form>
	<input type="text" name="username" value="tom"><br>
	<input type="checkbox" name="id1" class="demo1" name="food" value="牛奶">米饭
	<input type="checkbox" name="id2" class="demo2" name="food" value="牛奶">牛奶
	<hr>
	<input type="checkbox" name="hobby" name="food" value="篮球">篮球
	<input type="checkbox" name="hobby" name="food" value="足球">足球
</form>
<span id="s">SPAN</span>
</body>
</html>

方法总结

attr()设置或返回被选元素的属性值。传一个参数时为获取值，传两个参数为设置值

3.3.5 子元素过滤选择器

根据子元素顺序来获取。
nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置也可以通过倍数来设置
first-child 获取第一个
last-child 获取最后一个
only-child 获取只有一个子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.	设置列表中第二个li字号为30
	$("ul li:nth-child(2)").css("font-size",30);
	//2.	设置列表中第一行字体为红色
	$("ul li:first-child").css("color","red");
	//3.	设置列表中的最后一行字体为蓝色
	$("ul li:last-child").css("color","blue");
	//4.	获取ul下只有一个li的信息
	alert($("ul li:only-child").html());
})
</script>
</head>
<body>
<ul>
	<li>JAVA</li>
	<li>IOS</li>
	<li>c++</li>
</ul>
<ul>
	<li>张三</li>
	<li>李四</li>
</ul>
<ul>
	<li>NOdeJs</li>
</ul>
</body>
</html>

3.3.6 表单过滤选择器

表单过滤选择器是用于选取表单中的元素

方法总结
1.	trim()它是去掉字符串左右空格
常用事件处理
2.	失去焦点事件 blur(function(){})
3.	click(function(){}) 点击事件
4.	submit() 表单提交

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.	当username与password失去焦点后，判断录入的数据不能为空
	$(":text,:password").blur(function(){
		if($(this).val().trim()==""){
			alert($(this).attr("name")+"不能为空！");
		}
	});
	//2.	对button设置点击事件，提交form表单
	$(":button").click(function(){
		$("form").submit();
	});
	
})
</script>
</head>
<body>
<form>
	USERNAME:<input type="text" name="username"><br>
	PASSWORD:<input type="password" name="password"><br>
	<input type="button" value="按钮">
</form>
</body>
</html>

3.3.7 表单对象属性过滤选择器

checked它是用于radio,checkbox 判断选中
selected它是用于select下拉框选中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.获取选中的性别信息
	$(":button").click(function(){
		alert($(":radio:checked").val());
	});
	//2.获取选中的爱好信息
	$(":button").click(function(){
		$(":checkbox:checked").each(function(){
			alert($(this).val());
		})
	});
	//3.获取选中的城市
	$(":button").click(function(){
		alert($("select option:selected").val());
	});
	

	
})
</script>
</head>
<body>
<form>
	性别:<input type="radio" name="sex" value="男">男
	<input type="radio" name="sex" value="女">女
	<hr>
	爱好:<input type="checkbox" name="hobby" class="demo1" value="篮球">篮球
	<input type="checkbox" name="hobby" class="demo2" value="排球">排球
	<input type="checkbox" name="hobby" class="demo3" value="足球">足球
	<input type="button" value="按钮">
	<hr>
	城市：<select>
		<option value="">--请选择--</option>
		<option value="北京">北京</option>
		<option value="上海">上海</option>
		<option value="广州">广州</option>
	</select>
	<br>
	<input type="button" value="打印">
</form>
</body>
</html>

我们在开发中，使用比较多的选择器有:
1.	基本选择器  class id  element
2.	层次选择器  父子关系  兄弟关系
3.	过滤选择器  属性过滤    基本过滤   内容过滤   关于表单过滤

四、jQuery DOM操作

4.1 文档处理

4.1.1 插入操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//内部插入
	//1.在select中开始添加一项<option value="深圳">深圳</option>
	$("#city").prepend($("<option value='深圳'>深圳</option>"));
	$("<option value='深圳'>深圳</option>").prependTo($("#city"));
	//2.在select中最后添加一项<option value="山西">山西</option>
	$("#city").apend($("<option value='山西'>山西</option>"));
	$("<option value='山西'>山西</option>").apendTo($("#city"));
	
	//外部插入
	//1.在select中开始添加一项<option value="深圳">深圳</option>
	$("#city option:first").before($("<option value='深圳'>深圳</option>"));
	$("<option value='深圳'>深圳</option>").insertBefore($("#city option:first"));
	//2.在select中最后添加一项<option value="山西">山西</option>
	$("#city option:first").after($("<option value='深圳'>深圳</option>"));
	$("<option value='深圳'>深圳</option>").insertAfter($("#city option:first"));
	
})
</script>
</head>
<body>
	<select id="city">
		<option value="">--请选择--</option>
		<option value="北京">北京</option>
		<option value="上海">上海</option>
		<option value="广州">广州</option>
	</select>
</body>
</html>

4.1.2 删除操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.empty代表的是将元素下的所有子元素删除
	$("#d1").empty();
	//2.remove与detach功能都是删除，区别是remove删除时连注册的事件也被删除
	$("#d1 p").empty();
	$("#d1 p").detach();
})
</script>
</head>
<body>
	<div id="d1">
		<p>pppp</p>
		<span>sssss</span>
	</div>
	<div id="d2"></div>
</body>
</html>

4.1.3 替换与克隆

替换：

克隆：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.得到div的id=d1的第一个p的克隆
	var cp = $("#d1 p:first").clone();
	var cp = $("#d1 p:first").clone(false,true);
	//clone的第一个参数代表的是事件是否会被克隆
	//clone的第二个参数代表的是子元素的事件是否会被克隆（注：父元素的事件克隆需要设置为true）
	//2.将id=d2的div的第二个span使用cp替换.下面两种效果相同
	$("#d2 span:last").replaceWith(cp);
	cp.replaceAll$("#d2 span:last");
})
</script>
</head>
<body>
	<div id="d1">
		<p>
			<a>p1</a>
		</p>
		<p>p2</p>
	</div>
	<div id="d2">
		<span>span1</span>
		<span>span2</span>
	</div>
</body>
</html>

4.1.4 总结

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	$(":button").click(function(){
		var tr=$("<tr></tr>");  //创建一个tr
		//创建四个td，向td中添加内容
		var td1 = $("<td></td>");
		td1.append($('#username').val());
		var td2 = $("<td></td>");
		td2.append($('#phone').val());
		var td3 = $("<td></td>");
		td3.append($('#email').val());
		//创建一个链接
		var a = $("<a href='javascript:void(0)'>删除</a>");
		var td4 = $("<td></td>");
		td4.append(a);
		//完成删除功能
		a.click(function(){
			$(this).parents("tr").remove();
		});
		//将td添加到tr中
		tr.append(td1).append(td2).append(td3).append(td4);
		//将tr添加到table中
		$("#tab").append(tr);	
		});
})
</script>
</head>
<body>
<table id="tab" border="1">
	<tr>
		<td>姓名</td>
		<td>电话</td>
		<td>邮箱</td>
		<td>删除</td>
	</tr>
</table>
<hr>
姓名：<input type="text" id="username">
电话：<input type="text" id="phone">
邮箱：<input type="text" id="email">
<input type="button" value="添加">
</body>
</html>

效果如下：

4.2 筛选操作

4.2.1 过滤

过滤操作它相当于是我们在jquery中使用的过滤选择器，
例如 eq可以根据序号来获取元素 first与last来获取第一个元素与最后一个元素

4.2.2 查找

是通过当前元素，获取祖先元素，父元素子元素等。
find方法，它可以直接来查找指定的元素

五、jQuery事件机制

5.1 事件介绍

Jquery中的事件与传统的javascript中事件区别:
	Jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数.

5.2 事件绑定

5.2.1传统的javascript中事件绑定操作（两种方式，推荐方式2）

5.2.2 Jquery事件绑定操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//方式一
	$(":button").click(function(){
		alert("hello");
	});
	//方式二：bind
	$(":button").bind("click",function(){
		alert("hello");
	});
	//解除绑定
	$(":button").unbind("click");
	//方式三:live
	$(":button").live("click",function(){
		alert("hello");
	});
	
	$(":button").die("click");
	//bind与live的区别：
	//bind只为存在的元素进行事件的绑定，live可以为不存在，后续通过新添加的元素绑定事件

})
</script>
</head>
<body>
<input type="button" value="添加">
</body>
</html>

5.3 一次性事件和自动触发

5.3.1 一次性事件

one()为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	$(":button").one("click",function(){
		alert("hello");
	});
//在开发中可以对我们的表单使用one一次性函数，避免表单重复提交
})
</script>
</head>
<body>
<input type="button" value="添加">
</body>
</html>

5.3.2 事件触发

trigger()在每一个匹配的元素上触发某类事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	$(":button").click(function(){
		alert("hello");
	});
	$(":button").bind("mouseover",function(){
		//事件触发
		$(this).trigger("click");
	});

})
</script>
</head>
<body>
<input type="button" value="添加">
</body>
</html>

5.4 事件切换

5.4.1 hover

这个操作它可以绑定两个函数，当触发mouseover(鼠标移到元素上)时第一个函数执行，当触发mouseout(鼠标移出元素)时第二个函数执行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//实现功能：鼠标在jquery介绍时，底下的介绍展示。鼠标离开时，底下的介绍隐藏
	//设置div隐藏
	$("div").hide();
	//h1添加hover事件
	$("h1").hover(function(){
		$("div").show();
	},function(){
		$("div").hide();
	});

})
</script>
</head>
<body>
	<h1>jquery介绍</h1>
	<div>jquery是一个简单、快速的JS框架</div>
</body>
</html>

5.4.2 toggle

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 [click 事件]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//点击后图片的切换
	$("img").toggle(function(){
		$("img").attr("src","壁纸.jpg");
	},function(){
		$("img").attr("src","wallhaven-zme3xj.jpg");
	})

})
</script>
</head>
<body>
	<img src="wallhaven-zme3xj.jpg" width="200" height="200">
</body>
</html>

六、jQueryAjax编程

6.1 jquery ajax开发介绍

ajax:Asynchronous Javascript And Xml（异步的JS和XML）

使用ajax可以实现页面的部分更新，服务器在响应的过程中还可以继续发请求，可以让用户的感觉更好更快。

1.$.ajax()它是jquery提供的最基本的ajax编程方式。它的功能比较强大，但是使用比较麻烦，一般不使用，它是将远程数据加载到XMLHttpRequest对象中。
2.load get post 它们简化了$.ajax操作，get post针对get与post请求的，它们是开发中使用的比较多。
3.getScript getJSON 它们是用于解决ajax跨域问题的

6.2 load（了解）

载入远程 HTML 文件代码并插入至 DOM 中

案例：实现一个用户名验证是否可以使用

菜鸟界的菜鸟

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Eclipse18:Jquery

一、简介jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互我们使用jquery可以更好完成以下操作html文档操作，对于dom相关操作优化 jquery提
复制链接

扫一扫