一丶什么是JQuery
jQuery 是js的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率
js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可
关于jQuery的相关资料:
二丶JQuery的文件讲解
1.先导入模块,在前端中一个js 文件就是一个模块,一个css也可以是一个模块
<script type="text/javascript" src="./jquery.js"></script>
在JQuery的内部api 99%的都是方法
2.在JQuery还是要遵循那三步走 获取事件源丶事件丶事件驱动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box" class="wrap">alex</div>
<!-- from xxx import ooo -->
<!-- 1.导入模块 在前端中一个js文件就是一个模块 一个css也可以是一个模块，一个html/png/mp3 -->
<script type="text/javascript" src="./jquery.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script>
//jquery内部的api 99%的都是方法
console.log(jQuery);
//
console.log($('#box'));
// 三步走
// 1、获取事件源 2、事件 3.事件驱动
$('#box').click(function(){
//千万不要调用js的属性和方法 js调用js的属性和方法 ，jquery对象是调用jquery的对象和方法
// console.log($('.wrap').style);
// $('.wrap').css('color','red');
$('.wrap').css({
// 'background-color': 'yellow'
'backgroundColor': 'yellow',
'300px'
});
})
</script>
</body>
</html>
三丶JQuery的入口函数
原生js的入口函数指的是; window.onload = function() {}; 如下:
//原生 js 的入口函数。页面上所有内容加载完毕，才执行。
//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
window.onload = function () {
alert(1);
}
JQuery有以下几种写法:
写法一:
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () {
alert(1);
})
写法二:(写法一的简洁版)
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(function () {
alert(1);
});
写法三:
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})
JQuery入口函数与js入口函数的区别:
区别一:书写个数不同:
1.JS的入口函数只能出现一次,出现多次会存在事件覆盖的问题.
2.JQuery的入口函数,可以出现任意多次,并不存在事件覆盖问题.
区别二:执行时机不同:
1.JS的入口函数是在所有的文件资源加载完成后,才执行.这些文件资源包括:页面文档丶外部的js文件丶外部的css文件丶图片等.
2.JQuery的入口函数,是在文档加载完成后,就执行.文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成.
文档加载顺序:从上往下,边解析边执行
四丶JQuery $符号
$时机上表示的是一个函数名:
$(); // 调用上面我们自定义的函数$
$(document）.ready(function(){}); // 调用入口函数
$(function(){}); // 调用入口函数
$(“#btnShow”) // 获取id属性为btnShow的元素
$(“div”) // 获取所有的div标签元素
根据传入参数的不同,进行不同的调用,实现不同的功能.返回的是JQuery对象.
JQuery这个js库,除了$之外,还提供了另外一个函数:JQuery. jQuery函数跟$函数的关系:jQuery =$.
五丶js中的DOM对象和jQuery对象比较(重点)
1.二者的区别
通过jQuery获取的元素是一个数组,数组中包含着原生js中的DOM对象.
针对下面这样一个div结构:
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div
通过原生js获取这些元素节点的方式是:
var myBox = document.getElementById("app"); //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
通过jQuery获取这些元素节点的方式是:(获取的都是数组)
//获取的是数组，里面包含着原生 JS 中的DOM对象。
console.log($('#app'));
console.log($('.box'));
console.log($('div'));
设置当前4个div的样式:
$('div').css({
'width': '200px',
'height': '200px',
"background-color":'red',
'margin-top':'20px'
})
总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
2.二者的相互转换
(1)DOM对象转为JQuery对象:
(2)JQuery对象转为DOM对象:
jquery对象[index]; //方式1（推荐）
jquery对象.get(index); //方式2
(3)JQuery对象转换成了DOM对象之后,可以直接调用DOM提供的一些功能.如:
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
举例:隔行换色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函数
jQuery(function () {
var jqLi = $("li");
for (var i = 0; i < jqLi.length; i++) {
if (i % 2 === 0) {
//jquery对象，转换成了js对象
jqLi[i].style.backgroundColor = "pink";
} else {
jqLi[i].style.backgroundColor = "yellow";
}
}
});
</script>
</head>
<body>
<ul>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
</ul>
</body>
</html>
View Code JQuery动画:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
200px;
height: 200px;
background-color:red;
/*display: none;*/
}
</style>
</head>
<body>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<div id="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
console.log($('button'));
var isShow = true;
// 内部提升
$('button').click(function () {
//点击改变长宽
// $('#box').hide(2000);
// $('#box').show(2000,function() {
// alert(2222);
// });
// 显示:2秒显示出来
// $('#box').fadeIn(2000);
// 隐藏:22秒逐渐隐藏起来
// $('#box').fadeOut(2000);
//上下逐渐展开
// if (isShow) {
// // 用动画 先 stop()再开动画
// $('#box').stop().slideUp(1000);
// isShow = false;
// }else{
// $('#box').stop().slideDown(1000);
// isShow = true;
// }
//
//上下逐渐展开关闭
// $('#box').slideToggle(1000);
// $('#box').slideDown(3000);
})
});
</script>
</body>
</html>