Java学习笔记-Day50 JQuery（一）

一、JQuery简介
二、JQuery的使用步骤
- 1、导入JQuery库
- 2、$(document).ready和window.onload
三、JQuery基础

一、JQuery简介

JQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。JQuery对JavaScript原生底层的代码进行了二次封装，是一个半成品。

JQuery 库包含以下特性：

HTML 元素选取。
HTML 元素操作。
CSS 操作。
HTML 事件函数。
JavaScript 特效和动画。
HTML DOM 遍历和修改。
AJAX 。
Utilities 。

JQuery 官网：http://jquery.com/

二、JQuery的使用步骤

（1）导入JQuery库。
（2）在$(document).ready(function(){ 代码 });（可简写为 $(function(){ 代码 });）函数中填写代码。

1、导入JQuery库

html文件想要使用JQuery，就要在html文件导入JQuery库。

（1）在线JQuery CDN（需要联网）。

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

（2）先将JQuery的js文件添加到项目中，然后在html文件中导入JQuery的js文件。

JQuery的js文件：① jquery-2.0.3.js(有注释和换行，建议学习时使用) 。② jquery-2.0.3.min.js(压缩过，没有注释和换行，建议开发时使用)。

在这里插入图片描述

	<script src="./js/jquery-2.0.3.js"></script>

注意：JQuery库不推荐最新的。

2、$(document).ready和window.onload

在这里插入图片描述

三、JQuery基础

1、JavaScript对象和JQuery对象

Javascript的对象为：document

JQuery的对象为：$(document)

（1）Javascript对象转换为JQuery对象。

	<script type="text/javascript">
		var obj = document.getElementById("mydiv");
		console.log($(obj).html());
	</script>

（2）JQuery对象转换为Javascript对象。

	<script type="text/javascript">
		var mydiv1= $("#mydiv").get[0];
		var content = mydiv1.innerHTML;
		console.log(content);
	</script>

2、JQuery选择器

通过选择器可以对 HTML 元素组或单个元素进行操作。

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	所有 class=“intro” 的元素v
element	$(“p”)	所有 `<p>` 元素
.class.class	$(".intro.demo")	所有 class=“intro” 且 class=“demo” 的元素
:first	$(“p:first”)	第一个 `<p>` 元素
:last	$(“p:last”)	最后一个 `<p>` 元素
:even	$(“tr:even”)	所有偶数 `<tr>` 元素
:odd	$(“tr:odd”)	所有奇数 `<tr>` 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素
:header	$(":header")	所有标题元素 `<h1> - <h6>`
:animated		所有动画元素
:contains(text)	$(":contains(‘W3School’)")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的 `<p>` 元素
:visible	$(“table:visible”)	所有可见的表格
s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素
[attribute]	`$("[href]"`)	所有带有 href 属性的元素
[attribute=value]	`$("[href='#']"`)	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	`$("[href!='#']"`)	所有 href 属性的值不等于 “#” 的元素
[attribute$=value]	`$("[href$='.jpg']"`)	所有 href 属性的值包含以 “.jpg” 结尾的元素
:input	$(":input")	所有元素
:text	$(":text")	所有 type=“text” 的 `<input>` 元素
:password	$(":password")	所有 type=“password” 的 `<input>` 元素
:radio	$(":radio")	所有 type=“radio” 的 `<input>` 元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的 `<input>` 元素
:submit	$(":submit")	所有 type=“submit” 的 `<input>` 元素
:reset	$(":reset")	所有 type=“reset” 的 `<input>` 元素
:button	$(":button")	所有 type=“button” 的 `<input>` 元素
:image	$(":image")	所有 type=“image” 的 `<input>` 元素
:file	$(":file")	所有 type=“file” 的 `<input>` 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

2.1、ID选择器

ID选择器选取带有唯一的指定 id 的元素。id 引用 HTML 元素的 id 属性。相同的 id 值只能在文档中使用一次。

