前端基础之JQuery - day15

Posted 青山应回首

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端基础之JQuery - day15相关的知识,希望对你有一定的参考价值。

写在前面



    张国臂掖,以通西域;



 

http://jquery.cuishifeng.cn/index.html


JQuery对象:   Jquery.方法   $.方法
# Jquery和$是完全一样的


JQuery的方法只能JQuery对象调用
JS的方法只能JS使用


变量命名:
JS      var $variable = jQuery 对象
JQuery  var variable = DOM 对象


JQuery语法:$(selector).action()
    selector  选择器
    action    对标签的操作


JQuery的选择器(selector)
    基本选择器
    层级选择器
   ...


$(".p1").css("color","red");
JQuery 选择器选到的是一个集合对象(一组标签),后面的操作会循环加载;

但是JS不支持,JS必须自己写循环处理;


JQuery支持链式操作


JQuery固有属性  --> prop
    input type="checked"
    selected=selected
自定义的属性     --> attr


clone

  

参考:http://www.cnblogs.com/yuanchenqi/articles/6936986.html

一、JQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象;
jQuery 对象是 jQuery 独有的.;
如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

  

$("#test").html() 
   
         意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

         这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 

         虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错

         约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]:jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

  

 jquery的基础语法:$(selector).action()     

 参考:http://jquery.cuishifeng.cn/

 

二、JQuery查找元素

  1.选择器

基本选择器
$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")


层级选择器
$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")


基本筛选器
$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")


属性选择器
$(\'[id="div1"]\')   $(\'["alex="sb"][id]\')


表单选择器      
$("[type=\'text\']")     ---可简写成-->$(":text")     
// 注意只适用于input标签  : $("input:checked")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--首先引入Jquery库-->
    <script src="jquery-3.1.1.js"></script>

</head>
<body>

<!--<span>span</span>-->

<!--<p>ppp</p>-->
<!--<p class="p1">ppp</p>-->
<!--<p class="p1">ppp</p>-->

<!--<div id="d1">DIV</div>-->

<!--++++++++++-->


<div class="outer">
    <p>p1</p>
    <div class="inner">
        <p>p2</p>
    </div>
</div>
<p>p3</p>
<a href="">click</a>
<p>p4</p>


<div egon="xialv">11</div>
<div egon="xialv2">22</div>


<input type="checkbox">
<input type="text">

<script>
//基本选择器
//    $("span")
//    $("*")
//    $(".p1").css("color","red");
//    $("#d1").css("color","blue");

//    $(".class,p,div")  // 多元素选择器


//层级选择器
    // 后代选择器
//    $(".outer p").css("color","red");

    // 子代选择器
//    $(".outer>p").css("color","red");

    // 毗邻选择器 (紧挨着的兄弟标签)
//    $(".outer+p").css("color","red");

    // 兄弟选择器 (所有的兄弟标签)
//    $(".outer~p").css("color","red");


//属性选择器
    // 自定义属性
    $("[egon]").css("color","green");

    $("[egon=\'xialv2\']").css("color","green");


//表单选择器
    $("[type=\'text\']").css("border","1px solid red");
    // 可以简写成如下形式,仅适用于input标签
    $(":text").css("border","1px solid red");


</script>
</body>
</html>

  2.表单属性选择器

    :enabled
    :disabled
    :checked
    :selected
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <!--<input type="checkbox" value="123">-->
    <!--<input type="checkbox" value="456" checked>-->
  <select id="sel">
      <option value="1" selected="selected">Flowers</option>
      <option value="2">Gardens</option>
      <option value="3">Trees</option>
      <option value="4">Fruits</option>
  </select>
</form>
<script src="jquery-3.1.1.js"></script>
<script>
//    $("input:checked").each(function(){
//        console.log($(this).val())
//    })
//     console.log($("input:checked").length);     // 1

    console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
    $("option:selected").each(function () {
        console.log("--> " + $(this).val());
    })
    $("#sel").change(function () {
        console.log($(this).val());
    })

</script>
</body>
</html>

  3.筛选器

# 过滤筛选器
$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul class="outer">
    <li class="item">11</li>
    <li class="item">22</li>
    <li class="item">33</li>
    <li class="item">44</li>
    <li class="item">55</li>
    <li class="item">66</li>
    <li class="item">77</li>
    <li class="item">88</li>
    <li class="item">99</li>
    <li class="item">1010</li>
</ul>
<script>
    // eq 索引
//    $("ul li").eq(4).css("color","red");  // 推荐
//    $("ul li:eq(4)").css("color","red");  // 需要自己拼接字符串,比较麻烦

    $("ul li").first().css("color","red");
    $("ul li:lt(5)").css("color","red");
    $("ul li:gt(5)").css("color","red");
    $("ul li:even").css("color","red");     // 奇数
    $("ul li:odd").css("color","red");      // 偶数
</script>
</body>
</html>



# 导航查找(查找筛选器)

 查找子标签:         $("div").children(".test")      $("div").find(".test")  
                               
 向下查找兄弟标签:    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 
                           
 向上查找兄弟标签:    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()   
 查找所有兄弟标签:    $("div").siblings()  
              
 查找父标签:         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil() 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>

<div class="item1">11</div>
<div class="item2">22</div>
<div class="item3">33</div>
<div class="item4">44</div>
<div class="item5">55</div>

<div class="outer">
    <div class="inner">
        <p id="p1">p1</p>
    </div>
    <p>p2</p>
</div>
<p>p3</p>

<script>
    // 向下查找兄弟标签
//    $(".item1").next().css("color","red");
//    $(".item1").nextAll().css("color","red");
//    $(".item1").nextUntil(".item5").css("color","red");

    // 查找所有兄弟标签
    $(".item3").siblings().css("color","red");

    // 查找子代标签
//    $(".outer").children().css("color","red");
    $(".outer").children("p").css("color","red");
    // 查找后代标签
    $(".outer").find("p").css("color","red");

    // 查找父标签
    $("#p1").parent().css("color","red");
    $("#p1").parents().css("color","red");
    $("#p1").parentsUntil(".outer").css("color","red");

</script>
</body>
</html>

 

三、JQuery操作元素

  1.JQuery事件

# 页面载入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
        // 对应 JS 的onload事件
//        $(document).ready(function () {
//            $(".p1").css({"color":"red","font-size":"50px"});
//        });
        // 可以简写成如下形式:
        $(function () {
            $(".p1").css("color","blue");
        })
    </script>
</head>
<body>

<p class="p1">PPP</p>

</body>
</html>



# 事件绑定

//JS事件绑定:     js的标签对象.on事件=函数
//JQuery事件绑定: $().事件(函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
    <li>55</li>
</ul>

<button>ADD</button>
<script>
    $("button").click(function () {
        $("ul").append("<li>666</li>");
    });

    //JS事件绑定:     js的标签对象.on事件=函数
    //JQuery事件绑定: $().事件(函数)

    // 给 li 绑定点击事件(第一种绑定方式),点击一次就执行相关操作
    // 但是 button 增加的li点击不生效
    $("ul li").click(function () {
        console.log($(this).text());
        alert(123);
    });

    // 第二种绑定方式
    // on方法实现事件绑定  (JQuery 3 里统一用on)
    $("ul li").on("click",function () {
        alert(456);
    });


    // 事件委派 -> ul 把事件下发到子标签li
    // 这样写会避免新添加的子标签无法响应事件的bug
    $("ul").on("click","li",function () {
        console.log($(this).text());  // 获取li标签里写好的值
        alert(789);
    })
    // 要注意 on 前面是什么,以及on的参数

</script>
</body>
</html>

# 关于事件委派:
$("").on(eve,[selector],[data],fn) 
在选择元素上绑定一个或多个事件的事件处理函数。



# 事件切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>

<div class="test"></div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    // 第一种方式
    function enter(){
        console.log("enter")
    }
    function out(){
        console.log("out")
    }
    $(".test").hover(enter,out)
    
    // 第二种方式
    $(".test").mouseenter(function(){
            console.log("enter")
    });
    $(".test").mouseleave(function(){
        console.log("leave")
    });
</script>
</html>

  2.JQuery属性操作

--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])

