前端-JQuery

前端-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文件,可以用网络上的缓存文件,也可以用本地文件.

https://jquery.com/

选择器

#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:   时间处理的函数