1. 程式人生 > >web前端(五)——jquery入門

web前端(五)——jquery入門

jquery是一個函式庫,一個js檔案,頁面用script標籤引入這個js檔案就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

 

jquery文件載入完再執行

  將獲取元素的語句寫到頁面頭部,會因為元素還沒有載入而出錯,jquery提供了ready方法解決這個問題,它的速度比原生的 window.onload 更快。

  可以簡寫為:

1 <script type="text/javascript">
2 
3 $(function(){
4 5 ...... 6 7 }); 8 9 </script>

 

 

 

jquery選擇器

  jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功

 

  $('#myId') //選擇id為myId的網頁元素

  $('.myClass') // 選擇class為myClass的元素

  $('li') //選擇所有的li元素

  $('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

  $('input[name=first]') // 選擇name屬性等於first的input元素

 

對選擇集進行過濾

  $('div').has('p'); // 選擇包含p元素的div元素

  $('div').not('.myClass'); //選擇class不等於myClass的div元素

  $('div').eq(5); //選擇第6個div元素

 

選擇集轉移

  $('#box').prev(); //選擇id是box的元素前面緊挨的同輩元素
  $('#box').prevAll(); //選擇id是box的元素之前所有的同輩元素
  $('#box').next(); //選擇id是box的元素後面緊挨的同輩元素
  $('#box').nextAll(); //選擇id是box的元素後面所有的同輩元素
  $('#box').parent(); //選擇id是box的元素的父元素
  $('#box').children(); //選擇id是box的元素的所有子元素
  $('#box').siblings(); //選擇id是box的元素的同級元素
  $('#box').find('.myClass'); //選擇id是box的元素內的class等於myClass的元素

判斷是否選擇到了元素 

var $div1 = $('#div1');

var $div2 = $('#div2');

alert($div1.length); // 彈出1

alert($div2.length); // 彈出0

......

<div id="div1">這是一個div</div>
 

 

 

jquery樣式操作

操作行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");

//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

 

 

繫結click事件

$('#btn1').click(function(){

    // 內部的this指的是原生物件

    // 使用jquery物件用 $(this)

})
//獲取元素的索引值 
var
$li = $('.list li').eq(1); alert($li.index()); // 彈出1 ...... <ul class="list"> <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li> </ul>

 

 

jquery動畫

/*
    animate引數:
    引數一:要改變的樣式屬性值,寫成字典的形式
    引數二:動畫持續的時間,單位為毫秒,一般不寫單位
    引數三:動畫曲線,預設為‘swing’,緩衝運動,還可以設定為‘linear’,勻速運動
    引數四:動畫回撥函式,動畫完成後執行的匿名函式

*/

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});