JQuery&Ajax基础知识

JQuery&Ajax基础知识

1、Jquery简介

   Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
   jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、Jquery下载和引入

1、Jquery下载地址：https://jquery.com/
2、Jquery引入方式(一般放在head标签中)：
   一、本地下载jquery文件标签引入
   <script type="text/javascript" src="jquery.js"></script>
   二、在线CDN引入
   <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

3、Jquery包装集对象和JqueryDom对象的区别

Jquery包装集对象是初始化一个函数，传入选择器初始化。
DOM对象是一个打印标签文本的字符串。
Jquery包装集对象与jsDom树的互转：
Jquery---》DOM：$("选择器")[索引]
DOM--》jQuery： $(document.getElementById("id选择器"))；
对象的遍历：
$("选择器").each(function(){
  var t=$(this)  //this代表这个对象的所有元素
});

• 测试代码

var app =document.getElementById("app");
		  console.log(app);
		  //dom对象转为jquery包装集对象
		var app_$=$(app);
		console.log(app_$);
		//如果js原生获取对象不存在显示null  jquery获取对象不存在显示空对象:jQuery.fn.init(0)
		var f1 =document.getElementById("f1");
		console.log(f1);//null
		var f1_$=$("f1");
		console.log(f1_$);//jQuery.fn.init(0)
		//jquery获取DOM对象 两种方式
		var app1=jQuery("#app");//注意Jquery单词大小写。
		console.log(app1);
		var app2=$("#app");
		console.log(app2);//jQuery.fn.init [div#app]
			//jquery获取JQueryDOM对象 两种方式
		var app1=jQuery("#app");//注意Jquery单词大小写。
		var dom1=app1[0];//JQuery对象转化为DOM对象
		//遍历
		app1.each(function(){
			var j=$(this);
        console.log(j);  //jQuery.fn.init [prevObject: jQuery.fn.init(1)]和jQuery.fn.init [div#app]对象
		})

4、基础选择器

//获取基础选择器对象
		//可以通过id选择器、class选择器、标签选择器、属性值、通用选择器获取对象
		//id选择器上面已经介绍过了
		console.log("************************************************");
		var info=$(".info");//类选择器  可能获取多个
		console.log(info);
		var p_=$("p");  //可能获取多个标签选择器  返回一个数组
		// console.log(p_);
		//通过属性获取对象  也可能获取多个对象
		var attr=$("[src]");
		// console.log(attr);
		//获取具体属性值的标签
		var attr_v=$("[href='javascript:void(0);']");//这里获取超链接对象
		console.log(attr_v);
		//获取通用选择器  获取所有的标签对象
		var common=$("*");
		console.log(common);
		console.log(common[5].innerHTML);  //打印body标签内的所有html代码。
		console.log(common[5].innerText);  //打印body标签内的所有文本不包括html标签。

5、层次选择器

获取层次选择器对象:
后代选择器  标签名 标签名  获取所有的后代对象
子代选择器  标签名>标签名 获取所有的第一代子标签对象
相邻兄弟选择器  标签名+标签名 只会向下获取第一个同级标签对象，若是不存在则返回null
普通兄弟选择器  标签名~标签名  向下获取所有同级兄弟选择器对象

• 测试代码

        //后代选择器  获取所有li子标签
		var son_=$("#parent li")
		console.log(son_);
		//子代选择器
		var son_1=$("#parent>li");  //只有两个li
		console.log(son_1);
		//相邻兄弟选择器
		var son_2=$("#parent+a");
		console.log(son_2);//空对象
		var son_3=$("#parent+p");
		console.log(son_3);//有一个p标签对象
		//普通兄弟选择器
		var son_4=$("#parent~p");
		console.log(son_4);//有一个p标签对象

6、表单选择器

<form id='myform' name="myform" action="http://www.baidu.com">
		姓名:<input type="text" id="uname" name="uname"/><br />
		密码:<input type="password" id="upwd" name="upwd" /><br />
		年龄:<input type="radio" name="uage"  value="0" checked="checked"/>小屁孩
		      <input type="radio" name="uage" value="1"/>你懂得 <br />
		爱好:<input type="checkbox"  name="ufav"  value="篮球"/>篮球
		      <input type="checkbox" name="ufav" value="爬床"/>爬床
		      <input type="checkbox" name="ufav" value="代码"/>代码<br />
		来自:<select id="ufrom" name="ufrom">
		          <option value="-1"selected="selected">请选择</option>
		          <option value="0">北京</option>
		          <option value="1">上海</option>
		      </select><br />
			  <!-- 信息提示框-->
		      <div id="validate" style="color: red;">
		      </div>
		      <button type="submit" onclick="return checkForm();">提交</button>
		      <button type="reset" onclick="resetForm();">重置</button>
		</form>
	</body>
	<script type="text/javascript">
		//表单选择器
		var inpu=$(":input");  //获取所有表单对象  包括input select textarea button
		console.log(inpu);
		//获取单个表单对象
		var inpu_1=$("input");
		console.log(inpu_1);
		//获取下拉菜单对象
		var select_=$("select");
		console.log(select_);
		//获取button按钮对象
		var button_=$("button");
		console.log(button_);
