2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

WEB前端第四十七课——jQuery框架(五)节点操作index、each、delay等

jQuery框架作者:然然

1.index()方法

  用于获取当前元素在其兄弟节点中的排序位置,从0开始。

    语法:$("selector").index();

    该方法一般不单独使用,而是配合对应使用。

2.对应

  jQuery中的对应实际指的是“eq()”函数,用于获取集合中指定序号的元素节点,从 0 开始。

    语法:$("selector").eq(index);

  之所以eq()函数被称为对应,是因为其经常用于实现下面的效果:

// <!--  点击“box1”中某个“p”元素时,“box2”中【对应】的“p”元素变为红色。  -->
    $(".box1 p").click(function () {
        $(".box2 p").eq($(this).index()).css("backgroundColor","red");
    });

  另外,也经常用于选项卡效果的开发。

3.选项卡案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡案例</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .container{
            width: 504px;height: 540px;margin: 50px auto;
            border: 1px solid #cccccc;
        }
        .optionBox{
            width: 100%;height: 40px;box-shadow: 0 1px 4px gray;
        }
        .contentBox{
            width: 100%;height: 500px;padding: 20px 10px;position: relative;
        }
        .optionBox ul li{
            width: 100px;height:40px;line-height: 40px;text-align:center;
            background-color: darkorange;border-right: 1px dashed #f5f2f0;
            cursor:pointer;float: left;list-style: none;}
        .optionBox ul li:last-child{border-right: 0;}
        .contentBox div{
            width: 100%;height: 100%;position: absolute;display: none;
        }
        .optionBox ul .selectLi{background-color: aquamarine;}
    </style>
</head>
<body>
    <div class="container">
        <div class="optionBox">
            <ul>
                <li class="selectLi">新闻</li>
                <li>娱乐</li>
                <li>科技</li>
                <li>军事</li>
                <li>体育</li>
            </ul>
        </div>
        <div class="contentBox">
            <div>特朗普批准TikTok与甲骨文的交易</div>
            <div>为什么在娱乐圈,学历与能力好像关系不大?</div>
            <div>那颗要用在 iPhone 12 上的 A14 芯片,很强吗?</div>
            <div>岛内接连2日清晨响起炮声?蔡英文高兴得早了!</div>
            <div>淘汰詹姆斯和哈登!字母哥拿下常规赛MVP</div>
        </div>
    </div>
<script>
    var $optionLis=$(".optionBox li");
    var $contentDivs=$(".contentBox div");
//  默认加载第一个div块的内容
    $contentDivs.eq(0).css("display","block");
//  定义鼠标进入事件
    $optionLis.mouseenter(function () {
        $(this).siblings().removeClass("selectLi");
        $(this).addClass("selectLi");
    //  通过“index()”和“eq()”函数获取选项标签li对应的内容div
        var $selectIndex=$(this).index();
        var $contentShow=$contentDivs.eq($selectIndex);
        if ($contentShow.siblings().is(":visible")){
            $contentShow.siblings().fadeOut();
        }
        $contentShow.fadeIn();
    });
</script>
</body>
</html>

4.each()方法

  用于遍历每个节点,然后执行参数中的回调函数。

  注意:

    回调函数中如果存在“$(this)”,那么它指的是“当前正在遍历的这个节点”。

  语法:$("selector").each(func);

  示例:$("div").each(function(){

      $(this).children().eq(1).css("backgroundColor","red");

     });

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
<table border="1" style="color: orangered;text-align: center" cellspacing="0">
    <tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<script>
    $('tr').css('height','40px');
    $('tr:first td').css('width','100px');
    $("td").mouseenter(function () {
        var colIndex=$(this).index();
    //  鼠标当前经过的单元格,所对应的每一行的这一列,执行each()中的回调函数。
        $("tr").each(function () {
            $(this).children().eq(colIndex).css("background-color","lightblue");
        })
    }).mouseleave(function () {
        var colIndex=$(this).index();
        $("tr").each(function () {
            $(this).children().eq(colIndex).css("background-color","transparent");
        })
    });
</script>
</body>
</html>

