一、jQuery概述
jQuery 就是一款免费且开放源代码的JavaScript代码库。
官方下载地址：http://jquery.com/download
二、jQ对象与DOM对象
<body>
<div id='div'>666</div>
<input type="text">
<input type="text">
</body>
<script>
//$('input')为jQ对象
//$('input')[0]则转为DOM对象
//var d = document.getElementById("div")为DOM对象
//$(d)则转为jQ对象
</script>
三、jQuery中的选择器
语法：$("#div");
详见手册：
四、jQuery中的属性和CSS
1、基本属性attr
<body>
<img src="./a.jpg" id="img">
</body>
<script>
//获取被选元素的属性值
console.log($('#img').attr('src'));
//设置被选元素的属性值
$('#img').attr('src','./abc.jpg');
//设置被选元素的多个属性值
$('#img').attr({'width':'100px','height':'100px'});
//将函数的返回值作为属性值
$('#img').attr('width',function(){
return 50*5;
});
//删除元素属性
$('#img').removeAttr('height');
</script>
2、class属性
<style type="text/css">
.red{
color:red;
}
</style>
<body>
<div id="div">666</div>
</body>
<script>
//给元素添加class属性
$('#div').addClass('red');
//移除元素的class属性
$('#div').removeClass('red');
//切换元素的class属性，存在就移除，没有就添加
$('#div').toggleClass('red');
//判断元素是否具有某个class属性
if($('#div').hasClass('red')){
alert('yes');
}
</script>
3、css样式设置
<style type="text/css">
.red{
color:red;
}
.bg{
background:gray;
}
</style>
<body>
<div id="div" class="red bg">666</div>
</body>
<script>
//根据name获取元素的css属性值
console.log($('#div').css('color'));
//设置元素的属性值
$('#div').css('width','100px');
//一次为元素设置多个属性值
$('#div').css({width:100,"height":'100px'});
</script>
jQ中也有专门设置宽高的方法：
width()：获取元素的宽度
width(value)：设置元素的宽度
height()：获取元素的高度
height(value)：设置元素的高度
4、offset位置
<style type="text/css">
.style{
width: 100px;
height: 50px;
background: gray;
position: absolute;
left: 10px;
top: 10px;
}
</style>
<body>
<div id="div" class="style">666</div>
</body>
<script>
//获取元素的横纵坐标，返回一个对象，包含left和top属性
console.log($('#div').offset()); //{top:10,left:10}
//设置元素位置，必须包含left和top属性
$('#div').offset({top:60,left:80});
console.log($('#div').offset()); //{top:60,left:80}
</script>
5、表单值、元素内容、元素文本内容
val()：获取表单元素的value值
val(value)：设置表单元素的value值
html()：取得第一个匹配元素的html内容，这个函数不能用于XML文档，但可以用于XHTML文档
html(value)：设置所有匹配元素的内容（字符串中的标签可以被解析）
text()：取得所有匹配元素的内容
text(value)：设置所有匹配元素的文本内容
五、事件编程
1、jQ中的事件绑定
jQ对象.事件名称(事件处理程序);
注意：①事件名称前边不加on（jQ中的事件绑定方法就是原生中对应绑定事件去掉on）
②jQ事件的绑定属于事件监听
2、页面载入事件ready
<script>
//当DOM加载完毕就会被触发运行
//注意：只是DOM加载完毕就触发，并不等待资源加载完成，此处要区别于原生对象的onload事件
$().ready(function(){
alert(666);
});
//ready的简化写法
$(function(){
alert(666);
});
</script>
3、事件切换
<body>
<div class="style">666</div>
<div class="style">888</div>
<img src="./abc.jpg" id="img">
</body>
<script>
//当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数
//当鼠标移出这个元素时，会触发指定的第二个函数
$('div').hover(function(){
//注意：此处如果用$(this)是鼠标移动上改变当前元素
//如果用$('div')则是全部匹配到的元素一起改变
$(this).css('color','red');
},function(){
$(this).css('color','purple');
});
//toggle(fn1,fn2,fn3...,fnN);(注意：jQ版本1.8.3支持或者引入插件)
//点击切换事件，第一次点击执行fn1，第二次点击执行fn2...
//当所有函数执行完后再点击，则再从第一个开始执行
$('#img').toggle(function(){
$(this).width(100);
},function(){
$(this).width(200);
},function(){
$(this).width(300);
});
</script>
4、事件处理
one("事件1 事件2 事件n",fn)：为选中元素绑定一次性事件（多个事件用空格隔开）
bind("事件1 事件2 事件n",fn)：为选中的元素绑定一个或多个事件
unbind("事件1 事件2 事件n",fn)：为选中的元素删除一个或多个事件
jQuery3.0中已经弃用unbind()方法，用off()代替
<script>
$('#img').one('click mouseleave',function(){
alert(666);
}); //绑定的每一种事件只执行一次
</script>
六、jQuery中的效果
1、隐藏和显示
①hide([speed,[fn]])：隐藏显示的元素
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数
②show([speed,[fn]])：显示隐藏的匹配元素
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数
2、自定义动画
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"
fn:在动画完成时执行的函数，每个元素执行一次
七、jQuery中的文档处理
1、插入操作
①内部插入
append(content)向匹配的元素内部追加内容
appendTo(content)把匹配的元素追加到另一个指定的元素集合中
prepend(content)内容前置到匹配的元素内部
prependTo(content)把匹配的元素前置到另一个指定的元素集合中
②外部插入
after(content)在匹配的元素之后插入内容
before(content)在匹配的元素之前插入内容
insertAfter(content)把匹配的元素插入到另一个指定的元素集合的后面
insertBefore(content)把匹配的元素插入到另一个指定的元素集合的前面
2、删除
empty()删除匹配的元素集合中所有的子节点
remove([expr])从DOM中删除所有匹配的元素
<script>
//删除选中的节点内容
$('#div').empty();
//在DOM树中删除选中节点
$('#div').remove();
//在选中的节点中删除指定节点
$('div').remove("#div");
</script>
3、克隆（复制）
<script>
//仅克隆内容
$('#div').clone();
//克隆内容与事件
$('#div').clone(true);
</script>
4、查找
replaceWith(content)将所有匹配的元素替换成指定的HTML或DOM元素
5、包裹
wrap(html|ele|fn)把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap()移出选中元素的父元素
wrapAll(html|ele)将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele|fn)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
6、查找
eq(index)：根据元素的index索引来查找元素
filter(expr)：筛选操作$(‘div’).filter(‘.cls1’)
not(expr)：匹配除指定选择器以外的其他元素
children([expr])：获取当前元素下的所有子元素
find(expr)：获取当前元素下的所有后代元素
next([expr])：获取当前元素下紧邻的下一个元素
prev([expr])：获取当前元素上紧邻的上一个元素
parent([expr])：获取当前元素的父元素
siblings([expr])：获取当前元素的所有同级兄弟元素
八、JQ插件
<body>
<div id="div">666</div>
<input type="text" id="inp">
</body>
<script type="text/javascript">
//1、为元素扩展新方法
//示例①
$.fn.extend({
f1:function(){
this.css('color','red');
},
f2:function(){}
});
$('#div').f1();
//示例②
$.fn.extend({
input:function(fn){
this[0].oninput = fn;
}
});
$('#inp').input(function(){
console.log(8);
});
//2、为JQ对象扩展新方法
$.extend({
f1:function(){alert(888);},
f2:function(){}
});
$.f1();
</script>
九、jQuery中的Ajax
1、Ajax的底层封装
语法：$.ajax(obj)
对象的参数设置及含义：
<body>
<input type="button" id="btn" value="按钮">
</body>
<script>
//Ajax的底层封装
//get请求
// $('#btn').click(function(){
// $.ajax({
// type:'get',
// url:'./test.php',
// success:function(data){
// alert(data);
// }
// });
// });
//post请求
$('#btn').click(function(){
$.ajax({
type:'post',
url:'./test.php',
data:'id=6',
success:function(data){
alert(data);
}
});
});
</script>
2、Ajax的高层实现
①get请求
$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数
callback:载入成功时回调函数
type:返回内容格式xml, html, script, json, text, _default
<body>
<input type="button" id="btn" value="按钮">
</body>
<script>
//无参数
// $('#btn').click(function(){
// $.get('./test.php',function(data){
// alert(data);
// },'json');
// });
//有参数
$('#btn').click(function(){
//多个参数也可使用对象的形式：{a:6,b:'hsz'}
$.get('./test.php','a=6&b=hsz',function(data){
alert(data);
},'text');
});
</script>
②post请求
$.post(url, [data], [callback], [type])
url:发送请求地址
data:待发送 Key/value 参数
callback:发送成功时回调函数
type:返回内容格式xml, html, script, json, text, _default
<script>
$('#btu').click(function(){
$.post(./test.php',
{id:'11'},
function(data){
alert(data.a);
},'json');
});
</script>
十、jQuery中的跨域问题
<script>
//当前页面：http://www.hsz.com/test.html
$('#btn').click(function(){
//$.ajax方法的jsonp跨域
$.ajax({
url:'http://www.blog.com/test.php?fn=?',
dataType:'jsonp',
success:function(data){
alert(data.b);
}
});
//$.get方法的jsonp跨域
$.get('http://www.blog.com/test.php?fn=?',function(data){
alert(data.b);
},'jsonp');
//$.getJSON方法的jsonp跨域
$.getJSON(
'http://www.blog.com/test.php?fn=?',
function(data){
alert(data.b);
}
);
});
</script>
十、常用插件网址及CDN加速
1、jQ插件库：http://www.jq22.com
2、jQ旋转插件：http://www.jqueryrotate.com
3、百度ECHARTS：http://echarts.baidu.com
4、BooTCDN加速服务：https://www.bootcdn.cn
网友评论