jQuery_通过jquery提供的id选择器为div加边框代码

一、jQuery入门

jQuery是一个JavaScript脚本库，通过<script>在HTML头部引入即可。
两种引入方式：
通过CDN引入：<script src="https://code.jquery.com/jquery-3.3.1.min.js">
从 http://jquery.com/download/ 下载jQuery库，根据文件位置引入即可。

基本语法： $(selector).action()
说明:
jQuery用美元符号 $ 定义；
selector表示要操作的dom元素；
action表示要执行的操作；

1.id选择器：<div id="box1">我是id选择器</div>
    var box1 = $("#box1");
    box1.html();
    id选择器语法： $("# + idName")
    这里再提醒一下：html()： ()里有内容，表示往该元素添加内容，没有内容，表示获取内容。
2.类选择器：<p class="box2"></p>
    var box2 = $(".box2");
    box1.html("我是类选择器");
    类选择器语法：$(". + className")
3.元素选择器：<span></span>
    var box3 = $("span");
    box3.html("我是元素选择器");
    元素选择器语法：$("tagName")
4.过滤选择器：
    1.设置css属性
        设置单个属性
            <div id="single">设置单个属性</div>
            如果给上面的div标签添加css属性：background：orange;，应该怎么实现呢？
            对于div标签，用jquery可以这样写：
            $("#single").css("background","orange");
            这是设置单个属性常用的方法。语法总结如下：
            $(selector).css(attr,value);
        设置多个属性
            <p class="more">设置多个属性</p>
            如果给上面的p标签添加css属性：
            "background":"#ccc";
            "text-align":"center";
            "line-height":"40px";
            应该怎么办呢？
            对于p标签，用上面的方法一条一条的写，也是可以的，但是比较麻烦，下面是设置多个css属性的方法：
            $(".more").css({
            "background":"#ccc",
            "text-align":"center",
            "line-height":"40px"
            })
            可以看出，设置多个css属性是用对象的方式来实现的。语法总结如下:
            $(selector).css({ attr1: value1, attr2: value2, ... })
    2.基础的过滤选择器
        <ul>
        <li class="item">第一个li</li>
        <li class="item">第二个li</li>
        <li class="item">第三个li</li>
        <li class="item">第四个li</li>
        <li class="item">第五个li</li>
        <li class="item">第六个li</li>
        </ul>
        现在分别获取获取指定的li元素，并添加相应的背景色    
        利用过滤选择器选择指定的li元素：
        获取第一个li标签，添加背景色orange, 代码如下：
        获取第一个li标签：$("li:first")
        添加背景色：$("li:first").css("background","orange")；

        获取最后一个li标签，添加背景色green, 代码如下：
        获取第一个li标签：$("li:last")
        添加背景色：$("li:last").css("background","green")；    
            
        获取下标为偶数的li标签，添加背景色#ccc, 代码如下：
        获取下标为偶数的li标签：$("li:even")
        添加背景色：$("li:even").css("background","#eee")；

        获取下标为奇数的li标签，添加背景色#ccc, 代码如下：
        获取下标为奇数的li标签：$("li:odd")
        添加背景色：$("li:odd").css("background","#ccc")；    
        注： 下标是从0开始的，li标签第一个下标是0，是偶数，所以背景色是"#eee"
    3.:eq选择器    
        如何获取上面的第二个li标签，并设置背景色为红色呢？
        第一种过滤方法：:eq 选择器，添加如下代码：
        $("li:eq(1)").css("background","red"); 
        eq选择器的下标是从0开始的
        第二种方法：eq()
        eq()也是获取指定序号的元素的，使用方法如下：
        $("li").eq(1).css("background","red")
    4.:not选择器
        它选取除了指定元素以外的所有元素，
        这里最后一个li标签的右侧没有外边距，该怎么实现呢？代码如下：
        $("li:not(:last)").css("margin-right","20px")
        除了最后一行，其他都要底边边框，边框样式为：1px dashed #ccc；代码如下：
            $(".item:not(:last)").css("border-bottom","1px dashed #ccc");
