一丶什么是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‘;
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
举例:隔行换色
<!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>JQuery初识
原文地址：https://www.cnblogs.com/qicun/p/9719978.html