文章目录

15、DOM对象的增删改
16、jQuery-css样式操作
17、jQuery动画
18、jQuery事件

15、DOM对象的增删改

增

内部插入：

appendTo()
prependTo()

a.appendTo(b) :
把a插入到b子元素的末尾，成为最后一个子元素

a.prependTo(b):
把a插入到b所有子元素的前面，成为第一个子元素

//appendTo后面也可以传选择器

$("<h1>标题</h1>").appendTo("div");
$("<h1>标题</h1>").prependTo("div");

外部插入：

insertAfter()
insertBefore()

a.insertAfter(b)  得到ba,兄弟元素
a.insertBefore(b) 得到ab,兄弟元素

改

a.replaceWith(b) 用b替换a
a.replaceAll(b)  用a替换掉所有的b

删

a.remove() 删除a标签
a.empty()  清空a标签里的内容

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现动态增删</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script>
        $(function(){
            //给提交按钮绑定单击事件
            $("#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=001\">Delete</a></td>"+
                            "</tr>");
                //将行对象添加到数据表格中
                $trObj.appendTo($("#employeeTable"));

                //补绑
                $trObj.find("a").click(function(){
                    var $trObj = $(this).parent().parent();
                    var name = $trObj.find("td:first").text();
                    if( confirm("确定要删除【"+name+"】吗？") ){
                    $trObj.remove();
                }
                //return false可以阻止元素的默认行为，不加这个，a标签会默认跳转
                return false;
                });
            });
            //给删除(a标签)绑上单击事件
            //这里是在页面加载完成之后执行的，所以只有三个a标签，后面动态添加进去的每一行中的a标签没被绑上
            //需要补绑
            $("a").click(function(){
                //在事件响应的function函数中，有一个this对象，代表的是当前正在响应事件的dom对象
                //点击a标签，则this为a的dom对象
                //将dom转JS对象，再取两次父元素，即是行对象
                var $trObj = $(this).parent().parent();
                var name = $trObj.find("td:first").text();
                /**
                 * confirm时JS语言提供的一个确认提示框函数
                 * 传入什么，就提示什么
                 * 当用户点击了确定，则返回true，点击取消，返回false
                */
                if( confirm("确定要删除【"+name+"】吗？") ){
                   //这里删除的是哪一行根据this确定

                   $trObj.remove();
                }
                //return false可以阻止元素的默认行为，不加这个，a标签会默认跳转
                return false;

            });
        });
    </script>
</head>
<body>
    <table id="employeeTable" border="1">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>Operation</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>Jeer</td>
            <td>Jeer@jeer.com</td>
            <td>6000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>Bob@bob.com</td>
            <td>6000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>

    </table>
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table border="1">
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>

    </div>
</body>
</html>

注意：
补绑那里，可以优化成一个用于复用删除的function函数：

var deleteFun = function(){
...
}

16、jQuery-css样式操作

addClass() 添加样式
removeClass() 删除样式
toggleClass() 有则删除，无则添加样式
offset() 获取和设置元素的坐标

//获取：
$divEle = $("#div001");
//新增样式
$divEle.addClass('div.buleBorder');

var pos = $divEle.offset();
//打印到控制台看看，分别是左上顶点到页面上边界、左边界的距离
console.log(pos);

//设置
$divEle.offset({
	top:100,
	left:50
});

17、jQuery动画

基本动画

show()
将隐藏的元素显示
hide()
将可见的元素隐藏
toggle()
可见就隐藏，隐藏就可见

举例：

$(function(){
	$("#btn1").click(function(){
		$("#div1").show();
	});
});

以上动画方法都可以添加参数：

参数一：动画执行的时长，以ms为单位

$("#div1").show(5000);
//即慢动作5秒内显示

参数二：动画的回调函数，即动画完成后自动调用的函数

$("#div1").show(5000,function(){
	alert("show动画完成！");
});

//想要一直有隐藏出现的效果，可以用递归的思想实现：

var abc = function(){
	$("#div1").toggle(1000,abc);
}

淡入淡出动画

fadeln() 淡入（慢慢的可见）
fadeOut() 淡出（慢慢的消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定值
fadeToggle() 淡入、淡出互相切换

和基本动画一样，这里的函数也有两个参数，即时长和回调函数。

$(function(){
	$("#btn2").click(function(){
		$("#div1").fadeIn();
	});
});

//透明度，0不可见，1完全可见，0.5半透明...
$("#btn2").click(function(){
		$("#div1").fadeTo(2000,0.5);
});