</script>

7、JQuery操作DOM属性

• 操作属性

基本语法:
		1、Jquery对象.attr("属性名") 获取属性值
		2、Jquery对象.attr("属性名","值") 设置属性名
		3、 jquery对象.prop("属性名","值") 设置属性名
		2、Jquery对象.prop("属性名") 获取属性值
		固有属性：标签内置的属性名。  比如：name、id、class、style
		布尔属性：属性值为true、false 比如：selected、checked
		自定义属性：用户自己设置的属性
		attr prop的区别？
		attr对于固有和自定义属性都可以使用，布尔属性不能使用。
		prop对于固有属性可以使用，对boolean属性返回true、false,自定义属性不能使用。
		总结：布尔属性使用prop()方法  固有属性和自定义属性使用attr()方法

• 测试代码

//测试自定义属性
		var v=$("#test").attr("abc");
		console.log(v);
		$("#test").attr("abcd","efg");
		//测试固有属性
		var name=$("#test").attr("name");
		console.log(name);
		$("#test").attr("class","red");
		//测试布尔属性 不能操作布尔属性
		$("test").attr("checked");
		$("test").attr("checked","checked");
		console.log("**************************************************************");
		//prop方法获取布尔属性  如果设置了布尔属性返回true 没有设置布尔属性返回false。
		var check=$("#test").prop("checked");
		console.log(check);
		var check=$("#test1").prop("checked","checked");  //可以设置布尔属性
		var name1=$("#test").prop("name");//获取固有属性值
		console.log(name1);
		$("#test1").prop("class","red");//设置固有属性
		var abc=$("#test").prop("abc");  //获取自定义属性  不能获取自定义属性
		console.log(abc);
		$("#test").prop("abcd","A");  //不能设置自定义属性

• 使用class、addclass、css方法

前提：先设置好相关类选择器样式。
$('选择器').attr('class',值)：设置calss属性，添加类选择器样式。
$('选择器').addclass("多个类选择器"):添加多个类选择器样式。
$('选择器').css('属性','值')：添加单个具体样式。
$('选择器').css({'属性':'值','属性':'值','属性':'值',……})：添加多个具体样式。

• 测试代码

<style>
			.red{
				color: red;
			}
			.green{
				color: green;
			}
			.large{
				font-size: 30px;
			}
		</style>
		<div id="contain">
		      <p> 你好*******************************</p>
		</div>
	<script>
		 //前提要设置好类选择器样式
		//增加类选择器样
		$("#contain").addClass("red large");
		$("p").attr("class","green");  //标签设置添加类选择器
		//设置具体样式 css('','')
		$("p").css("font-family","楷体"); //设置单个样式
		//设置多个具体样式  css({'':'','':''})
		$("p").css({"border-color":"red","border-size":"1px","border-style":"solid"});
	</script>

• 使用html()、text()、val()方法

html()和text()区别？
html()可以识别html标签和文本，进行渲染，而text()不能识别html标签，只能识别文本。
html()和text()都可以打印出标签和文本字符串。
value()可以设置和获取标签value的值。

• 测试代码

//测试代码
		var h=$("#contain").html();
		console.log(h);
		//设置html标签  相当于innerHTML=""
		var h=$("#app").html("<img src='static/image-20230713201709926.png' alt='图片' title='点击看看'>");
		var text=$("#contain").text();  //获取标签内的文本文字
		console.log(text);
		$("#app").text("你好YAYA1");  //在标签中设置文本文字
		var val=$("[name='username']").val();  //获取输入框文的value值
		console.log(val);
		$("[name='username']").val("好好爱后悔哦啊好哦");//设置输入框文本的value值

• 创建接节点、添加节点、删除节点

创建节点：把要创建的标签文本作为参数传入$()转成jQuery节点对象。
添加节点可分为四大类：在子标签对象前后添加节点，在同级对象前台添加节点。
在子标签前添加节点的方法有两个：
$("父节点对象").prepend("添加的节点对象");
$("添加的节点对象").prependTo("父节点对象");
在子标签后添加节点的方法有两个：
$("父节点对象").append("添加的节点对象");
$("添加的节点对象").appendTo("父节点对象");
在同级节点前添加节点
$("父节点对象").before("添加的节点对象");
在同级节点后添加节点
$("父节点对象").after("添加的节点对象");
删除节点：$("要删除的节点").remove();
清空文本文字：$("要删除的节点").empty();

