jQuery简介
jQuery就是一个封装了很多方法的javaScript库。
我们学习jQuery，其实就是学习jQuery中封装的一大堆方法。
jQuery的优点
- jQuery设计的宗旨是'Write Less , Do More'，即倡导写更少的代码，做更多的事情。
- 它封装的方法优化了HTML文档操作、事件处理、动画设计和Ajax交互，极大地简化了JavaScript编程。
- jQuery的核心特性可以总结为︰
- 具有独特的链式语法和短小清晰的多功能接口;
- 具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展;
- 拥有便捷的插件扩展机制和丰富的插件。
- jQuery兼容各种主流浏览器。
jQuery的版本
jQuery版本有很多，分为1.x ，2.x ，3.x
- 1.x版本∶能够兼容IE678浏览器（不更新了）
- 2.x版本∶不兼容IE678浏览器（不更新了）
- 3.x版本:不兼容IE678浏览器（更新中）
3.x版本更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678 )国内多数网站还在使用1.x的版本
每一个版本jQuery又有压缩版和未压缩版。
compressed压缩版也叫精简版，去掉了格式，体积小，用于发布
uncompressed未压缩版也叫原版，有统一的格式，体积较大，方便阅读，用于测试、学习和开发
jQuery官网：可自行下载需要的版本
如何使用jQuery
1.引入jQuery文件
<script src="./jquery.js"></script>
2.写一个入口函数（防止页面（标签）未加载完全就执行js代码）
入口函数写法有两种
$(document).ready (function () {
});
$(function () {
});
jQuery入口函数和window.onload入口函数的区别
window.onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的。
执行时机不同:jQuery入口函数要快于window.onload：
- jQuery入口函数要等待页面上DOM树（标签）加载完后执行.
- window.onload要等待页面上所有的资源(DOM树（标签）/外部CSS/js连接,图片)都加载完毕后执行
3.找到要操作的元素(jQuery选择器),去操作他(给他添加属性,样式,文本....)
$是什么？
如果报了这个错误：$ is not defind,说明没有引入jQuery文件
jQuery文件结构：
它其实是一个自执行函数
(function(){
window,jQuery = window.$ = jQuery;
}());
这个自执行文件就是给window对象添加一个jQuery属性和其实和jQuery是等价的，是一个函数。参数传递不同，效果也不一样
①如果参数传递的是一个匿名函数，则是入口函数
$(function () {
});
②如果参数传递的是一个字符串，则是选择器/创建一个标签
$('one');
$('<div>哈哈哈</div>');
③如果参数是一个DOM对象，则会把DOM对象转为jQuery对象
$(DOM对象);
DOM对象
原生js选择器获取到的对象
只能调用DOM属性或方法，不能调用jQuery的属性或方法
<body>
<div id="divOne" style="height: 100px;"></div>
<div></div>
</body>
var divOne=document.getElementById("divOne");
divOne.style.backgroundColor='red';
//divOne.css('backgroundColor','green');//报错：css is not a function
jQuery对象
利用jQuery选择器获取到的对象
只能调用jQuery的属性或方法，不能调用原生jsDOM属性或方法
$(function(){
var $divOne=$('#divOne');
$divOne.css('backgroundColor','green');
//$divOne.style.backgroundColor='red';//报错：Cannot set properties of undefined (setting 'backgroundColor')
});
jQuery对象是一个伪数组，是DOM对象的一个包装集。
console.log($divOne.__proto__ === Array.prototype);//false
console.log($divOne);//n.fn.init [div#divOne, context: document, selector:
var $divs=$('div');//获取所有div
console.log($divs);//n.fn.init(2) [div#divOne, div, prevObject: n.fn.init(1), context: document, selector: 'div']0: div#divOne1: divcontext: documentlength: 2prevObject: n.fn.init [document, context: document]selector: "div"[[Prototype]]: Object(0)
DOM对象转换为jQuery对象
var div1 = document.getElementById("divOne");
var $div1 = $(div1);
console.log($div1);
jQuery对象转换为DOM对象
方法一：使用下标取出来
var $divs =$('div');
console. log($divs);
var div1 = $divs[O];
console.log(div1);
方法二：使用jQuery的 get() 方法
var $div2=$divs-get(1);
console.log($div2);
网友评论