正文

05-jquery介绍(代码片段)

littlefivebolg  littlefivebolg  2022-12-23  606

关键词：

　　本篇主要介绍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 = /^w6,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 = /^[[email protected]#$%^&*]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;
        
    
    )
    
)

bodyfont-family:‘Microsoft Yahei‘;font-size:12px;color:#666;
html,bodyheight: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 emcolor:#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_barwidth:1200px;height:115px;margin:0 auto;
.logowidth:150px;height:59px;margin:29px 0 0 17px;

.search_conwidth:616px;height:38px;border:1px solid #37ab40;margin:34px 0 0 124px;background:url(../images/icons.png) 10px -338px no-repeat;
.search_con .input_textwidth: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_conheight:40px;border-bottom:2px solid #39a93e
.navbarwidth:1200px;margin:0 auto;
.navbar h1width:200px;height:40px;line-height:40px;text-align: center;font-size:14px;color:#fff;background-color:#39a93e;

.navbar .subnav_conwidth:200px;height:40px;background-color:#39a93e;position:relative;cursor:pointer;

.navbar .subnav_con h1position:absolute;left:0;top:0;text-align:left;text-indent:40px
.navbar .subnav_con spandisplay: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 spantransform:rotateZ(180deg)

.navbar .subnav_con .subnavposition:absolute;left:0;top:40px;display:none;border-top:2px solid  #39a93e;
.navbar .subnav_con:hover .subnavdisplay:block;


.navlistmargin-left:34px;
.navlist liheight:40px;float:left;line-height:40px;
.navlist li acolor:#666;font-size:14px
.navlist li a:hovercolor:#ff8800
.navlist .intervalmargin:0 15px;


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

.subnav li adisplay:block;height:44px;line-height:44px;text-indent:71px;font-size:14px;color:#333
.subnav li a:hovercolor:#ff8800

.subnav li .fruitbackground:url(../images/icons.png) 28px 0px no-repeat;
.subnav li .seafoodbackground:url(../images/icons.png) 28px -43px no-repeat;
.subnav li .meetbackground:url(../images/icons.png) 28px -86px no-repeat;
.subnav li .eggbackground:url(../images/icons.png) 28px -132px no-repeat;
.subnav li .vegetablesbackground:url(../images/icons.png) 28px -174px no-repeat;
.subnav li .icebackground:url(../images/icons.png) 28px -220px no-repeat;


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

.advwidth:240px;height:270px; overflow:hidden; background-color:gold;
.adv adisplay:block;float:left;


/* 商品列表样式 */

.list_modelwidth:1200px;height:340px;margin:15px auto 0;
.list_titleheight:40px;border-bottom:2px solid #42ad46
.list_title h3height:40px;line-height:40px;font-size:16px;color:#37ab40;font-weight:bold;
.list_title .subtitleheight:20px;line-height:20px;margin-top:15px;
.list_title .subtitle spancolor:#666;margin:0 10px 0 20px;
.list_title .subtitle acolor:#666;margin:0 5px;
.list_title .subtitle a:hover,.goods_more:hovercolor:#ff8800
.goods_moreheight:20px;margin-top:15px;color:#666

.goods_conheight:300px;
.goods_bannerwidth:200px;height:300px;
.goods_banner imgwidth:200px;height:300px;

.goods_listwidth:1000px;height:299px;border-bottom:1px solid #ededed
.goods_list liheight:299px;width:249px;border-right:1px solid #ededed;float:left
.goods_list li:hoverwidth:248px;height:297px;border:1px solid gold;
.goods_list li:hover imgopacity:0.8

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

.goods_list li imgdisplay:block;width:180px;height:180px;margin:0 auto;
.goods_list li .prizetext-align:center;font-size:20px;color:#c40000;margin-top:5px;

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


.foot_linktext-align:center;margin-top:30px;
.foot_link a,.foot_link spancolor:#4e4e4e;
.foot_link a:hovercolor:#ff8800
.foot_link spanpadding:0 10px
.footer ptext-align:center; margin-top:10px;


/* 二级页面面包屑导航 */
.breadcrumb
    width:1200px;height:40px;margin:0 auto;

.breadcrumb aline-height:40px;color:#37ab40
.breadcrumb a:hovercolor:#ff8800
.breadcrumb spanline-height:40px;color:#666;padding:0 5px;


