jQuery介绍
jQuery是一个轻量级JS库，使用十分简单；
jQuery的核心是选择器，用于获取页面元素；
jQuery提供了大量高效的方法，开发速度大幅提升；
jQuery选择器
- jQuery选择器用于选中需要操作的页面元素
- 语法1：jQuery(选择器表达式)
- 语法2：$(选择器表达式)
基本选择器
| 语法 | 说明 |
|---|---|
| $("#id") | ID选择器，指定Id元素的对象 |
| $("标签") | 元素选择器，选择指定标签名的选择器 |
| $(".class") | 类选择器，选中拥有指定css类的元素 |
| $("S1,S2,SN") | 组合选择器，对元素进行组合 |
层叠选择器
| 语法 | 说明 |
|---|---|
| $("ancestor descendant") | 后代选择器 |
| $("ancestor>descendant") | 子选择器 |
| $("prev~siblings") | 兄弟选择器 |
属性选择器
| 语法 | 说明 |
|---|---|
| $("selector[attribute=value]") | 选中属性值等于具体值的组件 |
| $("selector[attribute^=value]") | 选中属性值以某值开头的组件 |
| $("selector[attribute$=value]") | 选中属性值以某值结尾的组件 |
| $("selector[attribute*=value]") | 选中属性值包含某值的组件 |
位置选择器(不常用)
| 语法 | 说明 |
|---|---|
| $("selector:first") | 获取第一个元素 |
| $("selector:last") | 获取最后一个元素 |
| $("selector:even") | 获取偶数位置的元素(从0开始) |
| $("selector:odd") | 获取奇数位置的元素(从0开始) |
| $("selector:eq(n)") | 获取指定位置的元素(从0开始) |
表单选择器(不常用)
| 语法 | 说明 |
|---|---|
| $("selector:input") | 所有输入元素 |
| $("selector:text") | 获取文本框 |
| $("selector:password") | 获取密码框 |
| $("selector:submit") | 获取提交按钮 |
| $("selector:reset") | 获取重置按钮 |
| ... |
操作元素属性
- attr(name|properties|key) - 获取或设置元素属性
$("a[href*='163']").attr("href", "http://www.163.com");将网易邮箱地址改为网易主页地址 - removeAttr(name) - 移除元素属性
$("a").removeAttr("href");将所有a标签的href属性移除
操作元素的CSS样式
- css() - 获取或设置匹配元素的样式属性
$("a").css("color", "red");将所有a标签的color样式设置为red
$("a").css({"color":"red","font-weight":"bold"});传入JSON对象一次设置多个属性值 - addClass() - 为每个匹配的元素添加指定的类名
$("li").addClass("highlight myclass");为li标签增加两个css类 - removeClass() - 从所有匹配的元素中删除全部或者指定的类
$("p").removeClass("myclass");移除p标签的myclass类
设置元素内容
- val() - 获取或设置输入项的值
$("input[name='username']").val();获取文本框的值
$("input[name='username']").val("请输入姓名");设置文本框的值 - text() - 获取或设置元素的纯文本
$("span").text("<b>你好啊！</b>");将span中的内容设置为<b>你好啊</b>(文本中的html标签进行转义) - html() - 获取或设置元素内部的HTML
$("span").html("<b>你好啊！</b>");将span中的内容设置为你好啊！(文本中的html标签不进行转义)
jQuery事件处理方法
- on("click", function) - 为选中的页面元素绑定单击事件
- click(function) - 是绑定事件的简写形式
- 处理方法中提供了event参数包含了事件的相关信息
jQuery常用事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| mouseover |
实例
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery练习</title>
<style type="text/css">
.div1 {
float: left;
width: 50px;
line-height: 30px;
background-color: lightgray;
margin-left: 10px;
text-align: center;
vertical-align: middle;
}
.div2 {
width: 300px;
height: 300px;
border: solid gray 1px;
m