2018年5月

jQuery中的val()、text()、html()的区别

作者: 孙肖宁
时间: 2018-05-13
分类: 编程语言
评论

val()：获取标签中的value属性的值。带有参数是赋值(类比js中的value属性)。

text()：获取双闭合标签中的文本值。（不识别标签）(类比innerText)。

html()：获取双闭合标签中的文本值。（识别标签）(类比innerHTML)。

jQuery实现表格的全选和反选

作者: 孙肖宁
时间: 2018-05-12
分类: 编程语言
评论

描述：当点击全选是，选中下面全部的复选框，当复选框全部选中时，点击返现则取消选择，当复选框有没有选中的项的时候，全选按钮取消全选。使用的jquery的版本是1.8.
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选和反选 </title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $("#theadInp").click(function () {
                $("#tbody input:checkbox").prop("checked",$(this).prop("checked"));
            });
            $("#tbody input:checkbox").click(function () {
                if($("#tbody input:checkbox").length === $("#tbody input:checked").length){
                    $("#theadInp").prop("checked",true);
                }else {
                    $("#theadInp").prop("checked",false);
                }
            })
        });
    </script>
</head>
<body>
<div>
    <table>
        <thead>
        <tr>
            <th><input type="checkbox" id="theadInp"></th>
            <td>标题</td>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
        </tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

动态添加和删除表格数据

作者: 孙肖宁
时间: 2018-05-12
分类: 编程语言
评论

描述：当用户点击添加数据的时候，弹出一个模态框，其他位置不可点击，点击关闭按钮的时候，关闭模态框。当输入姓名或专业之后，点击添加，就会在表格里面添加一行数据，如果内容为空就不可以添加数据，就会弹出输入内容不能为空。当点击删除按钮的时候，则会删除当前行。jquery版本是1.8。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态添加和删除表格数据</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 410px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        td a.get {
            text-decoration: none;
        }

        a.del:hover {
            text-decoration: underline;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .form-item {
            height: 100%;
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
            line-height: 36px;
        }

        .form-item > .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

        .form-item > .txt {
            width: 300px;
            height: 32px;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            display: none;
        }

        .form-add {
            position: fixed;
            top: 30%;
            left: 50%;
            margin-left: -197px;
            padding-bottom: 20px;
            background: #fff;
            display: none;
        }

        .form-add-title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        .form-add-title span {
            width: auto;
            height: 18px;
            font-size: 16px;
            font-family: 宋体;
            font-weight: bold;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .form-add-title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .form-submit {
            text-align: center;
        }

        .form-submit input {
            width: 170px;
            height: 32px;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            //点击按钮显示遮罩层和添加数据表格
            $("#j_btnAddData").click(function () {
                $("#j_mask").show();
                $("#j_formAdd").show();
            });
            //点击里面的关闭按钮隐藏遮罩层和添加数据表格
            $("#j_hideFormAdd").click(function () {
                $("#j_mask").hide();
                $("#j_formAdd").hide();
            });
            //点击删除所在的标签，删除所在的tr
            $("a.get").click(function () {
                $(this).parent("td").parent("tr").remove();
            });
            //点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中
            //点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中
            $("#j_btnAdd").click(function () {
                if($("#j_txtLesson").val===""){
                    alert("内容不能为空");
                    return;
                }
                var tr = $("<tr></tr>");
                tr.html('<td>'+$("#j_txtLesson").val()+'</td><td>'+$("#j_txtBelSch").val()+'</td><td><a href="javascrip:;" class="get">删除</a></td>');
                $("#j_tb").append(tr);
                //新产生的tr没有时间绑定
                tr.find("a").click(function () {
                    tr.remove();
                });
                $("#j_mask").hide();
                $("#j_formAdd").hide();
                $("#j_txtLesson").val("");
            });

        })

    </script>
</head>
<body>
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
    </div>
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>专业</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>孙肖宁</td>
            <td>软件工程</td>
            <td><a href="javascrip:;" class="get">删除</a></td>
        </tr>
        <tr>
            <td>css</td>
            <td>小宁博客</td>
            <td><a href="javascrip:;" class="get">删除</a></td>
        </tr>
        <tr>
            <td>小宁</td>
            <td>软件工程</td>
            <td><a href="javascrip:;" class="get">删除</a></td>
        </tr>
        <tr>
            <td>小宁论坛</td>
            <td>软件工程</td>
            <td><a href="javascrip:;" class="get">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>
        <div id="j_hideFormAdd">x</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">姓名：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入姓名">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">专业：</label>
        <input class="txt" type="text" id="j_txtBelSch" value="软件工程">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>
</body>
</html>

屏幕右下角的广告的弹出和关闭

作者: 孙肖宁
时间: 2018-05-11
分类: 编程语言
评论

描述：当用户访问你的网页的时候，右下角缓慢弹出一个广告，并且随着页面的滑动与改变，时钟在同一位置。当鼠标点击关闭的时候，广告缓慢隐藏。（关闭按钮小编采用的是一张图片，广告也是一张图片）jquery的版本是1.8.
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕右下角的广告的弹出和关闭</title>
    <style type="text/css">
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(images/ad.jpg);
            display: none;
        }

        .ad span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(images/h.jpg);
            cursor: pointer;
        }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
        $(function () {
            $(".ad").slideUp(1000).fadeIn(1000).children("span").click(function () {
                $(this).parent().fadeOut(1000);
            })
        })
    </script>
