jQuery概述

最新推荐文章于 2024-05-05 23:56:15 发布

wangjinyong

最新推荐文章于 2024-05-05 23:56:15 发布

阅读量57

点赞数

分类专栏： jQuery 文章标签： jQuery JavaScript CSS 编程 ViewUI

本文链接：https://blog.csdn.net/wangjinyong/article/details/83879806

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery 官方网站：www.jquery.com

国内jQuery网站：www.jquery.org.cn www.cnjquery.com

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
jQuery 很容易学习。

使用jQuery首先要导入jQuery库文件：

<script type="text/javascript" src="jquery-1.5.1.js"></script>

$代表jQuery对象本身，所以所有jQuery的对象和方法都在$里。

主要是看$的参数是什么，就是操作什么。（重点）

DOM对象转换为jQuery对象：

$(document);

例如：

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		alert("ok");
	})
</script>

第三行$(document).ready()相当于

var s = $(document);

s.ready();

ready()方法的作用是当页面中的dom加载完毕后执行参数中的函数。

把页面上标签为a的元素转化为jQuery对象：

$("a");

例如：

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("a").click(function(){
			alert("-----");
		});
	})
</script>
<body>
	<a href="#">click me</a>
</body>

click()方法是jQuery里定义的方法。

获得界面中id=myId的标签：

$("#myId");//一定要有井号

Dom对象和jQuery对象的相互转化（重点）：

Dom对象转化为jQuery对象的好处是jQuery提供了大量的方法。

使用jquery改变标签id=hello的css属性：

$(#hello).css("color","red");

二、jQuery API

1、ready(function(){});：当xxx加载完毕的时候调用ready参数里的函数。

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			alert('jquery');
		});
	</script>
</head>

上面语句的作用是：当页面加载完毕后，执行alert操作。

2、click(function(){});：jquery里响应鼠标点击事件。

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#submitButton").click(function(){
				alert('点击了按钮');
			});
		});
		
	</script>
</head>
<body>
	<input type="button" id="submitButton" value="提交"/>
</body>

上面语句的功能是当页面加载完毕后，点击按钮的时候 jquery使用了id选择器调用click方法，执行alert操作。

3、keyup(function(){});：jquery里响应键盘按键弹起的事件。

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#userNameText").keyup(function(){
				alert('文本框里输入了内容');
			});
		});
	</script>
</head>
<body>
	<input type="text" id="userNameText"/>
</body>

上面语句的功能是当页面加载完毕后，输入框里没一次输入内容的时候 jquery都会使用id选择器调用keyup方法，执行alert操作。

4、val()：jquery获得元素值的方法。

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#submitButton").click(function(){
				var userName = $("#userNameText").val();
				alert('点击了按钮'+userName);
			});
		});
	</script>
</head>
<body>
	<input type="text" id="userNameText"/>
	<input type="button" id="submitButton" value="提交"/>
</body>

上面语句的功能是当页面加载完毕后，当点击提交按钮的时候 jquery会根据id选择器调用val()方法得到值，执行alert操作。

5、get()：请求服务器，使用get方式，包括三个参数。

第一个参数：请求服务器的url，是一个字符串类型。

第二个参数：传递给服务器的参数，是一个Map类型。

第三个参数：回调函数，即：当服务器处理完毕之后返回给浏览器的时候，所要调用的方法。

例子见6.

6、html()：jquery里填充相应元素内容的方法。

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#submitButton").click(function(){
				alert('点击了按钮');
				//1.获取文本框里的内容
				var userName = $("#userNameText").val();
				//2.将这个内容发送到服务器
				var url="success.jsp";
				$.get(url,null,function(response){
					//3.接收服务器返回的数据，填充到div中
					$("#result").html(response);
				});
			});
			$("#userNameText").keyup(function(){
				alert('文本框里输入了内容');
			});
		});
	</script>
</head>
<body>
	<input type="text" id="userNameText"/>
	<input type="button" id="submitButton" value="提交"/><br>
	<div id="result"></div>
</body>

get()方法必须是直接由"$"点出来的。

回调函数的参数response是由服务器端返回的。

html()方法是jquery根据id选择器选择到的元素内容

7、addClass()、removeClass()：可以给某个节点添加或删除一个class。