5.delay()方法

  改方法用于设置延迟执行时间,

    语法示例:$("selector").delay(timeValue).animate();

  参数为延迟的时间,通常配合“animate、fadeIn(fadeOut)、show(hidde)”等动画使用。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blink</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <style>
        *{width: 0;padding: 0;}
        .container{
            width: 100%;height: 750px;position: relative;
        }
        .container img{
            width: 200px;height: 150px;position: absolute;
            display: none;
        }
        button{
            width: 100px;height: 30px;font-size: 16px;font-weight: bold;
            margin: 6px;color: gold;cursor: pointer;
            background: linear-gradient(120deg,darkred,orangered);
        }
    </style>
</head>
<body>
    <div class="container">
        <button onclick="readyGo()">readyGo</button>
        <button onclick="stopBlink()">stopBlink</button>
        <img src="Images/Blink/bawanglong.jpg" alt="" title="霸王龙">
        <img src="Images/Blink/gesilalong.jpg" alt="" title="哥斯拉龙">
        <img src="Images/Blink/jialong.jpg" alt="" title="甲龙">
        <img src="Images/Blink/jianjiaolong.jpg" alt="" title="剑角龙">
        <img src="Images/Blink/kongshoulong.jpg" alt="" title="恐手龙">
        <img src="Images/Blink/qiyilong.jpg" alt="" title="奇艺龙">
        <img src="Images/Blink/sanjiaolong.jpg" alt="" title="三角龙">
        <img src="Images/Blink/shizuniao.jpg" alt="" title="始祖鸟">
    </div>
<script>
    var $container=$(".container");
    var $imgcolles=$(".container img")
    $imgcolles.eq(0).css({left:"310px",top:"10px"});
    $imgcolles.eq(1).css({left:"60px",top:"210px"});
    $imgcolles.eq(2).css({left:"350px",top:"450px"});
    $imgcolles.eq(3).css({left:"700px",top:"600px"});
    $imgcolles.eq(4).css({left:"580px",top:"240px"});
    $imgcolles.eq(5).css({left:"1100px",top:"470px"});
    $imgcolles.eq(6).css({left:"910px",top:"50px"});
    $imgcolles.eq(7).css({left:"1300px",top:"180px"});

    var timer=null;
    function readyGo() {
        timer=setInterval(function(){
            $imgcolles.each(function (i) {
        //  设置参数“i”,随着执行序号的增加,延迟时间增加,实现异步闪烁的效果。
                $(this).delay(i*600).fadeIn().fadeOut(300).fadeIn(300);
            })
        },5000);
    }
    function stopBlink() {
        clearInterval(timer);
        $imgcolles.each(function () {
            $(this).fadeIn();
        })
    }
</script>
</body>
</html>

6.内部插入

  append(),

    语法示例:A.append(B);

    表示向“A节点内部现有内容之后”追加“B节点”

  appendTo(),

    语法示例:B.appendTo(A);

    表示将“B节点”追加到“A节点内部现有内容之后”

  prepend(),

    语法示例:A.prepend(B);

    表示向“A节点内部现有内容之前”追加“B节点”

  prependTo(),

    语法示例:B.prepend(A);

    表示将“B节点”追加到“A节点内部现有内容之前”

7.外部插入

  after(),

    语法示例:A.after(B);

    表示 在“A节点之后”添加“同级节点B”

  before(),

    语法示例:A.before(B);

    表示 在“A节点之前”添加“同级节点B”

  insertAfter(),

    语法示例:A.insertAfter(B);

    表示 把“A节点”添加到“节点B”之后

  insertBefore(),

    语法示例:A.insertBefore(B);

    表示 把“A节点”添加到“节点B”之前

  与前述内部插入方法相比,外部插入方法可以认为是给当前节点添加兄弟节点

8.改变节点位置

  在 jq中操作节点或节点组时,隐含的一个规律是:

    通过“$()”方法搜索获得的节点,同一时间在页面中只能在一个位置存在。

    也就是说,使用内部插入或外部插入等方法,在操作“$()”搜索的元素时,将改变元素的位置。

  语法示例:

