jQuery-基础
2019-08-15 本文已影响0人
遇明不散
jQuery
jQuery是什么
jQuery是一款优秀的JavaScript库，它简化了繁琐的原生JavaScript，让HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。
jQuery的作用
- 强大选择器: 方便快速查找DOM元素
- 链式调用: 可以通过.不断调用jQuery对象的方法
- 隐式遍历(迭代): 一次操作多个元素
- 读写合一: 读数据或写数据使用一个函数
- 事件处理
- DOM操作(C增U改D删)
- 样式操作、动画
- 丰富的插件支持
- 自带浏览器兼容
jQuery的基本使用
- 下载jQuery库： http://code.jquery.com/
- 引入下载的jQuery库
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 引入下载的jQuery库 -->
<script src="code/js/jquery-1.12.4.js"></script>
</head>
- 编写jQuery代码
<script>
$(document).ready(function () {
// jQuety代码
alert("hello world");
});
</script>
jQuery和JavaScript入口函数的区别
JavaScript入口函数
- 通过原生的JS入口函数可以拿到DOM元素
- 通过原生的JS入口函数可以拿到DOM元素的宽高
- 原生JS入口函数会等待网页全部加载完毕(包括 图片等),然后再执行包裹代码
- 原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
jQuery入口函数
- 通过jQuery入口函数可以拿到DOM元素
- 通过jQuery入口函数不可以拿到DOM元素的宽高
- jQuery入口函数等到DOM结构加载完毕,就能执行包裹的代码,而不必等到图片等也加载完毕
- jQuery中编写多个入口函数,后面的不会覆盖前面的
<!-- js -->
<script>
window.onload = function () {
alert("hello world1"); // 不会显示
}
window.onload = function () {
alert("hello world2"); // 会显示
}
</script>
<!-- jQuery -->
<script>
$(document).ready(function () {
alert("hello world1"); //会显示
});
$(document).ready(function () {
alert("hello world2"); // 会显示
});
</script>
jQuery入口函数的其它写法
<script>
// 第一种写法
$(document).ready(function () {
alert("hello world");
});
// 第二种写法
jQuery(document).ready(function () {
alert("hello world");
});
// 第三种写法(推荐)
$(function () {
alert("hello world");
});
// 第四种写法
jQuery(function () {
alert("hello world");
});
</script>
jQuery冲突问题
- 释放
$的使用权，改使用jQuery - 释放操作必须在编写其它jQuery代码之前编写
<script>
// 释放$的使用权
jQuery.noConflict();
</script>
- 自定义一个访问符号
<script>
// 自定义一个访问符号
var my = jQuery.noConflict();
my(function () {
alert("hello world");
});
</script>