</head>
<body>
<div class="ani">屏幕右下角的广告的弹出和关闭</div>
<div class="ad">
    <span></span>
</div>
</body>
</html>

具有动态效果的下拉菜单

作者: 孙肖宁
时间: 2018-05-11
分类: 编程语言
评论

描述：鼠标放在一级导航的时候。二级导航缓慢显示。鼠标离开之后，二级导航缓慢隐藏。鼠标经过的时候，如果二级菜单还没有完全打开或者隐藏，则或停止当前动画。使用的jQuery的版本是1.8的。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓慢下拉菜单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
        $(window).ready(function () {
            var jqli = $(".wrap>ul>li");
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(200);
            });
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(200);
            });
        })
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

jQuery写的tab栏切换

作者: 孙肖宁
时间: 2018-05-11
分类: 编程语言
评论

描述：鼠标经过上面的某一个栏目的时候，该栏目的上面的边框会变为红色加粗，而且下面的内容区域也会随着顶部的改变而改变。所有的改变均通过类名来实现（添加或者删除类）。jquery的版本是1.8
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏的切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }
        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }
        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }
        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }
        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }
        .products .main {
            float: left;
            display: none;
        }
        .products .main.selected {
            display: block;
        }
        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
        $(window).ready(function () {
            $(".tab>li").mouseenter(function () {
                $(this).addClass("active").siblings("li").removeClass("active");
                $(".products>div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>
</body>
</html>

jQuery动态生成表格

作者: 孙肖宁
时间: 2018-05-11
分类: 编程语言
评论

描述：当用户点击添加数据的时候，表格的内容会自动添加，点击之前，只有表头吗，没有内容，内容是从服务器中取到的。所有jQuery版本是1.8.
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态创建表格</title>
    <style>
        table {
            width: 500px;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th, td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            //模拟从后台拿到的数据
            var data = [{
                name:"孙肖宁",
                age:"20",
                hobby:"编程"
            },{
                name:"小宁",
                age:"22",
                hobby:"读书"
            }, {
                name:"小宁博客",
                age:"22",
                hobby:"读书"
            }];
            $("#j_btnGetData").click(function () {
                var ele = $("#j_tbData");
                add(ele,data);
            });
        });
        function add(ele,data) {
            var arr  = [];
            for (var i = 0;i<data.length;i++){
                arr.push("<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td><td>"+data[i].hobby+"</td></tr>");
            }
            var str = arr.toString();
            ele.html(str);
        }
    </script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData"/>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody id="j_tbData"></tbody>
</table>
</body>
</body>
</html>

属性操作

设置属性：

第一个参数表示：要设置的属性名称
第二个参数表示：改属性名称对应的值
$(selector).attr(“title”, “小宁博客”);

获取属性：
参数为：要获取的属性的名称，改操作会返回指定属性对应的值,返回指定属性的值
$(selector).attr(“title”);
移除属性：
参数为：要移除的属性的名称
$(selector).removeAttr(“title”);

注意：checked、selected、disabled要使用.prop()方法。prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。

值和内容

val()方法：
作用：设置或返回表单元素的值，例如：input,select,textarea的值.
获取匹配元素的值，只匹配第一个元素
$(selector).val();
设置所有匹配到的元素的值
$(selector).val(“具体值”);
text() 方法:
作用：设置或获取匹配元素的文本内容
获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
$(selector).text();
设置操作带参数，参数表示要设置的文本内容
$(selector).text(“我是内容”);

jQuery中的节点操作

作者: 孙肖宁
时间: 2018-05-09
分类: 编程语言
评论

动态创建元素

$()函数的另外一个作用：动态创建元素。
示例：

var $spanNode = $(“<span>我是一个span元素</span>”);
var node = $(“#box”).html（“<li>我是li</li>”）；

添加元素

在元素的最后一个子元素后面追加元素

append()

作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）
如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
常用参数：htmlString 或者 jQuery对象
示例代码：

$(selector).append($node);//在$(selector)中追加$node
$(selector).append('<div></div>');//在$(selector)中追加div元素，参数为htmlString

appendTo()

作用：同append()，区别是：把$(selector)追加到node中去
$(selector).appendTo(node);

prepend()

作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);

after()

作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);

before()

作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);

html创建元素

作用：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同

动态创建元素
$(selector).html(‘<span>传智播客</span>’);
获取html内容
$(selector).html();

清空元素

清空指定元素的所有子元素.

没有参数:

$(selector).empty();
$(selector).html(“”);

“自杀” 把自己（包括所有内部元素）从文档中删除掉

$(selector).remove();

复制元素

复制$(selector)所匹配到的元素
返回值为复制的新元素
$(selector).clone();
总结：推荐使用html(“”)方法来创建元素或者html(“”)清空元素

jQuery实现淘宝的广告展示

作者: 孙肖宁
时间: 2018-05-09
分类: 编程语言
评论

描述：该模块的两侧显示商品名称，中间显示商品的图片，鼠标经过两侧的那个商品名称，中间就显示那个商品的图片。所用jquery的版本是1.8
示例图片：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝的商品展示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

        #left li, #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a, #right li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover, #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
        $(function () {
            $("#left li").mouseenter(function () {
                $("#center li").eq($(this).index()).show().siblings("li").hide();
            });
            $("#right li").mouseenter(function () {
                $("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();
            });
        })
    </script>
</head>
<body>
<div class="wrapper">

    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>

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