.main_wrapwidth:1200px;margin:0 auto;
.l_wrapwidth:200px;
.r_wrapwidth: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 ulwidth:160px;margin:0 auto;overflow:hidden;
.new_goods liborder-bottom:1px solid #ededed;margin-bottom:-1px;
.new_goods li imgdisplay:block;width:150px;height:150px;margin:10px auto;
.new_goods li h4width:160px;margin:0 auto;
.new_goods li h4 afont-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
.new_goods li .prizefont-size:14px;color:#da260e;margin:10px auto;



/* 商品列表样式 */

.sort_barheight:30px;background-color:#f0fdec
.sort_bar adisplay:block;height:30px;line-height:30px;padding:0 20px;float:left;color:#000
.sort_bar .activebackground-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 imgwidth:160px;height:160px;display:block;margin:10px auto;
.goods_type_list li h4width:160px;margin:0 auto;
.goods_type_list li h4 afont-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
.operatewidth:160px;margin:10px auto;position:relative;
.goods_type_list .operate .prizecolor:#da260e; font-size:14px; 
.goods_type_list .operate .unitcolor:#999;padding-left:5px;
.goods_type_list .operate .add_goodsdisplay:inline-block;width:15px;height:15px;background:url(../images/shop_cart.png);position:absolute;right:0;top:3px;


/* 分页样式 */

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

.pagenation .activebackground-color:#fff;color:#43a200


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


.goods_detail_picwidth:350px;height:350px;margin:24px 0 0 24px;
.goods_detail_list
    width:730px;height:350px;margin:24px 24px 0 0;

.goods_detail_list h3font-size:24px;line-height:24px;color:#666;font-weight:normal;
.goods_detail_list pcolor:#666;line-height:40px;
.prize_barheight:72px;background-color:#fff5f5;line-height:72px;
.prize_bar .show_pirzefont-size:20px;color:#ff3e3e;padding-left:20px
.prize_bar .show_pirze emfont-style:normal;font-size:36px;padding-left:10px
.prize_bar .show_unitpadding-left:150px

.goods_numheight:52px;margin-top:19px;
.goods_num .num_namewidth:70px;height:52px;line-height:52px;
.goods_num .num_addwidth:75px;height:50px;border:1px solid #dddddd
.goods_num .num_add inputwidth: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 .minuswidth: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 .minusborder-bottom:0px

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

.operate_btnheight:40px;margin-top:35px;font-size:0;position:relative;
.operate_btn .buy_btn,.operate_btn .add_cartdisplay: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_cartbackground-color:#c40000;color:#fff;margin-left:10px;position:relative;z-index:10;

.add_jumpwidth: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 liheight: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.activeborder-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 dtmargin-top:10px;font-size:16px;color:#044d39
.tab_content ddline-height:24px;margin-top:5px;


/* 登录页 */

.login_topwidth:960px;height:130px;margin:0 auto;
.login_logodisplay:block;width:193px;height:76px;margin-top:30px;
.login_form_bgheight:480px;background-color:#518e17
.no-mpmargin-top:0px;
.login_form_wrapwidth:960px;height:480px;margin:0 auto;
.login_bannerwidth:381px;height:322px;background:url(../images/login_banner.png) no-repeat;margin-top:90px;
.sloganwidth:40px;height:300px;font-size:30px;color:#f0f9e8;text-align:center;line-height:36px;margin:80px 0 0 120px
.login_formwidth:368px;height:378px;border:1px solid #c6c6c5;background-color:#fff; margin-top:50px;

.login_titleheight:60px;width:308px;margin:10px auto;border-bottom:1px solid #e0e0e0;

.login_title h1font-size:24px;height:60px;line-height:60px;color:#a8a8a8;float:left;font-weight:bold;margin-left:44px;
.login_title awidth: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_inputwidth:308px;height:250px;margin:20px auto;position:relative;
.name_input,.pass_inputwidth: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_inputtop:65px;background-position:280px -95px;

.user_error,.pwd_errorcolor:#f00;position:absolute;left:0;top:43px;display:none

.pwd_errortop:110px;

.more_inputposition:absolute;left:0;top:130px;width:100%

.more_input inputfloat:left;margin-top:2px;
.more_input labelfloat:left;margin-left:10px;
.more_input afloat:right;color:#666
.more_input a:hovercolor:#ff8800

.input_submitwidth: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_conwidth:300px;
.reg_logowidth:200px;height:76px;float:right;margin-right:30px;
.reg_sloganwidth:300px;height:30px;float:right;text-align:right;font-size:24px;color:#fe0000;margin:20px 30px 0 0;
.reg_bannerwidth:251px;height:329px;background:url(../images/register_banner.png) no-repeat;float:right; margin:20px 10px 0 0;opacity:0.5


