jquery学习笔记分享
入口函数
1.js的入口函数要比jquery的入口函数执行的晚一些
2.jq的入口函数会等待页面的加载完才执行,但是不会等待图片的加载
3.js的入口函数会等待页面的加载完成,并且等待图片的加载完成才执行
jq对象与DOM对象的区别
DOM对象(js对象):使用js获取到的元素就是DOM对象
jq对象:使用jq的方式获取到的元素
jq对象与js对象的联系
jq对象就是js对象的一个集合，伪数组，里面存放了一大堆的js对象(宏观上)
js对象不能调用jq对象的方法,因为是两个不同的对象
DOM对象调用jquer对象的方法，把DOM对象转化成jquery对象
$符号的实质
$就是一个函数，用的时候记得是 $();
console.log(typeof $); //function
3种用法
1.$(function(){
参数是一个function,入口函数
});
2.$(document).ready(function(){
$(domobj),把dom对象转换成 jquery对象
});
3.参数是一个字符串,用来找对象
$('div') $('#btn') $('.className')
});
mouseenter与mouseover的区别
mouseover 鼠标移入事件（被选元素及其子元素）
mouseout 鼠标离开事件
mouseenter 鼠标进入事件（被选元素）
mouseleave 鼠标离开事件
index()会返回当前元素在所有兄弟元素里面的索引
css操作
// css(name,value)
//修改单个样式
//name:样式名 value:样式值
//修改单个样式
// $('li') .css('backgroundColor','pink').css('color','red') .css('fontSize','32px');
// css(obj)
// 修改多个样式
$('li').css({
backgroundColor:'green',
color:'#eee',
fontSize:'24px',
border:"1px solid #000"
});
// 获取样式
// css(name)
// name:想要获取的样式
$('li').eq(0).css('fontSize','20px');
$('li').eq(1).css('fontSize','30px');
$('li').eq(2).css('fontSize','40px');
$('li').eq(3).css('fontSize','50px');
// 隐式迭代
// 设置操作的时候，会给jq内部的所有对象都设置上相同的值
// 获取的时候：只会返回第一个元素对应的值
console.log($('li').css('fontSize'));
$('li').css('backgroundColor','red');
属性操作
样式：在style里面写的，用css来操作
属性：在标签里面写的，用attr方法来操作
//用法和css一样
设置单个属性
attr(name,value)
$('img').attr('alt','999');
$('img').attr('title','错错错');
// 设置多个属性
$('img').attr({
alt:'123',
title:'456',
aa:'bb'
});
// 获取属性
console.log($('img').attr('alt'));
//对于布尔类型的属性，不要用attr方法，要用prop方法，用法和attr一样
prop在v1.6之后才支持
prop全选反选案例
jquery动画
1.show&&hide
//show不穿参数，没有动画
//$('div').show();
//show(speed)
//speed:动画持续时间,可以是毫秒值，还可以是固定字符串
//$('div').show(1000);
//$('div').show('slow');
$('div').show(1000,function(){
alert('动画执行了');
});
2.slideDown&&slideUp&&slideToggle
//滑入 slideDown 滑出slideUp
//如果不传参数,有一个默认值normal
// $('div').slideDown();
// $('div').slideDown(1000);
$('div').slideDown(1000,function(){
alert('动画滑入了');
});
//如果是滑出状态，就执行滑入动画；如果是滑入状态，就执行滑出动画
$('div').slideToggle(1000);
3.fadeIn&&fadeOut&&fadeToggle
4.自定义动画(animate)
//第一个参数： 对象 里面可以传需要的参数
//第二个参数: speed 动画执行时间
//第三个参数: 动画的执行效果
//第四个参数: 回调函数
$('#box1').animate({left:800},8000);
//swing 秋千 摇摆
$('#box2').animate({left:800},8000,'swing');
//linear 匀速 线性
$('#box3').animate({left:800},8000,'linear',function(){
alert('动画执行了');
});
事件对象
//阻止 默认
e.preventDefault();
//阻止冒泡
e.stopPropagation();
return false; //既能阻止冒泡，又能阻止浏览器的默认行为
注意
//设置性操作：可以链式编程
//获取性操作：不可以，因为获取性操作,得到数值,字符串
//看返回值是不是一个jq对象
each方法(jquery遍历)
$('li').each(function(index,element){
$(element).css('opacity',(index+1)/10);
})
节流阀
按下的时候，触发，如果没弹起，不让触发下一次
定义一个flag
