小宁博客

具有动态效果的下拉菜单

作者: 孙肖宁
时间: 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>

jQuery中的动画

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

显示和隐藏动画

show方法

作用：让匹配的元素展示出来

用法一：
参数为数值类型，表示：执行动画时长
单位为：毫秒（ms），参数2000即2秒钟显示完毕
示例：$(selector).show(2000);

用法二：
参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
跟用法一的对应关系为：slow：600ms、normal：400ms、fast：200ms
示例：$(selector).show(“slow”);

用法三：
参数一可以是数值类型或者字符串类型。参数二表示：动画执行完后立即执行的回调函数。
示例：$(selector).show(2000, function() {});

用法四：
不带参数，作用等同于 css(“display”, ”block”)，注意：此时没有动画效果。
示例：$(selector).show();

hide方法

作用：让匹配元素隐藏掉
用法参考show方法。

滑入滑出动画

作用：让元素以下拉动画效果展示出来
示例：$(selector).slideDown(speed,callback);
用法参考show方法。
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

滑出动画效果

示例：$(selector).slideUp(speed,callback);

滑入滑出切换动画效果

示例:$(selector).slideToggle(speed,callback);

淡入淡出动画

淡入动画效果

作用：让元素以淡淡的进入视线的方式展示出来
示例：$(selector).fadeIn(speed, callback);

淡出动画效果

作用：让元素以渐渐消失的方式隐藏起来
示例：$(selector).fadeOut(1000);

淡入淡出切换动画效果

作用：通过改变透明度，切换匹配元素的显示或隐藏状态
示例：$(selector).fadeToggle('fast',function(){});

改变透明度到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
作用：调节匹配元素的不透明度
用法有别于其他动画效果
第一个参数表示：时长
第二个参数表示：不透明度值，取值范围：0-1
示例：$(selector).fadeTo(1000, .5); // 0全透，1全不透
第一个参数为0，此时作用相当于：.css(“opacity”, .5);
示例：$(selector).fadeTo(0, .5);

总结:

jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}
这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。

自定义动画

注意：所有能够执行动画的属性必须只有一个数字类型的值。比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font.

作用：执行一组CSS属性的自定义动画
第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后立即执行的回调函数（可选）
示例：$(selector).animate({params},speed,callback);

停止动画

方法：stop()
参数1：表示后续动画是否要执行，true:后续动画不执行 ;false:后续动画会执行。
参数2：数表示当前动画是否执行完，true:立即执行完成当前动画 ;false:立即停止当前动画。
示例：$(selector).stop(clearQueue,jumpToEnd);
都不给，默认false；

注意：

当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。

jQuery中的样式属性操作以及类操作

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

样式属性操作 .css()

作用：设置或获取元素的样式属性值。

设置样式属性操作：

a设置单个样式：

  $(selector).css(“color”, “red”);
  // 第一个参数表示：样式属性名称
  // 第二个参数表示：样式属性值

b设置多个样式：（也可以设置单个）

  // 参数为 {}（对象）
  $(selector).css({“color”: “red”, “font-size”: “30px”});

获取样式属性操作：
```
 // 参数表示要获取的 样式属性名称
 $(selector).css(“font-size”);
```
此时，会返回”font-size”样式属性对应的值。
类操作
添加类样式：
- addClass 为指定元素添加类className，注意：此处类名不带点，所有类操作的方法类名都不带点。$(selector).addClass(“liItem”);
移除类样式：removeClass(className) 为指定元素移除类 className`$(selector).removeClass(“liItem”);$(selector).removeClass(); 不指定参数，表示移除被选中元素的所有类。
判断有没有类样式：hasClass(calssName) 判断指定元素是否包含类 ,jquery对象中有一个带有类名的也是true，所有都不带才是false；className$(selector).hasClass(“liItem”);此时，会返回true或false。
切换类样式：
toggleClass(className) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。$(selector).toggleClass(“liItem”);