--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])

---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

  

# attr 和 prop

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
//对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
//像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此
//需要使用prop方法去操作才能获得正确的结果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

  

 

# 文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>

<div class="c1">
    <p>DIV-PPP</p>
</div>


<input type="text" id="inp" value="123">

<p class="p1" value="standby">PPP</p>

<script>
    console.log($(".c1").html());   // <p>DIV-PPP</p>
    console.log($(".c1").text());   // DIV-PPP

    $(".c1").html("<b>LIU</b>");    // LIU

    console.log($("#inp").val());   // 123
    $("#inp").val(999);
    console.log($("#inp").val());   // 999

    // p标签没有value属性,是自己加的属性,用val()是获取不到的;可以用attr
    console.log($(".p1").val());

    // 设置CSS样式
    $(".p1").css({"color":"red","fontSize":"35px"})
</script>

</body>
</html>

  

# JQuery重写 左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        .item {
            margin: 20px;/*上 下 左 右*/
        }
        .left_menu {
            width: 20%;
            height: 500px;
            background-color: wheat;
            float: left;
        }
        .title {
            text-align: center;
            background-color: #53e3a6;
            line-height: 30px;
            color: red;
        }
        .hidden {
            display: none;
        }
        .content_menu {
            width: 80%;
            height: 500px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="left_menu">
            <div class="item">
                <div class="title">菜单一</div>
                <div class="con">
                    <p>111</p>
                    <p>112</p>
                    <p>113</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单二</div>
                <div class="con hidden">
                    <p>211</p>
                    <p>212</p>
                    <p>213</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单三</div>
                <div class="con hidden">
                    <p>311</p>
                    <p>312</p>
                    <p>313</p>
                </div>
            </div>
        </div>
        <div class="content_menu"></div>
    </div>

<script>
    $(".title").click(function () {
//        $(this).next().removeClass("hidden");
//        $(this).parent().siblings().children(".con").addClass("hidden");

        // JQuery 支持链式操作,所以上面两句可以简写为下面一句:
        $(this).next().removeClass("hidden").parent().siblings().children(".con").addClass("hidden");
    })
</script>
</body>
</html>

  

# JQuery 重写 表格全选、反选、取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>

<button>全选</button>
<button>反选</button>
<button>取消</button>

<table border="1">
    <tr>
        <th>   </th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    $("button").click(function () {
        if ("全选" == $(this).text())
        {
            $("input").prop("checked",true);
        }
        else if ("取消" == $(this).text())
        {
            $("input").prop("checked",false);
        }
        else
        {
            $("input").each(function () {
                $(this).prop("checked",!$(this).prop("checked"));
            })
        }
    })
</script>

</body>
</html>

  

# Jquery实现 tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer {
            width: 60%;
            height: 300px;
            background-color: wheat;
            margin: 100px auto;
        }
        .outer ul.title {
            background: darkgrey;
            padding: 10px;
        }
        .outer ul.title li {
            display: inline-block;
            list-style: none;
            padding: 5px;
        }
        .hide {
            display: none;
        }
        .outer .content {
            padding: 20px;
        }
        .active {
            background-color: red;
            color: white;
            border-top: 3px solid blue;
        }
    </style>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <div class="outer">
        <ul class="title">
            <li class="active" relation="c1">商品介绍</li>
            <li relation="c2">商品规格</li>
            <li relation="c3">售后保障</li>
        </ul>
        <div class="content">
            <div class="item" id="c1">这里是商品介绍</div>
            <div class="item hide" id="c2">这里是商品规格</div>
            <div class="item hide" id="c3">售后服务在这里</div>
        </div>
    </div>

    <script src="jquery-3.1.1.js"></script>
    <script>
        $(".title li").click(function () {
            // 更改 title 的背景色
            $(this).addClass("active");
            $(this).siblings().removeClass("active");

            // 更改title对应的content显示
            // 通过在 li 标签里埋了一个自定义属性,对应到content里面id值
            var $id_val = $(this).attr("relation");
            var $sel = "#" + $id_val;    // 拼接字符串
            $($sel).removeClass(\'hide\');
            $($sel).siblings().addClass(\'hide\');
        })
    </script>

</body>
</html>

  3.JQuery each循环

<!--循环方式1: $.each(obj,func(){})-->
<script>
    // JQuery遍历数组
    var arr = [11,22,33,44];
    $.each(arr,function (i,j) {
        console.log(i); // 索引
        console.log(j); // 值
//        console.log(arr[i]);    // 值
    });

    // JQuery遍历object
    // 支持类似字典的数据类型,实际是object对象
    var info = {"name":"egon","age":18,"gender":"male"};
    $.each(info,function (i,j) {
        console.log(i);
        console.log(j);
    })

</script>




<!--循环方式2: $("").each(func(){})-->
<body>

<p class="item">P1</p>
<p class="item">P2</p>
<p class="item">P3</p>
<p class="item">P4</p>
<script>
    // JQuery遍历标签
    $(".item").each(function () {
        if ($(this).text()=="P3")
        {
            console.log($(this).text());
            console.log($(this).html());
            $(this).css({"color":"red","font-size":"20px"})
        }
    })
</script>
</body>

  

# each循环扩展

# 示例1
<script>
    function f(){

        for(var i=0;i<4;i++){
            if (i==2){
                return
            }
            console.log(i)
        }
    }
    f(); // 输出 0 和 1
</script>



# 示例2
<script src="jquery-3.1.1.js"></script>
<script>
    li=[11,22,33,44];
    $.each(li,function(i,v){
        if (v==33){
//            return ;      // 输出 11 22 44
//            return true;  // 输出 11 22 44
            return false    // 输出 11 22
        }
        console.log(v)
    });
</script>




function里的return只是结束了当前的函数,并不会影响后面函数的执行;
如果你想return后下面循环函数继续执行,那么就直接写return或return true
如果你不想return后下面循环函数继续执行,那么就直接写return false

  4.文档节点处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

  

# 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            width: 500px;
            height: 300px;
            background-color: wheat;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="outer">
    <h4>hello node</h4>
</div>

<button class="add-node">ADD</button>
<button class="del-node">DEL</button>


<div class="box">
    <p class="p1">PPP</p>
</div>

<div class="outerBox">
    <div></div>
</div>

<script src="../jquery-3.1.1.js"></script>

<script>
    $(".add-node").click(function () {
        var $ele_p = $("<p>");
        $ele_p.text("--->ppp");
        // 添加子标签
        $(".outer").append($ele_p);
        // 等价于下面这种写法:
//        $ele_p.appendTo(".outer");

//        // 添加兄弟标签
//        $(".outer").after($ele_p);
        // 等价于下面这种写法:
//        $ele_p.insertAfter(".outer");// 类似于appendTo()
//
//        // 清空标签
//        $(".box").empty();
//
//        // 删除标签
//        $(".box").remove();
//
//        // 复制标签
//        var $p1_clone = $(".p1").clone();
//        $(".box").append($p1_clone);

    })
</script>

</body>
</html>
# 节点clone示例

<body>
<div class="outer">
    <div class="box">
        <button class="add">+</button>
        <input type="text" placeholder="请输入..." id="line">
    </div>
</div>

<script>
    $(".add").click(function () {
//        var $new_box = $(".box").clone();  // 错误
        var $new_box = $(this).parent().clone();
//        $new_box.children("button").attr("class","to_remove");
//        $new_box.children("button").html("-");

        // 可以简写成下面这一句:
        $new_box.children("button").html("-").attr("class","to_remove");

        $(".outer").append($new_box);
    });
    // 这样写是不生效的,需要改成事件委派的形式
//    $(".to_remove").click(function () {
//        var $ele_del = $(this).parent();
//        console.log($ele_del);
////        $ele_del.remove();
//    })

    // 事件委派 -> 解决新添加的标签事件绑定失败的问题
    $(".outer").on("click",".to_remove",function () {
        var $ele_del = $(this).parent();
        console.log($ele_del);
        $ele_del.remove();
    })
</script>
</body>

  5.动画效果

# 显示和隐藏

<body>
<p>hello egon</p>
<button id="hide_btn">隐藏</button>
<button id="show_btn">显示</button>
<button id="toggle_btn">Toggle</button>

<script src="jquery-3.1.1.js"></script>
<script>
    $("#hide_btn").click(function () {
//        $("p").hide();
//        $("p").hide(1000);

        // 添加回调函数
        $("p").hide(1000,function () {
            alert(123);
        });
    });
    $("#show_btn").click(function () {
//        $("p").show();
        $("p").show(1000);
    });
    $("#toggle_btn").click(function () {
//        $("p").toggle();
        $("p").toggle(1000);
    });
</script>
</body>

  

# 滑动滑出

<body>

<img src="tsl.jpg" alt="" class="tsl">
<button class="slide_out">滑出</button>
<button class="slide_in">滑出</button>
<button class="switch">切换</button>

<script src="jquery-3.1.1.js"></script>
<script>
    $(".slide_out").click(function () {
        $(".tsl").slideDown(1000); // 1000 ms 完成
    })
    $(".slide_in").click(function () {
        $(".tsl").slideUp(1000);
    })
    $(".switch").click(function () {
        $(".tsl").slideToggle(1000);
    })
</script>
</body>

  

# 淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        .item {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="item"></div>
<button class="fade_in">淡入</button>
<button class="fade_out">淡出</button>
<button class="fade_switch">切换</button>

<script>
    $(".fade_in").click(function () {
        $(".item").fadeIn(3000);
    });
    $(".fade_out").click(function () {
        $(".item").fadeOut(3000);
    });
    $(".fade_switch").click(function () {
        $(".item").fadeToggle(3000);
    });
</script>

</body>
</html>

  

# CSS位置操作

$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])