.r_conwidth:400px;
.reg_titlewidth:360px;height:50px;float:left;margin-left:30px;border-bottom:1px solid #e0e0e0
.reg_title h1height:50px;line-height:50px;float:left;font-size:24px;color:#a8a8a8;font-weight:bold;
.reg_title afloat: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_formwidth:360px;margin:30px 0 0 30px;float:left;position:relative;
.reg_form liheight:70px;
.reg_form li labelwidth:70px;height:40px;line-height:40px;float:left;font-size:14px;color:#a8a8a8
.reg_form li inputwidth:288px;height:38px;border:1px solid #e0e0e0;float:left;outline:none;text-indent:10px;background-color:#f8f8f8
.reg_form li.agreement inputwidth:15px;height:15px;float:left;margin-top:13px
.reg_form li.agreement labelwidth:300px;float:left;margin-left:10px;
.reg_form li.reg_sub inputwidth:360px;height:40px;background-color:#ff5757;font-size:18px;color:#fff;font-family:‘Microsoft Yahei‘;cursor:pointer;
.reg_form li .error_tipfloat:left;height:30px;line-height:30px;margin-left:70px;color:#e62e2e;display:none;
.reg_form li .error_tip2float:left;height:20px;line-height:20px;color:#e62e2e;display:none;


.sub_page_namefont-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_thwidth:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:0 auto;
.cart_list_th liheight:40px;line-height:40px;float:left;text-align:center;
.cart_list_th .col01width:26%;
.cart_list_th .col02width:16%;
.cart_list_th .col03width:13%;
.cart_list_th .col04width:12%;
.cart_list_th .col05width:15%;
.cart_list_th .col06width:18%;

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

.cart_list_td .col01width:4%;
.cart_list_td .col02width:12%;
.cart_list_td .col03width:10%;
.cart_list_td .col04width:16%;
.cart_list_td .col05width:13%;
.cart_list_td .col06width:12%;
.cart_list_td .col07width:15%;
.cart_list_td .col08width:18%;

.cart_list_td .col02 imgwidth:100px;height:100px;border:1px solid #ddd;display:block;margin:10px auto 0;
.cart_list_td .col03height:48px;text-align:left;line-height:24px;margin-top:38px;
.cart_list_td .col03 emcolor:#999
.cart_list_td .col08 acolor:#666

.cart_list_td .col06 .num_addwidth:98px;height:28px;border:1px solid #ddd;margin:40px auto 0;
.cart_list_td .col06 .num_add awidth:29px;height:28px;line-height:28px;background-color:#f3f3f3;font-size:14px;color:#666
.cart_list_td .col06 .num_add inputwidth: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;


.settlementswidth:1198px;height:78px;border:1px solid #ddd;background-color:#fff4e8;margin:-1px auto 0;
.settlements liline-height:78px;float:left;
.settlements .col01width:4%;text-align:center
.settlements .col02width:12%;
.settlements .col03width:69%; height:48px; line-height:28px;text-align:right;margin-top:10px;
.settlements .col03 spancolor:#ff0000;padding-right:5px
.settlements .col03 emcolor:#ff3d3d;font-size:22px;font-weight:bold;
.settlements .col03 spancolor:#ff0000;
.settlements .col03 bcolor:#ff0000;font-size:14px;padding:0 5px;

.settlements .col04width:14%;text-align:center;float:right;
.settlements .col04 adisplay:block;height:78px;background-color:#ff3d3d;text-align:center;line-height:78px;color:#fff;font-size:24px


.common_titlewidth:1200px;margin:20px auto 0;font-size:14px;

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

.common_list_con dlmargin:20px;
.common_list_con dtfont-size:14px;font-weight:bold;margin-bottom:10px
.common_list_con dd inputvertical-align:bottom;margin-right:10px

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

.pay_style_conmargin:20px;
.pay_style_con inputfloat:left;margin:14px 7px 0 0;
.pay_style_con labelfloat:left;border:1px solid #ccc;background-color:#fff;padding:10px 10px 10px 40px;margin-right:25px

.pay_style_con .cashbackground:url(../images/pay_icons.png) 8px top no-repeat #fff;
.pay_style_con .weixinbackground:url(../images/pay_icons.png) 6px -36px no-repeat #fff;

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

.pay_style_con .bankbackground:url(../images/pay_icons.png) 6px -108px no-repeat #fff;


