前端之JQuery实际案列

其他 2019-06-04 22:28:13 阅读次数: 0

1\1 JQuery 介绍　

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

1\2jQuery的优势　　

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
  2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
  7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用

 1\3 JQuery内容

　　

  1. 选择器
  2. 筛选器
  3. 样式操作
  4. 文本操作
  5. 属性操作
  6. 文档处理
  7. 事件
  8. 动画效果
  9. 插件
  10. each、data、Ajax

下载链接：jQuery官网：https://jquery.com/

中文文档：jQuery AP中文文档：http://jquery.cuishifeng.cn/

1\4jQuery版本


  • 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
  • 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
  • 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

1\5jQuery对象


jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

1\6JQuery 语法

　　1.1 操作节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>div上面的span</span>
<div>div
    <p>div>p</p>
    <span id="s1">div>span</span>
    <p>div>p
        <span>div>p>span</span>
    </p>

</div>
<span>div+span</span>
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>div上面的span</span>
<div>div
    <p>div>p</p>
    <span id="s1">div>span</span>
    <p>div>p
        <span>div>p>span</span>
    </p>

</div>
<span>div+span</span>
</body>
</html>


div上面的span
div
div>p

百度内容很无聊div>span
div>p div>p>span

div+span

　　

　

1.2 获取input用户输入

1.3 操作标签类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 300px;
            height: 300px;
            border: 3px solid red;
            border-radius: 50%;
        }
        .br-red{
            background-color: red;
        }
        .br-green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 br-red br-green"></div>
    <input type="text">

</body>
</html>
var divEle=document.getElementsByClassName('c1')[0];
undefined
divEle.classList;
DOMTokenList(3) ["c1", "br-red", "br-green", value: "c1 br-red br-green"]
divEle.classList.remove('br-green');
undefined
divEle.classList.add('br-green');
undefined
divEle.classList.toggle('br-green');
false

　　1.4 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

常用事件

 
  
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

实列：圆形点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 300px;
            height: 300px;
            border: 3px solid red;
            border-radius: 50%;
        }
        .br-red{
            background-color: red;
        }
        .br-green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 br-red br-green"></div>

    <button id="d1">点我给你戴帽子</button>
    <script>
        var bEle = document.getElementById('d1');   #点击事件  绑定事件
         bEle.onclick =function () {
            var dEle = document.getElementsByClassName('c1')[0];  # 先查找
            dEle.classList.toggle('br-green')   # 注意要先删除后面的才能进行操作 
不能先删除红色

        }
    </script>
</body>
</html>

　　1.5获取焦点事件

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="618大促销" id="il">   # 可以尝试小米官网的左边 输入input框
<script>
    var iEle = document.getElementById('il');
    iEle.onfocus = function () {   #获取焦点事件
        iEle.value=''
    }
    iEle.onblur = function () {    # 失去焦点事件
        iEle.value='有钱真好 可以买买买'

    }

</script>


</body>
</html>
 1.6 时间定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    // 定义一个存储定时器的全局变量
    var flag;
    // 先获取代码中需要用到的一些固定标签对象
    var b1Ele = document.getElementById('b1');
    var iEle = document.getElementById('d1');
    var b2Ele = document.getElementById('b2');
    // 定义一个展示时间的函数
    var showTime = function(){
        // 获取当前时间
        var cTime = new Date();
        iEle.value = cTime.toLocaleString()
    };
    // 给b1标签绑定点击事件
    b1Ele.onclick = function () {
        // 先判断flag是否已经指代了一个定时器
        if (!flag){
            flag = setInterval(showTime,1000)
        }
    };

    b2Ele.onclick = function () {
        // 取消定时器
        clearInterval(flag);
        // 将标志位手动置为布尔值为false的值即可
        flag = null;
    }
</script>
</body>
</html>
　　

　　（二）图书管理模型表：

图书管理系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <!--<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>-->
    <script src="JQuery-3.4.1.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .c0{height: 2000px;

            border: 1px solid darkgray;

        }
    </style>
</head>
<body>
<div class="c0">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">图书管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav a:hover">
                <li class="active"><a href="#">本地图书 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">线上图书</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">下拉有惊喜 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多操作 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid  ">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    图书列表
                </a>
                <a href="#" class="list-group-item">管理员列表</a>
                <a href="#" class="list-group-item">作者列表</a>
                <a href="#" class="list-group-item">出版社列表</a>
                <a href="#" class="list-group-item">其他列表</a>
            </div>

        </div>

        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">图书管理系统 <span class="glyphicon glyphicon-book pull-right"></span></h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">

                            <div class="input-group">

                                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">

                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">关键字搜索</button>
                        <button class="btn-success pull-right">新增</button>
                        <table class="table table-striped table-bordered table-hover ">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>id</th>
                                <th>title</th>
                                <th>price</th>
                                <th>author</th>
                                <th>action</th>
                            </tr>


                            </thead>
                            <tboby>
                                <tr>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>围城</td>
                                    <td>88</td>
                                    <td>钱仲书</td>
                                    <td>
                                        <a href="" class="btn-primary btn-sm">编辑</a>
                                        <a href="" class="btn-warning btn-sm">删除</a>
                                    </td>
                                </tr>


                            </tboby>
                            <tboby>
                                <tr>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>百草园</td>
                                    <td>38</td>
                                    <td>鲁迅</td>
                                    <td>
                                        <a href="" class="btn-primary btn-sm">编辑</a>
                                        <a href="" class="btn-warning btn-sm">删除</a>
                                    </td>
                                </tr>


                            </tboby>
                            <tboby>
                                <tr>
                                    <td>3</td>
                                    <td>3</td>
                                    <td>python</td>
                                    <td>12888</td>
                                    <td>egon</td>
                                    <td>
                                        <a href="" class="btn-primary btn-sm">编辑</a>
                                        <a href="" class="btn-warning btn-sm">删除</a>
                                    </td>
                                </tr>


                            </tboby>
                            <tboby>
                                <tr>
                                    <td>4</td>
                                    <td>4</td>
                                    <td>jS</td>
                                    <td>798</td>
                                    <td>jason</td>
                                    <td>
                                        <a href="" class="btn-primary btn-sm">编辑</a>
                                        <a href="" class="btn-warning btn-sm">删除</a>
                                    </td>
                                </tr>


                            </tboby>
                            <tboby>
                                <tr>
                                    <td>5</td>
                                    <td>5</td>
                                    <td>Go</td>
                                    <td>498</td>
                                    <td>uuu</td>
                                    <td>
                                        <a href="" class="btn-primary btn-sm">编辑</a>
                                        <a href="" class="btn-warning btn-sm">删除</a>
                                    </td>
                                </tr>


                            </tboby>
                            <tboby>
                                <tr>
                                    <td>6</td>
                                    <td>6</td>
                                    <td>java</td>
                                    <td>188</td>
                                    <td>xxx</td>
                                    <td>
                                        <a href="" class="btn-primary btn-sm">编辑</a>
                                        <a href="" class="btn-warning btn-sm">删除</a>
                                    </td>
                                </tr>


                            </tboby>


                        </table>
                        <nav aria-label="Page navigation text-center " class="text-center">
                            <ul class="pagination ">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">«</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">»</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </form>

                </div>
            </div>

        </div>

    </div>

</div>

</div>
</body>

</html>

　　

　　

猜你喜欢

转载自www.cnblogs.com/mofujin/p/10970820.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022