JQuery基础知识1.1基本概念
JQuery是一个JS库,能够帮助我们轻松实现一些原本可能比较麻烦的功能。
JQuery每个版本又有两个小版本:压缩版和未压缩版,压缩版文件较小,但没有排版和注释,所以不便于阅读;而未压缩版文件较大,有排版和注释,便于阅读。
JQuery实际上就是一个js文件,加载到页面就可以直接使用了。
<script src="../jquery-3.2.1.min.js"></script>
也可以通过CDN(Content Distribute Network, 内容分发网络)来引用JQuery。
菜鸟网:
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
百度
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
使用cdn的好处:
(1)省事
(2)速度更快
1.2 语法
$(选择器).action();
$:定义了这是一个JQuery的代码
选择器:按照一定的规则选择DOM元素,非常类似于CSS选择器。
action:对选中元素执行的操作。
案例:所有段落单击变红
方案一:使用js
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
var paras = document.getElementsByTagName("p");
for(var i in paras){
paras[i].addEventListener("click",red);
}
function red(){
this.style.color = "red";
}
</script>
方案二:使用JQuery
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
$("p").click(red);
function red(){
this.style.color = "red";
}
</script>
JQuery的一行代码
$("p").click(red);
相当于JS的若干行代码
var paras = document.getElementsByTagName("p");
for(var i in paras){
paras[i].addEventListener("click",red);
}
所以说JQuery极大简化了程序员的工作。
1.3 选择器
(1)元素选择器
根据标签名来获取元素,比如
$("p"):表示获取所有的段落
(2)id选择器
$("#p1"):表示选择id="p1"的元素
(3)class选择器
$(".top2"):表示选择所有class="top2"的元素
(4)后代选择器
$("div p"):表示选择div里面的段落
(5)属性选择器
$("p[name]"):表示选中所有具有name属性的段落
$("p[name='second']"):表示选中所有name="second"的段落
(6)$("p:first"):表示选择p标签的第一个元素,相当于css中的伪类选择器
$("tr:even"):表示选中所有技术行的tr
1.4 事件
JQuery中注册事件的方法也是调用JQuery对象的方法,
比如单击事件
$("#div1").click();
鼠标移入事件
$("#div1").mouseenter();
而且方法名就是js中的事件名。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1{
width:100px;
height:100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
<script>
$("#div1").mouseenter(function(){
$(this).css("background-color","skyblue");
});
</script>
之前,我们所有的JS代码是放在<body>之后的,如果放在<body>之前呢?
实验证明,如果放在body之前,在获取元素时得到的结果为空,因为在执行此代码时,文档还没有加载完成,也就是说元素都还不存在。
那怎么解决呢?
将代码放在$(document).ready(function(){……})中,也就是在文档加载完成之后才会去执行此代码。
<script>
$(document).ready(function(){
$("#div1").mouseenter(function(){
$(this).css("background-color","skyblue");
});
});
</script>
<body>
<div id="div1">
</div>
</body>
2 动画
2.1显示、隐藏
Hide():隐藏
将高度、宽度、透明度变为0.display为“none”
Show():显示
将高度、宽度、透明度变为初始的CSS设置的时候,display为“block”。
Toggle():切换
如果display为none的时候,点击一下就变成了block;
反之变成none。
2.2淡入淡出
fadeIn():淡入
将隐藏的样式通过改变其透明度(透明度从0到1),
让它显示出来。
fadeOut():淡出
将显示的样式通过改变其透明度(透明度从1到0),
让它隐藏起来。
fadeToggle():淡入淡出的切换
如果样式隐藏,则将它显示出来。
如果样式显示,则将它隐藏起来。
fadeTo():固定其透明度(透明度在0到1之间)
2.3上滑下滑
Slideup():上滑
将设置的高度从初始变为0,然后隐藏它
SlideDown():下滑
先显示它,然后将设置的高度从0变为初始
slideToggle():上滑与下滑的切换
如果元素是隐藏的话,则先显示,后把它的高度增加;
如果元素是显示的话,先将高度减为0,在隐藏它。
2.4动画
自定义动画
移动一个块到另一个位置:
$("#p").animate({left:'300px',top:'300px'});
同时使用多个属性实现动画效果(移动位置,颜色淡化,大小改变)
$("#p").animate({
left:'300px',
width:'+=100px',
height:'+=100px',
opacity:'0.5'
});
改变预定义值来实现我们所需要的内容的显示或隐藏
$("#p").animate({
height:'toggle'
});
.Animate()中有三个参数:
第一个参数是需要改变的样式
第二个参数是显示的速度(slow,fast,指定毫秒数)
第三个参数是回调函数
<body>
<button id="start">动画开始</button>
<button id="stop">动画停止</button>
<div style="background: blue;width: 200px;height: 200px"></div>
</body>
<script>
var div = $("div");
$("#start").click(function(){
div.animate({height:'500px'},"slow");
div.animate({width:'500px'},"slow");
div.animate({height:'200px'},"slow");
div.animate({width:'200px'},"slow");
});
$("#stop").click(function(){
div.stop(true);
});
</script>
3 JQuery DOM
3.1内容操作
1.文本内容捕获和设置text()作用:获取或设置文本内容(等价于DOM操作中的innerText属性)
2.HTML():获取或设置文本内容(等价于DOM操作中的innerText属性)
3.Val()huoqu或者设置表单中的值
4.Attr():获取元素的属性值
3.2元素的添加
1)append():在元素的最后添加内容
2)可以同时添加多个内容,这些内容可以通过HTML,JQuery,DOM创建的
3)prepend() 在元素的最前面添加内容
4)可以同时添加多个内容,这些内容可以通过HTML,JQuery,DOM创建的
5)after和before
6)两组添加的区别:append()和prepend()添加后成为了其子元素
after()和before()添加后成为了其兄弟元素
3.3元素的删除
remove():删除的是被选元素及其子元素。
emrty():删除的是子元素。
remove():还有过滤删除的作用,可以删除指定元素,里面的参数就是指定元素的名字
$("#delDiv1").click(function(){
$("p").remove(".p2");
});
这个代码的作用就是:删除所有p标签中class名为p2的元素
3.4操作css类
添加class类:addclass()
删除class类removeclass()
切换class类:toggleclass()
3.5操作css类
$("p").css("color","green");
css():里面传两个参数:第一个参数是要设置的属性,第二个参数是设置的属性值
$("p").css({"color":"green","font-size":"30px"});
css():也可以设置多个属性,不同属性用“,”隔开,属性名和属性值用“:”隔开,最外层用大括号“{}”
括起来。
4JQuery 导航
4.1祖先
Parent()找到的是当前元素的父元素
Parents()找到的是当前元素的所有祖先元素
注意如果在小括号内传入参数,就可以找到你所指定的那一个父元素
parentsUntil()选中两个指定元素中的祖先元素
4.2后代
children():找到的是当前元素的直接后代
在小括号中传入参数,找到的是你指定的那一个子元素
Find():找到的是当前元素的所有后代,一直向下查找直到找到最后一个子元素
注意这里一定要传参数
4.3同胞
Siblings()找到当前元素的所有同胞元素
Next():找到的是当前元素的下一个弟弟元素
nextAll()找到的是当前元素的所有弟弟元素
nextUntil()找到的是两个参数之间的同胞元素
Prev():找到的是当前元素的上一个哥哥元素
prevAll()找到的是所有当前元素的哥哥元素
prevUntil()找到的是两个指定元素之间的同胞元素
5 JQuery Ajax
5.1 ajax
语法
$.ajax(JSON);
JSON包含常用的参数
Url:服务器的地址,获取数据或者推送数据的地方
Data:需要给服务器的数据,根据业务需要去添加,比如登录的接口需要传递“用户名和密码”,获取书籍信息,不需要传递任何的参数
数据类型:JSON对象。键值对的“键”和服务器保持完全一致,包括键名的大小写
Type:数据提交的方式。GET/POST/PUT/DELETE(大写)
Timeout:请求等待的时间。时间单位是毫秒,一般是10s
Success:请求成功 返回处理
Error:请求失败 返回处理函数
Datatype:预期的服务器响应的数据类型
5.2 get
$.get(URL,data,function(data,status,xhr),dataType)
URL:服务器的地址
Data:请求发送到服务器的数据
5.3 post
$(selector).post(URL,data,function(data,status,xhr),dataType)
jQuery插件
6.1 validate
(1)required。必填字段
<input type="text" id="txt1" required/></br>
(2)Eamil,验证邮箱格式,支持很多形式的邮箱
<input type="email" id="email" required >
(3)URL,验证网址,形如http://www.baidu.com,不支持www.baidu.com
<input type="url" id="url" required ><br>
(4)Maxlength,输入字符的最大长度
<input type="text" id=maxLength" maxlength="5" ><br>
(5)rangelength[],表示输入字符长度点的范围
<input type="text" id="rangeLength" rangelength="[5,10]"><br>
验证的第二种写法,可以在表单验证的时候为其添加
$.validator.setDefaults({
submitHandler:function(){
alert("验证成功了")
}
});
$("#formData").validate({
rules:{
password:{
required : true,
maxlength:"6"
},
rePassword :{
equalTo:"[name=password]"
}
}
});
6.2accordion
依据标题和内容来自动选择折叠
$("#div1").accordion();
Header:定义以哪个标签来折叠
Event:定义折叠的事件。例如:mouseover,鼠标移上去就可以展开。
Animate:定义是否有动画。默认true 有动画效果。
Disable:禁用折叠。
Destroy:销毁折叠。
6.3 autocomplete
$(function(){
var content = [
"华",
"华点",
"欢迎来到华点",
"华点软件学院"
];
$("#text1").autocomplete({
source:content
});
});
6.4growl
提示框,定义的是鼠标不点击取消时会在几秒后自动消失,当鼠标停留在提示框上,则不消失。
Title,消息提示的标题
Message,提示的内容
(1)growl后面不写某些关键词,使用默认样式
$.growl({title:"消息提示", message:"提示内容"})
(2)notice
$.growl.notice({title:"提醒消息提示", message:"提醒消息内容"})
(3)Warning
$.growl.warning({title:"警告消息提示", message:"提示内容"})
(4)Error
$.growl.error({title:"错误消息提示", message:"提示错误"})