Python学习笔记第十七周 - 爱python的小皮

公告

Python学习笔记第十七周

　　一、jQuery

内容：

　　一、jQuery：

　　ps:版本

　　　1.xx （推荐最新版本，兼容性好）

　　　2.xx

　　　3.xx

　　　　转换：

　　　　jQuery对象[0] => DOM对象

　　　　$(DOM对象) => jQuery对象

　　1、查找元素

　　　　基本：

　　　　1、id $('#id')

　　　　　　2、class $('.classname')

　　　　3、a标签 $('a')

　　　　　　4、$(''a,.c2',#i10) 表示同时拿到所有的a标签、class=c2的标签和id=i10的标签

　　　　　　层级：

　　　　$('#i10 a') 表示找到id=10里的所有a标签，不论层级多少都能找到

　　　　　　$('#i10>a') 表示找到id=i10后，只找到它的child的a标签

　　　　　　$('#i10+a') 表示找到id=i 10后，找到它的下一个兄弟的a标签

　　　　　　$('#i10~a') 表示找到id=i 10后，找到它的上一个兄弟的a标签

　　　　　　基本筛选器：

　　　　　　：first

　　　　　　：last

　　　　　　：eq() 索引值，从零开始

　　　　　　：not（）

　　　　　　：even 奇数行

　　　　　　：odd 偶数行

　　　　　　：gt（）

　　　　　　：lt()

　　　　　　:header 匹配 h1~h6的标题元素

　　　　　　查找：　

　　　　　　　　next() 下一个标签

　　　　　　　　prev（）上一个标签

　　　　　　　　parent（）父标签

　　　　　　　　children（）所有的孩子标签

　　　　　　　　siblings（）所有的兄弟标签

　　　　　　　　find() 查找所有的内容

　　　　　　　　nextAll()

　　　　　　　　nextUntil()

　　　　　　　　prevAll()

　　　　　　　　prevUntil()

　　　　　　　　parents()

　　　　　　　　parentsUntil()

　　　　　　　　eq()

　　　　　　　　first()

　　　　　　　　last()

　　　　　　　　hasClass()

　　　　　　属性：

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

　　　　　　$('[属性=“值”]') 所有有该属性对应该值的标签

　　　　　　例子：

　　　　　　$("input[type='text']") 查找input标签里type等于text的标签

　　　　　　例子：多选、反选、取消实例

<!--实例:-->
    <!--多选/反选/全选-->
    <!-- -选择器-->
    <!-- -$(this).prop('checked')  获取值-->
    <!-- -$(this).prop('checked',false) 设置值-->
    <!-- -jQuery方法内置循环:$('[type="checkbox"]').prop('checked',true);-->
    <!-- -var  v = 条件? 真值:假值-->
    <!-- -$('[type="checkbox"]').each(function () {-->
                <!--var v = $(this).prop('checked')?false:true;//三元运算-->
                <!--$(this).prop('checked',v)-->
            <!--})-->
        <!--}  this表示DOM元素-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<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>
            <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>
            <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(){
            $('[type="checkbox"]').prop('checked',true);
        }
        function cancelAll(){
            $('[type=checkbox]').prop('checked',false);
        }
        function reverseAll(){
            $('[type="checkbox"]').each(function () {
                //this 代指当前循环的每一个元素
                //反选
                //DOM方式
//                if(this.checked){
//                    this.checked = false;
//                }else{
//                    this.checked = true;
//                }
                //jQuery方式
//                if($(this).prop('checked')){//prop传递一个参数表示获取状态值
//                    $(this).prop('checked',false);//prop传递两个参数表示设置值
//                }else{
//                    $(this).prop('checked',true);
//                }
                var v = $(this).prop('checked')?false:true;//三元运算
                $(this).prop('checked',v)
            })
        }
    </script>
</body>
</html>

View Code

　　　　　　例子：左侧边框显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color:black;
            color:white;
        }
        .content{
            min-height:50px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width:200px;border:1px solid #dddddd">
        <div class="item">
            <div class="header">标题1</div>
            <div class="content ">内容</div>
        </div>
        <div class="item">
            <div class="header">标题2</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题3</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
            //$(this)表示当前点击的标签
            //获取该标签的上一级标签,找到它上一级标签的兄弟标签
            //添加样式和移除样式
//            $(this).parent().siblings().find('.content').addClass('hide');
//            $(this).next().removeClass('hide');
            //链式编程
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        })//把所有class=header都绑定onclick事件
    </script>
