jquery基础认识jquery
与js的区别
1.不能添加多个入口函数（window.onload），如果添加了多个，后面的会把前面的给覆盖。
2.原生js的api名字都太长太难记。
3.原生js有的时候代码冗余。
4.原生js中有些属性或者方法，有浏览器兼容问题。
5.原生js容错率比较低，前面的代码出了问题，后面的代码执行不了了。
jq的优势
1.是可以写多个入口函数。
2.jq的api名字都容易记忆。
3.jq代码简洁（隐式迭代）。
4.jq帮我们解决了浏览器兼容问题。
5.容错率较高，前面的代码出来了问题，后面的代码不受影响。
jq
设置入口函数
$(document).ready(function(){
//设置边框
$('#btnone').click(function(){
$('div').css('border','1pm solid red');
});
//设置文本
$('#btntwo').click(function(){
$('div').text('我是设置的文本');
});
});
)
js
//设置入口函数
window.onload = function (){
}
//设置边框
btnone.onclick = function (){
for(var i = 0 ；i < divs.length; i++){
divs[i].style.border = '1pm solid red';
}}
//设置文本
btntwo.onclick = function (){
for(var i = 0; i < divs.length;i++){
divs[i].rexrcontent = '我是设置的文本'；
}}}
什么是jq
jq其实就是一个封装了很多方法的js库。我们学习jq其实就是学习这些方法如何使用？（调用参数，返回值，方法有什么效果。。。。）
如何使用jq
1.引入jq文件。
2.写入一个入口函数。
3.找到你要操作的元素（jq选择器），去操作他（给他添加属性，样式，文本。。。）。
$(document).ready(function(){
$('div').width(100).height(100).css('backgroudcolor','red').text('哈哈');
});
引入jq的时候要从官网将jq连接另存为后在页面引入
1.x版本：能够兼容ie678浏览器 现在不更新了
2.x版本：不兼容ie678浏览器 现在不更新了
3.x版本：不兼容ie678浏览器 现在更新中
每一个版本jq又有压缩版和未压缩版。
compressed 压缩版也叫精简版，去掉了格式，体积小，用于发布
uncompressed 未压缩版也叫原版，有统一的格式，体积较大，方便阅读，用于测试，学习和开发。
如何使用jquery
1.什么是jquery？
jquery其实就是一个封装了很多方法的js库。我们学习jquery其实就是学习这些方法如何使用？（调用参数，返回值，方法有什么效果。。。）
2.如何使用jquery？
（1）引入jquery文件。引入：（2）写一个入口函数。（3）找到你要操作的元素（jquery选择器），去操作他（给他添加属性，样式，文本。。。）$(document).ready(function(){
$('div').width(100).height(100).css('backgroundcolor','red').text('haha')//链式编程
});
（在jquery官网下载并引入）
3.jquery两种写法
（1）$(document).ready(function(){
});
(2) $(function(){
});
4.jquery入口函数和window.onload入口函数的区别
（1）window.onload入口函数不能写多个，但是jquery的入口函数是可以写多个的。
（2）执行时机不同：jquery入口函数要快于window.onload。jquery入口函数要等待页面上的dom树加载完后执行。window.onload要等待页面上所有的资源（dom/外部css/js连接，图片）都加载完毕后执行。
$函数
1.$是什么？
是一个函数，如果报了这个错误：$ is not defined，就说明没有引入jquery文件。
$(function(){
});
2.jquery文件结构。
（1）其实是一个自执行函数。
（function(){
window,jquery = window.$ = jquery;
}()};
（2）引入一个js文件是会执行这个js文件中的代码的。
（3）jquery文件是一个自执行函数，执行这个jquery文件中的代码其实就是执行这个自执行函数。
（4）这个自执行文件就是给window对象添加一个jquery属性和$属性，并且$和jquery是等价的，是一个函数。
console.log(window.jquery = = = window.$);//true
console.log(object.prototype.tostring.call($));//'[object function]'
3.$是一个函数，但参数传递不同，效果也不一样。
（1）如果参数传递的是一个匿名函数
$(function（）{
});
(2)如果参数传递的是一个字符串-选择器/创建一个标签
$('#one');//选择器
$('
(3)如果参数是一个dom对象，那他就会把dom对象换成jquery对象。
$(dom对象);
dom对象与jquery对象
1.dom对象
原生js选择器获取到的对象
特点：只能调用dom方法或者属性，不能调用jquery的属性或者方法。
document.getelementbyid('');
document.getelementbytagname('');
var div1 = document.getelementbyid('one');
div1.style.backgroundcolor = 'red';//对象是可以调用dom的属性或者方法
div1.cs('backgroundcolor ','green');报错了div1.css is not a function，因为dom对象不能调用jquery的方法。
2.jquery对象
利用jquery选择器获取到的对象。
特点：只能调用jquery的方法或者属性，不能调用原生的dom对象属性或者方法。
var $div1 = $('#one');
$div1.css('backgroundcolor','green');//jquery对象是可以调用jquery的方法的。
$div1.style.backgroundcolor = 'red';//报错了cannot set property ' background color' of undefined
3.jquery对象长什么样子？
jquery对象是一个伪数组。jquery对象其实就是dom对象的一个包装集。
var div1 = document.getelementbyid('one');
console.log(div1);
var $div1 = $('#one');
console.log($div1);
console.log($div1._proto_ === array.prototype )//false ,jquery 对象是一个伪数组。
var $div = $('div');
console.log($divs);
4.dom对象换成jquery对象
var div1 = document.getelementbyid('one');
var$ div1 = $(div1);
console.log($div1);
5.jquery对象转换成dom对象
（1）使用下标取出来。
var $divs =$('div');
var div1 = $divs[0];//取第一个
console.log(div1);
(2)使用jquery方法get（）
var div2 = $divs.get(1);
console.log(div2);
获取和设置文本
text（）；获取设置文本的。
1.获取文本：text（）方法不给参数
$('#getbtn').click(function(){
1.1获取id为div1这个标签的文本，会获取到这个标签中所有的文本，包括后代元素的文本。
Console.log($('#div1').text());
1.2获取标签为div的元素的文本
包含了多个dom元素的jquery对象，通过text（）方法获取文本，会把所有dom元素的文本获取到。
console.log($('div').text());
});
2.设置文本：text（）方法给参数，参数就是要设置的文本。
$('#setbtn').click(function(){
2.1给id为div1的这个标签设置文本
会覆盖他原来的内容，如果设置的文本中包含标签，是不会把这个标签解析出来的。
$(''#div1'').text('我是新设置的文本')；
$('#div1').text（'我是新设置的文本我是连接'）;
2.2给标签为div的元素设置文本
包含了多个dom元素的jquery对象，通过text（）方法设置文本，会把所有的dom元素都设置上。
$('div').text('设置的文本')；//隐式迭代。
})；
开灯关灯案例
