入口函数

  • JavaScript的入口函数
    window.onload=function(){
        console.log('这是Javascript的入口函数!');
    };
    
  • jQuery的两种入口函数
    $(document).ready(function(){
        console.log('只是jq的第一种入口函数!');
    });
    
    
    $(function(){
        console.log('只是jq的第二种入口函数!');
    });
    

javaScript上的入口函数是等网站加载完(图片也要加载完才会执行),而JQuery上的入口函数只是让网站的代码加载完就执行,(不需要等图片加载),所以Jq的入口函数会比Js的入口函数要快。

DOM对象和jQuery对象

DOM对象和jQuery对象不能换着用

  • dom对象->jQuery对象 加上$()
  • jQuery对象->dom对象 $li[0] 或者 $li.get(0)

jQuery中$的作用

$ === jQuery 成立

  1. 参数是一个function,表示入口函数 $(function(){})
  2. 把dom对象转换成jq对象 $(document).ready(function(){})
  3. 参数可以是一个字符串,用来找对象 $('#id') $('.class') $('li')

选择器

  • $("s1,s2") 并集选择器
  • $("s1 s2") 后代选择器
  • $("s1>s2") 子代选择器
  • $(".s1.s1") 交集选择器

更多选择器查找API

修改样式

  • 修改单个样式
    <script>
       $(function(){
            $("li").css("backgroundColor","pink")
            .css("color","red")
            .css("fontSize","14px")
       })
    </script>
    
  • 修改多个样式
    <script>
     $(function(){
        $("li").css({
        backgroundColor:"pink",
        color:"red",
        fontSize:"14px",
        })
    })
    </script>   
    
  • 获取样式
    <script>
     $(function(){
        $("li").css("fontSize");
        })
    </script>
    

修改class和属性

  • 增加一个类

    $("li").addClass("bigger");

  • 移除一个类

    $("li").eq(0).removeClass("bigger");

  • 判断是否有这个类

    $("li").hasClass("bigger");

  • 判读有没有这个类,有就添加,没有就移除

    $("li").toggleClass("bigger");

  • 操作属性

    $("img").attr("title","这是一张图片")

    $("img").attr([title:"这是一张图片",alt:"错错错"])

    $("img").removeAttr("title")

对于布尔类型(disabled,selected,checked)的属性,不要用attr方法,用prop方法,因为没有定义的属性用attr方法回返回一个undefine,

`$(".select").prop("select","true")`

三组基本动画

  • 显示动画 show(speed) speed是动画持续时间

    $("div").show();

    $("div").show(1000); //可以传字符串,"slow","fast","normal"

    $("div").show([speed],[callback]);

    $("div").show(1000,function(){alert("测试")});

  • 隐藏动画

    $("div").hide();

  • 滑入滑出

    $("div").slideDown(1001); //划入
    $("div").slideUp(1000); //划出
    $("div").slideToggle(); //切换

  • 淡入淡出

    $("div").fadeIn(1001); //划入
    $("div").fadeOut(1000); //划出
    $("div").fadeToggle(); //切换

  • 自定义动画

    第一个参数:对象,里面传的是需要动画的样式

    第二个参数:speed 动画的执行时间

    第三个参数:动画的执行效果

    第四个参数:回掉函数

    $("#box").animate({left:800},8000,"swing");

    $("#box").animate({left:800},8000,"linear");

    动画队列问题,每个动画都放在一个队列里面,一个一个执行。当鼠标过快,队列速度跟不上,鼠标突然停了,但是动画还是在进行。在鼠标移入移出的动画的前面加上stop()

  • 停止动画

    第一个参数:clearQueue 是否清楚动画队列 true or false
    第二个参数:jumpToEnd 是否跳转到当前动画的最终效果

    $(“div”).stop(true,true);

    创建节点

    $("div").append('<a href="" targey="_blank">'); //添加节点
    $("p").appendTo($('div'));

    $("div").prepend($("p")); //在之前
    $("p").prependTo($("div"));

    $("div").after($("p")); //在之后.
    $("div").before($("p"));

    清空、删除、克隆元素

    $("div").html(""); //尽量不要使用,因为不删除时间,导致内存泄漏

    $("div").empty(); //把节点内容还有对应的事件都删除

    $("div").remove(); //移除一个节点

    $("div").clone(); //有参数,ture和false,ture把时间也复制上