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);
});
});
标签:JQuery,console,log,对象,标签,基础知识,Ajax,var,选择器
From: https://www.cnblogs.com/smallzengstudy/p/17629290.html