jQuery基础语法

之前写过一篇 javascript 基础用法，今天就简单的聊一下 jQuery 的一些语法 ，jQuery 是一个 javascript 库，简化了 javascript 编程，以下只是个人整理的一些语法的用法，想了解更多请前往 jQuery API 查看。

jquery 选择器

$("*")：选取所有元素。

$(this)：选取当前 HTML 元素。

$("p.intro")：选取 class 为 intro 的 <p> 元素。

$("p:first")：选取第一个 <p> 元素。

$("ul li:first")：选取第一个 <ul> 元素的第一个 <li> 元素。

$("ul li:first-child")：选取每个 <ul> 元素的第一个 <li> 元素。

$("[href]")：选取带有 href 属性的元素。

$("a[target='_blank']")：选取所有 target 属性值等于 "_blank" 的 <a> 元素。

$("a[target！='_blank']")：选取所有 target 属性值不等于 "_blank" 的 <a> 元素。

$(":button")：选取所有 type = "button" 的 <input> 元素和 <button> 元素。

$("tr:even")：选取偶数位置的 <tr> 元素。

$("tr:odd")：选取奇数位置的 <tr> 元素。

jquery 事件

$(document).ready()： 方法允许我们在文档完全加载完成后执行函数。

click() ：方法是当按钮点击事件被触发时会调用一个函数。

dblclick()： 当双击元素时，会触发 dblclick 事件。

mouseenter()： 当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave() ：当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown() ：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

mouseup()： 当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover() ：方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数。

focus() ：当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

blur() ：当元素失去焦点时，发生 blur 事件。

jQuery 效果

隐藏和显示

jquery hide()：隐藏。

jquery show()：显示。

jquery toggle()：显示已被隐藏的元素，并隐藏已显示的元素。

淡入淡出

jquery fadeln()：用于淡入已隐藏的元素。

jquery fadeOut()：用于淡出可见元素。

jquery fadeToggle()：方法可以在 fadeIn() 与 fadeOut() 之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

jquery fadeTo()：方法允许渐变为给定的不透明度（介于0 - 1之间）。

滑动

jquery slideDown()：方法用于向下滑动元素

jquery slideUp()：方法用于向上滑动元素

jquery slideToggle()：方法可以在 slideUp() 与 slideDown() 之间进行切换。如果元素向下滑动，则 slideToggle() 向上滑动它们。如果元素向上滑动，则 slideToggle() 向下滑动它们。

jQuery遍历

向上遍历DOM树

jquery parent()：返回被选元素的直接父元素

jquery parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素（html）

jquery parentUntil()：返回介于两个给定元素之前的所有祖先元素

向下遍历DOM树

jquery children()：返回被选元素的所有直接子元素

jquery find()：返回被选元素的后代元素，一路向下直到最后一个后代

水平遍历DOM树

jquery siblings()：返回被选元素的所有同胞元素

jquery next()：返回被选元素的下一个同胞元素-------（jquery prev()：相反）

jquery nextAll()：返回被选元素的所有跟随的同胞元素------（jquery prevAll()：相反）

jquery nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素------（jquery prevUntil()：相反）

缩小搜索元素的范围

jquery first()：返回被选元素的首个元素

jquery last()：返回被选元素的最后一个元素

jquery eq()：返回被选元素中带有指定索引号的元素（索引号从0开始）

jquery filter()：允许你规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

jquery not()：返回不匹配标准的所有元素（not 和 filter 相反）

jquery 获取内容和操作

获取内容 text()、html()、以及val()

text()：设置或返回所选元素的文本内容

html()：设置或返回所选元素的内容

val()：设置或返回表单字段的值

获取属性 attr()

attr()：方法用于获取属性值

添加元素

append()：在被选元素的结尾插入内容（在元素内）

prepend()：在被选元素的开头插入内容（在元素内）

after()：在被选元素之后插入内容（在元素外）

before()：在被选元素之前插入内容（在元素外）

删除元素

remove()：删除被选元素及其子元素

empty()：删除被选元素的子元素

操作CSS

addClass()：向被选元素添加一个或多个类

removaClass()：从被选元素删除一个或多个类

toggleClass()：对被选元素进行添加/删除类的切换功能（有就删除，没有就添加）

jquery尺寸方法

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）

height()：设置或返回元素的高度（不包括内边距、边框或外边距 ）

innerWidth()：返回元素的宽度（包括内边距）

innerHeight()：返回元素的高度（包括内边距）

outerWidth()：返回元素的宽度（包括内边距和边框）

outerHeight()：返回元素的高度（包括内边距和边框）

 

以上是在刚学习 jQuery 时整理，希望和我一样想要学习的小伙伴们有所帮助，写的有问题的地方，欢迎指出，非常感谢！