jQuery
$()函数就是jQuery的核心函数,query就是选择的意思,也就是说jQuery的核心招牌功能就是选择元素:
$可以用jQuery来代替,$和jQuery是同一个函数:
jQuery选择的元素,所有浏览器兼容!
$("#box"):选择页面上id为box的盒子。注意,选择出来的东西,是一个类数组对象,是jQuery自己的对象,这个jQuery对象后面不能跟着原生JS的语法:所以,如果想把jQuery对象,转为原生JS对象,要加[0]就行了。如:$("#box")[0].style.backgroundColor = "red";
1,选择器
注意引号不能丢!!在jQuery世界中,只有三个东西不能加引号,其他必须加引号:
1$(this)
2$(document)
3$(window)
上述的三个东西,不能有引号
2、CSS函数
css函数可以读样式,可以设样式。
读样式,可以读取计算后样式,写一个参数,是不是驼峰,无所谓,但是必须加引号:
$("p:first").css("background-color");
$("p:first").css("backgroundColor");
(1)设置样式,设置样式,有两种语法,如果你只想设置一个样式,逗号隔开k和v:
$("p:odd").css("backgroundColor","blue");
( 2)如果想设置很多样式,就写JSON:
$("p:lt(4)").css({
"width" : 20,
"height" : 20,
"backgroundColor" : "red"
})
3、animate函数
animate
$("p").animate(JS对象, 动画时间, 回调函数/动画类型)
动画
$("p").animate({"left":1000},2000,function(){
$(this).css("background-color","red");
});
和我们封装的框架不一样,jQuery默认有一个处理机制,叫做动画排队。当一个元素接收到了两个animate命令之后,后面的animate会排队:
$("p").animate({"left":1000},2000);
$("p").animate({"top":400},2000);
先2000毫秒横着跑,然后2000毫秒竖着跑。动画总时长4000。
又如:如果想让元素斜着跑,就是同时变化left和top,就写在同一个JSON里面:
$("p").animate({"left":1000,"top":400},2000);
不同的元素,不排队,是同时的。
4、窗口相关
原生的:
window.onscroll = function(){
console.log(document.body.scrollTop || document.documentElement.scrollTop)
}
jQuery;
窗口卷动值:
$(window).scrollTop(); //方法!!不是属性
窗口的宽度:
$(window).width();
$(window).height();
窗口冲锋:
$(“html,body”).animate({ //对象变成了$(“html,body”)
“scrollTop”: 2000 //变成了属性
},1000);