JSday18—jQuery

1.jQuery简介:

    jQuery是一个兼容多浏览器的javascript库(函数库)。jQuery就是JavaScript和查询(Query),即是辅助javascrip开发的库。

2.jQuery的特点:

         jQuery 是一个快速的简洁的javascript框架,可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

    1>提供了强大的功能函数

    2>解决浏览器兼容性问题

    3>纠正错误的脚本知识

    4>体积小,使用灵巧(只需引入一个js文件)

    5>易扩展、插件丰富   

  3.jQuery的引用:

     1.引用本地jquery

<script src="本地地址"></script>

     2.在线cdn引用

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

4.jQuery的延迟加载

    1.原生的onload是指页面包含图片在内的所有元素都加载完成

 window.onload=function(){

    }

   2.jQuery的ready表示文档已加载完成(不包含图片等非文字媒体文件)

// 简写形式
    $(function(){
        console.log("hello world");
    });

    // 完全体
    jQuery(document).ready(function(){
        console.log("hello jQuery");
    });

则jQuery要比源生先执行

5.jQuery包装集:

      在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,即集合。也就是说,$()的返回结果都是集合,不是单个对象。

6.jQueryDOM和源生DOM之间的转换:

jQueryDOM和源生DOM有着不同的API,所有经常需要进行转换

6.1源生DOM转jQueryDOM

$(源生dom):返回jQueryDOM

 // let oBox = document.getElementById("box");
    //console.log(oBox.innerHTML);
    //$(原生dom):返回jQueryDom
    // console.log($(oBox).html());//jQuery的innerHTML==html()

6.2jQuery转源生DOM

 let oBox = $("#box").get(0); //将下标为0的jQueryDom的原生dom返回
    console.log(oBox.innerHTML);

    let oBox1 = $("div")[1]; //$("div").get(1);
    console.log(oBox1.innerHTML);

7.kQuery选择器:

7.1基础选择器:

   <1>ID选择器(只代表唯一一个元素)

$("#box1").css({
        backgroundColor:"red",
        color:"yellow"
    });

   <2>类选择器

 $(".box").css({
        backgroundColor:"red",
        color:"yellow"
    });

<3>标签选择器

$("p").css("backgroundColor","yellow");

<4>群组选择器

$("span,strong").css({backgroundColor:"blue"});

<5>通用选择器

$("*").css({backgroundColor:"green"});

7.2层级选择器:

  <1>子代选择器

$("body>div").css({ backgroundColor: "red" });

<2>后代选择器

$("body div").css({ backgroundColor: "yellow" });

<3>相邻选择器

$("#box2+div").css({backgroundColor: "blue" });

<4>兄弟选择器

$("#box2~div").css({backgroundColor: "green"});

7.3属性选择器:

<1>.通过属性名来选择器

$("div[class]").css({backgroundColor:"red"});

<2>通过属性值来获取

$("div[id=box1]").css({backgroundColor:"red"});

<3>通过多个属性来选择

 $("div[id][class]").css({backgroundColor:"red"});

7.4伪类选择器:

  <1>even:获取偶数元素

 $("div:even").css({backgroundColor:"red"});

<2>odd:获取奇数元素

$("div:odd").css({backgroundColor:"yellow"});

<3>first:获取第一个元素

$("div:first").css({backgroundColor:"blue"});

<4>last:获取最后一个元素

$("div:last").css({backgroundColor:"greenyellow"});

<5>eq(n):获取下标所对应的元素(可以放外面)

//第一中写法
 $("div:eq(2)").css({backgroundColor:"orange"});
    // 第二中写法
$("div").eq(2).css({backgroundColor:"orange"});

<6> not:除了某个元素都选

  //第一种写法
 $("div:not(#box2)").css({backgroundColor:"red"});
    // 第二种写法
$("div").not("#box2").css({backgroundColor:"red"});

<7>lt(n):选中小于n的元素,但不包括n

 $("div:lt(3)").css({backgroundColor:"red"});

<8>gt(n):大于

$("div:gt(3)").css({backgroundColor:"red"});

7.5内容选择器:

<1>contains(内容):根据元素的内容来查找

$("div:contains('hello world')").css({backgroundColor:"red"});

<2>empty:找内容为空的元素

$("div:empty").css({backgroundColor:"red"});

<3>has(子元素):根据子元素来查找

$("div:has(#s)").css({backgroundColor:"red"});

7.6可见性选择器:

<1>hidden:隐藏

$("tr:hidden").css({backgroundColor:"red"});//改变隐藏tr的背景颜色

<2> visible:显示