# CSS尺寸操作

$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])

 

四、实用例子

 http://www.cnblogs.com/yuanchenqi/articles/6936986.html

 

 

 

五、练习

要求

用JQuery重写table表格增肌、修改、删除操作
并适当添加左侧菜单和tab切换等样式

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .title {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .header {
        background-color: black;
        height: 60px;
        line-height: 60px;
        overflow: hidden;
        clear: both;
    }
    .nav-title {
        border: 1px solid red;
    }
    .nav-title li{
        display: inline-block;
    }
    .nav-title li a {
        color: darkgray;
        text-decoration: none;
        display: block;
        padding: 0 1.5em;
        height: 60px;
        font-family: \'微软雅黑\';
        float: left;
        font-size: 1.1em;
        text-align: center;
        transition-duration: 0.3s;
        margin-left: 0;
    }
    .nav-title li a:hover {
        color: white;
        background-color: dimgrey;
    }
    .nav-title .active {
            background-color: blue;
            /*color: black;*/
            border-top: 3px solid greenyellow;
    }
    .left-menu {
        width: 12%;
        height: 500px;
        background-color: wheat;
        float: left;
    }
    .left-menu .item .zone-name {
        text-align: center;
        background-color: #53e3a6;
        line-height: 40px;
        color: red;
    }
    .left-menu .item a {
        text-decoration: none;
    }
    .left-menu .item a:hover {
        text-decoration: underline;
        font-size: 1.1em;
    }
    .left-menu .item .con {
        text-align: center;
    }
    .left-menu .item .con p {
        padding-top: 10px;
    }
    .detail {
        width: 88%;
        height: 500px;
        background-color: white;
        float: left;
    }
    .hidden {
        display: none;
    }
    #table {
        margin-top: 10px;
        border: 1px solid blue;
        margin-left: 300px;
    }
    .fade {
        position: fixed;
        top: 0; /*遮罩层占满屏*/
        bottom: 0;
        left: 0;
        right: 0;
        background-color: darkgrey;
        opacity: 0.5;
    }
    .model {
        width: 400px;
        height: 200px;
        background-color: white;
        border-radius: 4%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px; /* 让跳出框水平+垂直居中 */
        margin-top: -100px;
    }
    .item-info {
        margin-top: 20px;
    }
    .item-info label {
        float: left;
        width: 30%;
        margin-left: 50px;
    }
    #add {
        width: 100px;
        height: 50px;
        background-color: green;
        border-radius: 10px;
        font-size: 20px;
        color: white;
        margin-left: 500px;
        margin-top: 30px;
    }
    .item-btn {
        margin-top: 10px;
        margin-left: 100px;
    }
    .item-btn #confirm,#cancel,#add_item{
        background-color: darkblue;
        border: none;
        color: white;
        text-align: center;
        font-size: 20px;
        border-radius: 4px;
        margin-left: 30px;
    }
