码迷，mamicode.com
首页 > Web开发 > 详细

前端武器库之jQuery示例

时间：2017-07-12 18:57:28      阅读：325      评论：0      收藏：0      [点我收藏+]

标签：文本操作   身高   find   示例   自定义   ror   radio   obj   position   

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示例

标签：文本操作   身高   find   示例   自定义   ror   radio   obj   position   

原文地址：http://www.cnblogs.com/lixiaoliuer/p/7156731.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！