</body>
</html>

View Code

　　2、操作元素

　　　　　　文本操作：

　　　　　　text（）获取内容（）里加参数是设置文本内容，如果包含标签html不解析

　　　　　　html（）获取标签（）力加参数是设置内容，包含标签自动解析

　　　　　　val（）获取input select textarea中标签

　　　　　　例子：　　

　　　　　　模态对话框，使用jQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .shadow{
            position:fixed;
            top:0;
            bottom:0;
            right:0;
            left:0;
            opacity: 0.6;
            z-index:9;
            background-color:black;
        }
        .addcontent{
            position:fixed;
            top:50%;
            left:50%;
            width:500px;
            height:400px;
            margin-top:-250px;
            margin-left:-200px;
            z-index:10;
            background-color:white;
        }
    </style>
</head>
<body>
    <div id='add1' border="1">添加</div>
    <table border="1">
        <thead>
            <tr>
                <th>IP</th>
                <th>PORT</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.1</td>
                <td>80</td>
                <td class="edit"><a>修改</a> | <a>删除</a></td>
            </tr>
            <tr>
                <td>1.1.1.2</td>
                <td>80</td>
                <td class="edit"><a>修改</a> | <a>删除</a></td>
            </tr>
            <tr>
                <td>1.1.1.3</td>
                <td>80</td>
                <td class="edit"><a>修改</a> | <a>删除</a></td>
            </tr>
        </tbody>
        <div class="shadow hide"></div>
        <div class="addcontent hide">
            <div><input name='hostname' type="text"/></div>
            <div><input  name='port' type="text"/></div>
            <div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div>
        </div>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script >
        $('#add1').click(function(){
            $('.shadow').removeClass('hide').next().removeClass('hide');
            $('.addcontent input[type="text"]').val('');
            
        });
        $('.c1').click(function(){
            $(".shadow").addClass('hide').next().addClass('hide');
        });
        $('.edit').click(function() {
            $('.shadow').removeClass('hide').next().removeClass('hide');
            var port = $($(this).prevAll()[0]).text();
            var ip = $($(this).prevAll()[1]).text();
            console.log($('.addcontent input[name="hostname"]').val('123'))
            $('.addcontent input[name="hostname"]').val(ip);
            $('.addcontent input[name="port"]').val(port);
        });



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

View Code

　　　　　　样式操作：

　　　　　　addClass()

　　　　　　removeClass()

　　　　　　toggleClass()自动判断括号内class是否存在，如果存在就删除，如果不存在就添加

　　　　　　例子：

　　　　　　开关

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

View Code

　　　　　　属性操作：

　　　　　　#专门用于做自定义属性

　　　　　　.attr（）： attr('属性名') 获取属性名称对应的属性 .attr('name', 'gavin') 传两个参数表示设置值

　　　　　　removeAttr（‘属性名’）：删除属性

　　　　　　#专门用于checkbox，radio操作

　　　　　　.prop

　　　　　　例子：增强版模态对话框（可以任意添加属性值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .shadow{
            position:fixed;
            top:0;
            bottom:0;
            right:0;
            left:0;
            opacity: 0.6;
            z-index:9;
            background-color:black;
        }
        .addcontent{
            position:fixed;
            top:50%;
            left:50%;
            width:500px;
            height:400px;
            margin-top:-250px;
            margin-left:-200px;
            z-index:10;
            background-color:white;
        }
    </style>
