jQuery基础(jQuery概念,jQuery与js入口函数的区别及其入口函数的其他写法和冲突问题)
1、jQuery是什么?
jQuery是javascript库。可以简化对原生js的操作
2、为什么使用jQuery
强大选择器,方便快速查找DOM元素。浏览兼容好
3、jQuery和JS入口函数的区别
<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">
实例代码如下:
window.onload = function (ev) {
// 1.通过原生的JS入口函数可以拿到DOM元素
var images = document.getElementsByTagName("img")[0];
// 2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width=images.width;
console.log(images);
console.log(width); //170
}
$(document).ready(function () {
// 1.通过jQuery入口函数可以拿到DOM元素
var $images = $("images");
console.log($images);
// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $images.width();
console.log("ready", $width); //ready null
});
原生JS和jQuery入口函数的加载模式不同
原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
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");
});
//都弹出
1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
2.jQuery中编写多个入口函数,后面的不会覆盖前面的
4、jQuery的入口函数其他写法
// 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");
});
5、jQuery冲突问题
<script src="js/jquery-1.12.4.js"></script>
<script src="js/test.js"></script>
<script>
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
jQuery.noConflict();
jQuery(function () {
alert("hello lnj");
});
或者
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)