码迷，mamicode.com
首页 > Web开发 > 详细

05-jQuery介绍

时间：2018-08-18 17:36:52      阅读：244      评论：0      收藏：0      [点我收藏+]

标签：search   rap   技术分享   针对   lin   nload   gis   log   ice   

 

　　本篇主要介绍jQuery的加载、jquery选择器、jquery的样式操作、jQuery的事件、jquery动画等相关知识。

一、jQuery介绍

　　jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

　　jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。这个js文件可在 点击这里下载>>>；

 

二、jQuery文档加载完再执行

　　将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

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

</script>

// --------------------------------------------------
// 也可以这样简写
<script type="text/javascript">

$(function(){
     ......
});

</script>

 

三、jQuery选择器

　　3.1 jquery选择器

　　可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$(‘#myId‘) //选择id为myId的网页元素
$(‘.myClass‘) // 选择class为myClass的元素；
$(‘li‘) //选择所有的li元素，返回数组；
$(‘#ul1 li span‘) //选择id为为ul1元素下的所有li下的span元素
$(‘input[name=first]‘) // 选择name属性等于first的input元素

　　3.2 对选择器进行过滤

$(‘div‘).has(‘p‘); // 选择包含p元素的div元素
$(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素
$(‘div‘).eq(5); //选择第6个div元素

　　3.3 选择集转移 -- 这种方式十分好用；

$(‘#box‘).prev(); //选择id是box的元素前面紧挨的同辈元素
$(‘#box‘).prevAll(); //选择id是box的元素之前所有的同辈元素
$(‘#box‘).next(); //选择id是box的元素后面紧挨的同辈元素
$(‘#box‘).nextAll(); //选择id是box的元素后面所有的同辈元素
$(‘#box‘).parent(); //选择id是box的元素的父元素
$(‘#box‘).children(); //选择id是box的元素的所有子元素
$(‘#box‘).siblings(); //选择id是box的元素的同级元素
$(‘#box‘).find(‘.myClass‘); //选择id是box的元素内的class等于myClass的元素

　　3.4 判断是否选择元素

　　jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

var $div1 = $(‘#div1‘);
var $div2 = $(‘#div2‘);
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>

 

四、jQuery对html标签的操作

　4.1 对html标签的内容操作 

　　 html() ------- 取出或设置html内容

// 取出html内容
var $htm = $(‘#div1‘).html();

// 设置html内容
$(‘#div1‘).html(‘<span>添加文字</span>‘);

　4.2  对html标签的属性操作

　　prop() ------- 取出或设置某个属性的值

// 取出图片的地址
var $src = $(‘#img1‘).prop(‘src‘);

// 设置图片的地址和alt属性
$(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" });

　4.3 对html样式的操作

　　①、css() -------  取出或者设置样式的值

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

　　注：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

　　②、操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

 

五、绑定事件

　　5.1、绑定事件的方法

$(‘#btn1‘).click(function(){

    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)
})

　　获取元素的索引值：index（）方法；

　　5.2、常见的事件有：

　blur() 元素失去焦点
　focus() 元素获得焦点
　click() 鼠标单击
　mouseover() 鼠标进入（进入子元素也触发）
　mouseout() 鼠标离开（离开子元素也触发）
　mouseenter() 鼠标进入（进入子元素不触发）
　mouseleave() 鼠标离开（离开子元素不触发）
　hover() 同时为mouseenter和mouseleave事件指定处理函数
　ready() DOM加载完成
　submit() 用户递交表单

 

 六、jQuery动画

　　6.1 animate()

　　通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

/*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数

*/
$(‘#div1‘).animate({
    width:300,
    height:300
},1000,‘swing‘,function(){
    alert(‘done!‘);
});

　　6.2 jQuery特殊方法 

　　例如：fadeIn() 方法也可以如上animate() 方法进行使用，例如：

 $btn.click(function(){
     $(‘#div1‘).fadeIn(1000,‘swing‘,function(){
            alert(‘done!‘);
      });
 });

　　其他特殊方法如下：

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

　总结其实做网页动效，则可以有以下流程：

　　1、首先我们需要知道要做的效果是什么样的，即针对什么对象，做什么操作，将会得到什么效果；

　　2、针对什么对象：获得对象，例如：var $box = $(‘.box‘)

　　3、做什么操作：即事件，$box.click()

　　4、想要得到什么效果，即函数，$box.click(function(){   alert(‘hello world‘)   })；

 

七、jQuery链式调用

　　jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$(‘#div1‘) // id为div1的元素
.children(‘ul‘) //该元素下面的ul子元素
.slideDown(‘fast‘) //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children(‘ul‘) //这些兄弟元素中的ul子元素
.slideUp(‘fast‘);  //高度实际高度变换到零来隐藏ul元素

　　

八、案例--表单验证

　　美多商城案例

技术分享图片 
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-注册</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/register3.js"></script>
</head>
<body>
    <div class="register_con">
        <div class="l_con fl">
            <a class="reg_logo"><img src="images/logo02.png"></a>
            <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
            <div class="reg_banner"></div>
        </div>

        <div class="r_con fr">
            <div class="reg_title clearfix">
                <h1>用户注册</h1>
                <a href="#">登录</a>
            </div>
            <div class="reg_form clearfix">
                <form>
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" name="user_name" id="user_name">
                        <span class="error_tip">提示信息</span>
                    </li>                    
                    <li>
                        <label>密码:</label>
                        <input type="password" name="pwd" id="pwd">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" name="cpwd" id="cpwd">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>邮箱:</label>
                        <input type="text" name="email" id="email">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li class="agreement">
                        <input type="checkbox" name="allow" id="allow" checked="checked">
                        <label>同意”美多商城用户使用协议“</label>
                        <span class="error_tip2">提示信息</span>
                    </li>
                    <li class="reg_sub">
                        <input type="submit" value="注 册" name="">
                    </li>
                </ul>                
                </form>
            </div>

        </div>

    </div>

    <div class="footer no-mp">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>        
        </div>
        <p>CopyRight ? 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
    
</body>
</html>
html
技术分享图片 
$(function(){

    var user_error = false,
        passwd_error = false,
        cpwd_error = false,
        email_error = false,
        check_error = true;

    // 判断用户名
    // 当获取焦点时，隐藏提示信息；失去焦点时，显示提示信息
    $(‘#user_name‘).blur(function(){
        user_error = false;
        fnUserName();
    }).click(function(){
        $(this).next().hide();
    })

    function fnUserName(){
        var reUser = /^\w{6,20}$/;
        var user_value = $(‘#user_name‘).prop(‘value‘);

        // 提示信息：若输入内容正确，则不显示提示信息，若输入的内容不正确，则显示提示信息
        if(user_value ==‘‘){
            $(‘#user_name‘).next().html(‘用户名不能为空‘).show();
            return;
        }
        if(reUser.test(user_value) == false){
            $(‘#user_name‘).next().html(‘用户名须为6-20位字母、数字或者下划线！‘).show();
        }
        else{
            $(‘#user_name‘).next().hide();
            user_error= true;
        }

    }

    
    // 判断密码
    $(‘#pwd‘).blur(function(){
        passwd_error =false;
        fnPasswd();
    }).click(function(){
        $(this).next().hide()
    })

    function fnPasswd(){
        var rePass = /^[\w!@#$%^&*]{6,20}$/;
        var pwdValue = $(‘#pwd‘).val();

        if(pwdValue==‘‘){
            $(‘#pwd‘).next().show().html(‘密码不能为空‘);
            return
        }
        if(rePass.test(pwdValue)==false){
            $(‘#pwd‘).next().show().html(‘密码必须为6-20位!!‘);
        }
        else{
            $(‘#pwd‘).next().hide()
            passwd_error = true;
        }

    }    

    // 判断再次输入的密码是否与上次相同
    $(‘#cpwd‘).blur(function(){
        cpwd_error =false;
        fnCpwd();
    }).click(function(){
        $(this).next().hide();
    })

    function fnCpwd(){
        var cpwd_value = $(‘#cpwd‘).val();
        var pwd_Value = $(‘#pwd‘).val();
        if(cpwd_value == ‘‘){
            $(‘#cpwd‘).next().show().html(‘确认密码不能为空!‘);
            return;
        }
        if(cpwd_value == pwd_Value){
            $(‘#cpwd‘).next().hide();
            cpwd_error = true;
        }
        else{
            $(‘#cpwd‘).next().show().html(‘两次输入的密码不一致!‘)
        }

    }

    // 判断邮箱
    $(‘#email‘).click(function(){
        $(this).next().hide()
    }).blur(function(){
        email_error =false;
        fnEmail();
    })

    function fnEmail(){
        var email_value = $(‘#email‘).val();
        var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

        if(email_value == ‘‘){
            $(‘#email‘).next().show().html(‘邮箱不能为空!‘)
            return;
        }

        if(reMail.test(email_value)){
            $(‘#email‘).next().hide();
            email_error = true;
        }
        else{
            $(‘#email‘).next().show().html(‘邮箱的格式不正确!‘)
            return;
        }

    }

    // 判断是否同意协议
    $(‘#allow‘).click(function(){
        var check_value = $(‘#allow‘).prop(‘checked‘);
        if(check_value==true){
            $(‘#allow‘).next().next().hide();
            check_error = true;
        }
        else{
            $(‘#allow‘).next().next().show().html(‘不同意美多商城用户使用协议无法注册哦‘)
            check_error = false;
        }

    })
    //var user_error = false,
        // passwd_error = false,
        // cpwd_error = false,
        // email_error = false,
        // check_error = true;
    $(‘.reg_form form‘).submit(function(){
        if (user_error == true && passwd_error==true && cpwd_error==true &&email_error==true && check_error==true) {

            alert(‘注册成功‘)
            return true;
        }
        else{
            alert(‘注册失败‘)
            return false;
        }
    
    })
    
})
js
技术分享图片 
body{font-family:‘Microsoft Yahei‘;font-size:12px;color:#666;}
html,body{height:100%}
/* 顶部样式 */
.header_con{
    background-color:#f7f7f7;
    height:29px;
    border-bottom:1px solid #dddddd
}

.header{
    width:1200px;
    height:29px;
    margin:0 auto;
}

.welcome,.login_info,.login_btn,.user_link{
    line-height:29px;
}

.login_info{
    display:none;
}

.login_info em{color:#ff8800}

.login_btn a,.user_link a{
    color:#666;
}

.login_btn a:hover,.user_link a:hover{
    color:#ff8800;
}

.login_btn span,.user_link span{
    color:#cecece;
    margin:0 10px;
}


/* logo、搜索框、购物车样式 */

.search_bar{width:1200px;height:115px;margin:0 auto;}
.logo{width:150px;height:59px;margin:29px 0 0 17px;}

.search_con{width:616px;height:38px;border:1px solid #37ab40;margin:34px 0 0 124px;background:url(../images/icons.png) 10px -338px no-repeat;}
.search_con .input_text{width:470px;height:34px;border:0px;margin:2px 0 0 36px;outline:none;font-size:12px;color:#737272;font-family:‘Microsoft Yahei‘}

.search_con .input_btn{
    width:100px;height:38px;background-color:#37ab40;border:0px;font-size:14px;color:#fff;font-family:‘Microsoft Yahei‘;outline:none;cursor:pointer;
}

.guest_cart{
    width:200px;height:40px;margin-top:34px;
}

.guest_cart .cart_name{
    width:158px;height:38px;line-height:38px;border:1px solid #dddddd;display:block;background:url(../images/icons.png) 13px -300px no-repeat;font-size:14px;color:#37ab40;text-indent:56px;
}

.guest_cart .goods_count{
    width:40px;height:40px;text-align:center;line-height:40px;font-size:18px;
    font-weight:bold;color:#fff;background-color:#ff8800;
}


/* 菜单、幻灯片样式 */

.navbar_con{height:40px;border-bottom:2px solid #39a93e}
.navbar{width:1200px;margin:0 auto;}
.navbar h1{width:200px;height:40px;line-height:40px;text-align: center;font-size:14px;color:#fff;background-color:#39a93e;}

.navbar .subnav_con{width:200px;height:40px;background-color:#39a93e;position:relative;cursor:pointer;}

.navbar .subnav_con h1{position:absolute;left:0;top:0;text-align:left;text-indent:40px}
.navbar .subnav_con span{display:block;width:16px;height:9px;background:url(../images/down.png) no-repeat;position:absolute;right:27px;top:16px;transition:all 300ms ease-in;
}

.navbar .subnav_con:hover span{transform:rotateZ(180deg)}

.navbar .subnav_con .subnav{position:absolute;left:0;top:40px;display:none;border-top:2px solid  #39a93e;}
.navbar .subnav_con:hover .subnav{display:block;}


.navlist{margin-left:34px;}
.navlist li{height:40px;float:left;line-height:40px;}
.navlist li a{color:#666;font-size:14px}
.navlist li a:hover{color:#ff8800}
.navlist .interval{margin:0 15px;}


.center_con{width:1200px;height:270px;margin:0 auto;}
.subnav{width:198px;height:270px;border-left:1px solid #eee;border-right:1px solid #eee;}
.subnav li{height:44px;border-bottom:1px solid #eee;background:url(../images/icons.png) 178px -257px no-repeat #fff;}

.subnav li a{display:block;height:44px;line-height:44px;text-indent:71px;font-size:14px;color:#333}
.subnav li a:hover{color:#ff8800}

.subnav li .fruit{background:url(../images/icons.png) 28px 0px no-repeat;}
.subnav li .seafood{background:url(../images/icons.png) 28px -43px no-repeat;}
.subnav li .meet{background:url(../images/icons.png) 28px -86px no-repeat;}
.subnav li .egg{background:url(../images/icons.png) 28px -132px no-repeat;}
.subnav li .vegetables{background:url(../images/icons.png) 28px -174px no-repeat;}
.subnav li .ice{background:url(../images/icons.png) 28px -220px no-repeat;}


.slide{width:760px;height:270px;position:relative;overflow:hidden;}
.slide .slide_pics{position:relative;left:0;top:0;width:760px;height:270px;}
.slide .slide_pics li{width:760px;height:270px;position:absolute;left:0;top:0}
.slide .prev,.slide .next{width:17px;height:23px;background:url(../images/icons.png) left -388px no-repeat;position:absolute;left:11px;top:122px;cursor:pointer;}
.slide .next{background-position:left -428px;left:732px;}
.points{width:100%;height:11px;position:absolute;left:0;top:250px;text-align:center;}
.points li{display:inline-block;width:11px;height:11px;margin:0 5px;background-color:#9f9f9f;border-radius:50%;cursor:pointer;}
.points li.active{background-color:#cecece}

.adv{width:240px;height:270px; overflow:hidden; background-color:gold;}
.adv a{display:block;float:left;}


/* 商品列表样式 */

.list_model{width:1200px;height:340px;margin:15px auto 0;}
.list_title{height:40px;border-bottom:2px solid #42ad46}
.list_title h3{height:40px;line-height:40px;font-size:16px;color:#37ab40;font-weight:bold;}
.list_title .subtitle{height:20px;line-height:20px;margin-top:15px;}
.list_title .subtitle span{color:#666;margin:0 10px 0 20px;}
.list_title .subtitle a{color:#666;margin:0 5px;}
.list_title .subtitle a:hover,.goods_more:hover{color:#ff8800}
.goods_more{height:20px;margin-top:15px;color:#666}

.goods_con{height:300px;}
.goods_banner{width:200px;height:300px;}
.goods_banner img{width:200px;height:300px;}

.goods_list{width:1000px;height:299px;border-bottom:1px solid #ededed}
.goods_list li{height:299px;width:249px;border-right:1px solid #ededed;float:left}
.goods_list li:hover{width:248px;height:297px;border:1px solid gold;}
.goods_list li:hover img{opacity:0.8}

.goods_list li h4{width:200px;height:50px;margin:20px auto 0;text-align:center;}
.goods_list li h4 a{font-size:14px;color:#666;font-weight:normal;line-height:24px;}
.goods_list li h4 a:hover{color:#ff8800}

.goods_list li img{display:block;width:180px;height:180px;margin:0 auto;}
.goods_list li .prize{text-align:center;font-size:20px;color:#c40000;margin-top:5px;}

/* 页面底部样式 */
.footer{
    border-top:1px solid #fe0000;
    margin:30px 0;
}

.foot_link{text-align:center;margin-top:30px;}
.foot_link a,.foot_link span{color:#4e4e4e;}
.foot_link a:hover{color:#ff8800}
.foot_link span{padding:0 10px}
.footer p{text-align:center; margin-top:10px;}


/* 二级页面面包屑导航 */
.breadcrumb{
    width:1200px;height:40px;margin:0 auto;
}
.breadcrumb a{line-height:40px;color:#37ab40}
.breadcrumb a:hover{color:#ff8800}
.breadcrumb span{line-height:40px;color:#666;padding:0 5px;}


.main_wrap{width:1200px;margin:0 auto;}
.l_wrap{width:200px;}
.r_wrap{width:980px;}


/* 新品推荐样式 */

.new_goods{
    border:1px solid #ededed;
    border-top:2px solid #37ab40;
    padding-bottom:10px;
}

.new_goods h3{
    height:33px;line-height:33px;background-color:#fcfcfc;border-bottom:1px solid #ededed;font-size:14px;font-weight:normal;text-indent:10px;
}

.new_goods ul{width:160px;margin:0 auto;overflow:hidden;}
.new_goods li{border-bottom:1px solid #ededed;margin-bottom:-1px;}
.new_goods li img{display:block;width:150px;height:150px;margin:10px auto;}
.new_goods li h4{width:160px;margin:0 auto;}
.new_goods li h4 a{font-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.new_goods li .prize{font-size:14px;color:#da260e;margin:10px auto;}



/* 商品列表样式 */

.sort_bar{height:30px;background-color:#f0fdec}
.sort_bar a{display:block;height:30px;line-height:30px;padding:0 20px;float:left;color:#000}
.sort_bar .active{background-color:#37ab40;color:#fff;}


.goods_type_list{
    margin:10px auto 0;
}

.goods_type_list li{
    width:196px;
    float:left;
    margin-bottom:10px
}

.goods_type_list li img{width:160px;height:160px;display:block;margin:10px auto;}
.goods_type_list li h4{width:160px;margin:0 auto;}
.goods_type_list li h4 a{font-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.operate{width:160px;margin:10px auto;position:relative;}
.goods_type_list .operate .prize{color:#da260e; font-size:14px;} 
.goods_type_list .operate .unit{color:#999;padding-left:5px;}
.goods_type_list .operate .add_goods{display:inline-block;width:15px;height:15px;background:url(../images/shop_cart.png);position:absolute;right:0;top:3px;}


/* 分页样式 */

.pagenation{height:32px;text-align:center;font-size:0;margin:30px auto;}
.pagenation a{display:inline-block;border:1px solid #d2d2d2;background-color:#f8f6f7;font-size:12px;padding:7px 10px;color:#666;margin:5px}

.pagenation .active{background-color:#fff;color:#43a200}


/* 商品详情样式 */
.goods_detail_con{
    width:1198px;
    height:398px;
    border:1px solid #ededed;
    margin:0 auto 20px;
}

.goods_detail_pic{width:350px;height:350px;margin:24px 0 0 24px;}
.goods_detail_list{
    width:730px;height:350px;margin:24px 24px 0 0;
}
.goods_detail_list h3{font-size:24px;line-height:24px;color:#666;font-weight:normal;}
.goods_detail_list p{color:#666;line-height:40px;}
.prize_bar{height:72px;background-color:#fff5f5;line-height:72px;}
.prize_bar .show_pirze{font-size:20px;color:#ff3e3e;padding-left:20px}
.prize_bar .show_pirze em{font-style:normal;font-size:36px;padding-left:10px}
.prize_bar .show_unit{padding-left:150px}

.goods_num{height:52px;margin-top:19px;}
.goods_num .num_name{width:70px;height:52px;line-height:52px;}
.goods_num .num_add{width:75px;height:50px;border:1px solid #dddddd}
.goods_num .num_add input{width:49px;height:50px;text-align:center;line-height:50px;border:0px;outline:none;font-size:14px;color:#666}
.goods_num .num_add .add,.goods_num .num_add .minus{width:25px;line-height:25px;text-align:center;border-left:1px solid #ddd;border-bottom:1px solid #ddd;color:#666;font-size:14px}
.goods_num .num_add .minus{border-bottom:0px}

.total{height:35px;line-height:35px;margin-top:25px;}
.total em{font-style:normal;color:#ff3e3e;font-size:18px}

.operate_btn{height:40px;margin-top:35px;font-size:0;position:relative;}
.operate_btn .buy_btn,.operate_btn .add_cart{display:inline-block;width:178px;height:38px;border:1px solid #c40000;font-size:14px;color:#c40000;line-height:38px;text-align:center;background-color:#ffeded;}
.operate_btn .add_cart{background-color:#c40000;color:#fff;margin-left:10px;position:relative;z-index:10;}

.add_jump{width:20px;height:20px;background-color:#c40000;position:absolute;left:268px;top:10px;border-radius:50%;z-index:9;display:none;}

.detail_tab{
    height:35px;
    border-bottom:1px solid #37ab40
}

.detail_tab li{height:34px;line-height:34px;padding:0 30px;font-size:14px;color:#333333;float:left;border:1px solid #e8e8e8;border-bottom:0px;cursor:pointer;background-color:#faf8f8}

.detail_tab li.active{border-top:2px solid #37ab40;position:relative;background-color:#fff;border-left:1px solid #37ab40;border-right:1px solid #37ab40;top:-1px;height:35px;}

.tab_content dt{margin-top:10px;font-size:16px;color:#044d39}
.tab_content dd{line-height:24px;margin-top:5px;}


/* 登录页 */

.login_top{width:960px;height:130px;margin:0 auto;}
.login_logo{display:block;width:193px;height:76px;margin-top:30px;}
.login_form_bg{height:480px;background-color:#518e17}
.no-mp{margin-top:0px;}
.login_form_wrap{width:960px;height:480px;margin:0 auto;}
.login_banner{width:381px;height:322px;background:url(../images/login_banner.png) no-repeat;margin-top:90px;}
.slogan{width:40px;height:300px;font-size:30px;color:#f0f9e8;text-align:center;line-height:36px;margin:80px 0 0 120px}
.login_form{width:368px;height:378px;border:1px solid #c6c6c5;background-color:#fff; margin-top:50px;}

.login_title{height:60px;width:308px;margin:10px auto;border-bottom:1px solid #e0e0e0;}

.login_title h1{font-size:24px;height:60px;line-height:60px;color:#a8a8a8;float:left;font-weight:bold;margin-left:44px;}
.login_title a{width:100px;height:20px;display:block;font-size:16px;color:#5fb42a;text-indent:26px;background:url(../images/icons02.png) left 5px no-repeat;float:left;margin:20px 0 0 36px}

.form_input{width:308px;height:250px;margin:20px auto;position:relative;}
.name_input,.pass_input{width:306px;height:36px;border:1px solid #e0e0e0;background:url(../images/icons02.png) 280px -41px no-repeat #f8f8f8;outline:none;font-size:14px;text-indent:10px;position: absolute;left:0;top:0}
.pass_input{top:65px;background-position:280px -95px;}

.user_error,.pwd_error{color:#f00;position:absolute;left:0;top:43px;display:none}

.pwd_error{top:110px;}

.more_input{position:absolute;left:0;top:130px;width:100%}

.more_input input{float:left;margin-top:2px;}
.more_input label{float:left;margin-left:10px;}
.more_input a{float:right;color:#666}
.more_input a:hover{color:#ff8800}

.input_submit{width:100%;height:40px;position:absolute;left:0;top:180px;background-color:#47aa34;color:#fff;font-size:22px;border:0px;font-family:‘Microsoft Yahei‘;cursor:pointer;}


/* 注册页面 */
.register_con{
    width:700px;
    height:560px;
    margin:50px auto 0;
    background:url(../images/interval_line.png) 300px top no-repeat;
}

.l_con{width:300px;}
.reg_logo{width:200px;height:76px;float:right;margin-right:30px;}
.reg_slogan{width:300px;height:30px;float:right;text-align:right;font-size:24px;color:#fe0000;margin:20px 30px 0 0;}
.reg_banner{width:251px;height:329px;background:url(../images/register_banner.png) no-repeat;float:right; margin:20px 10px 0 0;opacity:0.5}


.r_con{width:400px;}
.reg_title{width:360px;height:50px;float:left;margin-left:30px;border-bottom:1px solid #e0e0e0}
.reg_title h1{height:50px;line-height:50px;float:left;font-size:24px;color:#a8a8a8;font-weight:bold;}
.reg_title a{float:right;height:20px;line-height:20px;font-size:16px;color:#fe0000;padding-right:20px;background:url(../images/icons02.png) 35px 3px no-repeat;margin-top:15px}

.reg_form{width:360px;margin:30px 0 0 30px;float:left;position:relative;}
.reg_form li{height:70px;}
.reg_form li label{width:70px;height:40px;line-height:40px;float:left;font-size:14px;color:#a8a8a8}
.reg_form li input{width:288px;height:38px;border:1px solid #e0e0e0;float:left;outline:none;text-indent:10px;background-color:#f8f8f8}
.reg_form li.agreement input{width:15px;height:15px;float:left;margin-top:13px}
.reg_form li.agreement label{width:300px;float:left;margin-left:10px;}
.reg_form li.reg_sub input{width:360px;height:40px;background-color:#ff5757;font-size:18px;color:#fff;font-family:‘Microsoft Yahei‘;cursor:pointer;}
.reg_form li .error_tip{float:left;height:30px;line-height:30px;margin-left:70px;color:#e62e2e;display:none;}
.reg_form li .error_tip2{float:left;height:20px;line-height:20px;color:#e62e2e;display:none;}


.sub_page_name{font-size:18px;color:#666;margin:50px 0 0 20px}

.total_count{
    width:1200px;margin:0 auto;height:40px;line-height:40px;font-size:14px;
}
.total_count em{
    font-size:16px;color:#ff4200;margin:0 5px;
}

.cart_list_th{width:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:0 auto;}
.cart_list_th li{height:40px;line-height:40px;float:left;text-align:center;}
.cart_list_th .col01{width:26%;}
.cart_list_th .col02{width:16%;}
.cart_list_th .col03{width:13%;}
.cart_list_th .col04{width:12%;}
.cart_list_th .col05{width:15%;}
.cart_list_th .col06{width:18%;}

.cart_list_td{width:1198px;border:1px solid #ddd;background-color:#edfff9;margin:0 auto;margin-top:-1px;}
.cart_list_td li{height:120px;line-height:120px;float:left;text-align:center;}

.cart_list_td .col01{width:4%;}
.cart_list_td .col02{width:12%;}
.cart_list_td .col03{width:10%;}
.cart_list_td .col04{width:16%;}
.cart_list_td .col05{width:13%;}
.cart_list_td .col06{width:12%;}
.cart_list_td .col07{width:15%;}
.cart_list_td .col08{width:18%;}

.cart_list_td .col02 img{width:100px;height:100px;border:1px solid #ddd;display:block;margin:10px auto 0;}
.cart_list_td .col03{height:48px;text-align:left;line-height:24px;margin-top:38px;}
.cart_list_td .col03 em{color:#999}
.cart_list_td .col08 a{color:#666}

.cart_list_td .col06 .num_add{width:98px;height:28px;border:1px solid #ddd;margin:40px auto 0;}
.cart_list_td .col06 .num_add a{width:29px;height:28px;line-height:28px;background-color:#f3f3f3;font-size:14px;color:#666}
.cart_list_td .col06 .num_add input{width:38px;height:28px;text-align:center;line-height:30px;border:0px;display:block;float:left;outline:none;border-left:1px solid #ddd;border-right:1px solid #ddd;}


.settlements{width:1198px;height:78px;border:1px solid #ddd;background-color:#fff4e8;margin:-1px auto 0;}
.settlements li{line-height:78px;float:left;}
.settlements .col01{width:4%;text-align:center}
.settlements .col02{width:12%;}
.settlements .col03{width:69%; height:48px; line-height:28px;text-align:right;margin-top:10px;}
.settlements .col03 span{color:#ff0000;padding-right:5px}
.settlements .col03 em{color:#ff3d3d;font-size:22px;font-weight:bold;}
.settlements .col03 span{color:#ff0000;}
.settlements .col03 b{color:#ff0000;font-size:14px;padding:0 5px;}

.settlements .col04{width:14%;text-align:center;float:right;}
.settlements .col04 a{display:block;height:78px;background-color:#ff3d3d;text-align:center;line-height:78px;color:#fff;font-size:24px}


.common_title{width:1200px;margin:20px auto 0;font-size:14px;}

.common_list_con{width:1200px;border:1px solid #dddddd;border-top:2px solid #00bc6f;margin:10px auto 0;background-color:#f7f7f7;position:relative;}

.common_list_con dl{margin:20px;}
.common_list_con dt{font-size:14px;font-weight:bold;margin-bottom:10px}
.common_list_con dd input{vertical-align:bottom;margin-right:10px}

.edit_site{position:absolute; right:20px;top:30px;width:100px;height:30px;background-color:#37ab40;text-align:center;line-height:30px;color:#fff}

.pay_style_con{margin:20px;}
.pay_style_con input{float:left;margin:14px 7px 0 0;}
.pay_style_con label{float:left;border:1px solid #ccc;background-color:#fff;padding:10px 10px 10px 40px;margin-right:25px}

.pay_style_con .cash{background:url(../images/pay_icons.png) 8px top no-repeat #fff;}
.pay_style_con .weixin{background:url(../images/pay_icons.png) 6px -36px no-repeat #fff;}

.pay_style_con .zhifubao{background:url(../images/pay_icons.png) 12px -72px no-repeat #fff;width:50px;height:16px}

.pay_style_con .bank{background:url(../images/pay_icons.png) 6px -108px no-repeat #fff;}


.goods_list_th{height:40px;border-bottom:1px solid #ccc}
.goods_list_th li{float:left;line-height:40px;text-align:center;}
.goods_list_th .col01{width:25%}
.goods_list_th .col02{width:20%}
.goods_list_th .col03{width:25%}
.goods_list_th .col04{width:15%}
.goods_list_th .col05{width:15%}

.goods_list_td{height:80px;border-bottom:1px solid #eeeded}
.goods_list_td li{float:left;line-height:80px;text-align:center;}
.goods_list_td .col01{width:4%}
.goods_list_td .col02{width:6%}
.goods_list_td .col03{width:15%}
.goods_list_td .col04{width:20%}
.goods_list_td .col05{width:25%}
.goods_list_td .col06{width:15%}
.goods_list_td .col07{width:15%}

.goods_list_td .col02{text-align:right}
.goods_list_td .col02 img{width:63px;height:63px;border:1px solid #ddd;display:block;margin:7px 0;float:right;}
.goods_list_td .col03{text-align:left;text-indent:20px}


.settle_con{margin:10px}
.total_goods_count,.transit,.total_pay{line-height:24px;text-align:right}
.total_goods_count em,.total_goods_count b,.transit b,.total_pay b{font-size:14px;color:#ff4200;padding:0 5px;}

.order_submit{width:1200px;margin:20px auto;}
.order_submit a{width:160px;height:40px;line-height:40px;text-align:center;background-color:#47aa34;color:#fff;font-size:16px;display:block;float:right}


.order_list_th{width:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:20px auto 0;}
.order_list_th li{float:left;height:30px;line-height:30px}
.order_list_th .col01{width:20%;margin-left:20px}
.order_list_th .col02{width:20%}


.order_list_table{
    width:1200px;
    border-collapse:collapse;
    border-spacing:0px;
    border:1px solid #ddd;
    margin:-1px auto 0;
}

.order_list_table td{
    border:1px solid #ddd;    
    text-align:center;
}

.order_goods_list{border-bottom:1px solid #ddd;margin-bottom:-2px;}
.order_goods_list li{float:left; height:80px;line-height:80px;}
.order_goods_list .col01{width:20%}
.order_goods_list .col01 img{width:60px;height:60px;border:1px solid #ddd;margin:10px auto;}
.order_goods_list .col02{width:50%;text-align:left;}
.order_goods_list .col02 em{color:#999;margin-left:10px}
.order_goods_list .col03{width:10%}
.order_goods_list .col04{width:20%}

.oper_btn{display:inline-block;border:1px solid #ddd;color:#666;padding:5px 10px}

.popup_con{display:none;}
.popup{width:300px;height:150px;border:1px solid #dddddd;border-top:2px solid #00bc6f;background-color:#f7f7f7;position:fixed;
    left:50%;
    margin-left:-150px;
    top:50%;
    margin-top:-75px;
    z-index:1000;
}

.popup p{height:150px;line-height:150px;text-align:center;font-size:18px;}

.mask{width:100%;height:100%;position:fixed;left:0;top:0;background-color:#000;opacity:0.3;z-index:999;}


.main_con{
    width:1200px;
    margin:0 auto;
    background:url(../images/left_bg.jpg) repeat-y;
}

.left_menu_con{
    width:200px;
    float:left;
}

.left_menu_con h3{
    font-size:16px;
    line-height:40px;
    border-bottom:1px solid #ddd;
    text-align:center;
    margin-bottom:10px;
}

.left_menu_con ul li{
    line-height:40px;
    text-align:center;
    font-size:14px;
}

.left_menu_con ul li a{
    color:#666;
}

.left_menu_con ul li .active{
    color:#ff8800;
    font-weight:bold;
}

.right_content{
    width:980px;
    float:right;
    min-height:500px;
}

.w980{
    width:980px;
}

.w978{
    width:978px;
}


.common_title2{height:20px;line-height:20px;font-size:16px;margin:10px 0;}
.user_info_list{
    background-color:#f9f9f9;
    margin:10px 0 15px;
    padding:10px 0;
    height:90px;
}

.user_info_list li{
    line-height:30px;
    text-indent:30px;
    font-size:14px;
}

.user_info_list li span{
    width:100px;
    float:left;
    text-align:right;
}

.info_con{
    width:980px;
}

.info_l{
    width:600px;
    float:left;
}

.info_r{
    width:360px;
    float:right;
}

.site_con{
    background-color:#f9f9f9;
    padding:10px 0;
    margin-bottom:20px;
}

.site_con dt{
    font-size:14px;
    line-height:30px;
    text-indent:30px;
    font-weight:bold;
}

.site_con dd{
    font-size:14px;
    line-height:30px;
    text-indent:30px;
}

.site_con .form_group{
    height:40px;
    line-height:40px;
    margin-top:10px;
}

.site_con .form_group label{
    width:100px;
    float:left;
    text-align:right;
    font-size:14px;
    height:40px;
    line-height:40px;
}

.site_con .form_group input{
    width:300px;
    height:25px;
    border:1px solid #ddd;
    float:left;
    outline:none;
    margin-top:7px;
    text-indent:10px;
}

.site_con .form_group2{
    height:90px;
}

.site_area{
    width:280px;
    height:60px;
    border:1px solid #ddd;
    outline:none;
    padding:10px;
}
.info_submit{
    width:80px;
    height:30px;
    background-color:#37ab40;
    border:0px;
    color:#fff;
    margin:10px 0 10px 100px;
    cursor:pointer;
    font-family:‘Microsoft Yahei‘
}

.stress{
    color:#ff8800;
}
main.css
技术分享图片 
/* 把标签默认的间距设为0 */
body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}

/* 让h标签文字大小继承body的文字设置 */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

/* 去掉列表默认的图标 */
ul,ol{list-style:none;}

/* 去掉em默认的斜体 */
em{font-style: normal;}

/* 去掉a标签默认的下划线 */
a{text-decoration:none;}


/* 去掉加链接时产生的框线 */
img{border:0;}

/* 清除浮动 */
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both;}
.clearfix{zoom:1}

/* 浮动 */
.fl{float:left}
.fr{float:right}
reset.css

图片资源

　　还是大家自己获取吧~~~~~~~~~~~~~~

 

 

　　Over~~~下篇介绍关于jQuery的冒泡事件、委托事件等~~~~~~~~~

 

 

 

　　

05-jQuery介绍

标签：search   rap   技术分享   针对   lin   nload   gis   log   ice   

原文地址：https://www.cnblogs.com/littlefivebolg/p/9497640.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！