</head>
<body>
    <div id='add1' border="1">添加</div>
    <table border="1">
        <thead>
            <tr>
                <th>IP</th>
                <th>PORT</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td target="hostname">1.1.1.1</td>
                <td target="port">80</td>
                <td target="name">a</td>
                <td class="edit"><a>修改</a> | <a>删除</a></td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.2</td>
                <td target="port">80</td>
                <td target="name">b</td>
                <td class="edit"><a>修改</a> | <a>删除</a></td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.3</td>
                <td target="port">80</td>
                <td target="name">c</td>
                <td class="edit"><a>修改</a> | <a>删除</a></td>
            </tr>
        </tbody>
        <div class="shadow hide"></div>
        <div class="addcontent hide">
            <div><input name='hostname' type="text"/></div>
            <div><input  name='port' type="text"/></div>
            <div><input  name='name' type="text"/></div>
            <div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div>
        </div>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script >
        $('#add1').click(function(){
            $('.shadow').removeClass('hide').next().removeClass('hide');
            $('.addcontent input[type="text"]').val('');

        });
        $('.c1').click(function(){
            $(".shadow").addClass('hide').next().addClass('hide');
        });
        $('.edit').click(function() {
            $('.shadow').removeClass('hide').next().removeClass('hide');
            $(this).prevAll().each(function(){
                var tap = $(this).attr('target');
                var text = $(this).text();
                $('.addcontent input[name="' + tap + '"]').val(text);
            })
        });



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

View Code

　　　　　　index() 获取索引位置

　　　　　　eq($(this).index()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            line-height:38px;
            background-color:#eeeeee;
            border-bottom:1px solid #dddddd;

        }
        .menu .menu-item{
            float:left;
            border-right:1px solid red;
            padding:0 20px;
            cursor:pointer;


        }
        .content{
            min-height:100px;
            border:1px solid #dddddd;
        }
        .active{
            background-color:green;
        }
    </style>
</head>
<body>
    <div style="width:700px;margin:0 auto;">
         <div class="menu">
             <div class="menu-item ">菜单1</div>
             <div  class="menu-item ">菜单2</div>
             <div  class="menu-item ">菜单3</div>
             <div style="clear:both"></div>
         </div>
         <div class="content">
             <div  class="cotent-item ">内容1</div>
             <div  class="cotent-item hide">内容2</div>
             <div  class="cotent-item hide">内容3</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

　　　　　　文档处理：

　　　　　　append 添加到最后一个位置

　　　　　　prepend 添加到第一个位置

　　　　　　after 添加到元素的后面

　　　　　　before 添加到元素的前面

　　　　　　remove 删除样式和内容

　　　　　　empty 只删除内容，不删除样式

　　　　　　clone 复制选定的内容

　　　　　　例子：模态对话框的删除功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        .hide{
            display:none;
        }
        .shadow{
            position: fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            background-color:black;
            opacity: 0.6;
            z-index: 9;
        }
        .menu{
            position:fixed;
            top:50%;
            left:50%;
            background-color:#eeeeee;
            width:400px;
            height:500px;
            margin-top:-250px;
            margin-left:-200px;
            z-index:10;
        }

    </style>
</head>
<body>
    <a id="add">添加</a>
    <table border="1">
        <thead>
            <tr>
                <th >IP</th>
                <th >Port</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td target="hostname">1.1.1.1</td>
                <td target="hostname">80</td>
                <td><a class="edit">编辑</a> | <a class="del">删除</a></td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.2</td>
                <td target="port">80</td>
                <td><a class="edit">编辑</a> | <a class="del">删除</a></td>
            </tr>
             <tr>
                <td target="hostname">1.1.1.3</td>
                <td target="port">80</td>
                <td><a class="edit">编辑</a> | <a class="del">删除</a></td>
            </tr>
        </tbody>
    </table>
    <div>
        <div class="menu hide">
            <input target="hostname" type="text"/>
            <input target="port" type="text"/>
            <div>
            <input id="remove" type="button" value="取消"/>
        </div>
        </div>

    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#add").click(function(){
            $('.menu, .shadow').removeClass('hide');
            $('.menu input[type="text"]').val("")
        });
        $('#remove').click(function(){
            $('.menu, .shadow').addClass('hide');
        });
        $('.edit').click(function(){
            $('.menu, .shadow').removeClass('hide');
            var tds = $(this).parent().prevAll();
            tds.each(function(){
                var target = $(this).attr('target');
                var value = $(this).text();
                $('.menu input[target="'+target+'"]').val(value);
            });
        });
        $('.del').click(function () {
           $(this).parent().parent().remove();
        })
    </script>
