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文件。引入：<script src = 'jquery - 1.12.4.js'></script>（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');//选择器

$('<div>我是一个div</div>');//创建标签

(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（'我是新设置的文本<a>我是连接</a>'）;

2.2给标签为div的元素设置文本

包含了多个dom元素的jquery对象，通过text（）方法设置文本，会把所有的dom元素都设置上。

$('div').text('设置的文本')；//隐式迭代。

})；

开灯关灯案例