- 语法:$(selector).action()
- 美元符号 $ 定义jQuery
- 选择符 selector 选择或查询HTML元素
- action()执行对元素的操作
- 例如：
$("p").hide();意为选择p标签的元素，让其隐藏。
- jQuery选择器：
$("*")选择所有标签的元素$("this")选择当前HTML元素$(".intro")选择class="intro"的元素$("#intro")选择id="intro"的元素$("p:first")选择第一个p标签的元素$("ul li:first")选择第一个ul里的第一个li元素$("ul li:first-child")选择每一个ul里的第一个li元素$("[href]")选择带有href属性的元素$("a[target = '_blank']")选择target属性值是_blank的a标签的元素$("a[target != '_blank']")选择target属性值不是_blank的a标签的元素$(":button")选择type属性值是button的input标签和button标签$("tr:even")选择偶数位置的tr元素$("tr:odd")选择奇数位置的tr元素$("p:first-child")其父元素第一个子元素是p标签的所有元素$("p:last-child")其父元素最后一个子元素是p标签的所有元素$("p:first-of-type")其父元素里的第一个p标签的元素$("p:last-of-type")其父元素里的最后一个p标签的元素$("p:nth-child(2)")其父元素第二个子元素是p的所有元素
- 隐藏和显示(hide()方法、show()方法):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算机输出标签</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
</head>
<body>
<button id="btn">隐藏/显示</button>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
<li>无序列表5</li>
</ul>
<script>
$("#btn1").click(function(){
$("ul").hide(1000,"swing",function(){
alert('内容已隐藏');
});
});
$("#btn2").click(function(){
$("ul").show(1000,"linear",function(){
alert('内容已显示完毕');
});
})
</script>
</body>
</html>
- hide()、show()方法详解：
- hide(speed,callback,[function])可接收三个参数，speed是内容的隐藏速度，swing是内容的消失方式，[function]是隐藏后要做的事，可加可不加。
- show()用法和hide()一样。
- 有一个方法兼顾了显示和隐藏：toggle(speed,callback)，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算机输出标签</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
</head>
<body>
<button id="btn">隐藏/显示</button>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
<li>无序列表5</li>
</ul>
<script>
$("#btn").click(function(){
$("ul").toggle(1000,"linear");
});
</script>
</body>
</html>
- jQuery淡入淡出、颜色渐变
- fadeIn()淡入
- fadeOut()淡出
- fadeToggle()淡入/淡出
- fadeTo(speed,opacity) 颜色变浅，必须给定参数speed速度和opacity透明度(介于0和1之间)的值，否则无效果。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<style>
div{
margin:10px 10px;
width:80px;
height:80px;
display:none;
}
#div1{
background-color:green;
}
#div2{
background-color:yellow;
}
#div3{
background-color:red;
}
</style>
</head>
<body>
<button id="btn1">淡入/淡出</button>
<button id="btn2">淡入</button>
<button id="btn3">淡出</button>
<button id="btn4">颜色变淡</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").fadeToggle(200);
$("#div2").fadeToggle(400);
$("#div3").fadeToggle(600);
});
$("#btn2").click(function(){
$("#div1").fadeIn(200);
$("#div2").fadeIn(400);
$("#div3").fadeIn(600);
});
$("#btn3").click(function(){
$("#div1").fadeOut(200);
$("#div2").fadeOut(400);
$("#div3").fadeOut(600);
});
$("#btn4").click(function(){
$("#div1").fadeTo(200,0.3);
$("#div2").fadeTo(400,0.6);
$("#div3").fadeTo(600,0.9);
});
});
</script>
</body>
</html>
- jQuery滑动
- slideDown(speed,callback)滑入，即显示出来
- slideUp(speed,callback)滑出，即消失
- slideToggle(speed,callback)滑入/滑出
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<style>
div{
margin:20px auto;
width:400px;
height:400px;
background-color:yellow;
display:none;
text-align:center;
}
button{
display:block;
margin:5px auto;
}
</style>
</head>
<body>
<button id="btn1">滑入/滑出</button>
<button id="btn2">滑入</button>
<button id="btn3">滑出</button>
<div>Hello!</div>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$("div").slideDown(1000);
});
$("#btn3").click(function(){
$("div").slideUp(1000);
});
$("#btn1").click(function(){
$("div").slideToggle(1000);
});
});
</script>
</body>
</html>