学习web前端开发，除了要学习HTML、css、js等基础知识外，jQuery也是必须内容之一。那对于jQuery的学习我们具体要学哪些东西，要学到什么程度呢？且看今天小编为大家分享的jQuery常用知识点集锦。
1、jQuery 概述
我们首先从jQuery最基本的概述说起，jQuery是一个 JavaScript 库，极大地简化了 JavaScript 编程。
2、添加 jQuery 库
在前端开发中，我们如何添加jQuery库呢？其实，jQuery 库位于JavaScript 文件中，其中包含了所有的 jQuery 函数，可通过如下方式添加：
＜head＞
＜script type="text/javascript" src="jquery.js"＞＜/script＞
＜/head＞
3、jQuery 语法
jQuery是为 HTML 元素的选取编制的，可以对元素执行某些操作。
$(selector).action()
• $美元符号定义 jQuery。
• 选择符（selector）“查询”和“查找” HTML 元素。
• jQuery 的 action() 执行对元素的操作。
4、jQuery 选择器
jQuery中包含了多种选择器，其中比较常用的就是元素选择器、属性选择器和css选择器，下面我们来一一看下他们的使用语法吧。
（1）元素选择器
使用 CSS 选择器来选取 HTML 元素。
语法：
$("p") ：选取 ＜p＞ 元素。
$("p.intro") ：选取所有 class="intro" 的 ＜p＞ 元素。
$("p#demo")： 选取所有 id="demo" 的 ＜p＞ 元素。
（2）属性选择器：
使用 XPath 表达式来选择带有给定属性的元素。
语法：
$("[href]") ：选取所有带有 href 属性的元素。
$("[href='#']") ：选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") ：选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") ：选取所有 href 值以 ".jpg" 结尾的元素。
（3）CSS 选择器：
可用于改变 HTML 元素的 CSS 属性。
例：
$("p").css("background-color","red");
5、 jQuery HTML
获得\设置内容：
text()：设置或返回所选元素的文本内容。
html()：设置或返回所选元素的内容（包括 HTML 标记）。
val()：设置或返回表单字段的值。
获取\设置属性：
attr()：用于获取、设置/改变属性值属性值。
例：
$("button").click(function(){
alert($("#w3s").attr("href"));
});
添加新的内容：
append()：在被选元素的结尾插入内容。
prepend()：在被选元素的开头插入内容。
after()：在被选元素之后插入内容。
before()：在被选元素之前插入内容。
删除元素/内容：
remove()：删除被选元素（及其子元素）。
empty()：从被选元素中删除子元素。
操作 CSS：
addClass()：向被选元素添加一个或多个类。
removeClass()：从被选元素删除一个或多个类。
toggleClass()：对被选元素进行添加/删除类的切换操作。
css()：设置或返回样式属性。
jQuery 尺寸：
width() 和 height() 方法
width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()：设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 和 innerHeight() 方法
innerWidth()：返回元素的宽度（包括内边距）。
innerHeight()：返回元素的高度（包括内边距）。
outerWidth() 和 outerHeight() 方法
outerWidth()：返回元素的宽度（包括内边距和边框）。
outerHeight()：返回元素的高度（包括内边距和边框）。
6、jQuery 事件
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到部分的事件处理方法中。
常用的事件方法：
$(document).ready(function)：将函数绑定到文档的就绪事件（当文档完成加载时）。
$(selector).click(function)：触发或将函数绑定到被选元素的点击事件。
$(selector).dblclick(function)：触发或将函数绑定到被选元素的双击事件。
$(selector).focus(function)：触发或将函数绑定到被选元素的获得焦点事件。
$(selector).mouseover(function)：触发或将函数绑定到被选元素的鼠标悬停事件。
7、 jQuery 特效
隐藏和显示：
hide() 和 show()：隐藏和显示 HTML 元素。
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
toggle()：来切换 hide() 和 show() 方法。
语法：
$(selector).toggle(speed,callback);
动画：
animate()：用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
params：必备，定义形成动画的 CSS 属性。
speed：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
callback：是动画完成后所执行的函数名称。
滑动：
• slideDown()：用于向下滑动元素。
语法：
$(selector).slideDown(speed,callback);
speed：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
callback：是滑动完成后所执行的函数名称。
• slideUp()：用于向上滑动元素。
语法：
$(selector).slideUp(speed,callback);
speed：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
callback：是滑动完成后所执行的函数名称。
• slideToggle()：可以在 slideDown() 与 slideUp() 方法之间进行切换。
语法：
$(selector).slideToggle(speed,callback);
speed：规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
callback：是滑动完成后所执行的函数名称。
以上就是web前端中，jQuery常用的一些知识点，希望对大家在学习、使用jQuery有所帮助。
相关阅读：《JavaScript绑定事件如何实现覆盖？》 http://www.maiziedu.com/group/article/664/
有疑问加站长微信联系（非本文作者）
