前端武器库之jQuery示例

Posted Talk is cheap

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端武器库之jQuery示例相关的知识，希望对你有一定的参考价值。

1.全选 反选 取消

相关知识点：

- 选择器
- .prop
    $(‘#tb:checkbox‘).prop(‘checked‘);        获取值
    $(‘#tb:checkbox‘).prop(‘checked‘, true);  设置值
- .each
    jQuery方法内置循环： $(‘#tb:checkbox‘).xxxx

- $(‘#tb:checkbox‘).each(function(k){
        // k当前索引
        // this，DOM，当前循环的元素 $(this)
    })
- 三元运算  var v = 条件 ? 真值 : 假值
<body>
    <input type="button" value="全选" onclick="checkAll();" />
    <input type="button" value="反选" onclick="reverseAll();" />
    <input type="button" value="取消"  onclick="cancelAll();"/>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th><th>IP</th><th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $(‘#tb :checkbox‘).prop(‘checked‘,true);
        }       // .prop 专门对checked操作
        function cancelAll() {
            $(‘#tb :checkbox‘).prop(‘checked‘,false);
        }
        function reverseAll() {
            $(‘:checkbox‘).each(function(k){  // .each 循环选中的每一个元素
                /*  Dom实现
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                } */
                // this,代指当前循环的每一个元素；三元运算var v = 条件? 真值：假值
                var v = $(this).prop(‘checked‘)?false:true;
                // console.log(k,this);
                $(this).prop(‘checked‘,v);
            })
        }
    </script>
</body>

2.筛选器示例：左侧菜单点击展开内容

筛选器：

$(‘#i1‘).next()                  // 下一个            
$(‘#i1‘).prev()                  //往上找
$(‘#i1‘).nextAll()            　 // 下面所有           
$(‘#i1‘).prevAll()
$(‘#i1‘).nextUntil(‘#ii1‘)      // 下面直到哪里     
$(‘#i1‘).prevUntil(‘#ii1‘)
$(‘#i1‘).parent()                     // 父标签
$(‘#i1‘).parents()                   // 取得一个包含着所有匹配元素的祖先元素的元素集合
$(‘#i1‘).parentsUntil()           //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$(‘#i1‘).children()
$(‘#i1‘).siblings()
$(‘#i1‘).find()
$(‘li‘).eq(1)   <——>  $(‘li:eq(1)‘)
first()
last()
hasClass(class)

 

添加移除样式：

$(‘#i1‘).addClass(..)  // 添加样式
$(‘#i1‘).removeClass(..)// 移除样式

示例：

<head>
    <style>
        .header{
            background-color: royalblue;
        }
        .content{
            min-height: 70px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.header‘).click(function(){
           // 当前点击的标签 $(this)； .next 获取某个标签的下一个标签
           // $(this).next().removeClass(‘hide‘);  移除hide属性
           // $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘)
           $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘)
           // 链式编程
        })
    </script>
</body>

3.jQuery文本 样式 属性 文档处理操作

  • 文本操作：
$(..).text()            // 获取文本内容
$(..).text("<a>1</a>")  // 设置文本内容

$(..).html()           // 获取
$(..).html("<a>1</a>")  // 设置

$(..).val()                // 获取
$(..).val(..)          // 设置
  • 样式操作：
addClass 
removeClass 
toggleClass 比如实现网页开关灯功能

开关灯示例：

<head>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type=‘checkbox‘ id=‘i2‘  />

    <input id="i1" type="button" value="开关" />
    <div class="c1 hide">asdfasdf</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘#i1‘).click(function(){
//            if($(‘.c1‘).hasClass(‘hide‘)){
//                $(‘.c1‘).removeClass(‘hide‘);
//            }else{
//                $(‘.c1‘).addClass(‘hide‘);
//            }
            $(‘.c1‘).toggleClass(‘hide‘);    // 一句搞定
        })
    </script>
</body>
  • 属性操作：
// 专门用于做自定义属性
$(..).attr(‘n‘)          // 获取
$(..).attr(‘n‘,‘v‘)      // 设置
$(..).removeAttr(‘n‘)    // 删除

<input type=‘checkbox‘ id=‘i1‘  />
// 专门用于chekbox,radio  jQuery1、2版本checkbox使用attr的话有bug，所以用prop
$(..).prop(‘checked‘)
$(..).prop(‘checked‘, true)
  • 文档处理：
append    // 往后加
prepend   // 往前加
after     // 紧挨着后面
before    // 紧挨着前面

remove    // 删除
empty     // 只清空内容

clone     // 克隆一份数据

3.模态对话框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>
        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $(‘.del‘).click(function () {
            $(this).parent().parent().remove();
        });

        function  confirmModal() {

            var tr = document.createElement(‘tr‘);
            var td1 = document.createElement(‘td‘);
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement(‘td‘);
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $(‘#tb‘).append(tr);

            $(".modal,.shadow").addClass(‘hide‘);
        }

        function  addElement() {
            $(".modal,.shadow").removeClass(‘hide‘);
        }
        function cancelModal() {
            $(".modal,.shadow").addClass(‘hide‘);
            $(‘.modal input[type="text"]‘).val("");
        }

        $(‘.edit‘).click(function(){
            $(".modal,.shadow").removeClass(‘hide‘);
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr(‘target‘);
                // 获取td中的内容
                var text = $(this).text();
                var a1 = ‘.modal input[name="‘;
                var a2 = ‘"]‘;
                var temp = a1 + n + a2;
                $(temp).val(text);
            });
//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $(‘.modal input[name="hostname"]‘).val(host);
//            $(‘.modal input[name="port"]‘).val(port);
            // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value
        });
    </script>
</body>

4.tab切换菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.menu-item‘).click(function(){
            $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
            var target = $(this).attr(‘a‘);
            $(‘.content‘).children("[b=‘"+ target+"‘]").removeClass(‘hide‘).siblings().addClass(‘hide‘);
        });
    </script>
</body>
</html>

上面是通过自定义属性实现的，下面不用自定义属性，用索引也能实现。

index 获取索引位置

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" >菜单一</div>
            <div  class="menu-item" >菜单二</div>
            <div  class="menu-item" >菜单三</div>
        </div>
        <div class="content">
            <div >内容一</div>
            <div class="hide" >内容二</div>
            <div class="hide">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.menu-item‘).click(function(){
            $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
            $(‘.content‘).children().eq($(this).index()).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        });
    </script>
</body>
</html>
View Code

5.点赞及jQuery css操作

Query css处理操作

 $(‘t1‘).css(‘样式名称‘, ‘样式值‘)
            点赞：
                 - $(‘t1‘).append()
                 - $(‘t1‘).remove()
                 - setInterval
                 - 透明度 1 》 0
                 - position
                 - 字体大小，位置

点赞示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.item‘).click(function () {
            AddFavor(this);
        });
        function AddFavor(self) {
            // DOM对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement(‘span‘);
            $(tag).text(‘+1‘);
            $(tag).css(‘color‘,‘green‘);
            $(tag).css(‘position‘,‘absolute‘);
            $(tag).css(‘fontSize‘,fontSize + "px");
            $(tag).css(‘right‘,right + "px");
            $(tag).css(‘top‘,top + ‘px‘);
            $(tag).css(‘opacity‘,opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css(‘fontSize‘,fontSize + "px");
                $(tag).css(‘right‘,right + "px");
                $(tag).css(‘top‘,top + ‘px‘);
                $(tag).css(‘opacity‘,opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            }, 40);
        }
    </script>
</body>
</html>

6.拖动面板及位置操作

  • 位置操作：
$(window).scrollTop()   // 获取windows滑轮位置  // 注意是谁的滑轮
$(window).scrollTop(0)  // 设置windows滑轮位置
scrollLeft([val])       // 左右滚动滑轮设置

$(‘#i1‘).offset()      // 获取标签位置
offset().left           // 指定标签在html中的坐标位置
offset().top            // 指定标签在html中的坐标位置
<!--    position()      指定标签相对父标签(找到relative)标签的坐标-->
<div style=‘relative‘>
    <div>
        <div id=‘i1‘ style=‘position:absolute;height:80px;border:1px‘></div>
    </div>
</div>
<script>  // 纯高度，边框，外边距，内边距
$(‘i1‘).height()           // 获取标签的高度 纯高度
$(‘i1‘).innerHeight()      // 获取自身高度+padding；
$(‘i1‘).outerHeight()      // 参数：false-->获取自身高度+padding+border；
$(‘i1‘).outerHeight(true)  // 获取自身高度+padding+border+margin；
</script>
  • 拖动面板示例：

注意这里直接使用#title方式不是太好。

<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $(‘#title‘).mouseover(function(){
            $(this).css(‘cursor‘,‘move‘);
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(‘#title‘).on(‘mousemove‘, function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css(‘left‘,x+‘px‘);
                $(this).parent().css(‘top‘,y+‘px‘);
            })
        });
        $("#title").mouseup(function(){
            $("#title").off(‘mousemove‘);
        });
    })
</script>
</body>

7.jQuery绑定事件及示例

  • 绑定事件知识点：

 

 // DOM： 三种绑定方式
  // jQuery：四种
    // 第一种：
    $(‘.c1‘).click()
    $(‘.c1‘).....
    // 第二种：
    $(‘.c1‘).bind(‘click‘,function(){  // 绑定
    })

    $(‘.c1‘).unbind(‘click‘,function(){  // 解绑
    })
    // 第三种：*******有特殊功能，看示例（一开始并没有绑定事件，当点击的时候才给绑定事件）
    $(‘.c‘).delegate(‘a‘, ‘click‘, function(){  // 绑定、委托
    })

    $(‘.c‘).undelegate(‘a‘, ‘click‘, function(){  // 解绑
    })
    // 第四种：上面调用的实际上都是这种
    $(‘.c1‘).on(‘click‘, function(){
    })
    $(‘.c1‘).off(‘click‘, function(){
    })
  • 示例：添加内容，并自动绑定事件
<body>
      <input id="t1" type="text" />
      <input id="a1" type="button" value="添加" />
      <ul id="u1">
          <li>1</li>
          <li>2</li>
      </ul>
  <script src="jquery-1.12.4.js"></script>
      <script>
          $(‘#a1‘).click(function () {
              var v = $(‘#t1‘).val();
              var temp = "<li>" + v + "</li>";
              $(‘#u1‘).append(temp);
          });
  //      第三种绑定方式
          $(‘ul‘).delegate(‘li‘,‘click‘,function () {
              var v = $(this).text();
              alert(v);
          })
  //      第一种绑定方式
  //        $(‘ul li‘).click(function () {
  //            var v = $(this).text();
  //            alert(v);
  //        })
  //      第二种绑定方式
  //        $(‘ul li‘).bind(‘click‘,function () {
  //            var v = $(this).text();
  //            alert(v);
  //        })
  //      第四种绑定方式
  //        $(‘ul li‘).on(‘click‘, function () {
  //            var v = $(this).text();
  //            alert(v);
  //        })
      </script>
  </body>

8.JQuery事件之阻止事件发生 及示例：表单验证

a标签是不是默认有个onclick事件，如果再给绑定一个onclick事件会怎么样？

默认：先执行绑定事件，在执行a标签的默认事件。

阻止事件发生
    return false
# 当页面框架加载完成之后，自动执行
$(function(){
    $(...)
})

示例：

<body>
    <!--Dom方式：onclick里需要加return-->
    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>
    <!--jQuery方式：-->
    <a id="i1" href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // Dom方式：
        function ClickOn() {
            alert(123);
            return true;  // true：执行后面操作，dom绑定里需要加return
        }
        // jQuery方式：
        $(‘#i1‘).click(function () {
            alert(456);
            return false;  // false：不执行后面操作
        })
    </script>
</body>
  • 示例：表单验证
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <!--功能：输入值：运行提交；未输入：不允许提交-->
    <form id="f1" action="s5.html" method="POST">
        <div><input name="n1" tex = "用户名" type="text" /></div>
        <div><input name="n2" tex = "密码" type="password" /></div>
        <div><input name="n3" tex = "邮箱" type="text" /></div>
        <div><input name="n4" tex = "端口" type="text" /></div>
        <div><input name="n5" tex = "IP" type="text" /></div>

        <input type="submit" value="提交" />
        <!--<img src="...">-->
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
//        // 当页面框架加载完毕后，自动执行，比如加载图片，框加载后，图片还没加载，函数就执行了
//        $(function(){
//
//        });
        $(function(){
            // 当页面所有元素完全加载完毕后，执行
            $(‘:submit‘).click(function () {
                $(‘.error‘).remove();  // 先清空错误样式
                var flag = true;  // 创建局部变量
                $(‘#f1‘).find(‘input[type="text"],input[type="password"]‘).each(function () {
                    var v = $(this).val();
                    var n = $(this).attr(‘tex‘);
                    if(v.length <= 0){
                        flag = false;
                        var tag = document.createElement(‘span‘);
                        tag.className = "error";
                        tag.innerHTML = n + "必填";
                        $(this).after(tag);
                        // return false;  // 加上false后，第一个不合法，后面不通过
                    }
                });
                return flag;
            });
        });
//        $(‘:submit‘).click(function () {
//            var v = $(this).prev().val();
//            if(v.length > 0){
//                return true;
//            }else{
//                alert(‘请输入内容‘);
//                return false
//            }
//        })
    </script>
</body>
</html>

 

以上是关于前端武器库之jQuery示例的主要内容，如果未能解决你的问题，请参考以下文章

前端面试题之手写promise

常用的几个JQuery代码片段

前端基础之JQuery

10个JavaScript代码片段，使你更加容易前端开发。

10个JavaScript代码片段，使你更加容易前端开发。

12个用得着的 JQuery 代码片段