JavaWeb (四) Jquery ：属性操作、案例联系、dom的增删改、动态增删、css样式、jquery动画、jquery时间操作-蒲公英云

个人博客网：https://wushaopei.github.io/ (你想要这里多有)

1、Jquery 的属性操作

        ![20200110200952860.png][]
attr()            它可以设置和获取属性的值。

像checked，disabled,readonly,selected这些属性在dom对象中值是true和false。官方不推荐使用attr方法来进行操作。
因为当没这个属性的时候，会返回undefined。官方觉得这是一个错误的值。推荐使用prop方法去操作以上类似的属性。

attr方法可以操作非标准（自定义）的属性。

prop()            它可以设置和获取属性的值。

像checked，disabled,readonly,selected这些属性在dom对象中值是true和false。推荐使用prop方法操作。其他属性都使用attr方法操作。

2、Jquery 练习

2.1 全选，全部选，反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        // 全选
        $("#checkedAllBtn").click(function(){
            // 设置全部选中
            $(":checkbox").prop("checked",true);
        });
        // 全不选
        $("#checkedNoBtn").click(function(){
            // 设置全部选中
            $(":checkbox").prop("checked",false);
        });        
        //反　选
        $("#checkedRevBtn").click(function(){
            // 获取全部的球类的复选框
            // each 方法是遍历的方法
            $(":checkbox[name='items']").each(function(){
                // 在each遍历的function中有一个this对象。这个this对象是当前正在遍历到的dom对象
                this.checked = !this.checked;
            });
            // 判断如果全部的球类都选中了。那么【全选/全不选 】也应该被选中
            // 获取全部选中的球类的个数
            var checkedCount = $(":checkbox[name='items']:checked").length;
            // 获取全部的球类的个数
            var allCount = $(":checkbox[name='items']").length;
//             if (checkedCount == allCount) {
//                 $("#checkedAllBox").prop("checked",true);
//             } else {
//                 $("#checkedAllBox").prop("checked",false);
//             }
            $("#checkedAllBox").prop("checked",checkedCount == allCount);
        });
        //提交按钮
        $("#sendBtn").click(function(){
            // each 是遍历的方法
            $(":checkbox[name='items']:checked").each(function(){
                // 在each遍历的function中有一个this对象。这个this对象是当前正在遍历到的dom对象
                alert( this.value );
            });
        });
        // 【全选/全不选】复选框单击事件 
        $("#checkedAllBox").click(function(){
            // 在事件的function函数中也有一个this对象。这个this对象是当前正在响应事件的dom对象。
//             alert( this.checked );
            // 获取全部的球类的复选框
            $(":checkbox[name='items']").prop("checked",this.checked);
        });
        // 给全部的球类绑定单击事件
        $(":checkbox[name='items']").click(function(){
            // 在事件的function函数中有一个this对象。这个this对象是当前正在响应事件的dom对象。
            var checkedCount = $(":checkbox[name='items']:checked").length;
            var allCount = $(":checkbox[name='items']").length;
            $("#checkedAllBox").prop("checked",checkedCount == allCount);
        });
    });
</script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全/全不选 
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>
</body>
</html>

4、 Dom 的增删改

        ![20200110201241903.png][]
内部插入：
appendTo()            a.appendTo(b)            是把a插入到b子元素后面    
prependTo()            a.prependTo(b)                是把a插入到b子元素前面
外部插入：                        
insertAfter()            a.insertAfter(b)        把a插到b后面        ba           
insertBefore()            a.insertBefore(b)        把a插到b前面        ab
替换:
replaceWith()            a.replaceWith(b)        把a替换成b
replaceAll()                   a.replaceAll(b)            是把a去全部替换b
删除：
remove()            a.remove()            删除a
empty()                a.empty()            清空a标签内所有内容

5、 Jquery 练习二

