jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作。
jQuery简介
jQuery是一个实用的JavaScript库。jQuery极大地简化了JS对DOM的操作,实现一些常用的方法,jQuery还可以链式操作。
jQuery的基本用法
jQuery常用的选择器和事件
$() – 使用CSS选择器匹配元素
jQuery的事件和JS的事件基本相同,在使用的时候,去掉JS事件前面的on即可。
jQuery常用的事件:
load
:当文档加载时运行脚本blur
:当窗口失去焦点时运行脚本focus
:当窗口获得焦点时运行脚本change
:当元素改变时运行脚本submit
:当提交表单时运行脚本keydown
:当按下按键时运行脚本keypress
:当按下并松开按键时运行脚本keyup
:当松开按键时运行脚本click
:当单击鼠标时运行脚本dblclick
:当双击鼠标时运行脚本mousedown
:当按下鼠标按钮时运行脚本mousemove
:当鼠标指针移动时运行脚本mouseout
:当鼠标指针移出元素时运行脚本mouseover
:当鼠标指针移至元素之上时运行脚本mouseup
:当松开鼠标按钮时运行脚本abort
:当发生中止事件时运行脚本
jQuery常用的效果方法
$(selector).hide()
– 隐藏被选的元素$(selector).show()
– 显示被选的元素$(selector).toggle()
– 对被选元素进行隐藏和显示的切换$(selector).slideDown()
– 通过调整高度来滑动显示被选元素$(selector).slideToggle()
– 对被选元素进行滑动隐藏和滑动显示的切换$(selector).slideUp()
– 通过调整高度来滑动隐藏被选元素$(selector).fadeIn()
– 逐渐改变被选元素的不透明度,从隐藏到可见$(selector).fadeOut()
– 逐渐改变被选元素的不透明度,从可见到隐藏$(selector).fadeTo()
– 把被选元素逐渐改变至给定的不透明度$(selector).animate()
– 对被选元素应用“自定义”的动画
jQuery常用的DOM元素操作方法
$(selector).parent()
– 返回被选元素的直接父元素。$(selector).parents()
– 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>),可选参数来过滤对祖先元素的搜索$(selector).children()
– 返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索$(selector).find()
– 返回被选元素的后代元素,一路向下直到最后一个后代,可选参数来过滤对后后代元素的搜索$(selector).siblings()
– 返回被选元素的所有同胞元素。过滤对同胞元素的搜索。$(selector).next()
– 返回被选元素的下一个同胞元素。$(selector).nextAll()
– 返回匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。$(selector).prev()
– 返回的是前面的同胞元素$(selector).prevAll()
– 返回匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。$(selector).first()
– 将匹配元素集合缩减为集合中的第一个元素。$(selector).last()
– 将匹配元素集合缩减为集合中的最后一个元素。$(selector).eq()
– 指定索引的新元素。$(selector).get()
– 获得由选择器指定的 DOM 元素。$(selector).index()
– 返回指定元素相对于其他指定元素的 index 位置。$(selector).each()
对对象进行迭代,为每个元素执行函数$(selector).toArray()
以数组的形式返回 jQuery 选择器匹配的元素$(selector).size()
返回被 jQuery 选择器匹配的元素的数量$(selector).text()
– 设置或返回所选元素的文本内容$(selector).html()
– 设置或返回所选元素的内容(包括 HTML 标记)$(selector).val()
– 设置或返回表单字段的值$(selector).append()
– 在被选元素的结尾插入内容$(selector).prepend()
– 在被选元素的开头插入内容$(selector).after()
– 在被选元素之后插入内容$(selector).before()
– 在被选元素之前插入内容$(selector).remove()
– 删除被选元素(及其子元素)$(selector).empty()
– 从被选元素中删除子元素$(selector).removeAttr()
– 从所有匹配的元素中移除指定的属性。$(selector).clone()
– 创建匹配元素集合的副本$(selector).load()
– 从服务器加载数据,然后把返回到 HTML 放入匹配元素
注:parent()、next()、prev()、first()、last()、eq()只返回一个元素。返回元素集合的函数都可以传传参数筛选,比如:parents()、siblings()、nextAll()、prevAll()、siblings()。
jQuery对CSS的操作
$(selector).height()
– 设置或返回匹配元素的高度。$(selector).width()
– 设置或返回匹配元素的宽度。$(selector).addClass()
– 向被选元素添加一个或多个类$(selector).removeClass()
– 从被选元素删除一个或多个类$(selector).toggleClass()
– 对被选元素进行添加/删除类的切换操作$(selector).css()
– 设置或返回样式属性$(selector).hasClass()
检查匹配的元素是否拥有指定的类。
jQuery其他知识点
$(selector).data()
– 存储与匹配元素相关的任意数据$(selector).removeData()
– 移除之前存放的数据$(selector).serialize()
– 将表单内容序列化为字符串$(selector).serializeArray()
– 序列化表单元素,返回 JSON 数据结构数据