JQuery的加載和選擇器用法簡單示例
本文實例講述了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是等標簽加載完成之后，再渲染完之后才允許。ready是等標簽加載完之后就運行，所以要快。
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屬性
*
* 對選擇集進行過濾
* $("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>
對選擇集進行過濾
* $("div").has("p") 選擇包含p元素的div元素
* $('div').not(".myclass") 選擇class不等于myclass的div元素
* $('div').filter('.myclass') 選擇class等于myclass的元素
* $('div').eq(5) 選擇第六個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有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素，length等于0就是沒找到元素，大于0就是找到了元素
var $div1=$("#div1");
alert($div1.length);
手冊上傳至github。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了jquery實現(xiàn)購物車基本功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了jQuery實現(xiàn)的超簡單點贊效果,結(jié)合實例形式分析了jQuery實現(xiàn)點贊功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下2015-12-12
jQuery UI 實例講解 - 日期選擇器(Datepicker)
下面小編就為大家?guī)硪黄猨Query UI 實例講解 - 日期選擇器(Datepicker)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了jQuery實現(xiàn)的登錄浮動框效果代碼,點擊登陸鏈接可彈出懸浮登錄框,涉及jQuery中show與hide方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
:input表示選擇表單中的input,select,textarea,button元素，input僅僅選擇input元素。2011-07-07
這邊文章主要給大家介紹了jQuery原型屬性constructor,selector,length,jquery和原型方法size,get,toArray，十分的詳細，有需要的小伙伴可以參考下。2015-07-07
基于jQuery實現(xiàn)列表循環(huán)滾動小技巧(超簡單)
只要能夠不停地把第一個item移動到末尾，其余的自會往上填補空缺，填補的過程用動畫放慢些，就能有不斷滾動的視覺效果了，這種效果基于jquery怎么實現(xiàn)呢？下面小編給大家?guī)砹薺Query列表循環(huán)滾動效果的實現(xiàn)思路代碼，一起看看吧2021-08-08
jquery彈層類代碼分享，大家參考使用吧2013-12-12
對話框（Dialog）是一個特殊的窗口（window），可以包含在頂部的工具欄和在底部的按鈕。接下來通過本文給大家介紹easyui創(chuàng)建對話框的兩種方式，非常不錯，感興趣的朋友一起看下吧2016-08-08
基于jquery的inputlimiter 實現(xiàn)字數(shù)限制功能
因客戶要求區(qū)分全角跟半角，所以在jquery.inputlimiter.js插件上還做了些小改動。2010-05-05