jQuery

jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

简述初识

jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。请注意,<script> 标签应该位于页面的 部分。

    <!-- 引入jQuery文件,文件可用网上资源(CDN)或者下载到本地 -->
<script type="text/javascript" src="jquery.js"></script>

谷歌CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

微软CDN:

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

基础 jQuery 实例

下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的

元素。

<html>

<!-- 点击按钮让p标签消失 -->
<head>
    <script type="text/javascript" src="../jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 选中 按钮,绑定点击事件函数
            $("button").click(function () {
                // 选中 p 标签,调用 hide() 函数
                $("p").hide();
            });
        });
    </script>
</head>

<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
</body>

</html>

jQuery语法:

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落 (标签选择器)

$(".test").hide() - 隐藏所有 class="test" 的所有元素 (类选择器,注意加引号)

$("#test").hide() - 隐藏所有 id="test" 的元素 (id选择器,注意加引号)

提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

jQuery选择器

jQuery选择器与CSS的选择器基本一致

注意:选择器表示时需要用引号表示,特别的 id 可以之间写在括号内或者用CSS选择表示(加引号)

//设有一个带有 <p id="id"></p>
$(id).aciton();
$("id").action();
语法 描述
$(this) 当前 HTML 元素
$("p") 所有

元素

$("p.intro") 所有 class="intro" 的

元素

$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个
    的第一个
  • 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的
元素中的所有 class="head" 的元素

jQuery事件

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

通常会把 jQuery 代码放到 部分的事件处理方法中:

常见事件:

$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 名称冲突:

jQuery 使用 $ 符号作为 jQuery 的简介方式

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
    //这里用将jQuery 用来替换 $ 符号
$.noConflict();   
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行!");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<button>测试 jQuery</button>
</body>
</html>

总结:

由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突,则重命名 jQuery 库

jQuery效果

隐藏、显示、切换,滑动,淡入淡出,以及动画,哇哦!

隐藏与显示

函数:

  • hide((speed,callback)) 隐藏
  • show((speed,callback)) 显示
  • toglgle((speed,callback)) 切换

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。(即回调函数)

注意:参数类型必须是字符串

淡入谈出:

fadeIn(speed,callback); // 淡入
fadeOut(speed,callback); // 淡出
fadeToggle(speed,callback);  //切换淡入淡出

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

Ajax

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTMLXHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。

Ajax如何工作:

image-20211224194617743

  1. 网页中发生一个事件(页面加载、按钮点击)
  2. 由 JavaScript 创建 XMLHttpRequest 对象
  3. XMLHttpRequest 对象向 web 服务器发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由 JavaScript 读取响应
  7. 由 JavaScript 执行正确的动作(比如更新页面)

样例:

html页面:

<!DOCTYPE html>
<html>
<body>
    
<div id="demo">
  <h2>让 AJAX 更改这段文本</h2>
  <button type="button" onclick="loadDoc()">更改文本</button>
    <!-- js点击事件触发函数 loadDoc() -->
</div>
    
</body>
</html> 

js代码:

Function loadDoc()
/* 定义函数 */
function loadDoc() {
  var xhttp = new XMLHttpRequest();   //创建响应对象
    /* 事件句柄事件绑定事件函数
    每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时,它也可能调用多次。
    readyState为http请求状态当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,
    直到接收到完整的 HTTP 响应,这个值增加到 4。
    */
  xhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {  //响应成功后
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
    //初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
  xhttp.open("GET", "ajax_info.txt", true);   
    //发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体
  xhttp.send();
} 

XMLHttpRequest

Ajax 的核心是 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同服务器交换数据。

所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分,而不需要重新加载整个页面。

创建XMLHttpRequest 对象
var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5, 老版本浏览器可能只支持ActiveX对象
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest 对象方法
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求 method:请求类型 GET 或 POST url:文件位置 async:true(异步)或 false(同步) user:可选的用户名称 psw:可选的密码
send() 将请求发送到服务器,用于 GET 请求
send(string) 将请求发送到服务器,用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对
GET 还是 POST?

GET 比 POST 更简单更快,可用于大多数情况下。不过,请在以下情况始终使用 POST:

  • 缓存文件不是选项(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 无大小限制)
  • 发送用户输入(可包含未知字符),POST 比 GET 更强大更安全
XMLHttpRequest 对象属性
属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态。 0:请求未初始化 1:服务器连接已建立 2:请求已收到 3:正在处理请求 4:请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText 返回状态文本(比如 "OK" 或 "Not Found")
onreadystatechange 属性

通过 XMLHttpRequest 对象,您可以定义当请求接收到应答时所执行的函数。

这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的:

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
使用回调函数

回调函数是一种作为参数被传递到另一个函数的函数

如果您的网站中有多个 AJAX 任务,那么您应该创建一个执行 XMLHttpRequest 对象的函数,以及一个供每个 AJAX 任务的回调函数

该函数应当包含 URL 以及当响应就绪时调用的函数。

loadDoc("url-1", myFunction1);   // (1)

loadDoc("url-2", myFunction2);


//声明函数,第一个参数是url ,第二个参数类型是函数(即回调函数)
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);   //使用自己(xhttp)作为参数传入下面的函数作为参数执行     
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {   // 回调函数1
  // action goes here
 } 
