JQuery的加載和選擇器用法簡(jiǎn)單示例
本文實(shí)例講述了JQuery的加載和選擇器用法。分享給大家供大家參考,具體如下:
JQuery加載
一般開(kāi)發(fā)中不用原生的JavaScript而是用JQuery,開(kāi)發(fā)效率比較高。
下面程序是原生和JQuery庫(kù)的比較程序
<!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的寫(xiě)法,作用和原生js的window.onload作用是一樣的 var $div = $('#div1'); alert('jquery彈出的' + $div); }); //下面是上面jQuery完整寫(xiě)法的簡(jiǎn)寫(xiě) $(function () { var $div = $('#div1'); alert('jquery簡(jiǎn)寫(xiě)彈出的' + $div); }); </script> </head> <body> <div id="div1">這是一個(gè)div元素</div> </body> </html>
雖然原生的js函數(shù)是寫(xiě)在前面的,但是實(shí)際上JQuery彈出之后才會(huì)彈出js的alert,因?yàn)閣indow.onload是等標(biāo)簽加載完成之后,再渲染完之后才允許。ready是等標(biāo)簽加載完之后就運(yùn)行,所以要快。
JQuery選擇器
* jquery可以快速的選擇元素,選擇規(guī)則和css樣式相同,使用length屬性判斷是是否選擇成功
* $(#myid) 選擇id為myid的網(wǎng)頁(yè)元素
* $('.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><!--不能直接撬開(kāi)這里寫(xiě)--> <script type="text/javascript"> /* * jquery可以快速的選擇元素,選擇規(guī)則和css樣式相同,使用length屬性判斷是是否選擇成功 * $(#myid) 選擇id為myid的網(wǎng)頁(yè)元素 * $('.myclass') 選擇class為myclass的元素 * $("li") 選擇所有l(wèi)i元素 * $("#ul1 li span") 選擇id為ul1元素下的所有l(wèi)i下的span元素 * $("input[name=first]") 選擇name屬性等于first的input屬性 * * 對(duì)選擇集進(jìn)行過(guò)濾 * $("div").has("p") 選擇包含p元素的div元素 * $('div').not(".myclass") 選擇class不等于myclass的div元素 * $('div').filter('.myclass') 選擇class等于myclass的元素 * $('div').eq(5) 選擇第六個(gè)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>
對(duì)選擇集進(jìn)行過(guò)濾
* $("div").has("p") 選擇包含p元素的div元素
* $('div').not(".myclass") 選擇class不等于myclass的div元素
* $('div').filter('.myclass') 選擇class等于myclass的元素
* $('div').eq(5) 選擇第六個(gè)div元素
<!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"> $(function () { var $div=$('div') $div.css({backgroundColor:'red'}); $div.has('p').css({backgroundColor:"green"}); $div.eq(4).css({textIndent:'20px'}); }) </script> </head> <body> <div>1</div> <div><p>2</p></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </body> </html>
判斷是否選擇到了元素
JQuery有容錯(cuò)機(jī)制,即使沒(méi)有找到元素,也不會(huì)出錯(cuò),可以用length屬性來(lái)判斷是否找到了元素,length等于0就是沒(méi)找到元素,大于0就是找到了元素
var $div1=$("#div1"); alert($div1.length);
手冊(cè)上傳至github。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun 測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單的方法,需要的朋友可以參考下2015-10-10jq選項(xiàng)卡鼠標(biāo)延遲的插件實(shí)例
jq選項(xiàng)卡鼠標(biāo)延遲的插件實(shí)例,需要的朋友可以參考一下2013-05-05jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程
jQuery Mobile中的button默認(rèn)提供了很多用于制作移動(dòng)Web頁(yè)面按鈕的屬性,這里我們來(lái)整理一下jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中,使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果.2011-03-03學(xué)習(xí)jquery必備 api中英文對(duì)照的chm手冊(cè) 下載
學(xué)習(xí)jquery必備 api中英文對(duì)照的chm手冊(cè) 下載...2007-05-05jQuery獲取上傳文件的名稱(chēng)的正則表達(dá)式
在Web開(kāi)發(fā)中,經(jīng)常會(huì)涉及到文件上傳。文件上傳時(shí)通常都要驗(yàn)證文件的有效性,這個(gè)通常就要用正則表達(dá)式來(lái)判斷。2015-05-05jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法,涉及jQuery根據(jù)時(shí)間動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07jQuery中outerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中outerWidth()方法用法,實(shí)例分析了outerWidth()方法的功能、定義及獲取第一個(gè)匹配元素外部寬度的使用技巧,需要的朋友可以參考下2015-01-01