jquery 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<!-- <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script> -->
<script>
// $(function(){ //redy函数等body里的标签加载完完就调用,window.onload 是在body里面的标签和资源都加载完再执行
// var $div=$('#box')
// $div.html('hello world')
// })
//jquery选择器
$(function (){
var $p=$('.pbox')
$p.html('你好啊,类选择器')
$('#box').html('你好啊,id选择器')
alert($('li a').html()) //html里面没有参数,代表获取内容,有参数代表设置内容
$('li a').html('哈哈哈,疯了') //层级选择器
})
//选择集 选择的是一个集合,而不是某个标签
</script>
</head>
<body>
<div id="box"></div>
<p class="pbox"></p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li><a href="">你好啊,跳转链接</a></li>
</ul>
</body>
</html>
选择集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('div').has('p').html('哈哈哈')
$('div').not('.box').html('啧啧啧')
$('div').eq(2).html('啦啦啦啦')
})
</script>
</head>
<body>
<div>item 1</div>
<div class="box">item 2</div>
<div>item 3</div>
<div>item 4</div>
<div><p>hahaha</p></div>
</body>
</html>
最终结果:
选择集转移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.box').parent().siblings().html('hahhahah')
})
//查看标签是否获取到 >0
console.log($('.box').length)
</script>
</head>
<body>
<div>item 1</div>
<div>item 2</div>
<div>
<div class="box">
item
<p>这是我们的<span>span标签</span></p>
<p class="pbox">hahaha</p>
</div>
</div>
<div>item 4</div>
<div>item 5</div>
</body>
</html>
增加样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 一个script只有一个作用 -->
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
/* css() 一个参数是get 多个参数是set*/
$(function(){
$('li').click(function(){
// $(this).css('background','red')
$(this).css({'background':'red','font-size':'30px'})
})
$('li').mousemove(function(){
$(this).css({'background':'white',fontSize:'16px'})
})
})
</script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</body>
</html>
增加额外样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// $('.box').addClass('divbox') //增加额外样式
// $('box').removeClass('box') //移除样式
$('.box').toggleClass('divbox') //先判断是否有该样式,没有则添加,有则移除
})
})
</script>
<style>
.box {
width: 200px;
height: 200px;
background-color: aquamarine;
}
.divbox {
font-size: 32px;
color:#666fab;
}
</style>
</head>
<body>
<div class="box">
哈哈哈
</div>
<button>按钮</button>
</body>
</html>
特殊效果制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: '雅黑';
}
body,ul {
margin: 0px;
padding: 0px;
}
ul {
list-style: none; /* 清除列表前面的style .*/
}
.menu {
width: 200px;
margin: 20px auto 0;
}
.menu .level1,.menu li ul a {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
text-decoration: none;
background-color: #3366cc;
color: #fff;
font-size: 16px;
text-indent: 10px;
}
.menu li ul a {
background-color: #336677;
}
.menu li ul {
display:none;
}
.menu li ul.current{
display: block;
}
.menu li ul li a:hover{
background-color: #f6b544;
}
</style>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.level1').click(function(){
$(this).next().slideToggle().parent().siblings().children('ul').slideUp()
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class='level1'>手机</a>
<ul>
<li><a href="#">iphone x 256g</a></li>
<li><a href="#">红米4A 全网通</a></li>
<li><a href="#">华为mete10</a></li>
<li><a href="#">vivo x20A</a></li>
</ul>
</li>
<li>
<a href="#" class='level1'>笔记本</a>
<ul class="current">
<li><a href="#">macbook pro</a></li>
<li><a href="#">ThinkPad</a></li>
<li><a href="#">外星人</a></li>
<li><a href="#">惠普</a></li>
</ul></li>
<li>
<a href="#" class='level1'>电视</a>
<ul>
<li><a href="#">海信</a></li>
<li><a href="#">长虹</a></li>
<li><a href="#">tcl</a></li>
</ul></li>
<li>
<a href="#" class='level1'>化妆品</a>
<ul>
<li><a href="#">兰芝</a></li>
<li><a href="#">娇兰</a></li>
<li><a href="#">兰蔻</a></li>
</ul></li>
</ul>
</body>
</html>
选项卡的制作
点到哪个按钮哪个按钮变黄色,其他颜色为灰色,里面的字体随之改变
第一种–jquery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('input').click(function(){
//点谁添加谁,其他去除
$(this).addClass('active').siblings().removeClass('active')
$('.tab_con div').eq($(this).index()).addClass('current').siblings().removeClass('current')
})
})
</script>
<style>
.tab_cons {
width: 500px;
height: 350px;
margin: 50px auto 0;
background-color: gold;
}
.tab_btns input{
width: 60px;
height: 30px;
background-color: #ddd;
border: 0;
outline: none;
}
.tab_btns {
height: 30px;
}
.tab_btns .active{
background: gold;
}
.tab_con {
height: 350px;
background: gold;
}
.tab_con div {
height: 300px;
line-height: 300px;
text-align: center;
display: none;
font-size: 30px;
}
.tab_con .current {
display: block;
}
</style>
</head>
<body>
<div class="tab_cons">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_con">
<div >按钮一对应的内容</div>
<div class="current">按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
</html>
第二种–vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/vue.js"></script>
<script>
window.onload =function(){
new Vue({
el:'#app',
data:{
num:0 //num代表点击哪个按钮
}
})
}
</script>
<style>
.tab_cons {
width: 500px;
height: 350px;
margin: 50px auto 0;
background-color: gold;
}
.tab_btns input{
width: 60px;
height: 30px;
background-color: #ddd;
border: 0;
outline: none;
}
.tab_btns {
height: 30px;
}
.tab_btns .active{
background: gold;
}
.tab_con {
height: 350px;
background: gold;
}
.tab_con div {
height: 300px;
line-height: 300px;
text-align: center;
display: none;
font-size: 30px;
}
.tab_con .current {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="tab_cons">
<div class="tab_btns">
<!-- 将num值绑定到点击事件 三目表达式必须是在数组里[ 判断语句? 对的: 错的]-->
<input @click='num=0' type="button" value="按钮一" :class="[num ==0? 'active' : '']">
<input @click='num=1' type="button" value="按钮二" :class="[num ==1? 'active' : '']">
<input @click='num=2' type="button" value="按钮三" :class="[num ==2? 'active' : '']">
</div>
<div class="tab_con">
<div :class="[num ==0? 'current' : '']">按钮一对应的内容</div>
<div :class="[num ==1? 'current' : '']">按钮二对应的内容</div>
<div :class="[num ==2? 'current' : '']">按钮三对应的内容</div>
</div>
</div>
</div>
</body>
</html>
jquery动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.box').animate({'width':'500px'},10000,'swing',function(){
$('.box').animate({'height':'500px'},5000,'linear',function(){
alert('所有的都走完了')
})
})
})
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: #666bbb;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>