5.层次选择器：
    1.层次选择器
        <div class="container">
            <p>
               <span>第一个p标签下的span</span>
               <span>第一个p标签下的第二个span</span>
            </p>
            <p>
               <i>i标签</i>
               <span>第二个p标签下的span</span>
            </p>
        </div>
        如何获取到上面第一个p标签下所有的span标签？ 这里主要用层次选择器获取一下：
        第一步：获取到类container：$(".container")
        第二步：获取到container下第一个p标签：$(".container p:first")
        第三步：获取到第一个p标签下所有的span标签：$(".container p:first span")
        从上面可以看出来，层次选择器和Dom结构是相匹配的，
    2.方法show和hide
        <p class="toggle">错误提醒</p>
        <p>展示的内容</p>
        对于类toggle，有错误时需要出现，解决了错误需要隐藏。这个功能怎么实现呢？这里用show()和hide()：
        出现：$(".toggle").show()
        隐藏：$(".toggle").hide()
        show()的原理相当于css中的 display:block;
        hide()的原理相当于css中的 display:none;
    3.类的添加和删除
        <div id="box"></div>
        .active{ background: orange;}
        .btn{}
        给上面的div添加类active和btn，该如何实现呢？这里用addClass()方法：
        $("#box").addClass("active btn");
        现在要删除一个类btn，这里用removeClass()方法：
        $("#box").removeClass("btn");    
    
二、jQuery DOM操作

1.获取元素的内容
    $("p").text();   text()是获取所选元素的文本内容，html 标签的内容已经转化；
    $("p").html();   html()是获取所选元素的内容，包括 html 标签；
2.获取input标签的value值
    <input type="text" placeholder="Educoder平台"/>
    <p></p>
    有一个专门获取表单value值的方法val()，代码如下：
        var val = $("input").val(); //获取表单的 value 值
        $("p").text(val);
3.获取元素的属性
    <div class="box" id="wrap" name="容器" data-count="none">
    </div>
    如何获取该div的各种属性呢？这里用attr()，代码如下：
        $(".box").attr("class")
        $(".box").attr("id")
        $(".box").attr("name")
        $(".box").attr("data-count")
4.按钮点击事件
    <button class="btn1">获取文本内容</button>
    <button class="btn2">获取内容</button>
    <button class="btn3">获取表单value值</button>
        
        $(".btn1").click(function(){    //按钮点击事件
            alert($(".box").text());    //弹窗事件
        })
        $(".btn2").click(function(){
            alert($(".box").html());
        })
        $(".btn1").click(function(){
            var val1 = $(".getVal").val();
            var val2 = $(".getVal").attr("type");
            var getValue = val1+"---"+val2;
            alert(getValue);    
        })
5.设置内容和属性
    1.设置元素的内容
        基本的html结构如下：
            <p class="first"></p>
            <p class="second">我是第二个</p>
            <input class="third" type="text"/>
        如何设置上面标签的内容呢？代码如下：
            1.$(".first").text("<h3>我是第一个</h3>");
            2.$(".second").html("<h3>我是第二个</h3>");
            3.$(".third").val("我是第三个");
        以text()为例，text()表示获取内容，text(content)表示设置内容；
    2.设置元素的属性
        $("div").attr("class","alterClass");
        $("div").attr("id","alterId");
        $("div").attr("name","alterName");
        $("div").attr("data-count","alterDataCount");
        也可以：
        $("div").attr({
          "class": "alterClass",
          "id": "alterId",
          "name": "alterName",
          "data-count": "alterDataCount"
        });
6.添加、删除元素
    append()在被选元素的结尾插入内容；
    prepend()在被选元素的头部插入内容；
    before()在被选元素之前插入内容；
    after()在被选元素之后插入内容；
    remove()是删除被选元素及其子元素。
    empty()是只删除被选元素的子元素。
    例：在表格(class="tab")下面添加按钮:
        var addBtn = '<button class="btn">添加内容</button>';
        $(".tab").after(addBtn);、
        
三、jQuery动画
    动画是使元素从一种样式逐渐变化为另一种样式的效果。jQuery动画包括隐藏/显示，淡入/淡出，上滑/下滑，自定义动画等效果。
    动画效果的语法：$(selector).method(speed, callback);
        selector是要操作的元素；
        method是 jQuery 自带的动画名，比如show,hide,toggle；
        speed是动画运动的速度，参数可选，可有可无；
        callback是这个动画完成后需要执行的动作，参数可选，可有可无；
