jQuery 初学

jQuery

• jQuery 是一个轻量级的 JS 库，核心是选择器，用于获取页面的元素
• jQuery 下载：jquery.com

jQuery 选择器

语法

jQuery(选择器表达式)
$(选择器表达式)

基本选择器

语法	说明
${ “#id”}	ID选择器，指定id元素的对象
${ “标签”}	元素选择器，选择指定标签名的选择器
${ “.class”}	类选择器，选中拥有指定css类的元素
${“S1,S2,S3”}	组合选择器，对元素进行组合

层叠选择器

语法	说明
${ “ancestor descendant”}	后代选择器
${“ancestor>descendant”}	子选择器
${“prev~siblings”}	兄弟选择器

属性选择器

语法	说明
${“selector[attirbute = value]” }	选中属性值等于具体值的组件
${"selector[ attribute ^= value] " }	选中属性值以某值开头的组件
${“selector[attribute $= value]”}	选中属性值以某值结尾的组件
${"selector[attribute *= value ] "}	选中属性值包含某值的组件

位置选择器

语法	说明
${“selector:first”}	获取第一个元素
${“selector:last”}	获取最后一个元素
${“selector:even”}	获取偶位置的元素（从0开始的）
${“selector:odd”}	获取奇数位置的元素（从0开始的）
${“selector:eq(n)”}	获取指定位置n的元素（从0开始的）

表单选择器

语法	说明
${“selector:input”}	所有输入元素
${“selector:text”}	获取文本框
${“selector:password”}	获取密码框
${“selector:submit”}	获取提交按钮
${“selector:reset”}	获取重置按钮
……	……

元素获取或设置方法

• attr(name | properties | key) -获取或者设置元素的属性
• removeAttr( name) -移除元素属性
• css() -获取或者设置匹配元素的样式属性
• addClass() -为每个匹配的元素添加指定的类名
• removeClass() -从所有匹配的元素中删除全部或者指定的类
• val() -获取或者设置输入项的值
• text() -获取或者设置元素的纯文本
• html() -获取或者设置元素内部的HTML

jQuery 事件处理方法

• on(“事件名”, function) -为选中的页面元素绑定事件
• 事件名(function) -是绑定事件的简写形式
• 处理方法中提供了event参数事件的简写形式

常用事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submiit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
mouseover