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提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

Ajax如何工作:

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 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和参数列表, 参数列表中的多个参数用 & 分隔

如图所示:

在百度搜索 “你好世界” ,观察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 南城小友阅读(37) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

搁浅

只要你不失去你的崇高,整个世界都会为你敞开 !

jQuery

jQuery

简述初识

谷歌CDN:

微软CDN:

基础 jQuery 实例

jQuery语法:

文档就绪函数

jQuery选择器

jQuery事件

常见事件:

jQuery 名称冲突:

总结:

jQuery效果

隐藏与显示

淡入谈出:

Ajax

XMLHttpRequest

创建XMLHttpRequest 对象

XMLHttpRequest 对象方法

GET 还是 POST？

XMLHttpRequest 对象属性

onreadystatechange 属性

使用回调函数

responseText 属性

responseXML 属性

Ajax 获取XML文件

Jquery封装好的Ajax

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

可异步的Ajax方法:

公告

搁 浅

只要你不失去你的崇高,整个世界都会为你敞开 !

jQuery

jQuery

简述初识

谷歌CDN:

微软CDN:

基础 jQuery 实例

jQuery语法:

文档就绪函数

jQuery选择器

jQuery事件

常见事件:

jQuery 名称冲突:

总结:

jQuery效果

隐藏与显示

淡入谈出:

Ajax

XMLHttpRequest

创建XMLHttpRequest 对象

XMLHttpRequest 对象方法

GET 还是 POST？

XMLHttpRequest 对象属性

onreadystatechange 属性

使用回调函数

responseText 属性

responseXML 属性

Ajax 获取XML文件

Jquery封装好的Ajax

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

可异步的Ajax方法:

公告

搁浅