爱站程序员基地文章目录
- jQuery基础
- jQuery是什么?
- 如何使用jQuery?
- jQuery入口函数
- 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
- 通过原生的js入口函数可以拿到DOM元素
- 通过原生的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元素
-
覆盖
- 原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
- 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
自定义一个访问符号
<script>var nj = jQuery.noConflict()nj(function () {alert(\"hello lnj\")})</script>
