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

發(fā)布時(shí)間：2020-10-04 19:26:17 來源：腳本之家閱讀：134 作者：SpecYue 欄目：web開發(fā)

本文實(shí)例講述了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">這是一個(gè)div元素</div>
</body>
</html>

雖然原生的js函數(shù)是寫在前面的，但是實(shí)際上JQuery彈出之后才會彈出js的alert，因?yàn)閣indow.onload是等標(biāo)簽加載完成之后，再渲染完之后才允許。ready是等標(biāo)簽加載完之后就運(yùn)行，所以要快。

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)  選擇第六個(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ī)制，即使沒有找到元素，也不會出錯(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ì)有所幫助。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