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() 方法



 


 

一、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(压缩过，没有注释和换行，建议开发时使用)。

java jquery progressbar 用法 java中jquery_javascript

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

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

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

 

java jquery progressbar 用法 java中jquery_html_02


 

三、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>