学习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/
有疑问加站长微信联系（非本文作者）
