(1)jQuery加載
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery加載</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// alert($);//彈出function (a,b){return new n.fn.init(a,b)}表示JQuery已經引進來了，這是它的一個構造函數
//JS寫法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//這是一個div元素
}
//jQuery的完整寫法
//比上面JS寫法先彈出，因為window.onload是把頁面元素加載、渲染完才彈出，而ready()是把所有頁面的節點加載完之后就彈出了，不用等渲染了
/*$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:這是一個div元素
})*/
//簡寫方式
$(function(){
var $div = $('#div');//CSS樣式怎么寫，這里就怎么寫
//html()方法相當于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
</script>
</head>
<body>
<div id="div">這是一個div元素</div>
</body>
</html>
(2)jQuery選擇器
<!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(){
//選擇元素的規則和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">這是一個div元素</div>
<div class="box">這是第二個div元素</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>
(3)選擇集轉移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇集轉移</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()的區別：
原始的選擇集不一樣
$('.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內的class等于link1的元素
$('#div2').find('.link1').css({color:'red'});
})
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
<div>這是第二個div元素</div>
<p>這是一個p元素</p>
<div>
<p>
<a href="#">騰訊網</a>
<span id="span01">span元素</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">騰訊網</a>
</p>
</div>
</body>
</html>
(4)jQuery樣式操作
<!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用同一個函數即可以取值、也可以賦值*/
//讀取樣式
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>
(5)click事件
<!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>
(6)jQuery索引值
<!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);//彈出標簽中的內容
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>
(7)jQuery做選項卡
<!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;
}
/*內容區的樣式*/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/*默認隱藏*/
line-height: 300px;
text-align: center;
}
/*被選中的內容區的樣式*/
.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對象使用時要用$()包起來，這樣就可以調用jQuery的方法了
//給當前元素添加選中樣式，為兄弟元素移除選中樣式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()獲取當前按鈕所在層級范圍的索引值
//顯示對應索引的內容區，隱藏其它兄弟內容區
$('#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文字內容一</div>
<div>tab文字內容二</div>
<div>tab文字內容三</div>
</div>
</body>
</html>
(8)jQuery屬性操作
<!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元素內的span</span>
alert($('.box2').text());//這是div元素內的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元素內的span</span>
</div>
</body>
</html>
(9)jQuery特殊效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特殊效果</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
// $('.box').fadeOut();//淡出
// $('.box').fadeIn();//淡入
// $('.box').fadeToggle();//切換淡入淡出
// $('.box').toggle();//切換顯示隱藏
$('.box').slideToggle();//切換上收和下展
})
})
</script>
</head>
<body>
<input type="button" name="" value="效果" id="btn">
<div class="box"></div>
</body>
</html>
(10)jQuery動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery動畫</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
參數：
1、什么屬性做動畫，屬性設置{param1: value1, param2: value2}
2、動畫執行的時間，單位毫秒
3、動畫曲線：
swing（默認值）開始和結束慢，中間快
linear勻速
可省略不寫
4、回調函數，動畫完成之后要做的事情，可無限嵌套
*/
$('#div1').animate({
width: 200,
height: 200},
1000,
function(){
// alert('動畫完了！');
$(this).animate(
{marginLeft: 500},
1000,
function(){
$(this).animate(
{marginTop: 500},
1000
)
}
)
}
);
})
</script>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
(11)jQuery循環
<!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(){
// //給全部的li設置內容和樣式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一個參數index是索引值
$('.list li').each(function(index) {
// alert(index);//彈出索引值
//$(this)是每一個li
$(this).html(index);
});
})
</script>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