<body>
<div class="div1" style="width:200px;height:100px;border:1px solid">
    <span class="whoseChild">span标签</span>
</div>
<div class="div2" style="width:200px;height:100px;border:1px solid"></div>
<script>
// <!--  点击div2时,span标签将改变为div2的子元素
//       此时div1中不再有span标签!-->
    $(".div2").click(function () {
        $(this).append($(".whoseChild"));
    });
    $(".div1").click(function () {
        $(this).append($(".whoseChild"));
    });
</script>
</body>

9.wrap()方法

  给指定元素增加一个父级元素。(开发过程中较少使用)

    语法示例:A.wrap(B);

    表示给“A”元素增加一个父级元素“B”,即 B包裹 A。

10.empty()和remove()

  empty(),用于删除指定节点的内容;

  remove(),用于删除指定节点自身。

    语法:$("selector") .empty();  //等价于$("selector") .html("");

       $("selector") .remove();

11.clone()

  相当于 js中的 cloneNode(true)操作(深复制),即克隆的节点在页面中没有自己的位置,

  需要通过 append()等操作才能够添加到页面中。

    语法:$("selector") .append(B.clone());

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <style>
        .leftBox,.rightBox{
            width: 120px;height: 270px;margin: 10px;padding: 10px;
            float: left;border:1px solid gray;
        }
        .ulStyle{padding-left:30px;list-style: none;}
        .leftBox ul li{ margin: 5px 0px;}
        .btn{width:80px;height: 270px;line-height: 30px;
            margin-top:10px;padding:10px;float: left;}
        button{
            width: 60px;letter-spacing: 5px;display:block;float: left;
        }
    </style>
</head>
<body>
    <div class="leftBox">
        <ul class="ulStyle">
            <li><input type="checkbox">西瓜</li>
            <li><input type="checkbox">葡萄</li>
            <li><input type="checkbox">苹果</li>
            <li><input type="checkbox">萝卜</li>
            <li><input type="checkbox">土豆</li>
            <li><input type="checkbox">白菜</li>
            <li><input type="checkbox">馒头</li>
            <li><input type="checkbox">米饭</li>
            <li><input type="checkbox">啤酒</li>
        </ul>
    </div>
    <div class="btn">
        <button class="copy">复制</button><br>
        <button class="move">移动</button><br>
        <button class="clear">清空</button>
    </div>
    <div class="rightBox"><ul></ul></div>
<script>
    $(".copy").click(function () {
//  判断“input”的“checked”属性,将已勾选内容【克隆】到rightBox中
        $(".rightBox ul").append($(".leftBox input:checked").parent().clone());
//  设置rightBox中生成的li的样式
        $(".rightBox ul").addClass("ulStyle");
        $(".rightBox ul li").css("margin","5px 0");
//  复制完成后“去除”复选框中的勾选标识,令“checked”属性值等于“false”
        $(".rightBox input").attr({"checked":false});
        $(".leftBox input").attr({"checked":false});
    });
    $(".move").click(function () {
//  判断“input”的“checked”属性,将已勾选内容【移动】到rightBox中
        $(".rightBox ul").append($(".leftBox input:checked").parent()).addClass("ulStyle");
        $(".rightBox ul li").css("margin","5px 0");
        $(".rightBox input").attr({"checked":false});
    });
    $(".clear").click(function () {
//  清空 rightBox中的内容
        $(".rightBox").empty();
    });
</script>
</body>
</html>

12.jQuery插件使用

  ① 引入 jQuery版本文件

  ② 引入插件的 js文件(以及相应的 css文件)

  ③ 添加加载的事件

  ④ 复制代码

  素材资料,如 jQuery之家等网络资源

13.jQueryUI使用

  ① 引入jQuery版本文件

  ② 引入jQueryUI的样式文件

  ③ 引入jQueryUI的 js文件

  ④ 使用jQueryUI的功能(可能需要自己封装函数调用)

素材资料,如 jQuery官网“plugins”等网络资源

本文来源于网络:查看 >
« 上一篇:前端之JavaScript篇
» 下一篇:在网络世界上安一个家
评论
点击刷新
评论
相关博文
×添加代码片段