jQuery基础1（JS和jQuery基础使用对比）

JS和jQuer引用方式

<!--引入jQuery文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 

<!--平时插入JS -->
<script type="text/javascript" ></script>

JS对象和jQuery对象互相转换

   /* JS对象和jQuery对象
   使用getElementsByXX得到的对象都是JS对象，只能用JS方法
   使用$()得到的对象是jQuery对象，只能使用jQuery方法 */
    $(function () {
      /* JS对象 */
      var h1 = document.getElementById("h2")
      alert(h1.innerHTML);

      /* jQuery对象 */
      var h1  = $("#h2")
      alert(h1.innerHTML);
      alert(h1.html())

      /* JS对象->jQuery对象 */
      var h1 = document.getElementById("h2")
      alert($(h1).html());

      /* jQuery对象->JS对象
      jQuery对象是一个数组，取出数组元素就是JS对象*/
      var h1 = $("#h2")
      alert(h1[0].innerHTML)
    })

修改li列表里的样式

<ul>
  <li>123456</li>
  <li>123456</li>
  <li>123456</li>
</ul>

通过两种方式修改鼠标放到 li标签 上时的样式

<!-- js方式 -->
  <script type="text/javascript">
    window.onload = function () {
      var lis = document.getElementsByTagName("li");
      for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
          this.style.color = "skyblue";
        };
        lis[i].onmouseout = function () {
          this.style.color = "black";
        };
      }
    };
  </script>

<!-- jQurey方式 -->
  <style>
    .bg {
      color: blueviolet;
    }
  </style>
  <script>
    $(function () {
      // 如果当前标签有class="bg",就去掉class属性
      // 如果没有就加上class="bg"
      $("li").mouseover(setcolor).mouseout(setcolor);
      function setcolor() {
        $(this).toggleClass("bg");
      }
    })
  </script>