JQuery中常见用途

最新推荐文章于 2024-06-25 10:05:02 发布

夹叶

最新推荐文章于 2024-06-25 10:05:02 发布

阅读量202

点赞数

文章标签： javascript js ajax html jquery

本文链接：https://blog.csdn.net/kuang6760599/article/details/104781478

版权

文档加载

在我们刚接触JQuery时，常常会接触到这种写法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入JQuery资源-->
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		
		<script type="text/javascript">
			$(function(){
				...//业务代码
			})
		</script>
	</head>
	<body>
	</body>
</html>

其中的这一部分

$(function(){
	...//业务代码
})

代表的意思为，在文档加载完以后执行其中的业务逻辑。
等同于

window.onload = function(){
	//业务逻辑
}

但是在使用window.onload时，存在一个现象如下

<script type="text/javascript">
		window.onload = Fun1;//不能使用Fun1()，这样就是调用了方法，然后传出来返回值
		window.onload = Fun2;
		function Fun1(){
			alert("Fun1");
		}
		function Fun2(){
			alert("Fun2");
		}
</script>

在以上代码中，运行后只会有一个弹出框，内容为Fun2,即意思为，只执行了window.onload = Fun2，但实际上，此处是因为在js中由于其语法特性，发生了覆盖现象。而在JQuery中则不会

获取对应节点以及节点的常用方法

	$('button')	//所有button
	$('#div1 span')	//div1下的span
	$('#div1 > span')	//所有div1下的子span
	$('#div1 + span')	//紧跟div1的span,即div1之后，同时在div1父元素下的所有span
	$('#div1 ~ span')	//所有div1以下所有span，哪怕不在div中
	$('div[id=d1]')	//所有div中属性id=10的
	id!=d1
	[id] 有id的
	[id^=d1] 以d1开头
	[id$=d1] 以d1结尾的
	[id*=d1] 包含d1的
	$('#') id查找
	$('.') class查找
	$('div[title]') 含有title属性的所有div
	$('div:first') div中的第一个
	$('div:last') div中的最后一个
	$('div:odd') //奇数元素
	$('div:even') //偶数元素
	$('div:hidden') //隐藏元素
	$('div:visible') //可见元素
	//.表示元素的对应方法
	.first() 第一个
	.last()	最后一个
	.eq(x) 第x个
	.parent() 最近的父元素
	.parents() 所有祖先元素
	.children() 最近的子元素
	.find('*') 筛选出来的子元素    *表示所有
	.siblings()  同级元素即在一个标签下
	.class() 修改样式
	.attr('align', 'right') 单参为获取，两参为修改
	.prop()	也可以获取或者修改    但其不能获取自定义属性的值，可以获取状态改变后的值，如checkBox勾选，而attr()不能获取状态改变后的值
	.addClass('样式')
	.removeClass('样式')
	.toggle()
	.fadeToggle("slow") 渐变   传入int表示时间
	.fadeTO('slow', 0.5)    0为不淡入，1为完全淡入
	.slideToggle() 下拉   里面传入参数表示时间
	.html('context') 		无参为返回其中的内容(包括子元素)，带标签 				有参往里面传文本
	.text('context')		无参为返回其中的内容(包括子元素)，不包括带标签 			有参往里面传文本
	.val()					无参为返回其中的value								有参设置value

AJAX

AJAX全称Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,通过AJAX便能做到异步的与服务器交换数据，比较常见的有，在搜索框中输入内容，哪怕内容没有输入完全，下方也会有相应的提示,这便是通过AJAX异步查询数据库数据，再将一些最常见的搜索结果传回来。

异步与同步

此两者的区别在于，客户端发送请求给服务器时，客户端是选择发送完请求给服务器以后是一直等待服务器的响应还是选择不等待，一直到服务器响应传回来再做出反应，这样便能提高效率，降低资源的占用。

JQuery中AJAX使用

//以下三种都可以
$.ajax({
	//请求方式
	type:"post",
	url:"url路径",
	//是否为异步
	async:true,
	dataType: "text",
	data: {"msg":"信息"},
	success: function(result){
		//成功以后的业务逻辑
	}
});
//get请求
$.get(
	"访问路径",//路径
	{"msg":"信息"},//传的数据
	function(){
		//业务逻辑
	},"text"//响应格式
)
//post请求
$.post(
	"访问路径",//路径
	{"msg":"信息"},//传的数据
	function(){
		//业务逻辑
	},"text"//响应格式
)

夹叶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery中常见用途

文档加载在我们刚接触JQuery时，常常会接触到这种写法。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <script type="text/javascrip...
复制链接

扫一扫