$("tr:visible").css({backgroundColor:"red"});//显示的tr的背景颜色变成红色

7.7遍历:

7.7.1兄弟之间遍历

 <1>next:下一个元素  特点:连缀模式

$("#box2").next().css({backgroundColor:"red"});

<2>nextAll:下一堆兄弟元素

$("#box2").nextAll().css({backgroundColor:"red"});

<3>prev:上一个

 $("#box2").prev().css({backgroundColor:"red"});

<4> prevAll:上一堆

$("#box2").prevAll().css({backgroundColor:"red"});

7.7.2父子之间遍历

<1>父元素.find("子元素")  特点:必须要写子元素

$("body").find("div").css({backgroundColor:"red"});

<2>父元素.children([子元素]);

$("body").children().css({backgroundColor:"red"});

<3> parent:父元素

$("p").eq(2).parent().next().css({backgroundColor:"red"});

7.8文本

value ==val()

 // 写
    $("input").val("xixixix");
    // 读
    console.log($("input").val());

innerHTML ==html()

 // 写
    $("div").html("xixixix");
    // 读
    console.log($("div").html());

    // 有参为写无参为读

8.事件:

 // $("div").click([传入的参数],事件体的回调函数);
    $("div").click(function(){
        // 注意$(this)才是jQueryDom的this
        $(this).css({
            backgroundColor:"yellow"
        });
    });
    $("div").mouseover(function(){
        $(this).css({
            backgroundColor:"blue"
        });
    });
    $("div").mouseout(function(){
        $(this).css({
            backgroundColor:"green"
        });
    });
    // ----------------------------------------
    $("#box").click({
        "name":"xixixi"
    },function(evt){
        // 通过data来操作外部传递的参数
        console.log(evt.data);
    });

9.基础动画:

9.1基础动画:

  $("button").eq(0).click(function(){
      // jQueryDOM.hide(事件长度,动画效果,回调函数):注意回调函数是异步代码执行完后在执行的
        $("#box").hide(2000,function(){
            console.log("呆毛");
        });
        
     })
     $("button").eq(1).click(function(){
      // jQueryDOM.show(事件长度,动画效果,回调函数):注意回调函数是异步代码执行完后在执行的
         $("#box").show(2000,function(){
             console.log("呆毛");
        });
        
     })
     $("button").eq(2).click(function(){
      // jQueryDOM.show(事件长度,动画效果,回调函数):注意回调函数是异步代码执行完后在执行的
        $("#box").toggle(2000,arguments.callee);
        
     })

9.2滑块动画

$("button").eq(0).click(function(){
        // jQueryDOM.hide(事件长度,动画效果,回调函数)
        $("#box").slideUp(2000,function(){
            console.log("呆毛");
        });
        
    })
    $("button").eq(1).click(function(){
        // jQueryDOM.show(事件长度,动画效果,回调函数)
        $("#box").slideDown(2000,function(){
            console.log("呆毛");
        });
        
    })
    $("button").eq(2).click(function(){
        // jQueryDOM.show(事件长度,动画效果,回调函数)
        $("#box").slideToggle(2000,arguments.callee);
        
    })

9.3淡入淡出

 $("button").eq(0).click(function(){
        // jQueryDOM.hide(事件长度,动画效果,回调函数)
        $("#box").fadeOut(2000,function(){
            console.log("呆毛");
        });
        
    })
    $("button").eq(1).click(function(){
        // jQueryDOM.show(事件长度,动画效果,回调函数)
        $("#box").fadeIn(2000,function(){
            console.log("呆毛");
        });
        
    })
    $("button").eq(2).click(function(){
        // jQueryDOM.show(事件长度,动画效果,回调函数)
        $("#box").fadeToggle(2000,arguments.callee);
        
    })

10自定义动画:

 1.animate({

 },[时间,过渡效果,回调函数])

 $("button").eq(0).click(function(){
        $("#box").animate({
            width:50,
            height:"300px",
            left:800,
        },2000).animate({
            top:600
        },2000).animate({
            left:0
        },2000).animate({
            top:100
        },2000,function(){
            console.log("呆毛");
        });
    });

2.停止

 $("button").eq(1).click(function(){
        //立刻执行当前动画,执行下一步动画
        // $("#box").stop(false,false);//无参就是两个false
        // 结束当前动画,清空动画队列
        // $("div").stop(true,false);
        // 立即执行完当前动画,继续执行动画队列
        // $("div").stop(false,true);
        // 立即执行当前动画,清空动画队列
        $("div").stop(true,true);
    })

上一篇:CSS课堂案例1


下一篇:退役划水一