精华内容
下载资源
问答
  • Jquery项目实操练习

    千次阅读 2018-09-28 17:39:48
    Jquery项目实操练习项目练习网址1、项目一:tab选项卡html语句:css语句:html语句: 项目练习网址 在网络上搜集到的一个好网址:里边有39个实例,适合新手实操练习来掌握Jquery知识点。 ... 1、项目一:tab选项卡 ...

    项目练习网址

    在网络上搜集到的一个好网址:里边有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;
    }
    
    展开全文
  • jQuery项目必须放在静态文件夹static下,不然会报错,。

    jQuery项目必须放在静态文件夹static下,不然会报错,。
    在这里插入图片描述在这里插入图片描述

    展开全文
  • 转载:使用webpack打包多页jquery项目
    展开全文
  • 基于Webpack搭建的jQuery项目开发环境环境下载 用Webpack搭建了一个用于开发jQuery多页面项目的前端环境分享出来,虽然现在的新项目基本上都是用三大框架开发,但是偶尔还是会遇到一些适合用jQuery进行开发(工作中...

    基于Webpack搭建的jQuery项目开发环境

    用Webpack搭建了一个用于开发jQuery多页面项目的前端环境分享出来,虽然现在的新项目基本上都是用三大框架开发,但是偶尔还是会遇到一些适合用jQuery进行开发(工作中就遇到了),所以就自己搭建了一套环境便于开发。先发两张截图,这是验证环境及一些功能介绍的页面,开发中把这些都删掉根据自己的项目写就行了,只要注意html页面和入口js文件摆放的目录及命名就好。你可以浏览下截图中的内容,看看是否适合自己的项目使用,截图后面会有下载地址。因为自己在用,所以如果发现问题我会及时修改,同时欢迎对此感兴趣的朋友加入或指出其中的问题🙂。

    项目启动后首页截图介绍页面截图

    环境下载

    点击 Git仓地址链接

    展开全文
  • HTML5前端教程:jQuery项目实战

    万次阅读 2018-07-20 17:12:26
    这个jQuery项目实战课程在整个HTML5课程体系中的地位呢,也是很重要的,有着承上启下的作用。   为什么这么说呢,主要有以下三点原因:   第1, 在掌握原生javascript开发的基础上学习jQuery,能够进一步提升...
  • jQuery项目案例二:Tab选项卡切换项目介绍项目效果图项目核心知识点jQuery选择器jQuery事件类型jQuery标签操作项目源代码HTML代码CSS样式JS代码 项目介绍 网页页面中最流行常用的tab切换效果,包括滑动、点击切换等...
  • jquery项目转vue

    千次阅读 2018-04-27 14:34:13
    原本的项目jquery+BootStrap,在引入了比较多的插件,所以项目是比较冗余和不易维护的。现在准备使用vue对部分功能进行重写,然后再扩展到全局,将项目重构。此文不错,转来学习一番。...
  • 这篇文章主要介绍了bootstrap+jquery项目引入文件的常见报错问题,下面给大家分享了一些错误及错误的解决方法,需要的朋友可以参考下 做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种...
  • jquery项目移动端适配

    千次阅读 2019-03-04 15:24:52
    引入标签 &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&gt; ..../js/plugins/flexible/index.js"...
  • 今天有朋友问我如何能够通过hbuilder把前端项目打包为app,在此就出一篇详细的文章 这里就假设我们的项目是vue项目 通过项目npm run build 后在项目dist文件夹下的就是经过整合编译的项目文件 同样这是我们接下来...
  • 项目介绍 豆瓣电影/猫眼电影提供最新的电影介绍 及评论包括上映影片的影讯查询及购票服务。你可以记录想看、在看和看过的电影电视剧,顺便打分、写影评。根据你的口味,豆瓣电影会根据用户填写的信息显示电影排行榜...
  • 前注:文档全文请查看 根目录的...实战项目示例目录1、需求列表1、在html文件里,通过CDN引入了jQuery;2、步骤安装依赖npm installhtml文件中引入了jQueryindex.html<script src="https://cdn.bootcss.com/jquery/3.2.
  • layui jquery项目中预览出word文件

    千次阅读 2020-06-16 18:15:35
    最近的需求: 要求在后台管理系统中列表预览出用户上传的文件,如下图展示
  • glup 构建一个完整的jquery项目

    千次阅读 2017-12-11 19:41:22
    1-gulp目录说明: glup dev 开发环境  var gulp = require('gulp'); var babel = require("gulp-babel"); var connect = require('gulp-connect');...var runSequence = require('run-sequence');...
  • jquery背后的承诺——提供简单的查找和操控元素的方法——自这个项目发展以来没有改变过,但是一些语法细节和特点修改过。下面的历史概览描述了一个个版本最重要的改变,对使用旧版本和想升级的人可能有所帮助
  • JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能,能完成基本的网页特效!
  • 1:引入jquery npm install --save jquery 2:在自己的.vue文件中 <script> import $ from 'jquery' export default { mounted () { // jq代码写在mounted 里面 $(function () { }) } } </script&...
  • Jquery ajax项目实例

    千次阅读 2015-06-18 17:20:19
    本文所用ajax技术是Java web项目中实际使用的,所以具有一定的实用性,请仔细阅读代码,你会发现ajax动态增加和删除是很简单的。 首先前台代码 /scripts/jQuery/jquery-1.7.1.min.js"> 账户管理  function ...
  • vue项目中引入jqueryjqueryui 之前一直不喜欢在vue里面引入jq的东西,因为和vue的理念是背道而驰的,但是后来因为项目需求难以解决,不得不引入入jquery去解决,才感叹jq还是很强大的啊 真香嘻嘻 我的项目是基于...
  • 自己搭建一个jQuery项目

    万次阅读 2019-07-17 21:12:04
    自己搭建一个jQuery项目的步骤:一:创建远程仓库二:将远程仓库克隆到本地三:搭建项目源文件目录结构四:添加gulp功能五:生成.gitignore文件六:提交初始版本(本地版本库)七:推送到远程仓库 一:创建远程...
  • vue项目添加Jquery

    千次阅读 2017-12-15 19:58:03
    vue-cli怎么引入jquery Posted on 2016年8月24日 By 618插件网 1.npm install jquery –save 安装jquery依赖 2.修改2处webpack.base.conf.js文件 . 3.需要在那个页面用,...
  • jQuery

    千次阅读 多人点赞 2019-09-03 23:20:53
    目录 定义 引入jQuery jQuery语法 ...jQuery选择器 ...jQuery事件 ...jQuery效果 ...jQuery HTML DOM操作 ... jQuery是一套JavaScript的函数库,不是一种新的语言,也不能取代JS...1.将jQuery库文件添加到项目的js目录中 2....
  • jQuery的介绍

    万次阅读 2019-05-11 23:35:33
    笔者是刚入前端行业的时候做过一个稍微大型的jQuery项目,现在以及很久没用过了,但是感觉应该还会有不少朋友会去维护老的项目,可能还是会接触到jQuery,所以笔者想了想就还是写jQuery的文章来帮助更多的朋友来认识...
  • ionic项目之使用jquery

    万次阅读 2018-03-17 12:29:56
    一、ionic项目操作(1)——引入jquery step1:在项目中引入jquery,目录结构如下 step2:在 TypeScript 中编写声明文件 在src下新建js目录,并新建TypeScript声明文件jquery.d.ts,内容如下: declare var $:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,517
精华内容 26,606
关键字:

jquery项目