1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery選擇器</title>
<style type="text/css">
#div1{
color: red;
}
.box{
color: green;
}
.list li{
margin-bottom: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//選擇元素的規(guī)則和css樣式相同
$('#div1').css({color: 'pink'});
$('.box').css({fontSize: '30px'});
$('.list li').css({
background: 'green',
color: '#fff',
fontSize: '20px',
marginBottom: '10px'
});
})
</script>
</head>
<body>
<div id="div1">1111111</div>
<div class="box">2222222</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇集轉(zhuǎn)移</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//prev()是同級的上一個元素熄捍，prevAll()是同級的上面所有的元素
//next()是同級的下一個元素，nextAll()是同級的下面所有的元素
//修改#div1的下一個元素的樣式
$('#div1').next().css({color: 'red'});
//修改#div1的下面所有p標簽設置樣式
$('#div1').nextAll('p').css({color: 'red'});
//選擇上一級的父元素
/*$('#span01').parent().css({
width:'100px',
height:'100px',
background:'gold'
})*/
//獲取祖級用$('#span02').parent().parent()不可取，可用closest('div')獲取離span02最近的div
//closest可以選擇離自己最近的元素跪腹，元素可以是父級，也可以是子集
$('#span01').closest('div').css({
width:'200px',
height:'200px',
background:'pink'
})
/*
$('.list li')與$('.list').children()的區(qū)別：
原始的選擇集不一樣
$('.list li')不能通過end()回到父級
$('.list').children()可以通過end()回到父級
*/
$('.list').children().css({
background:'gold',
height:'30px',
marginBottom:'10px'
}).end().css({
background:'green'
})
//eq(2)是選擇索引等于2的第三個li，siblings()表示除第三個之外的其它兄弟li
$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
//find()是選擇div內(nèi)的class等于link1的元素
$('#div2').find('.link1').css({color:'red'});
})
</script>
</head>
<body>
<div id="div1">11111</div>
<div>22222</div>
<p>333333</p>
<div>
<p>
<a href="#">xxxxxxx</a>
<span id="span01">4444</span>
</p>
</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul class="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="div2">
<p>
<a href="#" class="link1">xxxxxxxxx</a>
</p>
</div>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery樣式操作</title>
<style type="text/css">
.div2{
color: red;
}
.big{
font-size: 30px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*jQuery用同一個函數(shù)即可以取值栅迄、也可以賦值*/
//讀取樣式
alert($('#div1').css('fontSize'));//16px
//設置（寫入）樣式
$('#div1').css({background:'gold'});
//增加行間樣式
$('#div1').addClass('big');
//減少行間樣式，多個樣式用空格分開
$('#div1').removeClass('div2 big');
})
</script>
</head>
<body>
<div id="div1" class="div2">這是一個div元素</div>
</body>
</html>
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click事件</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
}
.sty{
background-color: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 給按鈕綁定click事件
$('#btn').click(function(){
//重復切換sty樣式
$('.box').toggleClass('sty');
})
})
</script>
</head>
<body>
<input type="button" value="切換" id="btn">
<div class="box"></div>
</body>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery索引值</title>
<style type="text/css">
.list li{
height: 30px;
margin-bottom: 10px;
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('.list li').click(function(){
// alert(this.innerHTML);//彈出標簽中的內(nèi)容
alert($(this).index());//彈出下標
})
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery做選項卡</title>
<style type="text/css">
.btns{
width: 500px;
height: 50px;
}
/*選項卡的樣式*/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/*默認灰色*/
color: #666;
border: 0px;
}
/*被選中的選項卡的樣式*/
.btns input.cur{
background-color: gold;
}
/*內(nèi)容區(qū)的樣式*/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/*默認隱藏*/
line-height: 300px;
text-align: center;
}
/*被選中的內(nèi)容區(qū)的樣式*/
.contents div.active{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btns input').click(function() {
//this是原生的對象
// alert(this);//彈出[object HTMLInputElement]皆怕，說明this就是當前點擊的input元素
//jQuery的this對象使用時要用$()包起來毅舆，這樣就可以調(diào)用jQuery的方法了
//給當前元素添加選中樣式，為兄弟元素移除選中樣式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()獲取當前按鈕所在層級范圍的索引值
//顯示對應索引的內(nèi)容區(qū)愈腾，隱藏其它兄弟內(nèi)容區(qū)
$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字內(nèi)容一</div>
<div>tab文字內(nèi)容二</div>
<div>tab文字內(nèi)容三</div>
</div>
</body>
</html>
7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery屬性操作</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
alert($('.box').html());//這是一個div元素
$('.box').html('<a );
*/
/*
讀寫值為布爾類型的屬性用prop方法
讀寫值為非布爾類型的屬性用attr方法
*/
/*
$('.box').attr({title:'這是一個div!'});//寫入title屬性憋活，并賦值
alert($('.box').attr('class'));//讀屬性class的值，彈出box
*/
/*
var $src = $('#img1').attr('src');
alert($src);//img/1.png
$('#img1').attr({
src:'img/2.gif',
alt:'圖片二'
});
*/
/*
alert($('#check').prop('checked'));//選中為true虱黄，非選中為false
$('#check').prop({checked:true});//設置默認勾選
*/
// alert($('.box2').html());//<span>這是div元素內(nèi)的span</span>
alert($('.box2').text());//這是div元素內(nèi)的span
})
</script>
</head>
<body>
<div class="box">這是一個div元素</div>
<img id="img1" src="img/1.png" alt="一張圖片">
<input type="checkbox" id="check">多選
<div class="box2">
<span>這是div元素內(nèi)的span</span>
</div>
</body>
</html>
