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

<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).widthconsole.log(\"onload\", width)}</script>

• jQuery

  $(document).ready()

  通过jQuery入口函数可以拿到DOM元素
  1. 通过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>