语法：$(#id)

参数	描述
id	必需。规定要选择的元素的 id。 id 选择器使用 HTML 元素的 id 属性。

例如，选取 id=“choose” 的元素：$(#choose)

2.2、类选择器

类选择器选取带有指定 class 的元素。class 引用 HTML 元素的 class 属性。与 id 选择器不同，class 选择器常用于多个元素。这样就可以为带有相同 class 的任何 HTML 元素设置特定的样式。

语法：$(.class)

参数	描述
class	必需。规定要选取的元素的 class。 class 选择器使用 HTML 元素的 class 属性。

例如，选取 class=“intro” 的元素：$(.intro)

2.3、元素标签选择器

元素标签选择器选取带有指定标签名的元素。标签名引用 HTML 标签的 < 与 > 之间的文本。

语法：$(tagname)

参数	描述
tagname	必需。规定要选取的元素的名称。

例如，选择所有的 <p> 元素：$(p)

2.4、过滤选择器

选择器	实例	选取
:first	$(“p:first”)	第一个 `<p>` 元素
:last	$(“p:last”)	最后一个 `<p>` 元素
:even	$(“tr:even”)	所有偶数 `<tr>` 元素
:odd	$(“tr:odd”)	所有奇数 `<tr>` 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素
:header	$(":header")	所有标题元素 `<h1> - <h6>`
:animated		所有动画元素
:contains(text)	$(":contains(‘W3School’)")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的 `<p>` 元素
:visible	$(“table:visible”)	所有可见的表格
:input	$(":input")	所有元素
:text	$(":text")	所有 type=“text” 的 `<input>` 元素
:password	$(":password")	所有 type=“password” 的 `<input>` 元素
:radio	$(":radio")	所有 type=“radio” 的 `<input>` 元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的 `<input>` 元素
:submit	$(":submit")	所有 type=“submit” 的 `<input>` 元素
:reset	$(":reset")	所有 type=“reset” 的 `<input>` 元素
:button	$(":button")	所有 type=“button” 的 `<input>` 元素
:image	$(":image")	所有 type=“image” 的 `<input>` 元素
:file	$(":file")	所有 type=“file” 的 `<input>` 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

2.5、层级选择器

（1）选择器选择器

	//改变body标签中所有div标签的背景色为blue
	$("body div").css("background", "blue");

（2）选择器>选择器

	//改变body标签中直接子标签div的背景色为green
	$("body>div").css("background","green");

（3）选择器+选择器

	//改变id为one的下一个<div>的背景色为red
	$("#one+div").css("background","red");

（4）选择器~选择器

	//改变id为two的元素后面的所有兄弟div标签的背景色为yellow
	$("#two~div").css("background", "yellow");

（5）选择器.siblings方法

	//改变id为two的元素的所有兄弟div标签的背景色为yellow
	//和自己同级的元素,包括前面的和后面的	
	$("#two").siblings("div").css("background","yellow");

2.6、获取值的方法

JQuery语法：对象.方法(回调函数);

（1）在JQuery中，JavaScript对象的innerHTML属性变成了JQuery对象的html()方法。

操作	JavaScript	JQuery
html的赋值(`<div> </div>`)	div对象.innerHTML = “”;	`$(“div”).html(“”);`
html的取值(`<div> </div>`)	var 变量=div对象.innerHTML;	var 变量=`$(“div”).html();`

	$("#mydiv").html("html的内容");//赋值
	console.log($("#mydiv").html());//取值

（2）在JQuery中，JavaScript对象的innerText属性变成了JQuery对象的text()方法。

操作	JavaScript	JQuery
文本的赋值 (`<p>文本 </p>`)	P对象.innerText = “值” ;	`$(“p”).text(“值”)`;
文本的取值 (`<p>文本 </p>`)	Var 变量=P对象.innerText;	Var 变量 = `$(“p”).text();`

	$("#mydiv").text("文本内容");
	console.log($("#mydiv").text());//取值

（3）在JQuery中，JavaScript对象的value属性变成了JQuery对象的val()方法。

操作	JavaScript	JQuery
取值(value)	var v=Document.geElementById(“input”).value;	var v=`$(“input”).val();` //此时是一个方法
赋值(value)	document.geElementById(“input”).value=”值”;	`$(“input”).val(“值”);` //赋值写在()内部

（4）在JQuery中，JavaScript对象的onclick属性变成JQuery对象的click()方法。

	$("#btn").click(function(){
    
    
		console.log("鼠标点击");
	});

（5）可以通过JQuery对象的append向标签中添加html代码。

	$("#mydiv").append("<p>添加html内容</p>");

（6）在JQuery中，JavaScript对象的style属性变成JQuery对象的css(“属性”,“值”)方法。

	$("#mydiv").css("background", "blue");

2.7、each遍历

（1）$(“对象”).each(funnction(){ 代码 });

语法：$(selector).each(function(index,element))

参数	描述
function(index,element)	必需。为每个匹配元素规定运行的函数。
index	选择器的 index 位置
element	当前的元素（也可使用 “this” 选择器）

	$("li").each(function(index,element){
    
    
		console.log($(element).text());
	});
	//element可用this代替
	$("li").each(function(index,element){
    
    
		console.log($(this).text());
	});

（2）$.each(数组名或对象,函数(){ 代码 });

	$.each($("li"),function(){
    
    
		console.log($(this).text());
	});

（3）$.each(数组名或对象,函数(索引){ 代码 });

	$.each($("li"),function(index){
    
    
		console.log($(this).text()+","+index);
	});

（4）$.each(数组名或对象,函数(索引,对象){ 代码 });

	$.each($("li"),function(index,obj){
    
    
		console.log($(this).text()+","+index+","+obj.innerText);
	});

2.8、使用JQuery完成Ajax

2.8.1、get() 方法

get() 方法通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

语法：$(selector).get(url,data,success(response,status,xhr),dataType)

参数：

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。

额外的参数：

参数	描述
response	包含来自请求的结果数据
status	包含请求的状态
xhr	包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型：“xml”、“html”、“text”、“script”、“json”、“jsonp”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#tab {
     
     
				width: 600px;
				text-align: center;
			}
		</style>
	</head>
	<body>


		<button type="button" id="btn">获取数据</button>
		<br>
		<div id="div1">
			<table id="tab" border="1px" cellspacing="0" cellpadding="20">
				<tr>
					<th>编号</th>
					<th>名字</th>
					<th>年龄</th>
					<th>邮箱</th>
				</tr>
			</table>
		</div>

		<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
     
     
				//按钮的单击事件
				$("#btn").click(function() {
     
     
					//$(selector).get(url,data,success(response,status,xhr),dataType)
					//参数 url地址,参数回调函数
					$.get("http://rap2api.taobao.org/app/mock/238982/api/students", function(res) {
     
     
						$.each(res.students, function(index, ele) {
     
     
							console.log(index + "," + ele.name);
							//遍历一次就加一行数据
							$("#tab").append(
								`<tr>
						<td>${
       
       ele.id}</td>
						<td>${
       
       ele.name}</td>
						<td>${
       
       ele.age}</td>
						<td>${
       
       ele.email}</td>
					</tr><br/>`
							);
						})
					});
				});
			});
		</script>
	</body>
</html>

Java学习笔记-Day50 JQuery（一）

Java学习笔记-Day50 JQuery（一）

一、JQuery简介

二、JQuery的使用步骤

1、导入JQuery库

2、$(document).ready和window.onload

三、JQuery基础

1、JavaScript对象和JQuery对象

2、JQuery选择器

2.1、ID选择器

2.2、类选择器

2.3、元素标签选择器

2.4、过滤选择器

2.5、层级选择器

2.6、获取值的方法

2.7、each遍历

2.8、使用JQuery完成Ajax

2.8.1、get() 方法

猜你喜欢