jquery初认识

学习js,那你就不能不了解jquery库,它是一个快速、小型的、特性很多的JS库,完美地解决了选择元素难、样式难、动画难、批量操作难等各种兼容问题,简化了js代码的书写。
今天初步了解了jquery,现在做一下简单的知识回顾。

解决选择器问题

$()函数就是jquery的核心函数,用于选择元素。

$("#box ul li.haha span").css("background-color","red");

基本格式就是 $(“选择器”)。这边的选择器跟普通的css选择器差不多。
另外,这边的$可以用query代替,两者是一个意思。
注意:$(this)、$(document)、$(window),只有这三个不用加引号,其他都要加。

在上面的举例中也涉及了css函数,括号里的就是所选元素计算后的样式。
基本语法:$(“选择器”).css(JSON);

$(".box").css({
    "width":700,
    "height" : 300,
    "opacity" : 0.4
});

解决动画问题

jquery里面的动画用animate函数来写。
格式如下:animate里面依次加各属性目标值、持续时间、回调函数。

$(".box").animate({"left":900},4000,function(){
    alert("运动完成");
});

解决事件监听问题

$(".box1").click(function(){
    //点击box1之后做的事情
})

另外还有批量监听的问题,举个例子。

所有的li都有监听了:
$(".circles ol li").mouseenter(function(){
    //自己变红,自己的兄弟恢复为橙色
    $(this).css("background-color","red").siblings().css("background-color","orange");
});  //siblings()表示兄弟节点。

窗口相关事件

下面例子表示,滚轮滑动时在控制台输出滚轮到顶部的距离。

$(document).scroll(function(){
    console.log($(document).scrollTop());
});

总之,jquery是一个非常有用的js库,它简化了大部分的繁琐工作,更加系统化,具有突出的现实意义。

你可能感兴趣的:(jquery初认识)