Jquery项目实操练习

最新推荐文章于 2024-05-08 02:39:14 发布

hawk_2016

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量9.6k

点赞数 12

分类专栏： Jquery 文章标签： Jquery

本文链接：https://blog.csdn.net/hawk_2016/article/details/82887713

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Jquery项目实操练习

- 项目练习网址

项目练习网址

在网络上搜集到的一个好网址：里边有39个实例，适合新手实操练习来掌握Jquery知识点。模仿操作，但不局限于照着敲代码，主要是属性里边的逻辑构架。
如果操作中与例子有差异的，我也会备注。
http://www.bluestep.cc/39个web经典常用jquery实例/

1、项目一：tab选项卡

html语句：

备注说明：在chrome浏览器中，不能用click事件来修改disabled属性值。要不在浏览器中不能呈现效果。

<!DOCTYPE html>
<lang="en">

    <head>
        <script src="jquery-3.3.1.js"></script>
        <script src="test.js"></script>
        <link type="text/css" rel="styleSheet" href="test.css" </head> <body>
        <div class="tab">
            <ul>
                <li class="active">国内新闻</li>
                <li>国际新闻</li>
                <li>经济新闻</li>
            </ul>
            <div class="tab-content">
                <div class="local-new" style="display:block">
                    <fieldset>
                        <legend>登录</legend>
                        姓名：<input type="text"><br><br>
                        性别:<input type="radio" name="sex" id="man"><label for="man">男</label>
                        <input type="radio" name="sex" id="woman"><label for="woman">女</label>
                        <input type="radio" name="sex" id="secrect"><label for="secrect">保密</label><br><br>
                        <input type="checkbox" name="" id="agree"><label for="agree">我同意以上协议</label><br><br>
                        <input type="button" id="prestep" value="上一步">
                        <input type="button" id="nextstep" value="下一步" disabled>
                    </fieldset>
                </div>
                <div class="international-new" style="display:block">国际新闻</div>
                <div class="ecology-new" style="display:block">经济新闻</div>
            </div>
        </div>
        </body>

        </html>

css语句：

* {
    margin: 0px;
    padding: 0px
}

.tab {
    width: 99%;
    margin: 20px auto;
    border: 5px solid #cccccc;
}

.tab ul {
    height: 40px;
    line-height: 40px;
}
.tab ul li{
    list-style: none;
    float: left;
    height: 40px;
    line-height: 40px;
    width: 33%;
    text-align: center;
    background-color: dodgerblue;
    margin-right: 2px;
    cursor: pointer;
    font-family: 华文琥珀;
    font: bold;
}
.tab ul li.active{
    background-color: aqua;
}
.tab ul li:first-child{
    margin-left: 5px;
}
.tab ul li:last-child{
    margin-right: 0px;
}


.tab-content div{
    display: none;
    height: 500px;
}
.local-new{
    padding: 20px;
}
fieldset{
    margin: 50px;
    padding: 20px;
}

input[type='text']:focus{
    background-color: lightyellow;
}

input[type='radio']:checked+label{
    font-weight: bold;
}

#nextstep :disabled{
    background-color: #ccc;
}

#nextstep :enabled{
    font-weight: bold;
    font-style: italic;
}

p:lang(zh-cn){
    font-family: 微软雅黑；
}

p:lang(us-en){
    font-family: Arial, Helvetica, sans-serif;
}

html语句：

$(function () {
    $('.tab ul li').mouseover(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('.tab-content>div:eq(' + $(this).index() + ')').css('display', 'block').siblings().css('display', 'none');
    });
    $('#agree').change(function () {
        // console.log(!$(this).attr('ch?ecked'));
        $('#nextstep').prop('disabled',!$(this).prop('checked'));//说明在chrome浏览器中，不能用click事件来修改disabled属性值，要不在浏览器中不能呈现效果。
    });
})

2、项目二：百度风云榜

html语句：

<html>
    <head>
        <script src="jquery-3.3.1.js"></script>
        <script src="list.js"></script>
        <link type="text/css" rel="stylesheet" href="list.css">
    </head>
    <body>
        <div>
            <ul id="bang">
                <li>
                    <span>事件</span>
                    <ul>
                        <li>最近</li>
                        <li>上周</li>
                        <li>上月</li>
                    </ul>
                </li>
                <li>
                    <span>娱乐</span>
                    <ul>
                        <li>游戏</li>
                        <li>电影</li>
                        <li>电视</li>
                    </ul>
                </li>
                <li>
                    <span>人物</span>
                    <ul>
                        <li>美女</li>
                        <li>帅哥</li>
                        <li>明星</li>    
                    </ul>
                </li>

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

js语句：

$(function(){
    $('#bang span').click(function () { 
        $(this).parent().toggleClass('on').siblings().removeClass('on');    
    });
})

css语句：

*{
    margin: 0px;
    padding:0px;
}

#bang{
    width: 150px;
    border: solid #ccc;
    padding: 5px;
    margin: 50px;
    background-color: darkolivegreen;
    display: block;
    color: white;
}

#bang li{
    list-style-type: none;
    line-height: 24px;
}

#bang li.on span{
    background-image: url(close.png);
}

#bang li.on ul{
    display: block;
    padding-left:50px;
}

#bang li span{
    background: url(open.png) no-repeat left center;
    padding-left:50px;
    cursor: pointer;
}

#bang li ul{
    display: none;
    margin-left: 20px;
}

hawk_2016

关注

12
点赞
踩
62

收藏

觉得还不错? 一键收藏
0
评论
Jquery项目实操练习

Jquery项目实操练习项目练习网址1、项目一：tab选项卡html语句：css语句：html语句：项目练习网址在网络上搜集到的一个好网址：里边有39个实例，适合新手实操练习来掌握Jquery知识点。http://www.bluestep.cc/39个web经典常用jquery实例/1、项目一：tab选项卡html语句：&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp
复制链接

扫一扫