前端-JQuery
在我们学习过HTML,CSS,JavaScript之后,就可以完成网页的制作了,而JQuery只是一种轻量级的JavaScript库,可以让我们更方便的写JavaScript代码,用以完成我们的需求.
jQuery的优势在于:
- 文件非常小,不会影响页面的加载速度
- 选择器使用非常方便,比直接调用JavaScript要更方便
- 支持事务,样式和动画,可以把界面写的更加生动.
- 跨浏览器兼容,比JavaScript兼容的浏览器更多更广
- 插件的扩展,jQuery的第三方插件非常多,调用和修改都十分方便.
我们简略介绍以下jQuery的各方面内容,包括选择器,筛选器,样式和文本操作,属性操作,文档处理,事件等.
jQuery的对象
jQuery的对象就是通过jquer包装DOM后产生的一个对象,是jQuery独有的,并且可以和JavaScript的对象互相转换.
我们在定义jQuery对象的时候,要在变量名前面加上$,包括后面在调用jQuery语句的时候,也可以直接用$来表示jQuery对象的操作,比如
var $a = jQuery对象 # jQuery的基本语法为: $(selector).action()
另外,我们在定义jQuery之前一定要导入jQuery文件,可以用网络上的缓存文件,也可以用本地文件.
选择器
#id选择器
$("#id")
#标签选择器
$("tagName")
#class选择器
$(".className")
#所有元素选择器
$("*")
#组合选择器
$("#id,.className,tagName")
#层级选择器
$("x y") x的所有后代y
$("x > y") x的所有儿子y
$("x + y") x的所有紧挨着的y(毗邻)
$("x - y") x的所有兄弟y
#属性选择器
#属性选择器主要用的是中括号,里面写判断条件
[attribute]
[attribute=value]
筛选器
# 基本筛选器
:first 第一个标签
:last 最后一个标签
:eq() 索引等于括号内的那个元素
:even 匹配索引值为偶数的元素
:odd 匹配索引值为奇数的元素
:gt() 匹配所有大于括号内索引值的元素
:lt() 匹配所有小于括号内索引值的元素
:not(选择器) 移除所有满足not括号内条件的标签
:has(选择器) 选取所有满足has括号内条件的标签
# 表单筛选器
:text 明文
:password 密文
:file 文件名称
:redio 单选框
:checkbox 多选框
:submit 提交
:reset 重置
:button 按钮
# 表单对象的属性
:enabled
:disabled
:checked
:selected 放在select表单内部的标签属性里,会默认选择这个带selected的标签用以显示
# 筛选器方法
$("#id").next() 下一个元素
$("#id").prev() 上一个元素
$("#id").parent() 父辈元素,当前父辈,仅一个
$("#id").parent() 父辈的所有元素
$("#id").children() 所有的儿子元素们
$("#id").siblings() 所有的兄弟元素们
$("#id").find() 查找与括号内相匹配的元素
$("#id").filter() 筛选出符合filter括号内的元素,然后过滤掉
样式操作
# 通常对类来进行操作 addClass(); 添加指定的类,括号内为类名 removeClass(); 移除指定的CSS类名,括号内为类名 hasClass(); 判断括号内样式是否存在,返回值为布尔值 toggleClass(); 如果已经有该类名,会移除,如果没有,会添加 # 查看元素尺寸 height() width() innerHeight() innerWidth() outerHeight() outerWidth()
位置操作
# 对元素的位置操作 offset() 括号内为空则获取元素在当前窗口的相对偏移,括号内不为空则设置元素位置 position() 获取匹配元素相对父元素的偏移 scrollTop() 获取匹配元素相对滚动条的顶部的偏移(如果有滚动条的话) scrollLeft() 获取匹配元素相对滚动条左侧的偏移(如果有滚动条的话)
文本操作
# 可以设置或者显示文件的html,text以及val html() 括号为空则取得第一个匹配元素的html内容,括号不为空则设置所有匹配元素的html内容 text() 括号为空则取得所有匹配元素的内容,括号不为空则设置所有匹配元素的内容 val() 括号为空则取得第一个匹配元素的当前值,括号不为空则设置所有匹配元素的值
属性操作
# 主要用于查询或者修改ID和一些自定义属性
attr(attrName) 返回第一个匹配元素的属性值
attr(attrName,attrValue) 为所有匹配到的元素设置一个属性值
attr(k1:v1,k2:v2) 为所有匹配元素设置多个属性值
removeAttr() 从每一个匹配的元素中删除一个属性
# 用于查询修改checkbox和radio等
prop() 获取属性
removeProp() 移除属性
attr和prop的区别在于,attr通常指的是HTML标签属性,而prop是DOM的对象属性.
所以总结下来
对于标签上能看到属性和自定义属性的标签,都用attr来操作.
对于返回布尔值的的标签,比如checkbox,radio和option等,都用prop
文档处理
$(A).append(B) 把B追加到A内部的最后面 $(A).prepend(B) 把B追加到A内部的最前面 $(A).after(B) 把B添加到元素A外部的后面 $(A).before(B) 把B添加到元素A外部的前面 $(A).remove() 从DOM中删除所有匹配到的元素 $(A).empty() 删除匹配的元素的所有子节点,不删除该元素 replaceWith() 替换单个元素 replaceAll() 替换所有元素
事件
jQuery中的事件和JavaScript中的事件十分相似,可以说除了写法基本是一样的.
常用事件
click(function(){}) click替代了JavaScript中的onclick和ondblclick等鼠标操作
hover(function(){}) 鼠标移动到该定义的元素上就会触发这个函数,移出去也会触发
blur(function(){}) 相当于onblur失去焦点
focus(function(){}) 相当于onfocus获得焦点
change(function(){}) 改变当前事件时候会触发函数
keydown(function(){}) 键盘按下的时候会触发
keyup(function(){}) 键盘抬起的时候会触发
事件绑定
.on(events[selector],function(){})
events: 事件
selector: 选择器
function: 时间处理的函数
移除事件
.off(events[selector],function(){})
events: 事件
selector: 选择器(可选)
function: 时间处理的函数