JQuery的加載和選擇器用法簡單示例

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:57:07

JQuery的加載和選擇器用法簡單示例

JQuery的加載和選擇器用法簡單示例:本文實(shí)例講述了JQuery的加載和選擇器用法。分享給大家供大家參考，具體如下： JQuery加載一般開發(fā)中不用原生的JavaScript而是用JQuery，開發(fā)效率比較高。下面程序是原生和JQuery庫的比較程序 <!DOCTYPE html> <html lan

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JQuery的加載和選擇器用法簡單示例:本文實(shí)例講述了JQuery的加載和選擇器用法。分享給大家供大家參考，具體如下： JQuery加載一般開發(fā)中不用原生的JavaScript而是用JQuery，開發(fā)效率比較高。下面程序是原生和JQuery庫的比較程序 <!DOCTYPE html> <html lan

<!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) 選擇第六個(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>

對選擇集進(jìn)行過濾

* $("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ī)制，即使沒有找到元素，也不會(huì)出錯(cuò)，可以用length屬性來判斷是否找到了元素，length等于0就是沒找到元素，大于0就是找到了元素

var $div1=$("#div1");
alert($div1.length);

手冊上傳至github。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JQuery的加載和選擇器用法簡單示例

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：加載使用用法

熱門焦點(diǎn)

JQuery的加載和選擇器用法簡單示例

JQuery的加載和選擇器用法簡單示例

JQuery的加載和選擇器用法簡單示例

最新推薦

猜你喜歡

熱門推薦