</style>

<body>

<div class="title">
    <h1>ApacheTrafficServer</h1>
</div>

<div class="header">

    <ul class="nav-title">
        <li relation="index" class="active"><a href="#">LiveStat</a></li>
        <li relation="bandwidth"><a href="#" >带宽统计</a></li>
        <li relation="hit_ratio"><a href="#" >命中率统计</a></li>
        <li relation="ret_code"><a href="#">响应码统计</a></li>
        <li relation="connection"><a href="#">连接数统计</a></li>
        <li relation="connection"><a href="#">回源链路检测</a></li>
        <li relation="version"><a href="#">版本分布</a></li>
        <li relation="server_status"><a href="#">服务器状态</a></li>
    </ul>

</div>

<div class="content">

    <div class="item" id="index">
        <div class="left-menu">
            <div class="item">
                <div class="zone-name"><a href="#">北京电信</a></div>
                <div class="con">
                    <a href="#"><p>beijing_ct</p></a>
                    <a href="#"><p>beijing2_ct</p></a>
                </div>
            </div>
            <div class="item">
                <div class="zone-name"><a href="#">北京联通</a></div>
                <div class="con hidden">
                    <a href="#"><p>beijing_cnc</p></a>
                    <a href="#"><p>beijing2_cnc</p></a>
                    <a href="#"><p>beijing3_cnc</p></a>
                </div>
            </div>
            <div class="item">
                <div class="zone-name"><a href="#">上海电信</a></div>
                <div class="con hidden">
                    <a href="#"><p>shanghai_ct</p></a>
                    <a href="#"><p>shanghai2_ct</p></a>
                    <a href="#"><p>shanghai3_ct</p></a>
                    <a href="#"><p>shanghai4_ct</p></a>
                </div>
            </div>
            <div class="item">
                <div class="zone-name"><a href="#">广州电信</a></div>
                <div class="con hidden">
                    <a href="#"><p>guangzhou_ct</p></a>
                    <a href="#"><p>guangzhou2_ct</p></a>
                </div>
            </div>
            <div class="item">
                <div class="zone-name"><a href="#">武汉联通</a></div>
                <div class="con hidden">
                    <a href="#"><p>wuhan_cnc</p></a>
                    <a href="#"><p>wuhan2_cnc</p></a>
                    <a href="#"><p>wuhan3_cnc</p></a>
                </div>
            </div>
        </div>
        <div class="detail"></div>
    </div>
    <div class="item hidden" id="bandwidth">
        <div class="left-menu">
            <div class="item">
                <div class="zone-name"><a href="#">北京大区</a></div>
                <div class="con">
                    <a href="#"><p>联通</p></a>
                    <a href="#"><p>电信</p></a>
                    <a href="#"><p>移动</p></a>
                    <a href="#"><p>长宽</p></a>
                    <a href="#"><p>铁通</p></a>
                    <a href="#"><p>广电</p></a>
                    <a href="#"><p>其他</p></a>
                </div>
            </div>
            <div class="item">
                <div class="zone-name"><a href="#">上海大区</a></div>
                <div class="con hidden">
                    <a href="#"><p>联通</p></a>
                    <a href="#"><p>电信</p></a>
                    <a href="#"><p>移动</p></a>
                    <a href="#"><p>长宽</p></a>
                    <a href="#"><p>铁通</p></a>
                    <a href="#"><p>广电</p></a>
                    <a href="#"><p>其他</p></a>
                </div>
            </div>
            <div class="item">
                <div class="zone-name"><a href="#">广州大区</a></div>
                <div class="con hidden">
                    <a href="#"><p>联通</p></a>
                    <a href="#"><p>电信</p></a>
                    <a href="#"><p>移动</p></a>
                    <a href="#"><p>长宽</p></a>
                    <a href="#"><p>铁通</p></a>
                    <a href="#"><p>广电</p></a>
                    <a href="#"><p>其他</p></a>
                </div>
            </div>
        </div>
        <div class="detail">
            <div class="info">
                <button id="add">添加</button>
                <table border="1" id="table">
                    <tr class="tr-header">
                        <!--<th>   </th>-->
                        <th>IP</th>
                        <th>端口</th>
                        <th>所属部门</th>
                        <th>所属IDC</th>
                        <th>在线状态</th>
                        <th>服务</th>
                        <th>操作</th>
                    </tr>
                    <tr class="tr-data">
                        <!--<td><input type="checkbox"></td>-->
                        <td class="ip">10.0.0.1</td>
                        <td class="port">22</td>
                        <td class="department">VCDN</td>
                        <td class="vidc">beijing_cnc</td>
                        <td class="status">在线</td>
                        <td class="service">视频播放</td>
                        <td>
                            <button class="update">修改</button>
                            <span>|</span>
                            <button class="delete">删除</button>
                        </td>
                    </tr>
                    <tr class="tr-data">
                        <!--<td><input type="checkbox"></td>-->
                        <td class="ip">10.0.0.2</td>
                        <td class="port">33</td>
                        <td class="department">Cloud-calculator</td>
                        <td class="vidc">beijing_ct</td>
                        <td class="status">在线</td>
                        <td class="service">云计算</td>
                        <td>
                            <button class="update">修改</button>
                            <span>|</span>
                            <button class="delete">删除</button>
                        </td>
                    </tr>
                    <tr class="tr-data">
                        <!--<td><input type="checkbox"></td>-->
                        <td class="ip">10.0.0.3</td>
                        <td class="port">44</td>
                        <td class="department">HCDN</td>
                        <td class="vidc">shanghai_ct</td>
                        <td class="status">在线</td>
                        <td class="service">CDN+P2P</td>
                        <td>
                            <button class="update">修改</button>
                            <span>|</span>
                            <button class="delete">删除</button>
                        </td>
                    </tr>
                </table>

                <div class="fade hidden">
                </div>
                <div class="model hidden">
                    <div class="item-info">
                        <label for="">IP:</label><input class="model_item item_ip" type="text"><br>
                        <label for="">端口:</label><input class="model_item item_port" type="text"><br>
                        <label for="">所属部门:</label><input class="model_item item_depart" type="text"><br>
                        <label for="">所属IDC:</label><input class="model_item item_idc" type="text"><br>
                        <label for="">在线状态:</label><input class="model_item item_online" type="text"><br>
                        <label for="">服务:</label><input class="model_item item_service" type="text"><br>
                    </div>
                    <div class="item-btn">
                        <input type="button" value="更新" id="confirm">
                        <input type="button" value="取消" id="cancel">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="item hidden" id="hit_ratio">
        <div class="left-menu">
            <h1>hit_ratio</h1>
        </div>
        <div class="detail">
            <h1>hit_ratio</h1>
        </div>
    </div>
    <div class="item hidden" id="ret_code">
        <div class="left-menu">
            <h1>ret_code</h1>
        </div>
        <div class="detail">
            <h1>ret_code</h1>
        </div>
    </div>
    <div class="item hidden" id="connection">
        <div class="left-menu">
            <h1>connection</h1>
        </div>
        <div class="detail">
            <h1>connection</h1>
        </div>
    </div>
    <div class="item hidden" id="version">
        <div class="left-menu">
            <h1>version</h1>
        </div>
        <div class="detail">
            <h1>version</h1>
        </div>
    </div>
    <div class="item hidden" id="server_status">
        <div class="left-menu">
            <h1>server_status</h1>
        </div>
        <div class="detail">
            <h1>server_status</h1>
        </div>
    </div>

