python全栈 part02 - 003 jQuery

jQuery

jQuery参考中文文档

jQuery可以看做是DOM/BOM/JavaScript的类库

jQuery的版本：

  • 1.x 推荐，向前兼容性最好
  • 2.x
  • 3.x

jQuery和Dom对象之间的转换：

jquery对象[0] --> Dom对象
Dom对象 --> $(Dom对象)

jQuery常用用法：

1. 查找元素

DOM元素 10左右

jQuery选择器：

# 根据id查找
$("#id")  

# 根据class查找
$(".c1")

# 根据标签查找
$("a")
$("div")

# 组合
$("a,.c1,#id")

# 层级
$("#id a") # 在id下所有层级查找a标签
$("#id>a") # 在id的下一层级中查找a标签

# 基本
:first
:last
:eq()

# 属性
$('[alex]') # 具有alex属性的所有标签
$("[alex='123']") # alex属性等于123的标签
$("input[type='text']") # input标签下所有type属性为text的
$(":text") # 所有具有text属性值的标签

多选反选全选实例用到的知识点：

  • 选择权
  • $('#tb:checkbox').prop('checked'); 获取值
  • $('#tb:checkbox').prop('checked', true); 设置值
  • jQuery方法内置循环： $('#tb:checkbox').xxxx
  • $('#tb:checkbox').each(function(k){//k为当前索引 this:DOM元素，转化为jQuery元素$(this)})
  • 三目运算： var v = 条件? 真值： 假值

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s2</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll();"/>
    <input type="button" value="反选" onclick="reverseAll();"/>
    <input type="button" value="取消" onclick="cancelAll();"/>

    <table id="tb" border="1">
        <thead>
            <th>选项</th>
            <th>IP</th>
            <th>Port</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>3360</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>3360</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>3360</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>3360</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>3360</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script >
        function checkAll(){
            $("#tb :checkbox").prop("checked", true);
        }
        function cancelAll(){
            $("#tb :checkbox").prop("checked", false);
        }
        function reverseAll(){

            $("#tb :checkbox").each(
                // 方法一：
                // function(){
                //     if(this.checked){
                //         this.checked=false;
                //     }else{
                //         this.checked=true;
                //     }
                // }
                // 方法二
                // function(){
                //     if($(this).prop("checked")){
                //         $(this).prop('checked', false);
                //     }else{
                //         $(this).prop('checked', true);
                //     }
                // }
                // 方法三,三目运算
                function(){
                    var v = $(this).prop('checked')?false:true;
                    $(this).prop('checked', v);
                }
            );
        }
    </script>
</body>
</html>

jQuery 筛选器

# 向后
$('#i1').next()
$('#i1').nextAll()
$('#i1').netxUtil('#i2')

# 向前
$('#i1').prev()
$('#i1').prevAll()
$('#i1').preUntil('#i2')

# 父级
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()

# 子级
$('i1').children()

# 兄弟
$('i1').siblings()

# 查找
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
    first()
    last()
    hasClass('className')

示例- 实现左侧菜单代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s3</title>
    <style>
        .hide {
            display: none;
        }
        .header {
            background-color: black;
            color: wheat;
        }
        .content {
            min-height: 50px;
        }
    </style>
</head>
<body>
    <div style="height:400px;width:200px;border:1px solid #dddddd;">
        <div class="item">
            <div class="header">目录一</div>
            <div class="content hide">fuck 1</div>
        </div>
        <div class="item">
            <div class="header">目录二</div>
            <div class="content hide">fuck 2</div>
        </div>
        <div class="item">
            <div class="header">目录三</div>
            <div class="content hide">fuck 3/div>
        </div>
        <div class="item">
            <div class="header">目录四</div>
            <div class="content hide">fuck 4</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(".header").click(
            function(){
                $(this).next().removeClass("hide");
                $(this).parent().siblings().find(".content").addClass("hide");

                // 链式编程
                // $(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide");
            }
        )
    </script>
</body>
</html>

文本操作

$(..).text() # 获取文本内容
#(..).text("<a>1</a>") # 设置文本内容

$(..).html()
$(..).html(<a>1</a>)

$(..).val()
$(..).var()

样式操作

addClass
removeClass
toggleClass

属性操作

# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n', 'v')
$(..).removeAttr('n')

# 专门用于checkbox,radio
$(..).prop('checked')
$(..).prop('checked', true)

文档处理

append
prepend
after
before

remove
empty

clone

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s5-1</title>
    <style>
        .hide {
            display: none;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -200px;
            background-color: #eeeeee;
            z-index: 10;
        }

        .shadow {
            position: fixed:
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
    </style>
</head>
<body>
<a onclick="addElement();">Add</a>

<table border="1" id="tb">
    <tr>
        <td target="hostname">pc1</td>
        <td target="port">80</td>
        <td target="ip">1.1.1.11</td>
        <td>
            <a class="edit">edit</a> | <a class="remove">remove</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">pc2</td>
        <td target="port">80</td>
        <td target="ip">1.1.1.12</td>
        <td>
            <a class="edit">edit</a> | <a class="remove">remove</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">pc3</td>
        <td target="port">80</td>
        <td target="ip">1.1.1.13</td>
        <td>
            <a class="edit">edit</a> | <a class="remove">remove</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">pc4</td>
        <td target="port">80</td>
        <td target="ip">1.1.1.14</td>
        <td>
            <a class="edit">edit</a> | <a class="remove">remove</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">pc5</td>
        <td target="port">80</td>
        <td target="ip">1.1.1.15</td>
        <td>
            <a class="edit">edit</a> | <a class="remove">remove</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="cancel" onclick="cancelModal();"/>
        <input type="button" value="confirm" onclick="confirmModal();"/>
    </div>
</div>


<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>

<script>
    $(".remove").click(function () {
        $(this).parent().parent().remove();
    });

    function confirmModal() {
        var tds = $(".modal input[type='text']");
        // console.log(tds);
        var tr = document.createElement("tr");
        var td1 = document.createElement('td');
        // td1.innerHTML = "pc-test";
        td1.innerHTML = $(tds[0]).val();
        var td2 = document.createElement("td");
        td2.innerHTML = $(tds[1]).val();
        // td2.innerHTML = "8001";
        var td3 = document.createElement("td");
        // td3.innerHTML = "1.2.3.44";
        td3.innerHTML = $(tds[2]).val();
        var td4 = document.createElement("td");
        td4.innerHTML = '<a class="edit">edit</a> | <a class="remove">remove</a>';

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

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

        $(".modal,.shadow").addClass("hide");
        $(".remove").click(function () {
            $(this).parent().parent().remove();
        });
        $(".edit").click(function () {
            $(".modal,.shadow").removeClass("hide");
            var tds = $(this).parent().prevAll();
            tds.each(
                function () {
                    var n = $(this).attr('target');
                    var text = $(this).text();
                    var a1 = '.modal input[name="';
                    var a2 = '"]';
                    var temp = a1 + n + a2;
                    $(temp).val(text);
                }
            );
        });
    }

    function addElement() {
        $(".modal,.shadow").removeClass("hide");
    }

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

    $(".edit").click(function () {
        $(".modal,.shadow").removeClass("hide");
        var tds = $(this).parent().prevAll();
        tds.each(
            function () {
                var n = $(this).attr('target');
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            }
        );
    });
</script>
</body>
</html>

css处理

$('t1').css('样式名称', '样式值')
商品详情示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s9-1</title>
    <style>
        .menu {
            background-color: #dddddd;
            height: 38px;
        }
        .menu .item-menu {
            line-height: 38px;
            float: left;
            color: black;
            border-right: 1px solid red;
            padding: 0 10px;
        }
        .active {
            background-color: darkred;
        }
        .hide {
            display: none;
        }
        .content {
            margin: 1px;

        }
    </style>
</head>
<body>
<div style="width:700px;margin: 0 auto; border: 1px;">
    <div class="menu">
        <div class="item-menu active">菜单1</div>
        <div class="item-menu">菜单2</div>
        <div class="item-menu">菜单3</div>
    </div>
    <div class="content">
        <div>内容1</div>
        <div class="hide">内容2</div>
        <div class="hide">内容3</div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(".item-menu").click(
            function(){
                $(this).addClass("active").siblings().removeClass("active");
                $(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide");
            }
        );
    </script>
</div>
</body>
</html>

点赞实例用到的知识点:

  • $('t1').append()
  • $('t1').remove()
  • setInterval
  • 透明度 1 > 0
  • positon
  • 字体大小,位置
    参考代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s12</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>
<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 Object
        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", "absoluete");
        $(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 -= 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>

位置

$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([var])

offset().left   指定标签在html中的坐标
offset().top    指定标签在html中的坐标

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

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

事件

$('.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(){})

阻止事件发生: return false

当页面框架加载完成后,自动执行$(function(){ $(...)})

示例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s11</title>
</head>
<body>
    <input id="i1" type="text" />
    <input id="a1" type="button" value="add"/>
    <input id="a2" type="button" value="delete"/>
    <input id="a3" type="button" value="copy"/>

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

<script src="jquery-1.12.4.js"></script>
<script>
    $("#a1").click(function(){
        var v = $('#i1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').prepend(temp);
        // $('#u1').after(temp);
        // $('#u1').before(temp);
    });
    $("#a2").click(function(){
       var index = $('#i1').val();
       $('#u1 li').eq(index).remove();
       // $("#u1 li").eq(index).empty();
    });
    $("#a3").click(function(){
        var index = $("#i1").val();
        var v = $("#u1 li").eq(index).clone();
        $("#u1").append(v);

        // $("#u1 li").eq(index).remove();
        // $("#u1 li").eq(index).empty();

    });
</script>
</body>
</html>

jQuery扩展

  • $.extend $.方法
  • $.fn.extend $(..).方法
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。