[jQuery基础] 初识jQuery

为什么要使用jQuery?

• 强大选择器: 方便快速查找DOM元素

• 链式调用: 可以通过.不断调用jQuery对象的方法

• 隐式遍历(迭代): 一次操作多个元素

• 读写合一: 读数据/写数据使用是一个函数

• 事件处理

• DOM操作(C增U改D删)

• 样式操作

• 动画

• 丰富的插件支持

浏览器兼容

• 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增

• 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增

• 3.x：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本

根据各种网站的源代码,了解到要用1.x

如何使用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元素的宽高

    

 <script>
        $(document).ready(function () {
            //      1.通过jQuery入口函数可以拿到DOM元素
            var $images = $("images")
            console.log($images)
            // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
            var $width = $images.width()
            console.log("ready", $width)
        });
    </script>

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

• 覆盖

  • 原生的js

    • window.onload

  

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

• 原生的js

  • window.onload

  

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

加载模式对比

• 第一种写法

  <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>