一、比较原生js和jQuery的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
// window.onload = function(){
// var div1 = document.querySelector('div');
// var div2 = document.getElementsByClassName('two')[0];
// var div3 = document.getElementById('three');
// div1.style.backgroundColor = 'red';
// div2.style.backgroundColor = 'blue';
// div3.style.backgroundColor = 'pink';
// }
$(document).ready(function(){
var div1 = $('div:first');
var div2 = $('.two');
var div3 = $('#three');
div1.css('background-color','red');
div2.css({
backgroundColor:'blue',
fontSize:'18px',
fontFamily:'楷体'
});
div3.css('background-color','pink');
})
</script>
</head>
<body>
<div>我是一个div</div>
<div class="two">我是一个div</div>
<div id="three">我是一个div</div>
</body>
</html>
浏览器运行结果如下:
二、jquery和js入口函数区别
js入口函数只有一个 后面的会覆盖前面的
jquery入口函数可以有多个会依次执行 $(function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
// window.onload = function(){
// var img = document.querySelector('img');
// console.log(window.getComputedStyle(img).width);
// console.log(window.getComputedStyle(img).height);
// }
// $(function(){
// console.log($('img').width());
// console.log($('img').height());
// })
//js入口函数不会追加,后面的会覆盖前面的
window.onload = function(){
alert('js入口函数1')
}
window.onload = function(){
alert('js入口函数2')
}
//jquery入口函数 4种形式 入口函数会依次执行 不会覆盖
$(document).ready(function(){
alert('入口函数1')
})
jQuery(document).ready(function(){
alert('入口函数2')
})
$(function(){
alert('入口函数3')
})
jQuery(function(){
alert('入口函数4')
})
</script>
</head>
<body>
<img src="图片地址" alt="">
</body>
</html>
浏览器运行如下: