Dayday up ---- python Day17

jQuery 模块(类库)

jquery集成了DOM /BOM/ JavaScript

常用参考网站:

http://jquery.cuishifeng.cn/

版本:

　　1.x 兼容性好

　　2.x 3.x 功能齐全

　　下载版本的时候，如果是用在线上环境改成压缩版本.min

调用jquery:

　　使用$ 或者写jquery

转换:

　　1、jquery 对象转换成dom对象

　　　　jquery对象[0]=dom对象

　　2、dom 对象转换成jquery对象

　　　　$(dom对象)=jquery对象

查找元素:

　　选择器:

　　　　1、id ---> $('#id')

　　　　2、class ---> $('.c1')

　　　　3、* 代表所有

　　　　4、标签选择器 $('a') $('div')

　　　　5、组合用逗号隔开

　　　　　　$('a,#i1,.c1')

　　　　6、层级用空格隔开

　　　　　　$('#i10 a') #i10下的所有a标签(子子孙孙)

　　　　　　$('#i10>a') #i10下一级a标签(儿子)

　　　　　　$('#i10+div') #i10 标签的下一个div标签

　　　　　　$('#i10~div') 和#i10 同级的div 标签

　　　　7、基本查找

　　　　　　1、找第一个子标签 :first

　　　　　　　　$('#i10 a:first')

　　　　　　2、查找除了某个以外的其他标签

　　　　　　　　$('#i10:not("a")')

　　　　　　3、匹配索引值元素

　　　　　　4、查找所有的h 标签 :header

　　　　8、属性查找

　　　　　　$('[name]') 具有name属性的所有标签

　　　　　　$('[name="aaa"]') 具有name="aaa"的标签

　　　　9、表单 type属性值

　　　　　　$(':text') $(':password')

　　　　10、表单对象属性

　　　　　　<input type="text" disabled/> 查找 $(':disabled') $(':enabled') $(':checked') $(':selected')

　　　　实例:::

　　　　　全选反选取消

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .in_button{
            border: 0;
            background-color: #1b7665;
            height: 20px;
            width: 60px;
        }
    </style>
</head>
<body>
    <table>
        <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.10</td>
                <td>81</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.20</td>
                <td>82</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.30</td>
                <td>83</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.40</td>
                <td>85</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="全选" class="in_button" onclick="checkAll();"/>
    <input type="button" value="反选" class="in_button" onclick="reverseAll();" />
    <input type="button" value="取消" class="in_button" onclick="cancleAll();" />

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked', true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop("checked", false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v)
            })
        }
    </script>
</body>
</html>

jquery_全选反选取消

　　筛选

　　　　$('#i1').next() 下一个
　　　　$('#i1').nextAll() 以上所有
　　　　$('#i1').nextUntil('#ii1') #i1以下标签直到#ii1

　　　　<div>
　　　　　　<a>asdf</a>
　　　　　　<a>asdf</a>
　　　　　　<a id='i1'>asdf</a>
　　　　　　<a>asdf</a>
　　　　　　<a id='ii1'>asdf</a>
　　　　　　<a>asdf</a>
　　　　</div>

　　　　$('#i1').prev() 上一个
　　　　$('#i1').prevAll() 以上所有
　　　　$('#i1').prevUntil('#ii1') #i1以上标签直到#ii1

　　　　$('#i1').parent() 父标签
　　　　$('#i1').parents() 所有父标签
　　　　$('#i1').parentsUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

　　　　$('#i1').children() 子标签
　　　　$('#i1').siblings() 兄弟标签
　　　　$('#i1').find() 子子孙孙查找
　　　　$('li').eq(1) == $('li:eq(1)') 索引为1，从0开始
　　　　first() 匹配的第一个
　　　　last() 匹配的最后一个
　　　　hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true

　　点击菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .title{
            background-color: #1b7665;
        }
        .content{
            min-height: 50px;
        }
    </style>
</head>
<body>
    <div style="width: 200px;height: 400px;">
        <div>
            <div class="title">标题一</div>
            <div class="content">内容一</div>
        </div>
        <div>
            <div class="title">标题二</div>
            <div class="hide content">内容二</div>
        </div>
        <div>
            <div class="title">标题三</div>
            <div class="hide content">内容三</div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.title').click(function(){
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
        })
    </script>
</body>
</html>

点击菜单

操作元素

　　1、内容操作

　　　　　　　$('..').text() 获取文本内容

　　　　　　　$('..').text("<a>1</a>") 设置文本内容不解析

　　　　　　　$('..').html 获取标签以及内容

　　　　　　　$('..').html("<a>1</a>") 设置标签以及内容解析

　　　　　　　$('..').val() 获取值

　　　　　　　$('..').val("aaa") 设置值

　　2、样式操作

　　　　　　　addClass 添加class样式

　　　　　　　removeClass 删除class样式

　　　　　　　toggleClass 如果存在就删除这个类，如果不存在就添加

　　　　　　 toggleClass 例子:　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{display: none;  }
    </style>
</head>
<body>
<input type="button" value="开关" id="i1">
<div class="c1 hide">哈哈哈</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(':button').click(function(){
        $('.c1').toggleClass('hide')
    })
</script>
</body>
</html>

开关例子

　　3、属性操作 (专门用来做自定义属性)

　　　　　　.attr 获取属性值

　　　　　　　　('name') 获取name属性值 ('name','aaa') 设置name属性值为aaa

　　　　　　.removeAttr 删除标签属性

　　　　　　.prop 专门用于checkbox,radio做操作

　　4、文档处理

　　　　　　append 在最后

　　　　　　prepend 在最上边

　　　　　　after 在下一条

　　　　　　before 在上一条

　　　　　　remove 删除

　　　　　　empty 删除值

　　　　　　clone 克隆

　　5、样式操作

　　　　　　$('t1').css('样式名称','样式值')

　　6、位置

　　　　　　$(window).scrollTop() 获取浏览器滚动条位置

　　　　　　$(window).scrollTop(0) ()里面有值就设置滚动条位置

　　　　　　scrollLeft([val])

　　　　　　offset 指定标签在html 中的坐标

　　　　　　position() 指定标签相对父标签(relative)标签的坐标　　　　　　

　　　　　　$('i1').height() # 获取标签的高度纯高度
　　　　　　$('i1').innerHeight() # 纯高度 + 补白
　　　　　　$('i1').outerHeight() # 获取边框 + 纯高度 + 补白
　　　　　　$('i1').outerHeight(true) # 获取边框 + 纯高度 + 边距

　　7、事件

　　　　DOM: 三种绑定方式

　　　　jQuery:

　　　　　　1、$('.c1').click(function(){})

　　　　　　 2、$('.c1').bind('click',function(){})

　　　　　　 3、$('.c1').delegate('a','click',function(){}) 委托

　　　　　　 4、$('.c1').on('click',function(){})

　　　　当页面框架加载完毕后，自动执行(加载页面速度快)

　　　　　　$(function(){})

　　　　其他是当页面所有元素完全加载完毕后，执行(加载页面速度慢)

　　8、jQuery 扩展

　　　　添加jquery 方法

　　　　1、扩展1

　　　　　　$.extend({'aa': function(){} })

　　　　2、扩展2

　　　　　　$.fn.extend({ 'aa': function(){ return 'db';} })

　　9、当jquery 增加扩展的时候解决变量冲突

　　　　　　var status = 1;

案例:

　　添加删除复制标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="t1">
    <input type="button" value="添加" id="b1">
    <input type="button" value="删除" id="b2">
    <input type="button" value="复制" id="b3">

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#b1').click(function(){
            var v = $('#t1').val();
            var temp = '<li>' + v + '</li>';
//            $('#u1').prepend(temp);
//            在#u1 内原有的文本之前添加
//            $("#u1").append(temp);
//            在#u1 内原有的文本之后添加
//            $("#u1").after(temp);
//            在#u1标签之后添加文本
//            $('#u1').before(temp);
//            在#u1标签之前添加文本
        });
        $('#b2').click(function(){
            var index = $('#t1').val();
            $('#u1 li').eq(index).remove();
//            删除标签和值
//            $('#u1 li').eq(index).empty();
//            仅删除值
        });
        $('#b3').click(function(){
            var index = $('#t1').val();
            var v = $('#u1 li').eq(index).clone();
            $('#u1').append(v);
        })
    </script>
</body>
</html>

添加删除复制标签

　　点赞效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #DDDDDD;
        }
        .item{
            width: 30px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <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) {
            var fontSize = 8;
            var top = 0;
            var right = -5;
            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('top', top + 'px');
            $(tag).css('right', right + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function(){
                fontSize = fontSize + 5;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;
                $(tag).css('fontSize', fontSize + 'px');
                $(tag).css('top', top + 'px');
                $(tag).css('right', right + 'px');
                $(tag).css('opacity',opacity);
                if (opacity<0){
                    clearInterval(obj);
                    $(tag).remove()
                }
            },40)
        }
    </script>
</body>
</html>

点赞效果

　　窗口移动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<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;">
            <p>aaaa</p>
        </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>
</html>

窗口移动

　　事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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 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);
//        })

//        点击li 数据弹出框 ,使用 delegate 可以对新添加的文本标签也生效
        $('#u1').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        })

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

事件绑定

　　是否阻止事件发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>

    <a id="i1" href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return false;
//            这种事件想要阻止事件发生，需要在onclick="return ClickOn()" 加上return 否则不生效
        }
        $('#i1').click(function () {
            alert(456);
            return false;
//            return false 阻止事件发生
        })
    </script>
</body>
</html>

阻止事件发生

　　表单验证

<!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(){
//            $.Login('#f1')
//        });
        $(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;
                    }
                });
                return flag;
            });
        $(':submit').click(function () {
            var v = $(this).prev().val();
            if(v.length > 0){
                return true;
            }else{
                alert('请输入内容');
                return false
            }
        });
    });
    </script>
</body>
</html>

表单验证

　　jquery 扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script src="plugin1.js"></script>
    <script>
//        var v = $.welcome();
//        alert(v);
        // jquery扩展
        $.fn.extend({
            "welcome": function () {
                return 'hello';
            }
        });
        var e1 = $.welcome();
        alert(e1);

        $.extend({
            'hello': function () {
                return 'welcome';
            }
        });
        var e2 = $.hello();
        alert(e2);
    </script>

</body>
</html>

jquery 扩展

(function (arg) {
    var status = 1; // 解决变量冲突
    arg.extend({
       'aaa': function () {
           return 'AAA';
       }
    });
})(jQuery);
// jQuery 可替换成 $

plugin2.js

status = 1;
$.extend({
   'welcome': function () {
       return '您好';
   }
});

plugin1.js

　　切换菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;}
        .menu{
            background-color: #EEEEEE;
            height: 38px;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;   /*鼠标显示手标*/
        }
        .active{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div style="width: 700px; margin: 0 auto;">
        <div class="menu">
            <div class="menu-item active" i="1">菜单一</div>
            <div class="menu-item" i="2">菜单二</div>
            <div class="menu-item" i="3">菜单三</div>
        </div>
        <div class="content">
            <div c="1">内容一</div>
            <div c="2" class="hide">内容二</div>
            <div c="3" class="hide">内容三</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('i');
            $(".content").children("[c='"+target+"']").removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

切换菜单

编辑框实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        a{
            cursor: pointer;
        }
        input{
            text-align: center;
            width: 100px;
            height: 20px;
            line-height: 20px;
            border: 0;
        }
        table{
            margin-top: 20px;
        }
        .edit_mode{
            background-color: #8a6d3b;
        }
    </style>
</head>
<body>
    <input type="button" value="全选" class="checkAll"/>
    <input type="button" value="反选" class="reverseAll"/>
    <input type="button" value="取消" class="cancleAll"/>
    <input type="button" value="进入编辑模式" class="edit_mode" target="off"/>
    <table border="1px;">
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>ip</th>
                <th>端口</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr class="h">
                <td><input type="checkbox"></td>
                <td target="hostname"><input type="text" value="host1" readonly></td>
                <td target="ip_addr"><input type="text" value="1.1.1.1" readonly></td>
                <td target="port"><input type="text" value="80" readonly></td>
                <td>
                    <select name="status" size="1" disabled>
                        <option value="1" class="online">在线</option>
                        <option value="2" class="offline">下线</option>
                    </select>
                </td>
            </tr>
            <tr class="h">
                <td><input type="checkbox"></td>
                <td target="hostname"><input type="text" value="host2" readonly></td>
                <td target="ip_addr"><input type="text" value="1.1.1.2" readonly></td>
                <td target="port"><input type="text" value="81" readonly></td>
                <td>
                    <select name="status" size="1" disabled>
                        <option value="1" class="online">在线</option>
                        <option value="2" class="offline">下线</option>
                    </select>
                </td>
            </tr>
            <tr class="h">
                <td><input type="checkbox"></td>
                <td target="hostname"><input type="text" value="host3" readonly></td>
                <td target="ip_addr"><input type="text" value="1.1.1.3" readonly></td>
                <td target="port"><input type="text" value="82" readonly></td>
                <td>
                    <select name="status" size="1" disabled>
                        <option value="1" class="online">在线</option>
                        <option value="2" class="offline">下线</option>
                    </select>
                </td>
            </tr>
            <tr class="h">
                <td><input type="checkbox"></td>
                <td target="hostname"><input type="text" value="host4" readonly></td>
                <td target="ip_addr"><input type="text" value="1.1.1.4" readonly></td>
                <td target="port"><input type="text" value="83" readonly></td>
                <td>
                    <select name="status" size="1" disabled>
                        <option value="1" class="online">在线</option>
                        <option value="2" class="offline">下线</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.checkAll').click(function(){
            $('#tb :checkbox').prop('checked', true);
        });
        $('.cancleAll').click(function(){
            $('#tb :checkbox').prop('checked', false);
        });
        $('.reverseAll').click(function(){
           $('#tb :checkbox').each(function(k){
               var v = $(this).prop('checked')?false:true;
               $(this).prop('checked',v);
           })
        });

        $('.edit_mode').click(function(){
           var stat = $('.edit_mode').attr('target');
            if(stat=="off") {
                $('.edit_mode').attr('target','on');
                $('#tb :checkbox:checked').each(function (k) {
                    $('.edit_mode').val("退出编辑模式");
                    //                console.log(this);
                    $(this).parent().siblings().find(':text').prop('readonly', false);
                    $(this).parent().siblings().find('select').prop('disabled', false);
                });
            }else{
                $('.edit_mode').attr('target','off');
                $('#tb :checkbox:checked').each(function (k) {
                    $('.edit_mode').val("进入编辑模式");
                    //                console.log(this);
                    $(this).parent().siblings().find(':text').prop('readonly', true);
                    $(this).parent().siblings().find('select').prop('disabled', true);
                });
            }
        });

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

编辑框实例

posted @ 2016-11-30 21:18 a_monologue 阅读(85) 评论(0) 收藏举报

刷新页面返回顶部

a_monologue

没有收拾残局的能力就别放纵善变的情绪

Dayday up ---- python Day17

公告