前端-JQuery

目录

• 前端-JQuery
  • 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:	时间处理的函数