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>

　　　　　　例子：左侧边框显示

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

　　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>

　　　　　　样式操作：

　　　　　　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>

　　　　　　属性操作：

　　　　　　#专门用于做自定义属性

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

　　　　　　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>

　　　　　　文档处理：

　　　　　　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>

　　　　　　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>

　　　　　　　　位置：

　　　　　　　　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

巴特西

Python学习笔记第十七周

最新文章

热门文章