jQuery知识点整理（介绍、基本用法、选择器、CSS样式 尺寸 文本 属性 操作、文档处理、jQuery常用事件、jQuery效果）

JQuery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

JQuery基本用法

//引入jQuery文件，可以本地也可以远程
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
//当文档完成加载完时触发，避免获取dom对象时，dom对象还没有加载
$(document).ready(function(){
//写js语句或者jQuery函数
$("p").click(function(){
$(this).hide();
});
});
</script>

JQuery选择器

1.基本选择器

• ID选择器：$("#myDiv")
• 类选择器：$(".myClass")
• 标签选择器：$(“div”)
• 通配符选择器：$("*") 匹配所有元素
• 并集选择器：$(“div,span,p.myClass”) 联合所有匹配的选择器
• 交集选择器：$(“p.myClass”) 匹配到p标签里面的类名

2.层级选择器

• 后代选择器：$(“form input”)
• 子代选择器：$("#main > span")main下一级的的所有span子节点
• 兄弟选择器：$(“label + input”) 兄弟相邻选择器，选择所有label相邻的第一个input节点
• 兄弟选择器：$("#prev ~ div") 相邻后边的所有，选择prev的所有后面的div同胞节点

3.筛选选择器

• $(“li:first”) 匹配第一个选择的li元素
• $(“li:last”) 匹配最后一个选择的li元素
• $(“li:not(:first)”)选择除了第一个标签之外的所有li标签

4.父子元素过滤器

• parent() 获取指定标签的父节点
• parents() 获取指定标签的祖先节点 父节点以上都是 传参如果指定祖先哪个就是哪个
• children() 获取指定标签的所有子节点
• siblings() 获取指定标签的兄弟节点 除了自己以外的所有兄弟

JQuery操作

1.css样式及样式类操作

• 样式类

 
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

 

• 设置css样式，如：

  $('.c1').css('background-color','red');  
	同时设置多个css样式
	$('.c1').css({'background-color':'yellow','width':'200px'})
 

2.尺寸操作

$('.c1').height();  //设置或返回元素的高度（不包括内边距、边框或外边距）
$('.c1').width();   //设置或返回元素的宽度（不包括内边距、边框或外边距）
$('.c1').innerHeight();//返回元素的高度（包括内边距）
$('.c1').innerWidth(); //返回元素的宽度（包括内边距）
$('.c1').outerHeight();//返回元素的高度（包括内边距和边框）
$('.c1').outerWidth();//返回元素的宽度（包括内边距和边框）

3.文本操作

html()//取得第一个匹配元素的html内容，包含标签内容
html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果

text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
 

4.属性操作

 
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
 

5.文档处理

• append() 在被选元素的结尾插入内容

$(A).append(B)// 把B追加到A
$('#d1').append('<a href="http://www.jd.com">京东</a>')
 

• prepend() 在被选元素的开头插入内容

$(A).prepend(B)// 把B前置到A
$('a').prependTo($('div'))
 

• after() 在被选元素之后插入内容

$(A).after(B)// 把B放到A的后面
 

• before() 在被选元素之前插入内容

$(A).before(B)// 把B放到A的前面
 

• remove() 删除被选元素（及其子元素）

$('div').remove();
 

• empty() 从被选元素中删除子元素

$('div').empty();
 

JQuery常用事件

$(document).ready(function) //将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	//触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	//触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	//触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	//触发或将函数绑定到被选元素的鼠标悬停事件
$(selector).mouseup(function) //触发、或将函数绑定到指定元素的mouse up事件
$(selector).mouseout(function) //触发、或将函数绑定到指定元素的鼠标指针从元素上移开事件
$(window).unload(function)	//触发、或将函数绑定到window的unload事件
$(selector).toggle(function1(),function2(),functionN(),...) //所有匹配元素的指定事件
$(selector).error(function) //触发、或将函数绑定到指定元素的 error 事件
$(selector).change(function) //当元素的值发生改变时，会发生 change 事件

JQuery效果

显示和隐藏:显示show() ，隐藏hide() ，切换toggle()

 
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//第一个参数:动画时间(速度);第二个参数:动画执行完毕之后的回调函数
 

滑动:向下滑动slideDown() ，向上滑动slideUp()， 切换slideToggle()

 
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
//第一个参数:动画时间(速度);第二个参数:动画执行完毕之后的回调函数
 

淡入淡出：淡入fadeIn（），淡出fadeOut（）， 切换fadeToggle(timer,callback)

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
//第一个参数:动画时间(速度);第二个参数:动画执行完毕之后的回调函数
 

自定义动画:animate

 
$(selector).animate({params},speed,callback); 
//第一参数为对象，键值类要做什么动画;第二参数为时间;第三参数为回调函数

停止动画stop()

$(selector).stop(stopAll,goToEnd);
//第一个参数:控制队列中的任务(是否清空)  true|false;第二个参数:控制是否停止动画   true|false
       //没有参数: 停止当前的动画, 后面的任务继续执行
       //true true :立即完成当前的动画,后面的任务不再执行
       //true false:所有动画任务立刻停止
       //false false:停止当前的动画,后面的任务继续执行  默认的情况
       //false true :立即完成当前的动画,后面的任务继续执行