jQuery ajax记录

使用jQuery

jQuery概述

1，Write Less Do More（用更少的代码来完成更多	的工作）
2，使用CSS选择器来查找元素（更简单更方便）
3，使用jQuery方法来操作元素（解决浏览器兼容性问题、应用于所有元素并施加多个方法）

引入jQuery

下载jQuery的开发版和压缩版
从CDN加载jQuery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    window.jQuery || 
        document.write('<script src="js/jquery-3.3.1.min.js"></script>')
</script>

查找元素

选择器
	* / element / #id / .class / selector1, selector2
	ancestor descendant / parent>child /previous+next / previous~siblings
	
筛选器
	1，基本筛选器：:not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus
	2，内容筛选器：:contains('…') / :empty / :parent / :has(selector)
	3，可见性筛选器：:hidden / :visible
	4，子节点筛选器：:nth-child(expr) / :first-child / :last-child / :only-child
	5，属性筛选器：[attribute] / [attribute='value'] / [attribute!='value'] / [attribute^='value'] / [attribute$='value'] / [attribute|='value'] / [attribute~='value']
	
表单：:input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked

执行操作

内容操作
	获取/修改内容：html() / text() / replaceWith() / remove()
	获取/设置元素：before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()
	获取/修改属性：attr() / removeAttr() / addClass() / removeClass() / css()
	获取/设置表单值：val()
	
查找操作
	查找方法：find() / parent() / children() / siblings() / next() / nextAll() / prev() / prevAll()
	筛选器：filter() / not() / has() / is() / contains()
	索引编号：eq()
	
尺寸和位置
	尺寸相关：height() / width() / innerHeight() / innerWidth() / outerWidth() / outerHeight()
	位置相关：offset() / position() / scrollLeft() / scrollTop()
	
特效和动画
	基本动画：show() / hide() / toggle()
	消失出现：fadeIn() / fadeOut() / fadeTo() / fadeToggle()
	滑动效果：slideDown() / slideUp() / slideToggle()
	自定义：delay() / stop() / animate()
	
事件
	文档加载：ready() / load()
	用户交互：on() / off()

链式操作

检测页面是否可用

<script>
    $(document).ready(function() {
        
    });
</script>

<script>
    $(function() {
        
    });
</script>

避免和其他库的冲突

先引入其他库再引入jQuery的情况。

<script src="other.js"></script>
<script src="jquery.js"></script>
<script>
	jQuery.noConflict();
    jQuery(function() {
        jQuery('div').hide();
    });
</script>

先引入jQuery再引入其他库的情况。

<script src="jquery.js"></script>
<script src="other.js"></script>
<script>
    jQuery(function() {
        jQuery('div').hide();
    });
</script>

其他
ajax的使用
XMLHttpRequest 对象用于在后台与服务器交换数据

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

服务消息的发送

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

open(method,url,async)	
	规定请求的类型、URL 以及是否异步处理请求。
	method：请求的类型；GET 或 POST
	url：文件在服务器上的位置
	async：true（异步）或 false（同步）

send(string)	
	将请求发送到服务器。
	string：仅用于 POST 请求

当在以下情况时候使用post

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

var u = $("#uUsername").val();

　　  $.ajax({

　　　　url : 'user/checkUname', 　   <!-- url  :请求地址 -->  
　　　　type : 'post',　　　　　　　　<!--type ：请求类型:post/get --> 
　　　　data : {　　　　　　　　　　　<!--data ：发送给服务器的数据 -->      
　　　　　　　　uUsername : u,　　　　　　  <!-- 使用自己声明的对象 -->  
　　　　　　　　uPwd : $("#pwd").val()　　　 <! -- 直接获取页面的对象 -->  
　　　　　　},
　　　　dataType : 'json',                    <!--dataType:服务器返回的数据类型 text/xml/script/html/json/jsonp -->
　　　　success: function(data){　　　<!--回调函数 -->        
　　　　　　console.log(data);             <! -- 浏览器控制台显示返回内容（建议使用） -->
　　　　　　alert(data);　　　　　　     <! -- 弹框显示返回内容 -->
　　　　　　}

　　　　});