文章目录
一、jQuery介绍
1.1 概述
- jQuery是一个快速、简洁的JavaScript代码库
- 提供一种简便的JavaScript操作方式
- 优化HTML文档操作、事件处理、动画设计和AJAX交互
1.2 安装
- 直接引用jQuery
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
1.3 基本使用
- $(匿名函数)
表示页面DOM加载完毕,则执行,比onload事件执行早
可以写多个,$是jQuery函数的简写
- $(selector).action()
选取HTML元素,并对选取的元素执行操作
selector(选择符)表示查找HTML元素
action() 执行对元素的操作
window.onload 只会执行一次,配置多个只执行最后一个
$(function(){})可以多次执行,比window.onload先执行
$(function(){ // 简写document.ready
alert("read1")
})
$(document).ready(function(){ // 完整
})
把绑定事件和页面初始化的代码,写到document.ready
1.4 DOM元素与jQuery元素
document.getElementbyId("c") DOM元素,如果元素不存在,则为null
$("#c") jQuery元素,如果元素不存在则为长度为0的数组
操作方法不同
hide()方法
jq元素有,DOM元素不能用
.value属性
DOM元素有,jq不能用
带括号的方法都是jq元素,DOM元素一般都是 .属性
二、选择器
2.1 基本选择器
${“选择器”}选出的结果封装到一个数组中。如果元素不存在,则是长度为0的数组
标签选择器 使用标签名
类选择器class 用.
id选择器 用# 如果id出现冲突,操作第一个元素
<input type="button" value="按钮" id="d">
<div style="width: 100px;height: 100px;background-color: red" class="b" myattr="a.1">1</div>
<div style="width: 100px;height: 100px;background-color: green" class="b" id="c">2</div>
function test(){
$("div").hide() //标签选择器
$(".b").hide() //类选择器
$("#c").hide() //id选择器
}
判断元素是否存在
【错误写法】$("选择器")==null
【正确写法】$("选择器").length>0
2.2 兄弟结点选择器
选择器 | 描述 |
---|---|
pre+next | 近邻怕热后面的兄弟next元素 |
pre-next | pre后面的所有兄弟next元素 |
2.3 层级选择器
选择器 | 描述 |
---|---|
parent child | 表示parent里所有的child后代 |
parent>child | (效率高)parent直接子child元素 |
2.4 属性选择器
选择器 | 描述 |
---|---|
$("[属性名]") | 包含这个属性的元素 |
$("[属性名=属性值]") | 多数时候,属性值不需要引号,当属性值有特殊符号时需要引号 $("[name=‘user.name’]") |
[属性a][属性b] 必须同时拥有属性a和属性b
$("input[name=user]") name=user的input标签
$("input[type=checkbox][value=a]") <input type="checkbox" value="a">
2.5 伪类选择器
不单独使用,和别的选择器一起,起过滤作用
选择器 | 描述 | 选择器 | 描述 |
---|---|---|---|
:eq(num) | 第num个元素,索引从0开始 $(“div:eq(2)”) 第3个div | ||
:odd | 索引为奇数的元素 | :even | 索引为偶数的元素 |
:gt(num) | 索引大于num的元素 | :lt(num) | 索引小于num的元素 |
:check | 复选或单选框,备选充电元素 |
2.6 过滤器
选择器 | 描述 |
---|---|
is(“选择器”) | 判断某个元素是否符合选择器规则 |
2.7 查找功能
选择器 | 描述 |
---|---|
parent() | 获取父元素 |
parent(“选择器”) | 符合选择器的祖先元素 |
prev() | 前面近邻的兄弟元素 |
find(“选择器”) | 在后代中进行筛选 |
2.8 经验
- 多用id选择器
如果不存在id,可在父类元素中加id,通过子选择器选择,缩短查找路径。 - 少直接使用class,使用标签.class
- 避免表达式冗余,div#a可直接简化成#a
- 多用父子选择器(parent>child),少用后代(parent child)
- 如果元素不改变的haul,尽量缓存元素
for(var i=0;i<100;i++){
$("#d").xxxx
}
// 优化
var d = $("#d")
for(var i=0;i<100;i++){
$("#d").xxxx
}
2.9 DOM元素和JQ元素转换
DOM->jq元素 $(DOM元素)
JQ->DOM元素 jq元素[0] $("input")[0]
2.10 事件
$(“选择器”).事件名称(function(){})
// 绑定点击事件
$("#d").click(function(){
})
// 触发事件
$("#d").click()
click 鼠标点击
dbclick 鼠标双击
submit 表单提交事件
mouseenter 鼠标进入
mouseleave 鼠标离开
focus 获得焦点
blur 失去焦点
hover 鼠标进来、鼠标离开
$(function(){
$("#d").click(function(){
$("#c").toggle()
})
})
三、效果
3.1 动画
显示 | 隐藏 | 方式 | |
---|---|---|---|
显示/隐藏 | show() | hide() | 通过改变宽高 |
show(1000) | hide(1000) | 一秒之内显示出来/消失 | |
滑动 | sliderDown() | slideUp() | 改变高度,可以加时间参数 |
淡入淡出 | fadeIn() | fadeOut() | 改变透明度。可以加时间参数 |
toggle() | 自动切换 show / hide | ||
fadeToggle() | 自动切换 fadeIn() / fadeOut() | ||
fadeTo | 自动淡化到opacity(透明度) | ||
slideToggle | 自动切换 sliderDown() / slideUp() | ||
animate函数 |
3.2 元素操作
3.2.1 添加元素
before()
<div>
prepend()
内容
append()
</div>
after()
操作 | 等价于 | 描述 |
---|---|---|
a.before(b) | b.insertBefore(a) | 把b追加到a的前面 |
a.after(b) | b.insertAfter(a) | 把b追加到a的后面 |
a.prepend(b) | b.prependTo(a) | 把b追加到a的内容之前 |
a.append(b) | b.appendTo(a) | 把b追加到a的内容之后 |
3.2.2 删除元素
remove() 删除元素
$("#d").remove() //id=d的元素被删除
empty() 清空元素的子元素
$("#d").empty() // 删除d的所有子元素
3.3 常见方法
方法 | 作用 | 方法 | 作用 |
---|---|---|---|
val() | 用于获取表单元素的值 | val(“值”) | 设置表单元素的值 |
html() | 获取元素内部html代码 | html(“值”) | 设置元素内部html |
text() | 获取元素内部纯文本 | text(“值”) | 设置元素内部纯文本 |
attr(“属性名”) | 获取元素属性值 | attr(“属性名”,“属性值”) | 设置元素属性值 |
prop(“属性”) | 获取元素属性值 checked,disabled,selected | prop(“属性”,“属性值”) | 设置元素属性值 checked,disabled,selected |
css(“样式名”) | 获取元素样式值 | css(“样式名”,“值”) | 设置元素样式值 |
addClass(“类”) | 追加一个class | removeClass(“类”) | 删除一个class |
hasClass(“类”) | 判断有没有这个class | toggleClass(“类”) | 自动切换有误class |
3.4 应用
<body>
省
<select id="p"></select>
市<select id="c"></select>
<script>
var province = {"河北":["秦皇岛","石家庄","保定","衡水","承德"],"北京":["海淀","大兴","朝阳","房山","通州","昌平","东城","西城"]}
// for(var i=0;i<province.length;i++){
for(var key in province){
$("#p").append('<option value="'+key+'">'+key+'</option>option>');
}
// }
$("#p").change(function () {
console.log($("#p").val())
var cities = province[$("#p").val()]
$("#c").empty()
for(var i=0;i<cities.length;i++){
$("#c").append('<option value="'+cities[i]+'">'+cities[i]+'</option>');
}
})
</script>
</body>