JQuery
01 初识JQuery-理解
作者：极客江南
链接：https://www.jianshu.com/p/73c48795060b
课前须知: 学习jQuery前必须先掌握JavaScript
jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握)
jQuery是什么？
- jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）.
- 在jQuery官方Logo下方还有一个副标题（write less, do more）, 体现了jQuery除了查询以外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单
1.利用原生的js查找dom元素
用原生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);
}
效果相同
3.利用原生的js 修改背景颜色
//利用原生的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？
-
强大选择器: 方便快速查找DOM元素
- 如上面实例所展示一样，通过jQuery查找DOM元素要比原生js快捷很多
- jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器
-
链式调用: 可以通过.不断调用jQuery对象的方法
- 如上面实例所展示一样，jQuery可以通过.（点）.不断调用jQuery对象的方法，而原生JavaScript则不一定
02-使用jQuery -掌握
如何使用jQuery？
-
下载jQuery库
- 下载地址: http://code.jquery.com/
-
引入下载的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
03-JQuery和js 加载模式-掌握
获得照片的路径
打印输出宽度
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入口函数的加载模式不同：
- 原生js会等到dom元素加载完毕,图片也加载完毕才会执行
- jQuery会等到dom元素加载完毕,但是不会等到图片也加载完毕
两个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"
04-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");
})