5.1 从左到右、从右到左练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }
        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        // 页面加载完成之后
        $(function(){
//             <button>选中添加到右边</button>
            $("button:eq(0)").click(function(){
                //查找左边下拉列表中选中的option标签对象，appendTo 右边的下拉列表
                $("select:eq(0) option:selected").appendTo( $("select:eq(1)") );
            });
//             <button>全部添加到右边</button>
            $("button:eq(1)").click(function(){
                //查找左边下拉列表中选中的option标签对象，appendTo 右边的下拉列表
                $("select:eq(0) option").appendTo( $("select:eq(1)") );
            });
//             <button>选中删除到左边</button>
            $("button:eq(2)").click(function(){
                //查找右边下拉列表中选中的option标签对象，appendTo 左边的下拉列表
                $("select:eq(1) option:selected").appendTo( $("select:eq(0)") );
            });
//             <button>全部删除到左边</button>
            $("button:eq(3)").click(function(){
                //查找右边下拉列表中选中的option标签对象，appendTo 左边的下拉列表
                $("select:eq(1) option").appendTo( $("select:eq(0)") );
            });
        });
    </script>
</head>
<body>
    <div id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">项1</option>
            <option value="opt02">项2</option>
            <option value="opt03">项3</option>
            <option value="opt04">项4</option>
            <option value="opt05">项5</option>
            <option value="opt06">项6</option>
            <option value="opt07">项7</option>
            <option value="opt08">项8</option>
        </select>
        <button>中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div id="rigth">
        <select multiple="multiple" name="sel02">
        </select>
        <button>中删除到左边</button>
        <button>全部删除到左边</button>
    </div>
</body>
</html>

5.2 动态添加、删除表格记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        // 定义删除的方法
        var deleteFun = function(){
            // 在事件的function函数中有一个this对象，这个this对象是当前正在响应事件的dom对象
            var $trObj = $(this).parent().parent();
            var name = $trObj.find("td:first").text();
            // 它是js中的一个确认提示框函数
            // 这个确认提示框，有两个按钮，一个确认，一个取消，
            // 当用户点击了取消就返回false，当用户点击 确认就返回true
            if( confirm("你确认要删除【" + name + "】吗?") ){
                $trObj.remove();
            }
            // return false 可以阻止 元素的默认行为
            return false;
        }
        // submit按钮单击事件
        $("#addEmpButton").click(function(){
            var name = $("#empName").val();
            var email = $("#email").val();
            var salary = $("#salary").val();
            var $trObj = $("<tr>"
                            + "<td>" + name + "</td>"
                            + "<td>" + email + "</td>"
                            + "<td>" + salary + "</td>"
                            + "<td><a href=\"deleteEmp?id=003\">Delete</a></td>"
                            + "</tr>");
            $trObj.find("a").click( deleteFun );
            $trObj.appendTo( $("#employeeTable") );
        });
        // 删除的单击事件
        $("a").click( deleteFun );
    });
</script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th> </th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

6、CSS 样式操作

addClass()                    添加样式
removeClass()                    删除样式
toggleClass()                    没就添加或就删除样式
offset()                        获取和设置坐标

7、Jquery动画

基本动画
show()                显示隐藏的元素
hide()                隐藏可见的元素
toggle()            可见就隐藏，不可见就显示
淡入淡出动画
fadeIn()                淡入    
fadeOut()            淡出
fadeTo()            在给定的时间内慢慢将透明度修改到指定值。
fadeToggle()            切换调用fadeIn和fadeOut 方法

7.1 练习：

需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。

2.当显示全部内容的时候，按钮文本为“显示精简品牌”
然后，小角形向上。所品牌产品为默认颜色。

3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
然后小形向下。并且把佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 12px;
    text-align: center;
}
a {
    color: #04D;
    text-decoration: none;
}
a:hover {
    color: #F50;
    text-decoration: underline;
}
.SubCategoryBox {
    width: 600px;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
}
.SubCategoryBox ul {
    list-style: none;
}
.SubCategoryBox ul li {
    display: block;
    float: left;
    width: 200px;
    line-height: 20px;
}
.showmore , .showless{
    clear: both;
    text-align: center;
    padding-top: 10px;
}
.showmore a , .showless a{
    display: block;
    width: 120px;
    margin: 0 auto;
    line-height: 24px;
    border: 1px solid #AAA;
}
.showmore a span {
    padding-left: 15px;
    background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
    padding-left: 15px;
    background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
    color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function() {
        // 初始状态
        $("li:gt(5):not(:last)").hide();
        //给按钮绑定单击事件
        $("div div a").click(function(){
            // 点击了按钮之后，要么合上，要么展开
            $("li:gt(5):not(:last)").toggle();
            // 判断，是否是隐藏状态
            if ( $("li:gt(5):not(:last)").is(":hidden") ) {
//                 显示全部品牌====在隐藏状态下
//                 alert("当前是隐藏");
                $("div a span").html("显示全部品牌");
//                 角标向下
                $("div div").removeClass();
                $("div div").addClass("showmore");
                $("li:contains('明基')").add("li:contains('爱国者')").removeClass();
            } else {
//                 显示精简品牌====在显示状态下
//                 alert("当前是显示");
                $("div a span").html("显示精简品牌");
                $("li:contains('明基')").add("li:contains('爱国者')").addClass("promoted");
//                 角标向上
                $("div div").removeClass();
                $("div div").addClass("showless");
            }
            return false;
        });        
    });