.goods_list_thheight:40px;border-bottom:1px solid #ccc
.goods_list_th lifloat:left;line-height:40px;text-align:center;
.goods_list_th .col01width:25%
.goods_list_th .col02width:20%
.goods_list_th .col03width:25%
.goods_list_th .col04width:15%
.goods_list_th .col05width:15%

.goods_list_tdheight:80px;border-bottom:1px solid #eeeded
.goods_list_td lifloat:left;line-height:80px;text-align:center;
.goods_list_td .col01width:4%
.goods_list_td .col02width:6%
.goods_list_td .col03width:15%
.goods_list_td .col04width:20%
.goods_list_td .col05width:25%
.goods_list_td .col06width:15%
.goods_list_td .col07width:15%

.goods_list_td .col02text-align:right
.goods_list_td .col02 imgwidth:63px;height:63px;border:1px solid #ddd;display:block;margin:7px 0;float:right;
.goods_list_td .col03text-align:left;text-indent:20px


.settle_conmargin:10px
.total_goods_count,.transit,.total_payline-height:24px;text-align:right
.total_goods_count em,.total_goods_count b,.transit b,.total_pay bfont-size:14px;color:#ff4200;padding:0 5px;

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


.order_list_thwidth:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:20px auto 0;
.order_list_th lifloat:left;height:30px;line-height:30px
.order_list_th .col01width:20%;margin-left:20px
.order_list_th .col02width: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_listborder-bottom:1px solid #ddd;margin-bottom:-2px;
.order_goods_list lifloat:left; height:80px;line-height:80px;
.order_goods_list .col01width:20%
.order_goods_list .col01 imgwidth:60px;height:60px;border:1px solid #ddd;margin:10px auto;
.order_goods_list .col02width:50%;text-align:left;
.order_goods_list .col02 emcolor:#999;margin-left:10px
.order_goods_list .col03width:10%
.order_goods_list .col04width:20%

.oper_btndisplay:inline-block;border:1px solid #ddd;color:#666;padding:5px 10px

.popup_condisplay:none;
.popupwidth: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 pheight:150px;line-height:150px;text-align:center;font-size:18px;

.maskwidth: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_title2height: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,formmargin:0;padding:0

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

/* 去掉列表默认的图标 */
ul,ollist-style:none;

/* 去掉em默认的斜体 */
emfont-style: normal;

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


/* 去掉加链接时产生的框线 */
imgborder:0;

/* 清除浮动 */
.clearfix:before,.clearfix:aftercontent:"";display:table
.clearfix:afterclear:both;
.clearfixzoom:1

/* 浮动 */
.flfloat:left
.frfloat:right

reset.css

图片资源

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

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

jquery怎么获取元素的value值

代码如下:varbtn=jQuery('.btn').val();获取的只是第一个类标签为btn的html元素的value值。要获得一组类标签的所有html元素的值。就得使用jQuery的each遍历。代码如下:varbtns=newArray();//或者写成：varbtns=[];jQuery('.btn').each(function(ke... 查看详情

tensorflowlitec++api介绍(代码片段)

目录Class类介绍tflite::ErrorReporter头文件路径类作用PublicAPI介绍示例tflite::FlatBufferModel头文件路径类作用PublicStaticAPI介绍PublicAPI介绍示例tflite::Interpreter头文件路径类作用Public类型PublicStatic属性变量Friend类PublicAPI介绍示例tflite::Interpre 查看详情

正文

05-jquery介绍(代码片段)

一、jQuery介绍

二、jQuery文档加载完再执行

三、jQuery选择器

四、jQuery对html标签的操作

4.1 对html标签的内容操作

4.2 对html标签的属性操作

4.3 对html样式的操作

五、绑定事件

六、jQuery动画

七、jQuery链式调用

jquery怎么获取元素的value值

markdownhtml介绍(代码片段)

javascriptjavascript介绍(代码片段)

text介绍(代码片段)

textgithub介绍(代码片段)

git介绍(代码片段)

text功能介绍(代码片段)

htmljekyllcasts-收藏介绍(代码片段)

javascript反应介绍(代码片段)

markdown降价介绍(代码片段)

nio编程介绍(代码片段)

java泛型介绍(代码片段)

text介绍unix(代码片段)

sh介绍aushell(代码片段)

php介绍人(代码片段)

typescript打字稿介绍(代码片段)

markdown介绍aorails(代码片段)

tensorflowlitec++api介绍(代码片段)

　4.1 对html标签的内容操作

　4.2 对html标签的属性操作

　4.3 对html样式的操作