目录
·Ajax-XHR-onreadystatechange事件
·引入jquery.js文件
https://www.w3school.com.cn/jquery/jquery_intro.asp
·jQuery语法
$(selector).action()
$(this).hide()隐藏当前的 HTML 元素。
$("#test").hide()隐藏 id="test" 的元素。
$("p").hide()藏所有 <p> 元素。
$(".test").hide()隐藏所有 class="test" 的元素。
·元素选择器
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
·属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
·CSS选择器
$(“p”).css(“background-color”,”red”);
·更多选择器实例
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
·事件
| Event 函数 | 绑定函数至 |
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
https://www.w3school.com.cn/jquery/jquery_ref_events.asp
·隐藏/显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
切换 hide() 和 show() 方法
$(selector).toggle(speed,callback);
·淡入淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback); //在 fadeIn() 与 fadeOut() 方法之间进行切换。
$(selector).fadeTo(speed,opacity,callback);//允许渐变为给定的不透明度（值介于 0 与 1 之间）。
·滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);//切换上滑与下滑
·动画
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("div").animate({left:'250px'});
$("div").animate({ //同时使用多个属性
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});$("div").animate({ //使用相对值
left:'250px',
height:'+=150px',
width:'+=150px'
});$("div").animate({//使用预定义的值：设置为 "show"、"hide" 或 "toggle"：
height:'toggle'
}); var div=$("div"); //使用队列功能
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
·停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止
$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
https://www.w3school.com.cn/jquery/jquery_ref_effects.asp
·jQuery获取
---text() - 设置或返回所选元素的文本内容
---html() - 设置或返回所选元素的内容（包括 HTML 标记）
---val() - 设置或返回表单字段的值
attr() - 设置/改变属性值
·jQuery添加元素
---append() - 在被选元素的结尾插入内容
---prepend() - 在被选元素的开头插入内容
---after() - 在被选元素之后插入内容
---before() - 在被选元素之前插入内容
·jQuery删除元素
---remove() - 删除被选元素（及其子元素）
---empty() - 从被选元素中删除子元素
$("p").remove(".italic"); //过滤被删除的元素
·获取并设置CSS类
---addClass() - 向被选元素添加一个或多个类
---removeClass() - 从被选元素删除一个或多个类
---toggleClass() - 对被选元素进行添加/删除类的切换操作
---css() - 设置或返回样式属性
·尺寸
width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()返回元素的宽度（包括内边距）。
innerHeight() 返回元素的宽度（包括内边距）。
outerWidth() 返回元素的宽度（包括内边距和边框）。
outerHeight() 返回元素的高度（包括内边距和边框）。
jQuery 文档操作https://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
jQuery 属性操作https://www.w3school.com.cn/jquery/jquery_ref_attributes.asp
https://www.w3school.com.cn/jquery/jquery_ref_css.asp
·遍历-祖先
parent() 返回被选元素的直接父元素。
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
使用可选参数来过滤对祖先元素的搜索。$("span").parents("ul");
parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
·遍历-后代
children() 返回被选元素的所有直接子元素。也可以使用可选参数来过滤对子元素的搜索。
find() 返回被选元素的后代元素，一路向下直到最后一个后代。
·遍历-同胞
siblings() 返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()
·遍历-过滤
first() 返回被选元素的首个元素。
last() 返回被选元素的最后一个元素。
eq() 返回被选元素中带有指定索引号的元素。 $("p").eq(1);
filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 返回不匹配标准的所有元素。
遍历手册
https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
·ajax-XHR-创建对象
variable=new XMLHttpRequest(); //创建XMLHttpRequest对象·ajax-XHR-请求
XMLHttpRequest 对象用于和服务器交换数据。
//向服务器发送请求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();| 方法 | 描述 |
| |
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
| |
| send(string) | 将请求发送到服务器。
|
| |
|
| setRequestHeader(header,value) | 向请求添加 HTTP 头。
| |
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 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");
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true
当使用 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();·Ajax-XHR-服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//responseText
/*responseXML*/
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;
·Ajax-XHR-onreadystatechange事件
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" 404: 未找到页面 |
·Ajax-load()
$(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
·Ajax-get() post()
GET 方法可能返回缓存数据。
POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get(URL,callback);
$.post(URL,data,callback);
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