1.  隐藏/显示
    1.show()和hide()
        <div class="box"></div>
        隐藏的代码：$(".box").hide(2000,function(){
                       alert("我消失了");
                    })
        这里hide()方法的参数表示这个动画执行的速度，参数的取值如下：
            "slow"，表示慢速度；
            "fast"，表示快速度；
            毫秒，可自定义，上面的是2s；
            
    2.toggle()：可以切换hide()和show()，把隐藏的元素显示，显示的元素隐藏
        <button class="toggle">toggle</button>
        <div class="item"></div>
        切换代码：  $(".item").toggle("slow",function(){
                       alert("隐藏显示的切换");
                    })
2.    淡入淡出
    fadeIn()
    fadeOut() 
    fadeToggle()
    类似于上节
    fadeTo()：上面的方法都是控制透明度在0和1之间变换，有没有可能让透明度变为一个确定的值呢？
         $(".item").fadeTo("slow",0.8);
    delay():延迟动画的执行时间
3.    滑动
    slideDown()，slideUp() 和 slideToggle()
    stop():停止被选元素当前的动画。
4.    自定义动画
    1.平移动画
        右移动代码：
            $(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)
            移动改变的是left值和top值 ，所以在样式中一定要有定位position，否则没有定位，也就没有了left属性和top属性，也就不能移动了；
            基本结构中的样式left:100px作为初始状态，往右移动的实现代码中，left:'500px'作为这个动画的最终状态，实际上移动了400px；
            2000表示这个动画完成的时间，是2000毫秒，可选的值是slow，fast，毫秒；
            宽度变宽了，字体变大了
    2.相对值
        相对移动的实现代码如下：
            $(".item").animate({ left: '+=200px', borderRadius: '50%'},2000)
            这行代码表示向右移动的距离为200px, 在移动的过程中 , 从正方形变为圆 , 左移用-=        
    3.stop()函数 
        $(".item").stop(true,false).animate({left: '+=200px', borderRadius: '50%'}, 2000)
        第一个参数：是否清除动画队列，true表示是，false表示否，默认是false；
        第二个参数：是否立即完成当前动画，true表示是，false表示否，默认是false；
    jQuery动画能操作的属性都是有数值的，比如：width,height,opacity,font-size,left等

    要求：爱心立即显示，然后爱心向上移动 120px（用相对值），同时透明度变为0，速度为1.5s；
        代码：$(".love").show().animate({top:"-=120px",opacity: "0"},1500);

四、jQuery遍历
1.  遍历DOM元素的祖先元素    
    1.节点树
        每个html元素都是元素节点，html元素内的文本是文本节点；
        在节点树中，顶端节点叫根节点，每个节点都有父节点（除了根节点）。这里html是根节点， <head>的父节点是<html>，<title>的父节点是<head>节点；
        一个节点可拥有任意数量的子节点。比如：<body>拥有子节点<a>和<div>，这里只是举例，<body>还可拥有其他的节点；
        兄弟节点是拥有相同父节点的节点。比如： <a>和<div>就是兄弟节点，因为它们拥有相同的父节点<body>；
    2.parent()：获取元素的父元素
    3.parents():获取元素的所有祖先元素
2.    遍历DOM元素的后代元素
    1.children()：返回被选元素的所有直接子元素。
    2. find()：从被选元素开始查找，一直向下直到最后一个后代元素。
3.    遍历DOM元素的兄弟元素
    1.siblings() ：返回被选元素的所有兄弟元素
    2. next() ：返回被选元素的后一个兄弟元素。nextAll()：返回被选元素后的所有兄弟元素
    3. prev() ：p返回的是被选元素的前一个兄弟元素。revAll()：返回的是被选元素前的所有兄弟元素。    
4.    过滤
    1.first()：返回被选元素的第一个元素
    2. last()：返回被选元素的最后一个元素$("div p:last")、$("div p").last()
    3. eq()：返回带有指定索引号的元素
    4. filter()：规定一个标准，匹配的会被返回，不匹配的会被删除
    5.not()：返回不匹配标准的元素，和filter()相反。$("div p").not(".active").css("background","orange");