jQuery 介绍
1.顶级对象
$
jQuery
2.页面加载事件
$(function(){页面加载后执行代码});
3.其他事件
jQuery对象.事件名(function (){事件处理程序});
事件名没有on,例如click() mouseover();
4.jQuery对象和DOM对象的装换
DOM对象转jQuery对象
$(DOM对象);
jQuery对象转DOM对象
jQuery对象.get(0);
jQuery对象[0];
5.jQuery对象中常用的方法
a. text() innerText或textContent,兼容性处理 ,传参表示设置,没有表示获取
b. html() innerHTML,传参表示设置,没有表示获取
c. val() value,传参表示设置,没有表示获取
d. css() style,传入两个参数就是设置一个样式,(键值对),传入一个对象,储存多个键值对同时设置多个样式,闯入一个字符串,表示获取样式属性
e. show() 显示元素,如果传入参数表示以动画的方式显示
f. hide() 隐藏元素,如果传入参数表示以动画的方式隐藏
g. siblings() 除自己以外的其他兄弟节点
h. children() 获取所有子元素
i. find () 在当前元素中找到其他的元素
6.选择器
a.id选择器 $("#ID名");
b. 标签选择器 $("标签名");
c. 类选择器 $(".类名");
d. 标签+类选择器 $("标签名.类名");
e. 多条件选择器 $("标签名,标签名...");
f. 子代选择器 $("标签名>标签名");
g. 后代选这起 $("标签名 标签名");
h. 后一个兄弟元素 $ ("标签名+标签名");
i. 后面所有的兄弟元素 $("标签名~标签名");
j. 偶数选择器 $("标签名:even");
k. 奇数选择器 $("标签名:odd");
l. 索引为5的元素 $("标签名:eq(5)");
m. 索引大于5的元素 $("标签名:gt(5)");
n. 索引小于5的元素 $("标签名:lt(5)");
案例
1.网页开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页开光灯</title>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//获取按钮,注册点击事件
$('#btn').click(function () {
//判断btn的value值从而改变body的css属性
if ($(this).val() === '关灯') {
//.val ()==>有值表示设置,没值表示获取
$('body').css('backgroundColor', 'black');
$(this).val('开灯');
} else {
$('body').css('backgroundColor', 'white');
$(this).val('关灯');
}
});
});
</script>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
</body>
</html>
2.手风琴案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none
}
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//找到所有的li,让当前的li的width为800,其他兄弟节点为100
$("#box>ul>li").mousemove(function () {
$(this).siblings('li').css('width', '100px');
$(this).css('width', '800px');
}).mouseout(function () {
$("#box>ul>li").css('width', '240px');
});
});
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul>
</div>
</body>
</html>
3.突出显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
//找到所有的li,并且注册鼠标进入和离开事件.opacity 设置透明度
$(function () {
$('.wrap>ul>li').mousemove(function () {
$(this).siblings('li').css('opacity', 0.5);
$(this).css('opacity', 1);
}).mouseout(function () {
$(this).css('opacity', 0.5);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
</html>