</body>
</html>

View Code

　　　　　　css处理：

　　　　　　$('t1').css('样式名称'，‘样式值’)

　　　　　　例子：点赞功能

　　　　　　　　知识点：

　　　　　　　　- $().append()

　　　　　　　　- setInterval()

　　　　　　　　- 透明度 1---> 0

　　　　　　　　- position

　　　　　　　　- 字体大小，位置

　　　　　　　　-clearInterval

　　　　　　　　-setInterval

　　　　　　　　-remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞</title>
    <style>
        .container{
            padding:50px;
            border:1px solid #dddddd;
        }
        .item{
            position:relative;
            width:48px;
        }
    </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){
            //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('top',top + 'px');
            $(tag).css('right',right+ 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function(){
                fontSize += 10;
                top -= 10;
                right -= 10;
                opacity -= 0.1;
                $(tag).css('fontDSize',fontSize + 'px');
                $(tag).css('right',right + 'px');
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }

            },100)
        }
    </script>
</body>
</html>

View Code

　　　　　　　　位置：

　　　　　　　　scrollTop() 不加值表示获取

　　　　　　　　scrollTop（值）表示设置

　　　　　　　　scrollLeft（）

　　　　　　　　offset 指定标签在文档中的坐标

　　　　　　　　offset().top offset().left 指定标签的横纵坐标

　　　　　　　　position（）指定标签相对父标签（relative）的坐标

　　　　　　　　height（）获取标签的高度，只能看到纯高度

　　　　　　　　innerHeight（）只获取边框+纯高度

　　　　　　　　outerHeight（）获取边框+ 纯高度+边距

　　　　　　　　outerHeight（true）

　　　　　　　　#纯高度、边框、外边距、内边距

　　　　　　　　绑定事件：

　　　　　　　　　　click() 等操作

　　　　　　　　　　bind('click',function(){})

　　　　　　　　　　unbind('click',function(){})

　　　　　　　　　　delegate('a','click', function(){}) 委托方式

　　　　　　　　　　undelegate('a','click', function(){}) 委托方式

　　　　　　　　　　on('click', function(){})

　　　　　　　　　　off('click',function(){})

　　　　　　　　绑定事件的问题：

　　　　　　　　默认情况下，需要在所有元素都加载完毕后才执行js操作，例如当执行js时，如果上述有图片之类需要加载，需要在等图片加载完毕后，才能执行js操作，在图片加载过程中，其实事件已经可以操作，所以在js中，可以变为当页面框架加载完毕后，自动执行：

　　　　　　　　操作方式：

　　　　　　　　$(function(){});将执行的操作放入该匿名函数中，可以保证在页面框架加载完毕后就开始执行操作

　　　　　　　　</script>

　　　　　　　　jQuery扩展：

　　　　　　　　- $.extend $.方法

　　　　　　　　- $.fn.extend $(变量).方法　　　

　　　　　　　　自己写的时候需要写成自执行函数

　　　　　　　　（function(arg){

　　　　　　　　　　//使用该方式引入可以封装其他人在定义时的全局变量

　　　　　　　　　　var status =1;

　　　　　　　　　　arg.extend({

　　　　　　　　　　'function_name': function(){

　　　　　　　　　　　　return 'XXX';

　　　　　　　　　　})

　　　　　　　　　　}）(jQuery);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展</title>
</head>
<body>

    <script src="jquery-1.12.4.js"></script>
    <script src="plugin1.js"></script>
    <script>
        //通过文件方式调用
        var v = $.wangsen();
        alert(v);
        //调用方式1
//        $.extend({
//            'wangsen':function(){
//                return 'sb';
//            }
//        });
//        var v = $.wangsen();
//        alert(v);



        //调用方式2:
//        $.fn.extend({
//            'hanyang': function(){
//                return 'db';
//            }
//        });
//        var v = $('#i1').hanyang();
//        alert(v);
        
    </script>
</body>
</html>

网页

status = 1;

$.extend({
   'wangsen': function () {
       return 'sb';
   }
});

plugin1.js

posted on 2017-06-07 16:41 爱python的小皮阅读(209) 评论(0) 编辑收藏举报

刷新页面返回顶部