如何使用jQuery?
1、引入jQuery文件
2、写一个入口函数
3、找到要操作的元素(jQuery选择器),去操作它(属性、样式、文本)
$(document).ready(function(){
$('div').width(100).height(100).css('border','1px solid red').text('haha');
})
如何下载jQuery?
官网下载
版本区别 1.x 支持老浏览器--IE6、7、8 停止更新
2.x 不支持老浏览器 停止更新
3.x 不支持老浏览器 持续更新
右击链接另存为 2种---min 产品 ;不带 开发
jQuery入口函数
方法一
$(document).ready(function(){
...
})
方法二
$(function(){...})
入口函数的执行时机不同:
jQuery的入口函数快于window.onload----因为jQuery等待页面上的dom树加载完成,window.onload等待所有的资源都加载完后执行
jQuery的文件结构?
(function(){
window.jQuery = window.$ = jQuery;
}());
jQuery文件是一个自执行函数,执行这个jQuery文件中的代码,其实就是执行这个自执行函数;
这个自执行文件就是给window对象添加一个jQuery属性和$属性;
$和jQuery是等价的,是一个函数
$是一个函数,参数传递不同,效果就不同
1、匿名函数--------入口函数
$(function(){});
2、字符串-----------选择器
$('#one') $('div')
3、DOM元素--------把DOM对象转为jQuery
$(DOM元素)
DOM对象---原生js选择器获取到的对象
dom对象只能调用dom的属性方法,不能调用jQuery的属性方法
jQuery对象---利用jQuery选择器获取到的对象
jquery对象是一个伪数组,其实就是dom对象的一个包装集
jQuery对象只能调用jQuery的属性方法,不能调用dom的属性方法
$('#one').css('background','green');
var ('#one');
案例
<script>
// DOM
var btns = document.getelementByTagName('button');
btns[1].onclick = function () {
$('body').css('backgroundColor','black');
}
// jquery
$(btns[0]).click(function(){
$('body')[0].style.backgroundColor = 'white';
})
</script>
// 获取文本
$('#getBtn').click(function(){
// 获取到所有文本,包括后代文本
$('#div1').text();
// 设置内容
$('#div1').text('你好');
})