初步认识jQuery--基础知识

jQuery基础

jQuery是什么?

• jQuery是一款优秀的JavaScript库,最主要的用途是用来做查询,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单
• 浏览器兼容(前端开发者痛点)
• 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增
• 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增
• 3.x：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本

如何使用jQuery?

• 下载 jQuery库

  • 下载地址: http://code.jquery.com/

• 引入 jQuery库

  <script src="jquery-1.12.4.js"></script>
  

入口函数

jQuery入口函数

• 获取DOM元素

  • 原生的js

    • window.onload

      1. 通过原生的js入口函数可以拿到DOM元素
      2. 通过原生的js入口函数可以拿到DOM元素的宽高

    

    <script>
        window.onload = function (ev) {
            // 1.通过原生的js入口函数可以拿到DOM元素
            var images = document.getElementsByTagName("images")[0]
            console.log(images)
            // 2.通过原生的js入口函数可以拿到DOM元素的宽高
          var width = window.getComputedStyle(images).width
            console.log("onload", width)
        }
    </script>
    

  • jQuery

    • $(document).ready()

      1. 通过jQuery入口函数可以拿到DOM元素
      2. 通过jQuery入口函数不可以拿到DOM元素的宽高

    • 覆盖

      1. 原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
      2. jQuery中编写多个入口函数,后面的不会覆盖前面的

• 原生的js

  • window.onload

<script>
      window.onload = function (ev) {
        alert("hello lnj1")
      }
    window.onload = function (ev) {
          alert("hello lnj2")
    }
  </script>

• jQuery

  • $(document).ready()

  

  <script>
      $(document).ready(function () {
          alert("hello lnj1");
    });
      $(document).ready(function () {
          alert("hello lnj2")
      })
  </script>
  

jQuery的四种写法

• 第一种写法

  <script>
  	$(document).ready(function () {
  		alert("hello lnj")
  	})
  </script>
  

• 第二种写法

  <script> 
  	jQuery(document).ready(function () {
  		alert("hello lnj")
  	})
  </script>
  

• 第三种写法（推荐）

  <script>
      $(function () {
      	alert("hello lnj")
      })
  </script>
  

• 第四种写法

  <script>
      jQuery(function () {
      	alert("hello lnj")
      })
  </script>
  

解决冲突问题

• 释放$的使用权

  • 注意点: 释放操作必须在编写其它jQuery代码之前编写
    • 释放之后就不能再使用$,改为使用jQuery
  • jQuery原理.noConflict()

• 自定义一个访问符号

  

  <script>
        var nj = jQuery.noConflict()
          nj(function () {
              alert("hello lnj")
          })
  </script>