动画练习—品牌展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta 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="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //初始页面：大于5的li全部隐藏，但不包括最后一个
            $("li:gt(5):not(:last)").hide();
            //给功能按钮绑定单击事件
            $("div div a").click(function(){
                //实现某些品牌的显示或隐藏
                $("li:gt(5):not(:last)").toggle();
                //is判断品牌当前是否被隐藏
                if( $("li:gt(5):not(:last)").is(":hidden") ){
                    $("div div span").text("显示全部品牌");
                    //改变class，匹配对应样式，从而更改图片
                    $("div div").removeClass();
                    $("div div").addClass("showmore");

                }else{
                    $("div div span").text("显示精简品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showless");
                    //加高亮
                    $("li:contains('三星')").addClass("promoted");
                }
                return false;
            });

        });
    </script>
</head>
<body>
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30400)</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>

运行效果：

18、jQuery事件

jQuery中，表示”页面加载完成之后“执行：

$(function(){

});

原生Js中则是：

window.οnlοad=function(){

}

🍁二者的触发时机：

jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行
原生JS的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。

<iframe src= "http://localhost:8080"></iframe>
<img src="http://localhost:8080/1.jpg" alt=""/>

所谓”等标签显示时需要的内容加载完成”，比如img标签显示需要src中的图片加载完成，比如iframe标签中的src页面加载完成。

可以看到，两个内容加载完成以后（加载失败也属于加载完成），JS页面加载完成之后的代码就紧跟着执行了。

🍁由此：二者的触发顺序是：

jQuery页面加载完成之后先执行
原生JS的页面加载完成之后的代码后执行

🍁有多个“页面加载完成之后”的代码块时，关于执行次数：

原生JS的页面加载完成之后，只会执行最后一次的赋值函数
jQuery的页面加载完成之后，是全部把注册的function函数，依次顺序全部执行

在jQuery中，表示DOM加载完成时运行的代码：

$(document).ready(function(){
//code
});

click()单击事件
mouseover()鼠标移入事件
mouseout()鼠标移出事件
bind()可以给元素一次性绑定一个或者多个事件
one()使用上跟bind一样，但one方法绑定的事件只响应一次
unbind()跟bind事件相反的操作，解除事件的绑定
live()可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效

❀❀❀❀小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("h5").click(function(){
                //click中传function是绑定事件
                alert("jQuery-h5单击事件");
            });
            $("button").click(function(){
                $("h5").click();  //不传function是触发事件
            });
            $("h4").mouseover(function(){
                console.log("鼠标移入");
            });
            $("h4").mouseout(function(){
                console.log("鼠标移出");
            });
            $("h5").bind("click mouseover mouseout",function(){
                console.log("一次给元素h5绑定多个事件，空格隔开");
            });
            $("h3").one("mouseover mouseout",function(){
                console.log("只触发一次");
            });
            $("h5").unbind("click mouseover");

            $("div").click(function(){
                alert("div");
            });
            //这个后来创建的div，上面直接用click绑定的事件无效
            $("<div>后来创建的div</div>").appendTo($("#001"));
            //使用live来绑定
            $("div").live("click",function(){
                alert("不管原有还是后来创建的div,都能触发了");
            });
        });

    </script>
</head>
<body>
<span id="001">
    <h5>jQuery事件</h5>
    <h4>鼠标移动事件</h4>
    <h3>one事件</h3>
    <button>按钮</button>
    <div>本来的div</div>
</span>

</body>
</html>

运行效果：

🍁事件的冒泡

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

在子元素事件的函数体中，使用return false；可以阻止事件的冒泡传递

🍁事件对象

事件对象，即封装有触发的事件信息的一个javaScript对象。

在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，常取event，event就是传递事件处理函数的事件对象

原生js获取事件对象

window.onload = function(){
	document.getElementById("001h").onclick = function(event){
	console.log(event);
	}
}

jQuery事件对象的获取

$("#001h").click(function(event){
	console.log(event);
});

参考之前的bind:

$("h5").bind("click mouseover mouseout",function(){
    console.log("一次给元素h5绑定多个事件，空格隔开");
});

对三个事件，执行的代码块都一样，要想实现不同的事件执行不同的代码块，则要依靠event：

$("h5").bind("click mouseover mouseout",function(event){
    console.log("event");
});

根据这个type值，实现：

$("h5").bind("click mouseover mouseout",function(event){
    if(event.type == "mouseover"){
    	console.log("移入");
    }else if(event.type == "mouseout"){
    	console.log("移出");
    }else{
    	console.log("点击");
    }
});

🍺🍺🍺🍺练习—图片跟随

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script>
    $(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({
                    left: event.pageX,
                    top: event.pageY
                });
            }
        });
    });
  </script>
</head>
<body>
    <img id="small" src="small.jpg"/>
    <div id="showBig">
        <img src="big.jpg"/>

    </div>
</body>
</html>