function myFunction2(xhttp) {    //回调函数2
  // action goes here
 } 
responseText 属性

responseText 属性以 JavaScript 字符串的形式返回服务器响应,因此您可以这样使用它:

document.getElementById("demo").innerHTML = xhttp.responseText;
responseXML 属性

XML HttpRequest 对象有一个內建的 XML 解析器

ResponseXML 属性以 XML DOM 对象返回服务器响应

使用此属性,您可以把响应解析为 XML DOM 对象:

Ajax 获取XML文件

AJAX 可用于同 XML 文件进行交互式通信。

实例:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">获取我的音乐列表</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);   //this 是指???  xhttp???
    }
  };
  xhttp.open("GET", "/demo/music_list.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;  //获得响应件对象
  var table="<tr><th>艺术家</th><th>曲目</th></tr>";
  var x = xmlDoc.getElementsByTagName("TRACK");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

Jquery封装好的Ajax

网络请求(get和post)基础知识:

在get请求中 , 请求的发送的数据和参数会直接暴露在url中 , 格式为: url?参数1=value&参数2value&参数3=value ,即用问号分隔url和参数列表, 参数列表中的多个参数用 & 分隔

如图所示:

image-20220316094227008

在百度搜索 “你好世界” ,观察url (即 : https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=你好世界), 可发现发送请求时携带了三个参数 (即 tn , ie , wd) ,他们的值分别为: monline_3_d , utf-8 , 你好世界

  • load() 方法

    语法:
    $(selector).load(URL,data,callback);  
    // 必需的 URL 参数规定您希望加载的 URL。
    // 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    // 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
    
  • get()方法

$.get(URL,callback);
// 必需的 URL 参数规定您希望请求的 URL。
// 可选的 callback 参数是请求成功后所执行的函数名。
//例子:
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
  • post方法
$.post(URL,data,callback);
//必需的 URL 参数规定您希望请求的 URL。
//可选的 data 参数规定连同请求发送的数据。
//可选的 callback 参数是请求成功后所执行的函数名。
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
可异步的Ajax方法:
jQuery.ajax([settings]) ; //其中settings是配置请求选项的键值对

setting参数:

  • url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

  • type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

  • async: 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

  • data:要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

  • dataType:要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:

    xml:返回XML文档,可用JQuery处理。

    html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。

    text:返回纯文本字符串。

    script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。

    json:返回JSON数据。

    jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。

  • contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

  • success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
    (1)由服务器返回,并根据dataType参数进行处理后的数据。
    (2)描述状态的字符串。

function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}

error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:

function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}

cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

timeout:要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

案例:

$(function(){
	$('#send').click(function(){
		$.ajax({
			type: "GET",
			url: "test.json",
			data: {username:$("#username").val(), content:$("#content").val()},
			dataType: "json",
			success: function(data){
				$('#resText').empty(); //清空resText里面的所有内容
				var html = ''; 
				$.each(data, function(commentIndex, comment){
					html += '<div class="comment"><h6>' + comment['username']
					+ ':</h6><p class="para"' + comment['content']
					+ '</p></div>';
				});
				$('#resText').html(html);
		   }
		});
	});
});
posted @ 2022-04-22 22:13  南城小友  阅读(47)  评论(0编辑  收藏  举报