• 测试代码

 //在子元素最前面添加节点
		var t="<p>添加的元素前…………………………</p>";
		var w="<p>添加的元素后…………………………</p>"
		$("#contain").prepend($(t));
		$(t).prependTo($("#contain"));
		//在子节点最后面添加节点
		$("#contain").append($(w));
		$(w).appendTo($("#contain"));
		var c="<ul>"+
		"<li>茄子</li>"+
		"<li>菠菜</li>"+
		"<li>白菜</li>"+
		"<li>青菜</li>"+
		"</ul>";
		//在同级元素前添加元素
		$("#contain").before($(c));
		//在同级元素后添加元素
		$("#contain").after($(c));
		//删除和清空文本元素
		$("#contain").remove();  //只能删除代码中写好的标签对象
		$("#contain").empty();  //清空标签内的文本文字

8、JQuery事件监听

• ready事件

如果script在head标签中，要加载body标签内的节点对象，要引入ready(function(){}),等HTML中所有的节点加载完毕后，再载入对象，防止在HTML加载完之前无法加载对象，相当于原生javascript中onload事件。可以编写多个ready()，从上到下依次执行。

• 测试代码

			 //有两种引用ready()方式
			 //第一种写法 全名写
			 $(document).ready(function(){
				console.log($("p"));
			 });
			 //第二种写法
			 $(function(){
				 	console.log($("p"));
			 });

• 事件绑定

1、常用的事件：
blur：鼠标失去焦点事件
focus：鼠标聚集焦点事件
mouseover：鼠标悬浮事件
mouseout：鼠标离开事件
keyup：键盘弹起事件
keydown：键盘按下事件
click:鼠标点击事件
dbclick：鼠标双击事件
2、事件绑定方式有两种
$('选择器').bind('事件名',function(){
});(绑定单个事件)
绑定多个事件
$('选择器').bind("{'事件名1':function(){},'事件名2:function(){},……}")
//常用方式：
$('选择器').事件名(function(){
});(绑定单个事件)
绑定多个事件
$('选择器').事件名1(function(){
}).事件名2(function(){
}).事件名3(function(){
});

• 测试代码

<body>
          <p id="info" style="color: aqua;font-family: 宋体;font-size: 50px;"></p>
		  <button type="button" id="btn">点击一下试一试！</button>
		  <input type="text" name="username" id="tex"/>
	</body>
	<script type="text/javascript">
		$("#btn").bind('click',function(){
			$("#info").text("世上无难事！，只怕有心人！");
		});
		//绑定多个事件件  （常用）
		$("#tex").mouseout(function(){
			$(this).val("鼠标离开了！要注意哦！");
		}).mouseover(function(){
			$(this).val(" ");
		});
	</script>

9、JQuery异步通信方法(ajax)

ajax是一种异步通信机制，向服务端请求数据，得到服务端响应，获取服务端的json字符串，然后转化成js对象，通过操作js对象，把数据渲染到页面上展示。
json字符串必须要用双引号,单引号会报错！ajax会自动将json字符串转为js对象。
常用的方法有四种：
$.ajax({
     url:'',
     type:'get',
     data:{},
     dataType:'json',
     async:true,
     success:function(data){},
     error:function(data){}
});
$.get('url'，{请求数据}，function(data){});
$.post('url'，{请求数据}，function(data){});
$.getjson('url'，{请求数据}，function(data){}); 只能得到json字符串数据转化为JSON对象。

• 测试代码

//ajax方式请求响应！
$.ajax(
   {
			    url:'data/test.text',
       //这个属性会自动把json文本文件转换为js对象，如果是json文件可以不设置也会自动转
				dataType:'json',
				type:'get',
				success:function(data){
					var str="";
					console.log(data);  //自动转为js对象
					for(var i=0;i<data.length;i++){
						 str+="<li>"+data[i].username+"</li><li>"+data[i].age+"</li><li>"+data[i].address+"</li>";
					}
					$("#app").append($(str));
				},
				error:function(err){
					 console.log(err);
				}
			});
//$.get()方式请求数据
/*             @data:响应数据
			   @status：响应状态
			   @xhr:响应对象
			   如果请求的是json文件，响应数据会自动转化为js对象
			 如果请求的是文本文件，响应数据是json字符串或者普通字符串。
			*/
			$.get('data/test.json',{},function(data,status,xhr){
				console.log(data);
				console.log(status=='success'?'数据获取成功！':'数据获取失败！');
				console.log(xhr);
			});
//$.post()方式请求数据
/* @data:响应数据
			   @status：响应状态
			   @xhr:响应对象
			   如果请求的是json文件，响应数据会自动转化为js对象
			   如果请求的是文本文件，响应数据是json字符串。
			*/
			$.post('data/test.json',{},function(data,status,xhr){
				console.log(data);
				console.log(status);
				console.log(xhr);
			});
		});
//$.getJSON()方式请求数据
          /**@data:响应数据
		   @status：响应状态
		   @xhr:响应对象
		   不管请求的数据是json字符串文本文件还是JSON文件都会自动转成js对象
		   但是普通字符串文件，不会响应数据，如果出现没有响应数据说明请求的文件不是json字符格    式。
		 **/
		$.getJSON('data/test.text',{},function(data,status,xhr){
			    console.log(data);
				console.log(status);
				console.log(xhr);
		});
		});