作者：极客江南
链接：https://www.jianshu.com/p/73c48795060b
课前须知: 学习jQuery前必须先掌握JavaScript
jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握)
用原生js:
<div></div>
<div class="box1"></div>
<div id="box2"></div>
<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);
//利用原生的js 修改背景颜色
}
</script>
输出:
使用jQuery
$(function () {
var $div1 = $("div");
var $div2 = $(".box1");
var $div3 = $("#box2");
console.log($div1);
console.log($div2);
console.log($div3);
}
效果相同
//利用原生的js 修改背景颜色
div1.style.backgroundColor = "red";
div2.style.backgroundColor = "blue";
div3.style.backgroundColor = "yellow";
利用jQuery的时候删除下标[0],然后
$(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"
});
});
下载jQuery库
引入下载的jQuery库
<head>
<meta charset="UTF-8">
<title>01-初识jQuery</title>
<script src="code/js/jquery-1.12.4.js"></script>
</head>
编写jQuery代码
<script>
//1.原生js的固定写法
window.onload = function (ev){}
//2.jQuery的固定写法
$(document).ready(
function(){
alert("hello ing")
});
</script>
新建文件快捷键: alt+ insert
获得照片的路径
打印输出宽度
JQuery和js入口函数的区别：
window.onload = function (ev){
//通过原生的js入口函数可以拿到我们的dom元素
var img = document.getElementsByTagName("img")[0];
console.log(img);
//2.通过原生js的入口函数获得照片的宽度
var width = window.getComputedStyle(img).width;
console.log("onload",width);
}
$(document).ready(function(){
//1.通过jQuery的入口函数可以拿到dom元素
var $img = $("img")[0];
console.log(img);
// 2.通过JQuery的入口函数不能获得照片的宽度
var $width =$img.width();
console.log("ready",$width);
})
原生js和jQuery入口函数的加载模式不同：
两个alert后面的会覆盖前面的：
window.onload = function (ev){
alert("hello lnj1")
}
window.onload = function (ev){
alert("hello lnj2")
}
但是jQuery后写的不会覆盖先写的：
$(document).ready(function (){
alert("hello lnj1")
})
$(document).ready(function (){
alert("hello lnj2")
})
先弹出"hello lnj1"，在弹出"hello lnj2"
// 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");
})
原文：https://www.cnblogs.com/MyBlogForRecord/p/15305947.html