jQuery加載
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
?? // alert($);$是jQuery標(biāo)志 function(a,b){
?? //? ?? return new n.fn.init(a,b)
?? // }? jQuery的構(gòu)造函數(shù)
?? //原生js寫(xiě)法 頁(yè)面所有節(jié)點(diǎn)加載完渲染完
?? // window.onload = function () {
?? //? ?? var div = document.getElementById('div');
?? //? ?? alert(div.innerHTML);// 獲取標(biāo)簽里的東西 這是一個(gè)div元素
?? // };
?? //jQuery的完整寫(xiě)法 頁(yè)面所有節(jié)點(diǎn)加載完
?? // $(document).ready(function () {
?? //? ?? var $div = $('#div');
?? //? ?? alert('jquery:' +$div.html);
?? // })//實(shí)際開(kāi)發(fā)中用ready 不用onload
?? //簡(jiǎn)寫(xiě)方法
?? $(function () {
? ? ? var $div = $('#div');
? ? ? alert($div.html() + '簡(jiǎn)寫(xiě)');//
?? })//一般用簡(jiǎn)寫(xiě)
</script>
jQuery選擇器
<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 () {
? ? ? $('#div1').css({color:'pink'});
? ? ? $('.box').css({fontSize:'30px'});
? ? ? $('.list li').css({
? ? ? ?? backgroundColor:'green',
? ? ? ?? // color: '#fff',
? ? ? ?? // fontSize: '20',
? ? ? ?? // marginBottom:'10px',
? ? ? });
?? })
</script>
<body>
?? <div id="div1">這是一個(gè)div元素</div>
?? <div class="box">這是第二個(gè)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>
選擇集轉(zhuǎn)移
// $('div').prev('p'); //選擇div元素前面的第一個(gè)p元素
// $('div').prevAll('p'); //選擇div元素前面所有的p元素
// $('div').next('p'); //選擇div元素后面的第一個(gè)p元素
// $('div').nextAll('p'); //選擇div元素后面所有的p元素
// $('div').closest('form'); //選擇離div最近的那個(gè)form父元素
// $('div').parent(); //選擇div的父元素
// $('div').children(); //選擇div的所有子元素
// $('div').siblings(); //選擇div的同級(jí)元素
// $('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素
jQuery樣式操作
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
? ? ? console.log($('.div1').css('fontSize'));//16px
? ? ? $('.div1').css({backgroundColor:'red'});
? ? ? $('.div1').addClass('big');//添加行間樣式
? ? ? $('.div1').removeClass('div1');//移除行間樣式
?? })
</script>
click事件
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
?? $('#btn').click(function () {
? ? ? $('.box').toggleClass('sty');//切換行間樣式 有就刪 沒(méi)有就加
?? })
})
</script>
jQuery索引值
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
?? $('.list li').click(function () {
? ? ? // alert(this.innderHTML);//原生的不能獲取索引值
? ? ? alert($(this).index());
? ? ? // 都是指當(dāng)前所點(diǎn)的li $this是封裝好的
?? })
})
</script>
jQuery做選項(xiàng)卡
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
?? $('#btns input').click(function () {
? ? ? // alert(this);
? ? ? $(this).addClass('cur').siblings().
? ? ? ?? removeClass('cur');
? ? ? alert($(this).index());
? ? ? $('#contents div').eq($(this).index()).//eq = 內(nèi)容區(qū)對(duì)應(yīng)的
? ? ? ?? addClass('active').siblings().removeClass('active');
? ? ? //添加激活的樣式 點(diǎn)擊哪個(gè)按鈕對(duì)應(yīng)索引的內(nèi)容會(huì)出現(xiàn)
?? })
})
</script>
jQuery屬性操作
<script type="text/javascript">
$(function(){
?? //innerHTML --> html()
?? console.log($('.box').html());//這是一個(gè)div元素
?? $('.box').html('<a );//不傳值就是讀 傳值就是寫(xiě)
?? $('.box').attr({title:'這是一個(gè)div!'});
?? //console.log($('.box').attr('class'));//box
?? var $src = $('#img1').attr('src');
?? //alert($src);//imhh/2.jpg
?? $('#img').attr({src:'img/1.jpg',alt:'啦啦啦'});//important 機(jī)試會(huì)考
?? alert($('#check').prop('checked'));//Flase
?? $('#check').prop({checked:true});//prop看這是的值是true還是false
?? // alert($('.box2').html());//<span>這是div元素里的值</span> 有標(biāo)簽
?? alert($('.box2').text());//這是div元素里的span? 純文本
})
</script>
jQuery特殊效果
// $('.box').fadeOut();//淡出
// $('.box').fadeIn();//淡入
// $('.box').fadeTogggle();//淡入
$('.box').hide();//隱藏
// $('.box').show();//顯示
// $('.box').togggle();//顯示隱藏
//
// $('.box').slideDown();//下展
// $('.box').slideUp();//上收
// $('.box').slideTogggle();//上收下展
jQuery動(dòng)畫(huà)
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
?? $('#div1').animate({
? ? ? width:200,
? ? ? height:200,
?? },1000,function () {
? ? ? // alert('動(dòng)畫(huà)完了');
? ? ? $(this).animate({marginLeft:500})
?? });// 默認(rèn)值swing兩邊慢中間快 linear 勻速
})
</script>
jQuery循環(huán)
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
?? $(function () {
? ? ? $('.list li').html('111').css({
? ? ? ?? backgroundColor:green});
? ? ? $('.list li').each(function (index){//each相當(dāng)于for循環(huán) index是索引
? ? ? ?? // alert(index);
? ? ? ?? $(this).html(index);
})
})
})
</script>