</div>

<script src="jquery-3.2.1.min.js"></script>
<script src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: \'echarts-2.2.7/build/dist\'
        }
    });
    // 使用
    require(
        [
            \'echarts\',
            \'echarts/chart/map\' // 使用地图就加载map模块,按需加载
        ],
        function (ec) {
            // 基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById(\'index\').lastElementChild);
            var option = {
                title : {
                    text: \'全网卡顿情况\',
                    subtext: \'纯属虚构\',
                    x:\'center\'
                },
                tooltip : {
                    trigger: \'item\'
                },
                legend: {
                    orient: \'vertical\',
                    x:\'left\',
                    data:[\'Great\',\'Middle\',\'Serious\']
                },
                dataRange: {
                    min: 0,
                    max: 2500,
                    x: \'left\',
                    y: \'bottom\',
                    text:[\'高\',\'低\'],           // 文本,默认为数值文本
                    calculable : true
                },
                toolbox: {
                    show: true,
                    orient : \'vertical\',
                    x: \'right\',
                    y: \'center\',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                roamController: {
                    show: true,
                    x: \'right\',
                    mapTypeControl: {
                        \'china\': true
                    }
                },
                series : [
                    {
                        name: \'Great\',
                        type: \'map\',
                        mapType: \'china\',
                        roam: false,
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name: \'北京\',value: Math.round(Math.random()*1000)},
                            {name: \'天津\',value: Math.round(Math.random()*1000)},
                            {name: \'上海\',value: Math.round(Math.random()*1000)},
                            {name: \'重庆\',value: Math.round(Math.random()*1000)},
                            {name: \'河北\',value: Math.round(Math.random()*1000)},
                            {name: \'河南\',value: Math.round(Math.random()*1000)},
                            {name: \'云南\',value: Math.round(Math.random()*1000)},
                            {name: \'辽宁\',value: Math.round(Math.random()*1000)},
                            {name: \'黑龙江\',value: Math.round(Math.random()*1000)},
                            {name: \'湖南\',value: Math.round(Math.random()*1000)},
                            {name: \'安徽\',value: Math.round(Math.random()*1000)},
                            {name: \'山东\',value: Math.round(Math.random()*1000)},
                            {name: \'新疆\',value: Math.round(Math.random()*1000)},
                            {name: \'江苏\',value: Math.round(Math.random()*1000)},
                            {name: \'浙江\',value: Math.round(Math.random()*1000)},
                            {name: \'江西\',value: Math.round(Math.random()*1000)},
                            {name: \'湖北\',value: Math.round(Math.random()*1000)},
                            {name: \'广西\',value: Math.round(Math.random()*1000)},
                            {name: \'甘肃\',value: Math.round(Math.random()*1000)},
                            {name: \'山西\',value: Math.round(Math.random()*1000)},
                            {name: \'内蒙古\',value: Math.round(Math.random()*1000)},
                            {name: \'陕西\',value: Math.round(Math.random()*1000)},
                            {name: \'吉林\',value: Math.round(Math.random()*1000)},
                            {name: \'福建\',value: Math.round(Math.random()*1000)},
                            {name: \'贵州\',value: Math.round(Math.random()*1000)},
                            {name: \'广东\',value: Math.round(Math.random()*1000)},
                            {name: \'青海\',value: Math.round(Math.random()*1000)},
                            {name: \'西藏\',value: Math.round(Math.random()*1000)},
                            {name: \'四川\',value: Math.round(Math.random()*1000)},
                            {name: \'宁夏\',value: Math.round(Math.random()*1000)},
                            {name: \'海南\',value: Math.round(Math.random()*1000)},
                            {name: \'台湾\',value: Math.round(Math.random()*1000)},
                            {name: \'香港\',value: Math.round(Math.random()*1000)},
                            {name: \'澳门\',value: Math.round(Math.random()*1000)}
                        ]
                    },
                    {
                        name: \'Middle\',
                        type: \'map\',
                        mapType: \'china\',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name: \'北京\',value: Math.round(Math.random()*1000)},
                            {name: \'天津\',value: Math.round(Math.random()*1000)},
                            {name: \'上海\',value: Math.round(Math.random()*1000)},
                            {name: \'重庆\',value: Math.round(Math.random()*1000)},
                            {name: \'河北\',value: Math.round(Math.random()*1000)},
                            {name: \'安徽\',value: Math.round(Math.random()*1000)},
                            {name: \'新疆\',value: Math.round(Math.random()*1000)},
                            {name: \'浙江\',value: Math.round(Math.random()*1000)},
                            {name: \'江西\',value: Math.round(Math.random()*1000)},
                            {name: \'山西\',value: Math.round(Math.random()*1000)},
                            {name: \'内蒙古\',value: Math.round(Math.random()*1000)},
                            {name: \'吉林\',value: Math.round(Math.random()*1000)},
                            {name: \'福建\',value: Math.round(Math.random()*1000)},
                            {name: \'广东\',value: Math.round(Math.random()*1000)},
                            {name: \'西藏\',value: Math.round(Math.random()*1000)},
                            {name: \'四川\',value: Math.round(Math.random()*1000)},
                            {name: \'宁夏\',value: Math.round(Math.random()*1000)},
                            {name: \'香港\',value: Math.round(Math.random()*1000)},
                            {name: \'澳门\',value: Math.round(Math.random()*1000)}
                        ]
                    },
                    {
                        name: \'Serious\',
                        type: \'map\',
                        mapType: \'china\',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name: \'北京\',value: Math.round(Math.random()*1000)},
                            {name: \'天津\',value: Math.round(Math.random()*1000)},
                            {name: \'上海\',value: Math.round(Math.random()*1000)},
                            {name: \'广东\',value: Math.round(Math.random()*1000)},
                            {name: \'台湾\',value: Math.round(Math.random()*1000)},
                            {name: \'香港\',value: Math.round(Math.random()*1000)},
                            {name: \'澳门\',value: Math.round(Math.random()*1000)}
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }
    );
</script>
<script>

    // 左侧菜单栏点击事件
    $(".zone-name").click(function () {
        $(this).next().removeClass("hidden");
        $(this).parent().siblings().children(".con").addClass("hidden");
    });
    // 点击左侧菜单的子标签事件
    $(".con a p").click(function () {
        alert($(this).text());
    });
    // tab切换
    $(".nav-title li").click(function () {
        // 更改 title 的背景色
        $(this).addClass("active");
        $(this).siblings().removeClass("active");

        // 更改title对应的content显示
        // 通过在 li 标签里埋了一个自定义属性,对应到content里面id值
        var $id_val = $(this).attr("relation");
        var $sel = "#" + $id_val;    // 拼接字符串
        $($sel).removeClass(\'hidden\');
        $($sel).siblings().addClass(\'hidden\');
    });
    // 删除数据
    $(".delete").click(function () {
        $(this).parent().parent().remove();
    });
    // 取消
    $("#cancel").click(function () {
        $(this).parent().parent().addClass("hidden");
        $(this).parent().parent().prev().addClass("hidden");
    });
    function empty_run() {
        // 清空model里面的数据
        $(".model_item").each(function(i,ele){
            $(this).val("")
        })
    }
    // 判断是否有空值
    function is_Empty() {
        var flag = 0;
        $(".model_item").each(function (i) {
            if($(this).val()){
                flag++;
            }
        });
        if (6 == flag){
            return true;
        }
        else {
            return false;
        }
    }
    // 修改数据
    $(".update").click(function () {
        var confirm_option = $(this).parent().parent();
        remove_hidden();
        confirm_run(confirm_option);
    });
    // 添加一条数据
    $("#add").click(function () {
        empty_run();
        $("#confirm").prop("value","添加");
        $("#confirm").val("添加");
        remove_hidden();
        confirm_run();
        $("#confirm").prop("value","更新");
        $("#confirm").val("更新");
    });
    function confirm_run(option_obj) {
        if($("#confirm").val() == "更新"){
            // 获取当前数据并显示到修改框里
            $(".model_item").each(function (k) {
                $(this).val(option_obj.children().eq(k).text());
            });
            console.log(123);
            // 这一步解绑定非常重要,不然会导致连续操作时候发生点击一次,执行多次的bug
            $("#confirm").off("click");
            $("#confirm").click(function () {
//                alert(999);
                if(option_obj){
//                    alert("ERR");
                    $(".model_item").each(function (k) {
                        option_obj.children().eq(k).text($(this).val());
                    });
                    add_hidden();
                }
            });
        }
        else if ($("#confirm").val() == "添加"){
            console.log(\'11111\');
            // clone
            var $new_item = $(".tr-data:first").clone();
            // 这一步解绑定非常重要,不然会导致连续操作时候发生点击一次,执行多次的bug
            $("#confirm").off("click");
            $("#confirm").click(function () {
                if (is_Empty()){
                    if ($new_item){
//                        alert(\'添加\');
                        //获取填写标签对应的四个value
                        $(".model_item").each(function(i){
                            $new_item.find("td").eq(i).text($(this).val())
                        });
                        // 追加
                        $("#table").append($new_item);
                        add_hidden();
                        // 事件委派 -> 解决新添加的标签事件绑定失败的问题
                        $("#table").on("click", ".delete", function () {
                            $(this).parent().parent().remove();
                        });
                        // 事件委派 -> 解决新添加的标签事件绑定失败的问题
                        $("#table").on("click", ".update", function () {
                            $(".update").click(function () {
                                var confirm_option = $(this).parent().parent();
                                remove_hidden();
                                confirm_run(confirm_option);
                            });
                        })
                    }
                }
                else {
                    alert("不能存在空值!!!");
                    add_hidden();
                }
            });
        }
        else {
            alert($("#confirm").val())
        }
    }
    function remove_hidden() {
        // 显示遮罩层
        $(".fade").removeClass("hidden");
        // 显示修改框
        $(".model").removeClass("hidden");
    }
    function add_hidden() {
        // 显示遮罩层
        $(".fade").addClass("hidden");
        // 显示修改框
        $(".model").addClass("hidden");
    }

</script>

</body>
</html>

  

 

以上是关于前端基础之JQuery - day15的主要内容,如果未能解决你的问题,请参考以下文章

前端基础之jQuery(Day55)

python学习_day58_前端基础之jQuery入门1

python学习_day59_前端基础之jQuery入门2

python学习_day60_前端基础之jQuery入门3

python_day15_jquery

day13-web前端之JS与JQuery