前端之JQuery实际案列

傷城~ 2021-11-29 06:46 361阅读 0赞

**![loading.gif][]1\\1 JQu**ery 介绍

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

## **1\\****2****jQuery的优势****　　** ##

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官网][jQuery]：[https://jquery.com/][jQuery]

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

## **1\\****4****jQuery版本** ##

*  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\\****5****jQuery对象** ##

**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>

![1595994-20190603201350011-1429207930.png][]

![1595994-20190603211632868-2065102645.png][]

![1595994-20190603211657789-761739589.png][]

1.2 获取input用户输入

1.3 操作标签类

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="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">
            
            <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>
    
            
            <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>
        </div>
    </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>

转载于:https://www.cnblogs.com/mofujin/p/10970820.html

[loading.gif]: /images/20211129/37746e0eae184507bd2d0a7515a38db9.png
[jQuery]: https://jquery.com/
[jQuery AP]: http://jquery.cuishifeng.cn/
[1595994-20190603201350011-1429207930.png]: /images/20211129/8d659b554ae248ef8096937449489fb4.png
[1595994-20190603211632868-2065102645.png]: /images/20211129/c2bfd1cf1c764525aae16cee39929242.png
[1595994-20190603211657789-761739589.png]: /images/20211129/f707d406a985432180d32202366645d0.png