05-jQuery介绍

　　本篇主要介绍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="data: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;

        }

    })

})

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介绍的更多相关文章

jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
前端——jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
前端-jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
Day047--JS BOM介绍, jQuery介绍和使用
内容回顾 DOM 文档对象模型(model) 一个模型就是一个对象(属性和方法面向对象的三大特性:封装继承多态) 为了可扩展性 DOM操作标签属性操作获取值 getAttribute() 设 ...
Python自动化【第十七篇】：jQuery介绍
jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在 ...
【jQuery基础学习】05 jQuery与Ajax以及序列化
好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发 ...
jquery介绍
1.jQuery (1)jQuery简介是一个js框架(.js文件),它的最大特点是,使用选择器( 借鉴了css选择器的语法)查找要操作的节点,并且将这些节点封装成一个jQuery对象,通过调用j ...
2.jQuery介绍
. jQuery的认识 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的css选择器,并且可对CSS选择器进行扩展:拥有便捷的插件扩展机制和丰富的插件. 和原 ...
jQuery介绍常用选择器
jquery现在三个版本, 1.x 2.x 3.x 都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...
05: jQuery
目录: jQuery参考网站 W3school 1.1 JQuery作用 1.2 jQuery与DOM比较与相互转换 1.3 jQuery选择器 1.4 jQuery筛选与过滤 1.5 jQuer ...

随机推荐

PHP7 引入的“??” 和“?:”的区别
<?php $array = [ 'a' => 1, 'b' => 2, 'c' => [], ]; $a = $array['c'] ?? 0; $b = $array['c ...
jQuery 标单验证
jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方 ...
(原)关于音频onset detection算法的阅读
Orgin:Using Audio Onset Detection Algorithms 本文档只记录了部分的内容,主要以aubio相关内容为主,并非整个文档的完整内容,记录人:lihaiping16 ...
springboot：自定义缓存注解，实现生存时间需求
需求背景:在使用springbot cache时,发现@cacheabe不能设置缓存时间,导致生成的缓存始终在redis中. 环境:springboot 2.1.5 + redis 解决办法:利用AO ...
多用户远程连接设置（WindowsServer2008/Win7）
一.Windows server2008 1.点击计算机--->右键属性打开系统对话框.进行如图设置. 2.在开始菜单--->运行中输入gpedit.msc打开本地组策略编辑器对话框. 3 ...
【maven学习】settings.xml文件详解
环境 apache-maven-3.6.1 jdk 1.8 eclipse 4.7 Settings.xml是设置maven参数的配置文件,包含类似本地仓储位置.修改远程仓储服务器.认证信息等配置.p ...
MySQL [Err] 1055--1064 - Expression #1 of ORDER BY clause is not in GROUP BY clause
1055错误: 方案1: 修改sql_mode的值 set sql_mode = '';set sql_mode = 'NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABL ...
Qt中布局管理器失效问题
1 问题描述在Qt5.12.0 版本中,使用自动管理器发生,无法生效 2 问题代码 Widget::Widget(QWidget *parent) : QWidget(parent), butto ...
js中Boolean类型和Number类型的一些常见方法
Boolean类型 Boolean类型重写了valueOf() 方法, 返回基本布尔类型值true或false,重写了toString() 方法,返回基本字符串"true" 和 & ...
【leetcode】589. N-ary Tree Preorder Traversal
题目: Given an n-ary tree, return the preorder traversal of its nodes' values. For example, given a 3- ...

05-jQuery介绍

一、jQuery介绍

二、jQuery文档加载完再执行

三、jQuery选择器

四、jQuery对html标签的操作

4.1 对html标签的内容操作

4.2 对html标签的属性操作

4.3 对html样式的操作

五、绑定事件

六、jQuery动画

七、jQuery链式调用

05-jQuery介绍的更多相关文章

随机推荐

热门专题

　4.1 对html标签的内容操作

　4.2 对html标签的属性操作

　4.3 对html样式的操作