天天看点
返回

Web前端-JavaScript--jQuery

jQ入口函数

JQ的入口函数

$(function(){

    })

/*$(function(){
//        页面加载完毕后执行
        alert("页面加载完毕了1输出")

    })
    $(function () {
        alert("页面加载完毕了2输出")
    })*/

jq对象js对象相互转换

js对象转换成JQ对象

$(js对象)

JQ对象转换成js对象

* JQ对象.get(index)

* JQ对象[index]

jQ支持的选择器

JQ找到页面元素的方式就是通过选择器的方式

$("选择器")

如果选择器关联的是单个元素 那么操作单个元素

如果是很多元素 那么就是很多元素一起操作

//    $(".pox").html("我是新改的文字").css("color","#e4393c");

JQ中除了支持选择器找到页面元素之外

还支持一定的 过滤器配合使用找到页面元素

过滤器是写在 $("选择器:过滤器") 里面的

:eq(index) 表示从JQ已经选择到的众多元素中 找到其中指定索引的那个元素

:even 从JQ已经选择的众多元素中 选中偶数部分的元素
:odd   .......                  奇数部分
:first  ........            选中第一个
:last  ........            选中最后一个
:not('选择器')  从已经选择的元素中 排除指定选择器所选中的那个元素
:gt(index) 从已经选中的一堆元素中 找到比gt里面索引值比index大的那些元素
:lt(index)  跟上面相反
           
//    $("li:eq(7)").css("font-size","60px");

//    js原生实现隔行变色
    /*var liArr=document.querySelectorAll("ul.pox>li");
    for(var i=0;i<liArr.length;i++){
        if(i%2==0){
            liArr[i].style.backgroundColor="orange";

        }else{
            liArr[i].style.backgroundColor="hotpink";
        }
    }*/

//    JQ的过滤器实现
        /*$("ul.pox>li:even").css("backgroundColor","orange")
        $("ul.pox>li:odd").css("backgroundColor","hotpink")*/


   /* $("ul.pox>li:first").css("fontSize","60px");
    $("ul.pox>li:last").css("fontSize","10px");*/

//   $("ul.pox>li:not('.demo')").css("backgroundColor","orange");

    $("ul.pox>li:gt(2)").css("color","orange");
    $("ul.pox>li:lt(2)").css("color","hotpink");

筛选器就是各种方法,对应的就是原生JS的节点访问关系: 找到父元素 子元素 所有子元素 第一个子元素 兄弟元素 等等....

 

筛选器就是各种方法,对应的就是原生JS的节点访问关系:
        找到父元素  子元素  所有子元素 第一个子元素 兄弟元素 等等....

    find("选择器")  选择器的参数是必填的  表示找到后代指定选择器的那些元素

    children("选择器") 参数可选  如果没有参数表示 返回所有的子元素
                        如果传入选择器 则表示返回子元素中 复合选择器的那些子元素

     siblings("选择器") 参数可选  如果没有参数表示返回所有兄弟元素
                        有参数 表示返回所有兄弟中符合选择器的指定兄弟元素

        parent() 找到父元素  父元素因为是唯一  所有不用传选择器


   $("选择器:eq(index)") 过滤器

    .eq(index) 跟上面的那个过滤器的用法一模一样 作用也一样

        next() 下一个兄弟

        prev()  上一个兄弟


     prevAll() 之前所有兄弟

     nextAll() 之后所有兄弟
           
$("#box").find("div")  //找到#box后代所有的div

//    console.log($("#box").find("div"));
//    console.log($("#box").children());//所有子元素
//    console.log($("#box").children("div")); //找到两个div
//    console.log($("#box>ul").siblings());

//    console.log($("#box>ul").parent());

//    console.log($("li").eq(3));
/*        console.log($("li.demo").next().css("font-size","30px"));
        console.log($("li.demo").prev().css("font-size","30px"));*/
Web前端-JavaScript--jQuery

JQ的 css方法 既可以设置样式又可以获取样式

获取样式:

    JQ对象.css("属性名")  表示获取当前属性名这个样式的值(内嵌  行内 外链样式都能获取)

设置样式:

    JQ对象.css("属性名","属性值"); 设置单个样式

    JQ对象.css({

    })

$("button").eq(1).click(function () {
        /*console.log($("#box").css("width"));
        console.log($("#box").css("backgroundColor"));*/
//        $("#box").css("font-size","50px");
        $("#box").css({
            color:"white",
            fontSize:"50px",
            marginLeft:"30px",
            marginTop:"30px"
        })

    });

JQ的操作class的方法:

addClass()

$("button").eq(0).click(function () {
//        增加类
        $("#box").addClass("bg co")

    })

removeClass()

$("button").eq(1).click(function () {
//        移除类
//        $("#box").removeClass("co bg")
        $("#box").removeClass();//移除所有类

    })

hasClass()

