jQuery入门(一)---jQuery初体验(与原生js对比)
1、体验jquery2、什么是jquery?3、如何使用jQuery?4、jquery入口函数与window.onload入口函数的区别5、$是什么?6、什么是dom对象?什么是jQuery对象?6.1 dom对象6.2 jQuery对象6.3 jQuery 对象长什么样?6.4 dom对象转换为jQuery对象6.5 jQuery对象转换为dom对象6.5.1 使用下标取出来6.5.2 使用jQuery的方法 get()
7、jQuery文件结构
1、体验jquery
框架:
<input type
="button" value
="设置边框" id
="btnOne"/
>
<input type
="button" value
="设置文本" id
="btnTwo"/
>
<div
></div
>
<div
></div
>
<div
></div
>
原生js写法:
//入口函数
window.onload
=function
(){
//1 先要获取对应元素
var btnOne
= document.getElementById
('btnOne');
var btnTwo
= document.getElementById
('btnTwo');
var divs
= document.getElementsByTagName
('div');
//2 给btnOne按钮设置点击事件
btnOne.onclick
= function
(){
for
(i
=0
;i
<divs.length
;i++
){
divs
[i
].style.border
= '1px solid red';
}
}
btnTwo.onclick
= function
(){
for
(i
=0
;i
<divs.length
;i++
){
divs
[i
].style.textContent
= '我是设置的文本';
}
}
//再添加一个入口函数,此时后面的这个函数会覆盖前面的入口函数
window.onload
= function
(){
console.log
('我又是一个入口函数');
}
js缺点:
1、不能添加多个入口函数(window.onload),若添加了多个,后面的会覆盖前面的
2、原生js的api名字太长难记
3、原生js有点时候代码冗余
4、原生js中有些属性和方法有浏览器兼容问题,如textContent和innerhtml
5、原生js容错率较低,前面的代码出了问题,后面的代码执行不了
jQuery写法:
$(document
).ready(function(){
$('#btnOne').click(function(){
$('div').css('border','1px solid red');
});
$('#btnTwo').click(function(){
$('div').text('我是设置的文本');
})
})
$(document
).read(function(){
console
.log('我又是一个入口函数');
})
//jQuery优势:
1、可以写多个入口函数
2、jQuery的api名字容易记忆
3、jQuery代码简洁(隐式迭代)
4、jQuery帮我们解决了浏览器兼容性问题
5、容错率较高,前面的代码出了问题,后面的代码可以执行
2、什么是jquery?
封装了很多方法的JavaScript库
3、如何使用jQuery?
(1)引入jquery文件(官网下载文件)
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
(2)写一个入口函数(可以写多个入口函数)
方法一 :
$(document).ready(function( ){
$('div').width(100).height(100).css('backgroundColor', 'red').text('哈哈'); //链式编程
})
方法二 :
$ (function(){
$('div').width(100).height(100).css('backgroundColor', 'red').text('哈哈');
})
(3) 找到要操作的元素(jQuery选择器),执行相应操作。
4、jquery入口函数与window.onload入口函数的区别
(1) window.onload入口函数不能写多个,但jQuery入口函数可以。
(2) 执行时机不同:jQuery入口函数要比window.onload入口函数入先执行,
因为jQuery入口函数要等待页面上的dom树加载完成后执行,
window.onload入口函数要等待页面上所有资源(dom树,外部css,js连接,图片)都加载完毕后执行
5、$是什么?
+ $是一个函数,如果报这个错,$ is not defined,就说明没有引入jQuery文件。
+参数传递不同,效果也不一样。
*如果参数传递的是一个匿名函数----入口函数
$(function(){
});
*如果参数传递的是一个字符串----选择器 / 创建一个标签
$('#one') id为one的选择器
$('<div>啦啦啦,我是一个div标签</div>');
*如果参数是dom对象,那他就会把dom对象转换为jQuery对象
$(dom对象);
6、什么是dom对象?什么是jQuery对象?
6.1 dom对象
元素js选择器获取到的对象,如
var btnOne = document.getElementById('btnOne');
特点:只能调用dom方法或属性,不能调用jQuery的属性或方法
var btnOne = document.getElementById('btnOne');
//dom对象可以调用dom的属性和方法
√ btnOne.style.backgroundColor = ' red ' ;
//dom对象不能调用jQuery的属性或方法
× btnOne.css('backgroundColor' , 'green' );
6.2 jQuery对象
利用jQuery选择器获取到的对象
特点:只能调用jQuery的方法或属性,不能调用原生js dom的属性和方法
var $btnOne = $( '#one' );
//jquery对象能调用jQuery的属性或方法
√ btnOne.css('backgroundColor' , 'green' );
//jQuery对象不可以调用dom的属性和方法
× btnOne.style.backgroundColor = ' red ' ;
6.3 jQuery 对象长什么样?
jQuery 对象:(伪数组,jQuery对象就是dom对象的一个包装集)
var $btnOne = $( '#one' );
console.log($btnOne); --->
普通对象:
var btnOne = document.getElementById('one');
console.log(btnOne);
6.4 dom对象转换为jQuery对象
var div1 = document.getElementById('one');
var $div1 = $(div1);
console.log($div1);
6.5 jQuery对象转换为dom对象
6.5.1 使用下标取出来
var $divs = $('div');
var div1 = $divs[0];
console.log(div1);
6.5.2 使用jQuery的方法 get()
var $divs = $('div');
var div2=$divs.get(1);
console.log(div2);
7、jQuery文件结构
其实是一个自执行函数
(function(){
window.jQuery = window. $ = jQuery;
}()) ;
引入一个js文件,是会执行js文件中的代码jQuery文件是一个自执行文件,执行这个jQuery文件中的代码,其实就是执行这个自执行函数这个自执行文件就是给window对象添加一个jQuery属性和$属性
和
j
Q
u
e
r
y
是
等
价
的
,
是
一
个
函
数
。
c
o
n
s
o
l
e
.
l
o
g
(
w
i
n
d
o
w
.
j
Q
u
e
r
y
=
=
=
w
i
n
d
o
w
.
和jQuery是等价的,是一个函数。 console.log ( window.jQuery===window.
和jQuery是等价的,是一个函数。console.log(window.jQuery===window. ); true