jQuery选择器
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery选择器转移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择集转移</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
// $('#dvi1').netx().css({color:'red'});
// 选择写一个 用next
// $('#dvi1').netxAll('p').css({color:'red'});
// 选择下一个所有的p标签
// $('#dvi1').prev().css({color:'red'})
// 选择前一个
// $('#dvi1').prevAll('span').css({color:'red'})
// 前一个所有
// parent 父亲 closest离自己最近的祖先元素
// children 所有孩子 //end 回到
//siblings 所有的兄弟
//find
})
</script>
</head>
<body>
<span>你是span</span>
<div id="div1">你是div元素</div>
<p>你是p</p>
</body>
</html>
jQuery动画
运动曲线两种 ：swing 运动曲线 中间快两头慢 linear 匀速
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#div1').animate({
width:200,
height:200},
1000,function(){
// alert('结束了 了 了。。。')
$(this).animate({
marginLeft:500},1000,function(){
$(this).animate({
marginLeft:200},1000),function(){
$(this).animage({
marginBottom:400},1000)
};
});
})
//swing 运动曲线 中间快两头慢 linear 匀速
</script>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
特殊效果
$('.box').fadeOut(); //淡入
$('.box').fadeIn(); //淡出
$('.box').fadeIn(); //切换淡入淡出
$('.box').show(); //显示
$('.box').hide(); //影藏
$('.box').toggle(); //切换显示影藏
$('.box').slideDown(); //向下展开
$('.box').slideUp(); //向上收起
$('.box').slideToggle(); //切换上收下展
网友评论