jquery和ajax的简单用法

jquery

$()的作用：
注：需要引入jQuery

	```javascript
	1.$(function(){})写回调函数是加载
	2.%(原生对象)是原生对象转jQuery对象
	3.$(html)是创建元素节点
	4.$(选择器)是获取元素
	```

遍历

 案例：在li中移入变背景颜色
		```javascript
	let $li = $('ul li');
	//移入
	$li.mouseenter(function(){
	    $(this).css('background','pink');
	})
	//移出
	$li.mouseleave(function(){
	    $(this).css('background','');
	})
	
	
	
	```

第一种遍历

1.each(callback)

		对象方法 $.('')： 直接是回调函数
		index:下标
		value:元素名是原生对象要转jQuery
		let $li = $('ul li');
		//第一种
		$li.each(function(index,value){
		    $(value).hover(function(){
		     //移入时所要发生的事情
		      $(this).css('background','pink');
		    },function(){
		       //移出时所要发生的事
		        $(this).css('background','');
		    })
		})
		

第二种遍历

2.jQuery.each(object, [callback])
工具方法：$点的方法就是工具方法；第一个是对象，
object:需要例遍的对象或数组。
callback:每个成员/元素执行的回调函数。
用于遍历对象或数组

		//遍历输出li里的值-文本
		$.each($li,function(index,value){
		 //点击事件
		 $(value).click(function(){
		  alert($(this).text())
		 })
		})

ajax

###1.load(url, [data], [callback])
概述：载入远程 HTML 文件代码并插入至 DOM 中；跨域访问 可以把公共的页面放到一个公共页面
url:：url 必选(url,参数类型字符串)
data:data 可选，发送至服务器的 key/value 数据。参数类型为 object；在jQuery 1.3中也可以接受一个字符串了。访问后端时使用
callback:载入成功时回调函数。

		利用jQuery的ajax访问公共页面(public.html);点击按钮出现内容
		<input>
		<div></div>
		$('input').click(function(){
		 //放到div中  点击出现全部内容
		 1.$('div').load('public.html');
		 //放到div中，点击出现一部分-两种方法
		 2.1$('div').eq(0).load('public.html #header');
		 2.2$('div[class=footer]').load('public.html #header');
		  //第三个参数  回调函数//改变需要的内容的样式
		  //一般不会使用，执行容易出错
		 3.$('div').eq(0).load('public.html #header'，function(response){
		    //等加载完在改变
		    //放在外面是找不到的-异步-从上到下-等加载完使用回调
		     $('h3').css('fontSize',50); $('h3').css('color','red');
		  }); 
		})

2.get

jQuery.get(url, [data], [callback], [type])
概述：以 get 方式发送数据、处理静态页
是工具方法直接 点
url:待载入页面的URL地址
data:待发送 Key/value 参数。类型是map（对象）下标可以改
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

		$('input').click(function(){
		     1.//访问文本文档
		 $.get('abc.txt',(data)=> {
		       $('div').text(data)
		  })
		 2.//访问json  会做自动转换，jQuery原来是啥接受回来是啥对象
		 //[1,2,3,4]
		 //原生ajax接受到的是字符串
		 $.get('arr.json',(data)=> {
		     $('div').html('<strong>' + data[0] + '</strong>');
		 })
		 3.//访问json
		 //对象形式{   }
		 $.get('json.json',(data)=> {
		     $('div').text(json.name);
		 })
		 4.1//访问后端php
		 $.get('php/index.php?uname=李四&upwd=123',(data)=> {
		     $('div').html(data);
		 }) 
		 4.2$.get('php/index.php','uname=李四&upwd=123',(data)=> {
		     $('div').text(data);
		 }) 
		 4.3$.get('php/index.php',{
		 uname:李四,
		 upwd:123
		 },(data)=> {
		     $('div').html(data);
		 }) 
		})

3.post

jQuery.post(url, [data], [callback], [type])
以 post 方式发送数据;不能url地址后传参
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

		$('input').click(function(){
		     1.//访问文本文档
		 $.post('abc.txt',(data)=> {
		       $('div').text(data)
		  })
		 2.//访问json  会做自动转换，jQuery原来是啥接受回来是啥对象
		 //[1,2,3,4]
		 //原生ajax接受到的是字符串
		 $.post('arr.json',(data)=> {
		     $('div').html('<strong>' + data[0] + '</strong>');
		 })
		 3.//访问json
		 //对象形式{   }
		 $.post('json.json',(data)=> {
		     $('div').text(json.name);
		 })
		
		 4.1$.post('php/index.php','uname=李四&upwd=123',(data)=> {
		     $('div').text(data);
		 }) 
		 4.2$.post('php/index.php',{
		 uname:李四,
		 upwd:123
		 },(data)=> {
		     $('div').html(data);
		 }) 
		})

3.jQuery.getJSON(url, [data], [callback])

只处理json
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数

		$(function(){
		  $('input').click(function(){
		    $.getJSON('index.json',(data)=> {
		       $('div').text(data[0]);
		    })
		  })
		})
		//[123,456]
		//123

4.jQuery.getScript(url, [callback])

url:待载入 JS 文件地址。
callback:成功载入后回调函数。

		 <input type="button" value="请求json">
		<div></div>
		$(function(){
		  $.getScript('index.js');
		})
		//alert('嘻嘻');

jQuery.ajax(url,[settings])

	$.ajax({
	   type: "POST/GET",
	   url: "some.php",
	   data: "uname=John&upwd=123",
	   data:{
	       uname:John,
	       upwd=123
	   }
	   success: function(msg){
	     alert( "Data Saved: " + msg );
	   },
	   success:(data)=> {
	       alert(data);
	   }
	});