本文實例講述了JQuery的加載和選擇器用法。分享給大家供大家參考，具體如下：
JQuery加載
一般開發(fā)中不用原生的JavaScript而是用JQuery，開發(fā)效率比較高。
下面程序是原生和JQuery庫的比較程序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById('div1'); alert('原聲彈出的' + oDiv); }; $(document).ready(function () {//這是jquery的寫法，作用和原生js的window.onload作用是一樣的 var $div = $('#div1'); alert('jquery彈出的' + $div); }); //下面是上面jQuery完整寫法的簡寫 $(function () { var $div = $('#div1'); alert('jquery簡寫彈出的' + $div); }); </script></head><body><div id="div1">這是一個div元素</div></body></html>雖然原生的js函數(shù)是寫在前面的，但是實際上JQuery彈出之后才會彈出js的alert，因為window.onload是等標(biāo)簽加載完成之后，再渲染完之后才允許。ready是等標(biāo)簽加載完之后就運行，所以要快。
JQuery選擇器
* jquery可以快速的選擇元素，選擇規(guī)則和css樣式相同，使用length屬性判斷是是否選擇成功
* $(#myid) 選擇id為myid的網(wǎng)頁元素
* $('.myclass') 選擇class為myclass的元素
* $("li") 選擇所有l(wèi)i元素
* $("#ul1 li span") 選擇id為ul1元素下的所有l(wèi)i下的span元素
* $("input[name=first]") 選擇name屬性等于first的input屬性
*
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--不能直接撬開這里寫--> <script type="text/javascript"> /* * jquery可以快速的選擇元素，選擇規(guī)則和css樣式相同，使用length屬性判斷是是否選擇成功 * $(#myid) 選擇id為myid的網(wǎng)頁元素 * $('.myclass') 選擇class為myclass的元素 * $("li") 選擇所有l(wèi)i元素 * $("#ul1 li span") 選擇id為ul1元素下的所有l(wèi)i下的span元素 * $("input[name=first]") 選擇name屬性等于first的input屬性 * * 對選擇集進(jìn)行過濾 * $("div").has("p") 選擇包含p元素的div元素 * $('div').not(".myclass") 選擇class不等于myclass的div元素 * $('div').filter('.myclass') 選擇class等于myclass的元素 * $('div').eq(5) 選擇第六個div元素 * */ $(function () { var $div = $(#div1); var $div2 = $('.box'); var $li = $('.list li'); $div.css({'color': 'red'}); $div2.css({'color': 'green'}); $li.css({'color':'prink'}); }); </script> <!--<style type="text/css">--> <!--#div1{--> <!--color: red;--> <!--}--> <!--.box{--> <!--color: green;--> <!--}--> <!--.list li{--> <!--background-color: mediumspringgreen;--> <!--}--> <!--</style>--></head><body><div id="div1">div1</div><div class="box">div2</div><div class="box">div3</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>
新聞熱點
疑難解答
圖片精選
