jQuery
快速、简洁的JavaScript
框架,设计宗旨:write Less, Do More。
作用:简化原生js
的语法,解决浏览器兼容性问题。
引入jQuery
可以直接引入在线地址,也可以在jQuery
[官方网站][1]上下载,然后使用src
属性引入:
[1]: https://jquery.com/
基础语法:$(selector).action()
$
:jQuery
对象selector
:选择器,用于定位HTML
元素action()
:方法,用于对元素进行操作
文档就绪函数
//HTML文档加载完成后,再开始执行该方法里面的函数
$(document).ready(function(){
//代码段
})
jQuery
选择器
jQuery
选择器相比原生javascript
功能更加强大
元素选择器
$('#id')
:id
选择器,类似document.getElementById("#id")
$('.class')
:class
选择器,类似document.getElementsByClassName('.class')
$('tag')
:tag
选择器,类似document.getElementsByTagName('tag')
$('tag.class')
:父子选择器
属性选择器
$("[attr]")
:选取所有带有attr
属性的元素$("[attr='value']")
选取所有带有attr
属性并值为value
的元素$("[attr$='value']")
选取所有带有attr
属性并以value
结尾的元素
jQuery
事件
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
常用事件:
ready()
:文档就绪事件,HTML
加载完成后调用
bind()
:为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
focus()
:当元素获得焦点的时候调用
blur()
:当元素失去焦点的时候调用
change()
:当元素的值发生改变时调用(仅仅适用于form
表单中的text
、field
、select
、textarea
)
click()
:当点击元素的时候调用
dblclick()
:当双击元素的时候调用
keydown()
:当键盘按钮被按下时调用
keyup()
:当键盘按钮被松开时调用
keypress()
:当键盘按钮被按下时调用(必须插入字符才能被调用)
mousedown()
:当鼠标指针移动到元素上方,并按下鼠标按键时调用
mouseup()
:当在元素上放松鼠标按钮时调用,常与mousedown()一起使用
mousemove()
:当鼠标指针在指定元素上移动时调用
submit()
:当提交表单的时候调用
jQuery
是为处理HTML
事件而特别设计的,当遵循以下原则时,代码会更容易维护:
- 把所有
jQuery
代码置于事件处理函数中 - 把所有事件处理函数置于文档就绪事件处理器中
- 把
jQuery
代码置于单独的.js
文件中
关于DOM
相比原生javascript
,jQuery
拥有更为强大的可操作HTML
元素和属性的方法。
查找HTML
元素
$("#id")
$(".class")
$("tag")
对元素的操作
append()
:在被选元素的结尾插入内容prepend()
:在被选元素的开头插入内容after()
:在被选元素之后插入内容before()
:在被选元素之前插入内容remove()
:删除被选元素(及其子元素)empty()
:从被选元素中删除子元素
对属性的操作
attr()
:设置或返回所选元素的属性和值removeAttr()
:从所选元素中移除指定的属性addClass()
:为所选元素添加指定的类名removeClass()
:为所选元素删除全部或指定的类hasClass()
:判断所选元素是否拥有指定的类
对文本的操作
text()
:设置或返回所选元素的文本内容html()
:设置或返回所选元素的内容(包括HTML
标记)val()
:设置或返回表单字段的值
对CSS
的操作
css()
:设置或返回所选元素的样式属性height()
:设置或返回所选元素的高度width()
:设置或返回所选元素的宽度