$("button").eq(2).click(function () {
//        console.log($("#box").hasClass("bg"));
        if($("#box").hasClass("di")){
            $("#box").removeClass("di")

        }else{
            $("#box").addClass("di");
        }

    })

toggleClass()

$("button").eq(3).click(function () {
//        切换class
        $("#box").toggleClass("di")

    })

JQ动画分类:

显示隐藏动画

show显示动画的操作:

show()

1.不传参数 就是闪现动画 直接显示 控制的是元素的display属性

2.传一个字符串速度的值 slow normal fast

                                          600 400 200

控制的属性是: width height opacity display overFlow

3.传一个整数毫秒值 控制的属性有: width height opacity display overFlow

4.传两个参数:

参数1: 时长(字符串时间 毫秒值事件都行)

参数2: 回调函数 动画执行完的回调

hide动画的操作:

hide() 跟上面的show是一毛一样的 也是四种参数方式 只不过 hide控制隐藏

$("button").eq(0).click(function () {
//            $("#box").show();
//            $("#box").show("fast");
//            $("#box").show(20000);
            /*$("#box").show(3000,function () {
                alert("动画终于走完了")
            })*/
            /*$("#box").show(3000);
            alert("动画执行完了")*/
        })
    $("button").eq(1).click(function () {
//        $("#box").hide();
//        $("#box").hide("slow");
//        $("#box").hide(3000);
        $("#box").hide(3000,function () {
            alert("终于隐藏了")
        });
    })

滑入滑出动画

slideDown(滑入动画) 表示 元素滑进来

参数跟show的参数格式一毛一样 但是 不传任何参数也是有一个默认时长的

控制的是元素的height overFlow

swlideUp(滑出动画) 跟上面一样

slideToggle() 滑入滑出切换

如果元素默认隐藏 则执行滑入

如果元素默认是显示 则执行滑出

$("button").eq(2).click(function () {
//        $("#box").slideDown(); //默认有一个时长(应该是200毫秒)
//        $("#box").slideDown("fast");
//        $("#box").slideDown(10000);
        $("#box").slideDown(2000,function () {
            alert("终于滑进来了")
        });
    })
    $("button").eq(3).click(function () {
//        $("#box").slideUp();
//        $("#box").slideUp("slow");
//        $("#box").slideUp(2000);
        $("#box").slideUp(2000,function () {
            alert("终于滑出去了")
        });

    })
  $("button").eq(4).click(function () {
//        滑入滑出切换
//        $("#box").slideToggle();
        $("#box").slideToggle(2000);

    })

淡入淡出动画

淡入淡出动画:

控制的是元素的 opacity 参数跟上面都一样

fadeIn(淡入动画)

$("button").eq(5).click(function () {
//            淡入动画
            $("#box").fadeIn(2000);

        })
        $("button").eq(6).click(function () {
//            淡出动画
            $("#box").fadeOut(2000);

        })
        $("button").eq(7).click(function () {
//            淡入淡出切换
            $("#box").fadeToggle(1000);

        })
        $("button").eq(8).click(function () {
//                淡出到指定透明度  参数:1.时长  2.透明度值
            $("#box").fadeTo(2000,0.3)
        })

自定义动画

JQ的自定义动画:

animate()

         参数1: 动画的json对象

         参数2:动画的执行时长

         参数3: 动画执行完的回调函数

$("button").eq(0).click(function () {
       /* $("#box").animate({
            width:400,
            height:400,
            left:100,
            top:100

        },2000)*/

       /* $("#box").animate({
            marginTop:150,
            paddingLeft:200


        },2000)*/

       /* $("#box").animate({
            fontSize:120,
            borderWidth:50


        },2000)*/


         $("#box").animate({
                    width:400,
                    height:400,
                    left:100,
                    top:100

                },2000,function () {
             alert("动画执行完了")
         })

    })

动画停止:

            $("选择器").stop(布尔值,布尔值)  不写默认是false

            // 第一个参数表示后续动画是否要执行

            （true:后续动画不执行  ;false:后续动画会执行）

            // 第二个参数表示当前动画是否执行完

            （true:立即执行完成当前动画  ;false:立即停止当前动画）

        $("选择器").stop() 不写默认都是false

                表示立即停止当前动画  后续动画继续执行

        $("选择器").stop(false,false) 跟上面一样

         $("#box").stop(true,false)

                表示立即停止当前动画  后面动画也不执行  类似于暂停效果

         $("#box").stop(true,true)

                 立即完成当前动画  后面动画也不执行

          $("#box").stop(false,true)

                立即完成当前动画  后面动画会执行

        在JQ中动画的使用要始终遵循一点:

                要调用animate() 就先 stop()

$("button").eq(1).click(function () {
//        $("#box").stop()
//        $("#box").stop(true,false)
//        $("#box").stop(true,true)
        $("#box").stop(false,true)
        
    })
web前端 jquery
上一篇: Web前端 | jQueryjQuery简介
下一篇: Luogu P2412 查单词

继续阅读