您的位置：首页 > Web前端 > JQuery

【jQuery】 01-初识jQuery 02-jQuery-HelloWorld 03-jQuery和JS入口函数的区别 04-jQuery入口函数的其它写法 05-jQuery冲突问题

2019-07-22 21:01 387 查看

01-初识jQuery

<script>
window.onload = function (ev) {
// 1.利用原生的JS查找DOM元素
var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2");
// console.log(div1);
// console.log(div2);
// console.log(div3);
// 2.利用原生的JS修改背景颜色
// div1.style.backgroundColor = "red";
// div2.style.backgroundColor = "blue";
// div3.style.backgroundColor = "yellow";
}

$(function () {
var $div1 = $("div");
var $div2 = $(".box1");
var $div3 = $("#box2");
// console.log($div1);
// console.log($div2);
// console.log($div3);
$div1.css({
background: "red",
width: "200px",
height: "200px"
});
$div2.css({
background: "blue"
});
$div3.css({
background: "yellow"
});
});
</script>

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2018年1月20日）

有两种版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
这两个版本都可以从 jQuery.com 下载。

02-jQuery-HelloWorld

<script src="js/jquery-1.12.4.js"></script>
<script>
// 1.原生JS的固定写法
window.onload = function (ev) {  }

// 2.jQuery的固定写法
$(document).ready(function () {
alert("hello lnj");
});
</script>

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

03-jQuery和JS入口函数的区别

<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);
}
*/

/*
* 1.原生JS和jQuery入口函数的加载模式不同
* 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
* jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
* */
/*
$(document).ready(function () {
// 1.通过jQuery入口函数可以拿到DOM元素
var $images = $("images");
console.log($images);
// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $images.width();
console.log("ready", $width);
});
*/

/*
1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
2.jQuery中编写多个入口函数,后面的不会覆盖前面的
*/
// window.onload = function (ev) {
//     alert("hello lnj1");
// }
// window.onload = function (ev) {
//     alert("hello lnj2");
// }

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

04-jQuery入口函数的其它写法

<script>
// 1.第一种写法
$(document).ready(function () {
// alert("hello lnj");
});

// 2.第二种写法
jQuery(document).ready(function () {
// alert("hello lnj");
});

// 3.第三种写法(推荐)
$(function () {
// alert("hello lnj");
});

// 4.第四种写法
jQuery(function () {
alert("hello lnj");
});
</script>

05-jQuery冲突问题

<script>
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
//         释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航