</script>
</head>
<body>
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30440) </i></li>
            <li><a href="#">索尼</a><i>(27220) </i></li>
            <li><a href="#">星</a><i>(20808) </i></li>
            <li><a href="#">尼康</a><i>(17821) </i></li>
            <li><a href="#">松下</a><i>(12289) </i></li>
            <li><a href="#">卡西欧</a><i>(8242) </i></li>
            <li><a href="#">富士</a><i>(14894) </i></li>
            <li><a href="#">柯达</a><i>(9520) </i></li>
            <li><a href="#">宾得</a><i>(2195) </i></li>
            <li><a href="#">理光</a><i>(4114) </i></li>
            <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
            <li><a href="#">明基</a><i>(1466) </i></li>
            <li><a href="#">爱国者</a><i>(3091) </i></li>
            <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </div>
</body>
</html>

8、Jquery事件操作

$(function(){});
和
window.onload = function(){}
的区别？

8.1 他们分别是在什么时候触发？

jquery的页面加载完成之后是在浏览器内核解析完标签，创建好dom对象之后就马上执行。
js原生的页面加载完成之后，是在浏览器内核解析完标签，创建好dom对象。还要等dom对象的显示图片加载完成，再执行

8.2 他们触发的顺序？

先执行jquery的页面加载完成之后
再执行js的原生的页面加载完成之后

8.3 他们执行的次数？

原生js只会执行最后一次赋值的函数。
jquery的页面加载完成之后。会依次全部执行注册的所有函数

8.4 常用事件方法

click()                        绑定单击事件（或触发单击事件
mouseover()                绑定鼠标移入事件
mouseout()                绑定鼠标移出事件
bind()                    绑定事件
one()                    绑定只消费一次的事件
live()                    可以给匹配的择器的所元素绑定事件，哪怕这个元素是后面创建的也效。
unbind()                跟bind相反的操作，取消绑定

8.5 事件的冒泡

（1）什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

（2）那么如何阻止事件冒泡呢？

在子元素的事件函数体内，直接return false; 可以阻止事件的冒泡传递。

（3）javaScript事件对象

事件对象，是封装触发的事件信息的一个javascript对象。
我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。

（4）如何获取呢javascript事件对象呢？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event就是javascript传递参事件处理函数的事件对象。

比如：

1.原生javascript获取 事件对象
window.onload = function(){
        document.getElementById("areaDiv").onclick = function(event){
            console.log(event);
        };
    }
2.JQuery代码获取 事件对象
$(function(){
        $("#areaDiv").click(function(event){
            console.log(event);
        });
    });

3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

$("#areaDiv").bind("mouseover mouseout",function(event){
//             console.log(event);
//             console.log("bind绑定的事件");
            if (event.type == "mouseout") {
                console.log("鼠标移出");
            } else if (event.type == "mouseover") {
                console.log("鼠标移入");
            }
        });

8.6 练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    body {
        text-align: center;
    }
    #small {
        margin-top: 150px;
    }
    #showBig {
        position: absolute;
        display: none;
    }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        $("#small").bind("mouseover mouseout mousemove",function(event){
            if (event.type == "mouseover") {
                $("#showBig").show();
            } else if (event.type == "mouseout") {
                $("#showBig").hide();
            } else if (event.type == "mousemove") {
                $("#showBig").offset({
                    top: event.pageY + 5,left:event.pageX + 5
                });
            }
        });
    });
</script>
</head>
<body>
    <img id="small" src="img/small.jpg" />
    <div id="showBig">
        <img src="img/big.jpg">
    </div>
</body>
</html>