2020/8/4前端学习日记

jQuery

jQuery遍历

• 向上遍历
  parent():返回被选元素直接父元素
  parents():返回被选元素的所有祖先元素,他一路向上直到文本的根元素
  可以使用可选参数来过滤对祖先元素的搜索

$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil():返回介于两个给顶元素之间的所有祖先元素

$(document).ready(function(){
  $("span").parentsUntil("div");
});

不包括span和div

• 向下遍历
  children():返回被选元素的所有直接子元素,同样可以进行过滤
  find():返回被选元素的后代元素,一路向下直到最后一个后代.

• 水平遍历
  siblings():返回被选元素的所有通报元素
  next():返回被选元素的下一个同胞元素
  nextAll():返回被选元素的所有跟随的同胞元素
  nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素
  prev(),prevAll(),prevUntil()工作方法与前面的类似只不过方向相反,他们返回的是前面的同胞元素

• 过滤
  first():返回被选元素的首个元素
  last():返回被选元素的最后一个元素
  eq():返回被选元素中带有指定索引号的元素(索引号是从0开始,因此首个元素的索引号是0而不是1.)
  filter():允许你规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回.
  例如下面这个例子返回带有类名"intro"的所有<p>元素

$(document).ready(function(){
  $("p").filter(".intro");
});

not():返回不匹配标准的所有元素(not与filter相反)

jQuery AJAX
(先对AJAX进行了解)

jQuery load()方法
load()方法从服务器加载数据,并把返回的数据放入被选元素中.
语法:
$(selector).load(URL,data,callback);

必须的URL参数规定希望加载的URL;
可选的data参数规定与请求一起发送的查询字符串键值对集合
可选的callback参数是load()方法完成后所执行的函数名称
比如以下这个例子会将demo_test.txt的内容加载到指定的<div>元素中

$("#div1").load("demo_test.txt");

也可以吧jQuery选择器添加到URL参数
下面的例子把"demo_test.txt"文件中id = "p1"的元素的内容,加载到指定的<div>元素中

$("#div1").load("demo_test.txt #p1");

callback函数可以设置不同的参数:

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含XMLHttpRequest对象

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

AJAX = 异步JavaScript和XML

AJAX是一种用于创建快速动态网页的技术

通过在后台与服务器进行少量的数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

传统网页(不适用AJAX)如果需要更新内容,必须重载整个网页面

XMLHttpRequest
XMLHttpRequest用于在后台与服务器交换数据.这意味着不用重新加载整个网页的情况下对网页的某个部分进行更新

创建XMLHTTPRequest
variable= new XMLHttpRequest();

发送请求
xmlhttp.open(“GET”,“test.txt”,true);
规定请求类型,url以及是否异步处理请求
xmlhttp.send(string);
将请求发送到服务器(string参数仅用于post请求)

使用get还是post请求?
一般在一下几种情况中会使用post请求

• 无法使用缓存文件(更新服务器上的文件或数据库)
• 向服务器发送大量数据(post没有数据量限制)
• 发送包含未知字符的用户输入时,post比get更稳定也更可靠

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value)
header:规定头的名称
value:规定头的值

异步 - true或 false
XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须设置为true:
xmlhttp.open(“GET”,“ajax_test.asp”,true);

通过AJAX,JavaScript无需等待服务器的响应,而是:

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

当使用async = true时,请规定在响应处于onreadystatechange(应该就是请求成功之后要运行的代码)事件中的就绪状态时执行的函数:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

async = false,一般不推荐,但是对于一些小型的请求也是可以的.
JavaScript会等到服务器响应就绪才继续执行.如果服务器繁忙或者缓慢,应用程序会挂起或停止.

服务器响应

• responseText:获得字符串形式的响应数据

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

• responseXML:获得XML形式的响应数据
  需要对XML对象进行解析:实例:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

onreadystateready事件
之前也提到过这个概念,这里更详细的解释.
首先纠正一下之前的误解:并不是请求成功之后运行这段代码,而是readyState改变时,就会触发onreadystatechange事件.

三个重要的属性:

• onreadystatechange: 存储函数(或函数名),每当readyState属性改变时,就会调用该函数.
• readyState: 存有XMLHttpRequest的状态.从0到4发生变化.
  0:请求未初始化
  1:服务器连接已建立
  2:请求已接收
  3:请求处理中
  4:请求已完成,且响应已就绪
• status: 200:“OK” 404:“未找到页面”

使用callback函数
(暂时没理解)
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

*AJAX请求服务器返回的文件如果为asp/php/服务器/XML需要不同的处理方式.需要注意

get和post

这里在补充一下get和post的知识

• get - 从指定资源请求数据
• post - 向指定的资源提交要被处理的数据

get方法
查询字符串(名称/值对)是在get请求的url中发送的:

/test/demo_form.asp?name1=value1&name2=value2

• get请求可被缓存
• get请求保留在浏览器历史记录中
• get请求可被收藏为书签
• get请求不应在处理敏感数据时使用
• get请求有长度限制
• get请求只应当用于取回数据

post方法
查询字符串(名称/值对)是在post请求的http消息主体中发送的:

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

• post请求不会被缓存
• post请求不会保留在浏览器记录中
• post不能被收藏为书签
• post请求对数据长度没有要求