jQuery 的方法

2019-03-04 本文已影响15人 CondorHero

一、序与迭代

1 、eq() 方法

        <div class="box2">
            <p class="teshu"></p>
            <p class="teshu">我想红！我想当明星！</p>
            <p></p>
            <p></p>
        </div>

$(".box2 p").eq(1)
$("p").eq(1)
$(".teshu").eq(1)
$(".box2 .teshu").eq(1)
$() 函数将返回一个对象队列，用 eq 来精确选择这个序列中的某个元素。eq 用法类似数组的下标。

同样的，lt、gt、odd、even、first、last都是这个机理。

2、 index() 方法

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div.cen {
            margin: 0 auto;
            height: 500px;
            width: 500px;
        }
        ul {
            list-style: none;
        }
        p {
            height: 50px;
            width: 50px;
            background-color: #5e5e5e;
            margin: 10px;
        }
        p,h3 {
            float: left;
        }
        h3 {
            height: 50px;
            width: 50px;
            background-color: #5e5e5e;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="cen">
        <div>
            <ul>
                <li>
                    <h3>h3</h3>
                    <p>0</p>
                    <p>1</p>
                    <p>2</p>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>
                    <p>1</p>
                    <p>3</p>
                    <p>4</p>
                </li>
            </ul>
        </div>
    </div>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
        $("p").click(function(){
            alert($(this).index());
        });
    </script>
</body>
</html>

index 返回这个元素在亲兄弟中的排名，无视选择器选择标签的类型，只会从选择器选择的标签兄弟开始计数，拿到选择器选择标签的排名。重点在于计数的时候从选择标签的大哥开始，并不从本身开始。例子中。h3成功占位。
举一个应用实例选中 box1 中的 p 让 box2 的 p 发生改变

    $(".box1 p").click(function(){
        //有变化的是box2中对应的p
        $(".box2 p").eq($(this).index()).css("background-color","red");
});

最后强调一下，是 index() 方法，而不是属性！

3、 each() 方法

each() 表示遍历节点，也叫作迭代符合条件的节点。
代码：

    $("p").each(function(i){
        $(this).animate({"width":50 * i},1000);
    });

each 进行类似 for 循环的功能，遍历所有的 p，然后执行函数。默认传进来的参数 i 是从零开始计数的。$(this) 表示你现在正在遍历的 p。

4、 size() 方法和 length 属性

jQuery 对象中元素的个数。
前面 $() 的元素页面上一共有几个，length、size()返回它的个数。是同一个数值。

5、 get() 方法

get() 方法和 eq() 方法基本一致，都仰赖$()的序列。
eq() 返回的是 jQuery 对象，而 get() 返回的是原生JS对象。jQuery 对象后面要跟着 jQuery 方法，原生对象后面要跟着原生属性、方法：

    $("p").eq(2).html("哈哈哈哈哈哈");
等价于：
    $("p").get(2).innerHTML = "哈哈哈哈哈哈";
等价于：
    $("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";

二、动画相关方法

1、内置show()、hide()、toggle()方法

内置show()、hide()、toggle()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>togou</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <input type="button" value="show"/>
    <input type="button" value="hide"/>
    <input type="button" value="toggle"/>
    <input type="button" value="show(1000)"/>
    <input type="button" value="hide(1000)"/>
    <input type="button" value="toggle(1000)"/>

    <div></div>

    <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        
        $("input:eq(0)").click(function(){
            $("div").show();        //让一个本身是display:none;元素显示
        });

        $("input:eq(1)").click(function(){
            $("div").hide();        //隐藏元素display:none;
        });

        $("input:eq(2)").click(function(){
            $("div").toggle();      //切换显示状态。
                                    //自行带有判断，如果可见，就隐藏；否则显示。
        });

        $("input:eq(3)").click(function(){
            $("div").show(1000);        //让一个本身是display:none;元素显示
        });

        $("input:eq(4)").click(function(){
            $("div").hide(1000);        //隐藏元素display:none;
        });

        $("input:eq(5)").click(function(){
            $("div").toggle(1000,function(){
                alert("偷狗完毕！");
            });     //切换显示状态,自行带有判断，如果可见，就隐藏；否则显示。。
                                    
        });
    </script>
</body>
</html>

show()显示、hide()隐藏、toggle()切换
$("div").show(); //让一个本身是display:none;元素显示
$("div").hide(); //隐藏元素display:none;
$("div").toggle(); //切换显示状态。自行带有判断，如果可见，就隐藏；否则显示。
如果show()、hide()、toggle()里面有数值，将变为动画：
$("div").show(1000);
此时display:none;的元素，将从左上角徐徐展开。动画机理：
这个display:none;的元素会变为显示的，然后瞬间将宽度、高度、opacity设为0，然后徐徐展开。
可以加回调函数：
$("div").toggle(1000,function(){
alert("偷狗完毕！");
});

语法就是：
$("div").show([时间],[回调函数]);
[] 表示这个参数可选。

2、slideDown()、slideUp()、slideToggle()方法

把上面的方法更改成本次方法就变成如下效果。

slideDown()、slideUp()、slideToggle()方法.gif
slide

slide

slideDown : 下滑展开
slideUp：上滑收回
slideToggle : 滑动切换
$("div").slideDown();
slideDown() 的起点一定是 display:none 换句话说，只有display:none的元素，才能够调用slideDown()
动画机理：
一个display:none的元素，瞬间显示，瞬间高度变为0，然后jQuery自己捕捉原有的height设置为动画的终点。
等价于4条语句：
$("div").show(); //瞬间显示
var oldHeight = $("div").css("height"); //记忆住原有的高度
$("div").css("height",0); //瞬间变为0
$("div").animate({"height" : oldHeight},1000); //动画！终点是oldHeight
相反的，slideUp()的终点就是display:none;
同样的，slideDown、slideUp、slideToggle里面可以写动画时间、回调函数。

一个水平导航栏的显示隐藏实例

3、fadeIn()、fadeOut()、fadeTo()

fadeIn()、fadeOut()、fadeTo().gif

fade

fadeIn() 淡入
fadeOut() 淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换

fadeIn() 的起点是display:none; 换句话说，只有display:none的元素，才能执行fadeIn()。 fadeOut() 起点display:block;
fadeTo 有四个参数，第一个参数是动画的时间，第二个参数是要变到的透明度，第四个参数是回调函数
$(selector).fadeTo(speed,opacity,easing,callback)

"swing" - 在开头/结尾移动慢，在中间移动快 ; swing 摇摆；改变；冲力；秋千
"linear" - 匀速移动
应用举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideIn</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: #5c7bd4;
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
        $("div").hide(1000,function(){
            $(this).show(1000,function(){
                $(this).slideUp(1000,function(){
                    $(this).slideDown(1000,function(){
                      //以下代码才是新学的
                        $(this).fadeOut(1000,function(){
                            $(this).fadeIn(1000,function(){
                                $(this).fadeTo(3000,0.5);
                            });
                        });
                    });
                });
            });
        });
    </script>
</html>

效果图：

fadeIn()、fadeOut()、fadeTo().gif
到此我们可以使用新学的 jQuery 来改写原生写法的轮播图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 改写轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .carousel {
            width: 560px;
            height: 300px;
            margin:100px auto;
            position: relative;
        }
        .carousel ul {
            list-style: none;
        }
        .carousel .imageslist ul li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .carousel .imageslist ul li.cur {
            display: block;
        }
        .leftbtn {
            height: 55px;
            width: 55px;
            position: absolute;
            top: 50%;
            left: 20px;
            margin-top: -27.5px;
            background-image: url(images/slide-btnL.png);
            z-index: 99;
            cursor: pointer;
        }
        .rightbtn {
            height: 55px;
            width: 55px;
            position: absolute;
            top: 50%;
            right: 20px;
            margin-top: -27.5px;
            background-image: url(images/slide-btnR.png);
            z-index: 99;
            cursor: pointer;
        }
        .carousel .circles {
            width: 150px;
            height: 16px;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .carousel .circles ul li {
            float: left;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background-color: orange;
            cursor: pointer;
            margin-right: 12px;
        }
        .carousel .circles ul li.first {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <div class="btns">
            <div class="leftbtn" id="leftbtn"></div>
            <div class="rightbtn" id="rightbtn"></div>
        </div>
        <div class="imageslist" id="imageslist">
            <ul>
                <li class='cur'><a href=""><img src="images/0.jpg" alt=""></a></li>
                <li><a href=""><img src="images/1.jpg" alt=""></a></li>
                <li><a href=""><img src="images/2.jpg" alt=""></a></li>
                <li><a href=""><img src="images/3.jpg" alt=""></a></li>
                <li><a href=""><img src="images/4.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="circles">
            <ul>
                <li class="first"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
        //jQuery变量，我们习惯以$开头
        var $lis = $("#imageslist ul li");
        var idx = 0;
        //右按钮添加事件监听
        $("#rightbtn").click(function(){
            //节流
            if($lis.eq(idx).is(":animated")){
                return;
            }
            //老图淡出
            $lis.eq(idx).fadeOut(1000);
            //信号量改变
            idx++;
            if(idx > $lis.length - 1){
                idx = 0;
            }
            //新图淡入
            $lis.eq(idx).fadeIn(1000);
        })

        //左按钮添加事件监听
        $("#leftbtn").click(function(){
            //节流
            if($lis.eq(idx).is(":animated")){
                return;
            }
            //老图淡出
            $lis.eq(idx).fadeOut(1000);
            //信号量改变
            idx--;
            if(idx < 0){
                idx = $lis.length - 1;
            }
            //新图淡入
            $lis.eq(idx).fadeIn(1000);
        })
    </script>
</body>
</html>

4、stop() 和 flish() delay() is(":animated")

stop()

stop() 停止当前的animate动画，但是不清除队列，立即执行后面的animate动画：
$("div").stop(); //等价于$(“div”).stop(false,false);
停止当前的animate动画，并且清除队列，盒子留在了此时的位置：
$("div").stop(true); //等价于$(“div”).stop(true,false);
瞬间完成当前的animate动画，并且清除队列：
$("div").stop(true,true);
瞬间完成当前的animate动画，但是不清楚队列，立即执行后面的动画：
$("div").stop(false,true);

公式：
stop(是否清除队列,是否瞬间完成当前动画)
如果没有写 true 或者 false，默认是 false

finish()

finish() 瞬间完成所有动画队列！
$("div").finish();

stop可以用来防止动画的积累：
//连续打点语法，先清除所有的动画队列，然后执行新的动画
$("div").stop(true).animate({"left":100},1000);

delay()
delay延迟，可以使用连续打点，必须放在运动语句之前。

    $("div").delay(1000).animate({"left":500},1000);    
    $("div").delay(1000).slideUp();
    $("div").delay(1000).hide(1);   //必须写1，写1了就是运动

小窍门，让所有的img元素，都延迟不同的时间入场：

    $("img").each(function(i){
        //attr() 方法设置或返回被选元素的属性和值。
        $(this).delay(i * 1000).fadeIn(1000);
    });

is(":animated")

is()方法表示身份探测，只返回true、false。
is表示“是不是”，而不是“是”is里面可以写筛选器：
判断点击的这个p是不是序号是奇数：
$(this).is("p:odd")
判断点击的这个p是不是序号小于3：
$(this).is("p:lt(3)")

还可以写
is(":animated")
判断这个元素是否在运动中。
is里面可以写筛选器：
判断点击的这个p是不是序号是奇数：
$(this).is("p:odd")
判断点击的这个p是不是序号小于3：
$(this).is("p:lt(3)")

还可以写
is(":animated")
判断这个元素是否在运动中。

stop 和 if return 进行节流时候的区别？
当动画接受命令，没设置节流，动画会进行积累。stop 用于暂停当前操作，立马进行下一步。立马相应用户的命令。if return 防止用户流氓操作。基本上 if return 用于轮播和导航 slidedown/slideup。其他的用stop。

jQuery 的方法

一、序与迭代

1 、eq() 方法

2、 index() 方法

3、 each() 方法

4、 size() 方法和 length 属性

5、 get() 方法

二、动画相关方法

1、内置show()、hide()、toggle()方法

2、slideDown()、slideUp()、slideToggle()方法

3、fadeIn()、fadeOut()、fadeTo()

4、stop() 和 flish() delay() is(":animated")

猜你喜欢

热点阅读

jQuery 的方法

一、序与迭代

1 、eq() 方法

2、 index() 方法

3、 each() 方法

4、 size() 方法和 length 属性

5、 get() 方法

二、动画相关方法

1、 内置show()、hide()、toggle()方法

2、slideDown()、slideUp()、slideToggle()方法

3、fadeIn()、fadeOut()、fadeTo()

4、stop() 和 flish() delay() is(":animated")

猜你喜欢

热点阅读

1、内置show()、hide()、toggle()方法