JQuery初识
一丶什么是JQuery
jQuery 是js的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率
js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可
关于jQuery的相关资料:
官网: http://jquery.com/
官网API文档: http://api.jquery.com/
汉化API文档: http://www.css88.com/jqapi-1.9/
二丶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{ width: 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', width:'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对象:
$(js对象);
(2)JQuery对象转为DOM对象:
jquery对象[index]; //方式1(推荐) jquery对象.get(index); //方式2
(3)JQuery对象转换成了DOM对象之后,可以直接调用DOM提供的一些功能.如:
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
总结:如果想要用哪种方式设置属性或方法,必须转换成该类型。
举例:隔行换色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
JQuery动画:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 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>