jQuery加載
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
?? // alert($);$是jQuery標志 function(a,b){
?? //? ?? return new n.fn.init(a,b)
?? // }? jQuery的構造函數
?? //原生js寫法 頁面所有節(jié)點加載完渲染完
?? // window.onload = function () {
?? //? ?? var div = document.getElementById('div');
?? //? ?? alert(div.innerHTML);// 獲取標簽里的東西 這是一個div元素
?? // };
?? //jQuery的完整寫法 頁面所有節(jié)點加載完
?? // $(document).ready(function () {
?? //? ?? var $div = $('#div');
?? //? ?? alert('jquery:' +$div.html);
?? // })//實際開發(fā)中用ready 不用onload
?? //簡寫方法
?? $(function () {
? ? ? var $div = $('#div');
? ? ? alert($div.html() + '簡寫');//
?? })//一般用簡寫
</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">這是一個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>
選擇集轉移
// $('div').prev('p'); //選擇div元素前面的第一個p元素
// $('div').prevAll('p'); //選擇div元素前面所有的p元素
// $('div').next('p'); //選擇div元素后面的第一個p元素
// $('div').nextAll('p'); //選擇div元素后面所有的p元素
// $('div').closest('form'); //選擇離div最近的那個form父元素
// $('div').parent(); //選擇div的父元素
// $('div').children(); //選擇div的所有子元素
// $('div').siblings(); //選擇div的同級元素
// $('div').find('.myClass'); //選擇div內的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');//切換行間樣式 有就刪 沒有就加
?? })
})
</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());
? ? ? // 都是指當前所點的li $this是封裝好的
?? })
})
</script>
jQuery做選項卡
<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 = 內容區(qū)對應的
? ? ? ?? addClass('active').siblings().removeClass('active');
? ? ? //添加激活的樣式 點擊哪個按鈕對應索引的內容會出現
?? })
})
</script>
jQuery屬性操作
<script type="text/javascript">
$(function(){
?? //innerHTML --> html()
?? console.log($('.box').html());//這是一個div元素
?? $('.box').html('<a );//不傳值就是讀 傳值就是寫
?? $('.box').attr({title:'這是一個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 機試會考
?? alert($('#check').prop('checked'));//Flase
?? $('#check').prop({checked:true});//prop看這是的值是true還是false
?? // alert($('.box2').html());//<span>這是div元素里的值</span> 有標簽
?? alert($('.box2').text());//這是div元素里的span? 純文本
})
</script>
