这篇博客是对jQuery的深入补充，涵盖了核心函数和静态方法、属性相关操作、CSS处理、事件处理、动画效果等。文章介绍了jQuery如何创建静态和实例方法，强调了$.each()的通用性，并详细讨论了attr、html、text、val方法。此外，还涉及事件处理的技巧，如阻止冒泡和默认行为。最后，提到了CSS操作的注意事项和动画效果的实用技巧。
基于jQuery笔记所做的补充
jQuery来自B站视频：https://www.bilibili.com/video/BV17W41137jn?
主要笔记来自简书：https://www.jianshu.com/u/4312c933b9db
这篇文章主要补充后面老师博客中没有的内容，以及自己对部分知识点的补充。
三、核心函数和静态方法
创建静态方法：AClass.staticMethof = function(){…}
创建实例方法：AClass.prototype.instaceMethod = function(){…}
原生JS使用foreach只能遍历数组，不能遍历伪数组。遍历对象要用for in。
jQuery数组、伪数组、对象都可以用each。
isWindow：判断对象是否是window对象。
isArray：判断对象是否是真数组（伪数组为false）。
isFunction：判断对象是否是函数。
以上代码会返回true，因为jQuery本质上是一个匿名函数：
五、属性相关
attr方法：
attr(name|pro|key,val|fn)方法获取属性节点时,只会获取找到所有元素中第一个元素的属性节点。
removeAttr(name)方法设置或删除属性节点时,会给所有找到元素设置属性节点；删除多个属性节点是，只要在字符串中用空格隔开属性节点名就好。
这个两个方法的参数2都是设置属性节点。
html([val|fn])、text([val|fn])、val([val|fn|arr])：一个参数时设置，无参数时获取。
六、CSS操作
链式操作一般不要大于3。
七、事件处理
阻止事件冒泡、事件默认行为除笔记的方法外（传递event对象调用方法），还有另一种方法：在子事件的回调函数的最后面return false;
trigger不能同时触发<a>的默认事件还有点击事件。此时要将默认事件和点击事件的标签分开。比如：
//<a href="默认事件"><span>点击事件</span></a>
此时trigger不会阻止默认事件和事件冒泡，点击span触发点击事件，冒泡到a触发默认事件。
判断依据：事件冒泡。
- 不带命名空间事件被trigger调用,会触发带命名空间事件
- 带命名空间事件被trigger调用,只会触发带命名空间事件
- 下级不带命名空间事件被trigger调用,会冒泡触发上级不带命名空间和带命名空间事件
- 下级带命名空间事件被trigger调用,不会触发上级不带命名空间事件
- 下级带命名空间事件被trigger调用,会触发上级带命名空间事件
推荐使用： mouseenter和mouseleave
$this.index()方法可以获得当前标签在兄弟标签中的索引。
eq(索引)方法从一类标签中获取指定索引的标签作为对象返回。
get(索引)方法从一类标签中获取指定索引的标签返回。
siblings()方法返回所有兄弟标签。
八、动画效果
$(window).scroll(function (){})：监听网页滚动。
$(html,body).scollTop()：网页滚动的偏移位。
children(“选择器”)：找到孩子中为该名的标签。
css中，transform:rotate(90deg);：表示将图片旋转90度。
动画在执行未完成之前再次触发动画，会将动画累计到下一次，所以每次动画事件之前要关闭存在的动画（使用stop()方法）
jQuery笔记
以下内容为个人总结的后续内容。
一、jQuery基本结构
1.jQuery的本质是一个闭包
2.jQuery为什么要使用闭包来实现?为了避免多个框架的冲突
3.jQuery如何让外界访问内部定义的局部变量：window.xXX = XXX;
4.jQuery为什么要给自己传递一个window参数?
为了方便后期压缩代码；为了提升查找的效率。
5.jQuery为什么要给自己接收一个undefined参数?
为了方便后期压缩代码；IE9以下的浏览器undefined可以被修改，为了保证内部使用的undefined不
被修改，所以需要接收一个正确的undefined。
二、入口函数
jQuery入口函数测试
1.传入 '’ null undefined NaN 0false，返回空的jQuery对象。
2.字符串：
代码片段：会将创建好的DOM元素存储到jQuery对象中返回。
选择器：会将找到的所有元素存储到jQuery对象中返回。
3.数组:
会将数组中存储的元素依次存储到jQuery对象中立返回。
4.除上述类型以外的:
会将传入的数据存储到jQuery对象中返回。
DOM元素也是个对象。
三、原型上
1.工具方法抽取
//为jQuery对象添加属性，将真数组转换为伪数组
[].push.apply(this,temp.children);
//将伪数组转换成真数组（一般在处理伪数组时会先将其转换为真数组）
var arr = [].slice.call(obj);
// 真数组toString打印："[object Array]"
// 伪数组（对象）toString打印："[object Object]"
if(({}).toString.apply(selector)=== "[object Array]"){...}
工具方法：
njQuery.isString = function(str) {
return typeof str == "string";
}
njQuery.isHTML = function(str) {
return str.charAt(0)== "<" && str.charAt(str.length - 1) == ">" && str.length >= 3;
}
njQuery.trim = function(str) {
//判断是否支持trim方法
if(str.trim) {
return str.trim();
}
else{
return str.replace(/^\s+|\s+$/g，"");
}
njQuery.is0bject = function(sele) {
return typeof sele === "object";
}
njQuery.isWindow = function(sele) {
return sele === window;
}
njQuery.isArray = function(sele) {
if (njQuery.isObject(sele) && !njQuery.isWindow(sele) && "length" in sele){
return true;
}
return false;
}
njQuery. isFunction = function(sele) {
return typeof sele === "function";
}
定义一个extern方法，将工具方法作为对象（key:vaule）存放在extend中，可方便维护。
njQuery.extend = njQuery.prototype.extend = function(obj) {
for(var key in obj) {
this[key] = obj[key];
}
}
njQuery.extend({
isString : function(str) {...},
isHTML : function(str) {...},
trim : function(str) {...},
isObject : function(sele) {...},
isWindow : function(sele) {...},
isArray : function(sele) {...},
isFunction : function(sele) {
return typeof sele === "function";
},
ready: function (fn){
//判断DOM是否加载完毕
if(document.readyState == "complete") {
fn();
}else if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function ({
fn();
});
}else {
document.attachEvent("onreadystatechange", function ({
if(document.readyState == "complete"){
fn();
}
});
}
},
each: function(obj,fn) {
// 1.判断是否是数组
if(njQuery.isArray(obj)) {
for(var i = 0; i< obj.length; i++) {
//each工具方法参数为this时是指向函数中value包装型对象的（Number）
var res=fn.call(obj[i],i,obj[i]);
//each返回true时相当于continue；返回false时相当于break
if(res === true) {
continue;
}else if(res === false) {
break;
}
}
}
//2.判断是否是对象
else if(njQuery.isObject(obj)) {
for(var key in obj){
var res=fn.call(obj[i],i,obj[i]);
if(res === true) {
continue;
}else if(res === false) {
break;
}
}
}
}
});
jQuery中有一个方法ready，监视DOM是否加载完毕。
onload事件会等到DOM元素加载完毕，并且还会等到资源也加载完毕才会执行；
DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调。
document.readyState属性有如下的状态
- uninitialized-还未开始载入
- loading -载入中
- interactive -已加载，文档与用户可以开始交互
- complete -载入完成
onteadvstatechange事件就是专门用于监听document.readyState属性的改变的。
2.jQuery原型上的核心属性和方法
jQ原型上的核心方法和属性:
- jquery获取jQ版本号
- selector 实例默认的选择器取值
- length 实例默认的长度
- push 给实例添加新元素
- sort 对实例中的元素进行排序
- splice按照指定下标指定数量删除元素，也可以替换删除的元素
- toArray把实例转换为数组返回
- get获取指定下标的元素，获取的是原生DOM（无参相当于toArray()，负数等于负数加长度）
- eq获取指定下标的元素，获取的是jQuery类型的实例对象
- first 获取实例中的第一个元素，是jQuery类型的实例对象
- last 获取实例中的最后一个元素，是jQuery类型的实例对象
- each遍历实例，把遍历到的数据传给回调使用
- map遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回
四、DOM上
1.jQueryDOM操作相关方法的封装
njQuery. prototype.extend({
empty: function() {
// 1.遍历所有找到的元素
this.each(function (key，value){
value.innerHTML= "";
});
//返回值帮助链式编程，一般都会有
return this;
},
remove: function (sele) {
if(arguments.length === 0){
// 1.遍历指定的元素
this.each(function (key, value){
//根据遍历到的元素找到对应的父元素
var parent = value.parentNode;
//通过父元素删除指定的元素
parent. removeChild(value);
});
}else{
var $this = this;
//1.根据传入的选择器找到对应的元素
$(sele).each(function (key, value) {
//2.遍历找到的元素，获取对应的类型
var type = value.tagName;
//3.遍历指定的元素
$this.each(function (k, v) {
//4.获取指定元素的类型
var t = v.tagName;
//5.判断找到元素的类型和指定元素的类型
if(t === type) {
//根据遍历到的元素找到对应的父元素
var parent = value.parentNode;
//通过父元素删除指定的元素
parent.removeChild(value);
}
});
});
},
html: function (content){
if(arguments.length === 0){
return this[0].innerHTML;
}else{
this.each(function (key,value){
value.innerHTML = content;
}
}
},
text: function (content){
if(arguments.length === O){
var res = "";
this.each(function (key, value){
res += value.innerText;
});
return res;
}else{
this.each(function (key, value){
value.innerText = content;
});
}
},
appendTo: function (sele){
// 1.统一的将传入的数据转换为jQuery对象
var $target = $(sele);
var $this = this;
var res = [];
// 2.遍历取出所有指定的元素
$.each($target，function (key, value){
//2.1.遍历取出所有的元素
$this.each(function (k, v){
//2.2.判断当前是否是第0个指定的元素
if(key === 0){
//直接添加
value.appendChild(v);
res.push(v);
}else{
//先拷贝再添加:
//cloneNode(true);//拷贝元素和内容
//clonrNode(false);//拷贝元素
var temp = v.cloneNode(true);
value.appendChild(temp);
res. push(temp);
}
});
//3.返回所有添加的元素
return $(res);
},
prependTo: function (sele){
var $target = $(sele);
var $this = this;
var res = [];
$.each($target，function (key, value){
$this.each(function (k, v){
if(key === 0){
value.insertBefore(v,value.firstChild);
res.push(v);
}else{
var temp = v.cloneNode(true);
value.insertBefore(temp,value.firstChild);
res. push(temp);
}
});
return $(res);
},
});
2.jQuery属性操作相关方法的封装
补充：.hasClass()：判断调用者中是否存在该类。多个元素中存在包含该类的元素，则返回true。无参时返回false。
njQuery.prototype.extend({
attr: function(attr, value) {
// 1.判断是否是字符串
if(njQuery.isString(attr)) {
//判断是一个字符串还是两个字符串
if(arguments.length === 1){
return this[0].getAttribute(attr);
}else{
this.each(function (key, ele){
ele.setAttribute(attr, value);
});
}
}
//2.判断是否是对象
else if(njQuery.isObject(attr)){
var $this = this;
//遍历取出所有属性节点的名称和对应的值
$.each(attr, function(key, value){
//遍历取出所有的元素
$this.each(function(k, ele){
ele.setAttribute(key, value);
});
});
}
return this;
},
prop: function(attr, value) {
if(njQuery.isString(attr)) {
if(arguments.length === 1){
return this[0][attr];
}else{
this.each(function(key, ele){
ele[attr] = value;
});
}
}
else if(njQuery.isObject(attr)){
var $this = this;
$.each(attr, function(key, value){
$this.each(function(k, ele){
ele[key] = value;
});
});
}
return this;
},
css: function(attr, value) {
if(njQuery.isString(attr)) {
if(arguments.length === 1){
return njQuery.getStyle(this[o]，attr);
}else{
this.each(function(key, ele){
ele.style[attr] = value;
});
}
}
else if(njQuery.isObject(attr)){
var $this = this;
$.each(attr, function(key, value){
$this.each(function(k, ele){
ele.style[key] = value;
});
});
}
return this;
},
val: function(content) {
if(arguments.length === 0){
return this[o].value;
}else{
this.each(function (key, ele){
//元素中存在一个属性value，会动态变化（随用户输入变化）
//getAttribute获取的value不会动态变化
ele.value = content;
});
return this;
}
},
hasClass: function(name){
var flag = false;
if(arguments.length === O){
return flag;
}else{
this.each(function(key,ele){
//1.获取元素中class保存的值
var className = " "+ele.className+"";
//2.给指定字符串的前后也加上空格
name = " "+name+" ";
// 3.通过indexOf判断是否包含指定的字符串
if(className.indexOf(name) != -1){
flag = true;
return false;
}
});
return flag;
}
},
addClass: function (name){
if(arguments.length === O){
return this;
}
//1.对传入的类名进行切割
var names = name.split("");
// 2.遍历取出所有的元素
this.each(function(key, ele){
//3.遍历数组取出每一个类名
$.each(names,function(k, value){
//4.判断指定元素中是否包含指定的类名
if(!$(ele).hasClass(value)){
ele.className = ele.className + "" + value;
}
});
});
return this;
},
removeClass: function (name) {
if(arguments.length === 0){
this.each(function (key,ele){
ele.className = "";
}) ;
}else{
var names = name.split("");
this.each(function(key, ele){
$.each(names,function(k, value){
//判断指定元素中是否包含指定的类名
if($(ele).hasClass(value)){
//类名前后加""才能排除类名位于前后的情况进行判断
ele.className =("" + ele.className + "").replace("" + value + "");
}
});
});
}
return this;
},
toggleClass: function (name) {
if(arguments.length === 0){
this.removeClass();
}else{
var names = name.split("");
this.each(function(key, ele){
$.each(names,function(k, value){
if($(ele).hasClass(value)){
//删除
$(ele).removeClass(value);
}else{
//添加
$(ele).addClass(value);
}
});
});
}
return this;
}
});
3.jQuery事件操作相关方法的封装
njQuery.prototype.extend({
on: function(name, callBack){
//1.遍历取出所有元素
this.each(function(key, ele){
//2.判断当前元素中是否有保存所有事件的对象
if(!ele.eventsCache){
ele.eventsCache = 0;
//3.判断对象中有没有对应类型的数组
if(!ele.eventsCache[name]){
ele.eventsCache[name] =[];
//4.将回调函数添加到数组中
ele.eventsCache[name].push(callBack);
//5.添加对应类型的事件
njQuery.addEvent(ele, name, function({
njQuery.each(ele.eventsCache[name], function(k, method) {
method();
});
});
}else{
//6.将回调函数添加到数组中
ele.eventsCache[name].push(callBack);
}
}
},
off: function (name，callBack){
// 1.判断是否没有传入参数
if(arguments.length === 0){
this.each(function(key,ele){
ele.eventsCache = {};
}) ;
}
//2.判断是否传入了一个参数
else if(arguments.length === 1){
this.each(function (key,ele){
ele.eventsCache[name] = [];
}) ;
}
//3.判断是否传入了两个参数
else if(arguments.length === 2){
this.each(function(key, ele){
njQuery.each(ele.eventsCache[name], function(index, method){
//判断当前遍历到的方法和传入的方法是否相同
if(method === callBack){
ele.eventsCache[name].splice(index, 1);
}
});
});
}
});
五、PHP语法
1.基础语法
后端编写的代码不能直接运行，只能放到服务器对应的文件夹下，通过服务器运行。
<?php
//定义变量：
$num = 10;
//打印内容（只能输出基本类型）
echo $num;
//定义数组：
$arr = array(1, 3, 5);
//打印数组或对象
print_r($arr);
//取出数组中索引的值
echo $arr[1];
echo "<br>"
//定义对象：
$dict = array{"name" => "aa", "age" => 2};
print_r($dict);
echo $dict["name"];
?>
2.获取服务器数据
直接打开的HTML传递的数据不能在PHP接收，需通过服务器打开HTML。
可以通过form标签的method属性指定发送请求的类型。
2.1 get请求
如果是get请求会将提交的数据拼接到URL后面：?userName=lnj&userPwd=123456
<form action="02-get.php" method="get">
<input ...>
</form>
$_GET //获取HTML中通过get传递的数据
echo $_GET["name"];
2.2 post请求
<form action="02-get.php" method="post">
<input ...>
</form>
如果是post请求会将提交的数据放在请求头中。
$_POST //获取HTML中通过get传递的数据
echo $_POST["name"];
3.请求总结
1.GET请求和POST请求的异同：
相同点：都是将数据提交到远程服务器；
不同点：（1）提交数据存储的位置不同：
- GET请求会将数据放到URL后面；
- POST请求会将数据放到请求头中。
（2）提交数据大小限制不同：
- GET请求对数据有大小限制（不超过2000个字符）；
- POST请求对数据没有大小限制。
2.GET/POST请求应用场景：
- GET请求用于提交非敏感数据和小数据；
- POST请求用于提交敏感数据和大数据。
3.上传文件
1.HTML：
- 上传文件一般使用POST提交；
- 上传文件必须设置enctype=“multipart/form-data”。
<form action="03-post-file.php" method="post" enctype="multipart/form-data">
...
</form>
2.PHP：
- 上传的文件在PHP中可以通过$_FILES获取；
- PHP中文件默认会上传到一个临时目录，接收完毕之后会自动删除。
$_FILES //获取HTML中上传的文件
//1.获取上传文件对应的字典
$fileInfo = $_FILES["upFile"];
//2.获取上传文件的名称
$fileName = $fileInfo["name"];
//3.获取上传文件保存的临时路径
$filePath = $fileInfo["tmp_name"];
//4.移动文件方法：move_uploaded_file(参数1为临时路径, 参数2为新路径)
move_uploaded_file($filePath, destination:"./source/".$fileName);
//PHP字符串拼接使用.
4.修改PHP的配置文件
在php.ini中修改。
六、Ajax
1 什么是Ajax?
AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
2.GET
2.1 GET的基本使用
window.onload = function (ev){
var oBtn = document.querySelector("button");
oBtn.onclick = function (ex1){
// 1.创建一个异步对象：XMLHttpRequest()
var xmlhttp = new XMLHttpRequest();
// 2.设置请求方式和请求地址：.open(method, url, async)
/*
method:请求的类型;GET或POST
url:文件在服务器上的位置
async: true（异步）或false（同步）（Ajax就是异步，所以用true）
*/
xmlhttp.open("GET", "04-ajax-get.php", true);
//3.发送请求：.send()
xmlhttp.send();
//4.监听状态的变化：onreadystatechange
xmlhttp.onreadystatechange = function(ev2) {
/*
.readyState有五种状态：
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成，且响应已就绪
*/
if(xmlhttp.readyState === 4) {
//判断是否请求成功：返回的HTTP状态码（.status）大于200小于300、304即成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300
|| xmlhttp.status === 304){
//5.处理返回的结果
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
2.2 IE兼容
- responseText：获得字符串形式的响应数据。
window.onload = function (ev){
var oBtn = document.querySelector("button");
oBtn.onclick = function (ex1){
var xmlhttp;
//IE兼容
if (window.XMLHttpRequest)
{// code for IE7+，Firefox，Chrome，Opera，Safari
xmlhttp=new XMLHttpRequest() ;
}
else
{// code for TF6，IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*
在IE浏览器中，如果通过Ajax发送GET请求,那么IE浏览器认为同一个URL只有一个结果
05-ajax-get.txt === abc
所以要让URL每次都不一样
*/
xmlhttp.open("GET", "05-ajax-get.txt?t=" + (new Date().getTime()), true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(ev2) {
if(xmlhttp.readyState === 4) {
if(xmlhttp.status >= 200 && xmlhttp.status < 300
|| xmlhttp.status === 304){
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
2.3 GET的封装
//方法obj2str将传入的数据转换为浏览器可识别的URL
function obj2str(obj){
//IE兼容
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
//URL中不能出现中文字符，此时需要使用encodeURIComponent()方法转码
//URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
}
//转换为字符串并用&连接
return res.join("&");
}
function ajax(url, obj, timeout, success, error) {
//0.将对象转换为字符串
var str =obj2str(obj); // key=value&key=value;
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest() ;
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", url + "?" + str, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(ev2) {
if(xmlhttp.readyState === 4) {
//关闭定时器
clearInterval(timer);
if(xmlhttp.status >= 200 && xmlhttp.status < 300
|| xmlhttp.status === 304){
success(xmlhttp);
}else{
error(xmlhttp);
}
}
}
//判断外界是否传入了超时时间
if(timeout){
timer = setInterval(function (
//中断请求方法
xmlhttp.abort();
//关闭定时器
clearInterval(timer);
}, timeout);
}
}
sleep(5); //PHP，停留5秒
3.POST
3.1 POST的基本使用
window.onload = function (ev){
var oBtn = document.querySelector("button");
oBtn.onclick = function (ex1){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest() ;
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("POST","08-ajax-post.php", true);
//普通使用同GET
//如果要POST传递参数，使用setRequestHeader
//注意点:以下代码必须放到open和send之间
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("userName=zs&userPwd=321");
xmlhttp.onreadystatechange = function(ev2) {
if(xmlhttp.readyState === 4) {
if(xmlhttp.status >= 200 && xmlhttp.status < 300
|| xmlhttp.status === 304){
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
4.jQuery的封装
function obj2str(data){
data.t = new Date().getTime();
var res = [];
for(var key in data){
res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
}
return res.join("&");
}
//使用对象传递
function ajax(option) {
var str =obj2str(option.data);
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest() ;
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//判断哪种传递类型，统一转大写
if(option.type.toLowerCase() === "GET"){
xmlhttp.open(option.type, option.url + "?" + str, true);
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(str);
}
xmlhttp.onreadystatechange = function(ev2) {
if(xmlhttp.readyState === 4) {
clearInterval(timer);
if(xmlhttp.status >= 200 && xmlhttp.status < 300
|| xmlhttp.status === 304){
option.success(xmlhttp);
}else{
option.error(xmlhttp);
}
}
}
if(option.timeout){
timer = setInterval(function (
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
5. 前后端交互的两种方式
一般采用xml和json文件。
常用JSON。
5.1 XML文件
//.xml(xml文件的格式)：
<?xml version="1.0" encoding="UTF-8"?>
<person>
<name>李南江</name>
<age>33</age>
</person>
//.php(php文件的格式)：
//如果PHP中需要返回XML数据，也必须在PHP文件顶部设置：
<?php
header(string: "content-type:text/xml; charset=utf-8");
echo file_get_contents(filename: "info.xml");
- responseXML：获得XML形式的响应数据。
ajax({
...
success:function (xhr) {
var res = xhr.responseXML;
console.log(res.querySelector("name").innerHTML);
console.log(res.querySelector("age").innerHTML);
},
...
}
5.2 JSON文件
在低版本的IE中,不可以使用原生的 JSON.parse方法，但是可以使用json2.js这个框架来兼容。
- 要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
`var` `obj = JSON.parse(``'{"a": "Hello", "b": "World"}'``); ``//结果是 {a: 'Hello', b: 'World'}`
- 要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
`var` `json = JSON.stringify({a: ``'Hello'``, b: ``'World'``}); ``//结果是 '{"a": "Hello", "b": "World"}'`
//.txt(json文件的格式)：
{
"name":"lnj",
"age":"33"
}
//.php(php文件的格式)：
<?php
echo file_get_contents(filename: "12-ajax-json.txt");
注意：获取响应数据使用responseText。
//使用eval()方法可以将非标准的json转化为标准，并且不影响标准的json
//要在json前后拼接上括号
var obj=eval("("+str+")");
6.$ajax
jQuery中使用ajax的方法：
$.ajax({
url:"/jquery/test1.txt",
dataType: "json"，
success: function (data){
...
});
error: function (e){
...
});
});
七、Cookie
1.Cookie的基本内容
1.cookie:会话跟踪技术客户端。
2.session:会话跟踪技术服务端。
3.cookie作用:
- 将网页中的数据保存到浏览器中。
4.cookie生命周期：
- 默认情况下生命周期是一次会话（浏览器被关闭）；
- 如果通过expires=设置了过期时间，并且过期时间没有过期，那么下次打开浏览器还是存在；
- 如果通过expires=设置了过期时间，如果已经过期了，那么会立即删除保存的数据。
5.cookie注意点：
- cookie默认不会保存任何的数据。通过document.cookie设置数据。
- cookie不能一次性设置多条数据，要想保存多条数据,只能一条一条的设置
- cookie有大小和个数的限制
- 个数限制：20~50
- 大小限制：4KB左右
6.cookie作用范围：
- 同一个浏览器的同一个路径下访问。
- 如果在同一个浏览器中，默认情况下下一级路径就可以访问。
- 如果在同一个浏览器中，想让上一级目录也能访问保存的cookie，那么需要添加一个path属性才可以：document.cookie = “name=zs; path=/;”;
- 例如:我们在www.it666.com下面保存了一个cookie，那么我们在edu.it666.com中是无法访问的。如果现在edu.it666.com中也能访问，那么我们需要再添加一句代码domain=it666.com
//设置过期时间
var date = new Date();
date.setDate(date.getDate() + 1);
document.cookie = "age=33;expires="+date.toGMTStringO+";";
//常用方式
document.cookie = "name=zs;path=/;domain=127.0.0.1;";
2.Cookie的封装
2.1 添加方法
function addCookie(key, value, day, path, domain) {
//1.处理默认保存的路径
//获取页面的URL（不包括该文件名）
var index = window.location.pathname.lastIndexOf("/");
var currentPath = window.location.pathname.slice(0, index);
path = path || currentPath;
// 2.处理默认保存的domain
//获取当前页面的域名：document.domain
domain = domain || document.domain;
//3.处理默认的过期时间
if(!day){
document.cookie = key + "=" + value + ";path=" + path + ";domain=" + domain + ";";
}else{
var date = new Date();
date.setDate(date.getDate() + day);
document.cdokie = key + "=" + value + ";expires=" + date.toGMTString() + ";path=" + path + ";domain=" + domain + ";";
}
}
2.2 获取方法
function getCookie(key) {
var res = document.cookie.split(";");
for(var i = 0; i < res.length; i++){
var temp = res[i].split("=");
if(temp[0].trim() === key){
return temp[1];
}
}
}
2.3 删除方法
//不传path就只能删除默认路径中保存的cookie，如果想删除指定路径保存的cookie，必须在删除的时候指定路径
function delCookie(key, path) {
addCookie(key, getCookie(key), -1, path);
}
3.封装成插件
//格式：
;(function($, window) {
$.extend({
...
})
})(jQuery,window);
;(function($, window) {
$.extend({
addCookie: function(key, value, day, path, domain) {
var index = window.location.pathname.lastIndexOf("/");
var currentPath = window.location.pathname.slice(0, index);
path = path || currentPath;
domain = domain || document.domain;
if(!day){
document.cookie = key + "=" + value + ";path=" + path + ";domain="
+ domain + ";";
}else{
var date = new Date();
date.setDate(date.getDate() + day);
document.cdokie = key + "=" + value + ";expires=" + date.toGMTString()
+ ";path=" + path + ";domain=" + domain + ";";
}
},
getCookie: function(key) {
var res = document.cookie.split(";");
for(var i = 0; i < res.length; i++){
var temp = res[i].split("=");
if(temp[0].trim() === key){
return temp[1];
}
}
},
delCookie: function(key, path) {
addCookie(key, getCookie(key), -1, path);
}
});
})(jQuery,window);
八、哈希
Cookie保存的信息只能在本地访问。分享时无法直接跳转到Cookie上保存的页码。
此时使用哈希。哈希即页面URL的#…
一般页面都使用哈希。
//种哈希
window.location.hash = 3;
//获取哈希（去掉#）
console.log(window.location.hash.substring(1));
完结
——"Learning is the accumulation of experience, and ability is hard-working patience."
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
