初识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 写法
<script>
// 1.原生JS的固定写法
window.onload = function (ev) { }
// 2.jQuery的固定写法
$(document).ready(function () {
alert("hello lnj");
});
</script>
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>
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>
jQuery冲突问题
<script>
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});
</script>