仁者爱人

今日努力学习,是为了明日衣食无忧.

导航

jquery1.9学习笔记 之选择器(基本元素四)

ID选择器("#id")

 

描述: 选择与给出ID属性匹配的单元标签。

       对于ID选择器,jquery使用JS的函数document.getElementById(),当一个标签附加到ID选择器上时,也是非常有效的。如h2#pageTitlejquery会在识别元素标签前进行检查以做出匹配。

 

 

例子:  

<!doctype html>

<html>

  <head>

    <meta charset='utf-8'>

    <title>id demo</title>

    <style>

      div{

        width:90px;

        height: 90px;

        float: left;

        padding:5px;

        margin:5px;

        background-color:#EEEEEE;

      }

    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  </head>

  <body>

    <div id='notMe'><p>id='notMe'</p></div>

    <div id='myDiv'>id='myDiv'</div>

    <script type="text/javascript">

      $('#myDiv').css('border', '3px solid red');

    </script>

  </body>

</html>

例:

针对ID中的一些特殊字符,要使用反斜线进行转义

<!doctype html>

<html lang='zh'>

  <head>

      <meta charset='utf-8'>

      <title>id demo</title>

      <style type="text/css">

          div{

              width:300px;

              float:left;

              padding:2px;

              margin:3px;

              background-color:#EEEEEE;

          }

      </style>

      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  </head>

  <body>

      <div id='myID.entry[0]'>id='myID.entry[0]'</div>

      <div id='myID.entry[1]'>id='myID.entry[1]'</div>

      <div id='myID.entry[2]'>id=''myID.entry[2]'</div>

      <script type="text/javascript">

          $("#myID\\.entry\\[1\\]").css("border", "3px solid red");

      </script>

  </body>

</html>

posted on 2013-08-31 19:21  semcoding  阅读(181)  评论(0编辑  收藏  举报