前端学习：jQuery基础知识

原创

彭世瑜 2021-07-12 14:30:42 ©著作权

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

笔记


参考资料：http://jquery.cuishifeng.cn/index.html

jQuery

    模块  == 类库

    版本1.x (推荐1.12) 2.x  3.x
    下载地址：http://jquery.com/

    基础语法是：$(selector).action()

    jQuery 或者 $
    转换
        jQuery对象[0]  => Dom对象
        Dom对象  =>  $(Dom对象)

    DOM、BOM、Javascript的类库
    1.查找元素
        选择器：直接找到某个或者某类标签
            1.id  $("#id")
            2.class  $(".class")
            3.tag  $("tag")
            4.组合选择  $("tag, .class, #id")
            5.层级
                $("#id tag")  子子孙孙
                $("#id>tag")  孩子
        筛选器
            :first
            :last
            :even
            :odd
            :eq() 索引

            $("#id").next()
            $("#id").nextAll()
            $("#id").nextUntil()
            $("#id").prev()
            $("#id").prevAll()
            $("#id").prevUntil()
            $("#id").parent()
            $("#id").parents()
            $("#id").parentUntil()
            $("#id").children()
            $("#id").siblings()
            $("#id").find()
        属性
            $("[class]")  具有class属性的所有标签
            $("[class='c1']")  属性=c1的标签

        实例
            多选， 反选， 全选
            选择属性
                $("#tb:checkbox").prop("checked");  获取值
                $("#tb:checkbox").prop("checked", false);  设置值
            jquery方法内置循环
                $("#tb:checkbox").xxx
                $("#tb:checkbox").each(function(index){
                    index 当前索引
                    this dom对象，当前循环的元素
                    $(this) jquery对象
                })
            三元运算符
                var ret = 条件？ 真值： 假值

    2.操作元素
        文本操作
            $().text()   #获取文本内容
            $().text("")  # 设置文本内容

            $().html()   #获取内容
            $().html("")  # 设置内容

            $().val()   获取值
            $().val("")  设置值
        样式操作
            addClass()
            removeClass()
            toggleClass()
        属性操作
            $().attr()  # 专门用于自定义操作
            $().removeAttr()

            $().prop("checked", true)  # 专门用于checkbox, radio
            index() 获取索引
            eq()  筛选索引

        文档处理
            append()
            prepend()
            after()
            before()

            remove()
            empty()

            clone()

        css处理
            $().css("样式", "值")
            点赞：
                $().append()
                $().remove()
                setInterval()
                opacity  1 --> 0
                position
                fontSize
                top left right
        位置：
            scrollTop()  # 获取滚动条值
            scrollLeft()
            $(window).scrollTop(0)  # 设置值 返回顶部

            offset  指定标签在html中的坐标
                offset().left
                offset().top
            position()  指定标签相对父标签（relative）标签的坐标
        尺寸
            height([val|fn])  获取标签的纯高度
            width([val|fn])
            innerHeight()
            innerWidth()
            outerHeight([options])
            outerWidth([options])

        事件绑定
            Dom三种绑定方式
            $().click(function)
            $().bind("click", function)
            $().unbind("click", function)
            $().delegate("a", "click", function)
            $().undelegate("a", "click", function) 
            $().on("click", function)
            $().off("click", function)

        阻止事件发生
            return false

        当页面框架加载完毕函数自动执行
        为了防止文档在完全加载（就绪）之前运行 jQuery 代码
        $(document).ready(function(){});
        $(function(){});

        $().click(function(){})

    jquery扩展
        $.extend  $.method()
        $.fn.extend $().method()

        写扩展时，使用自执行函数，避免变量冲突
        (function(){
            var status = 1;
            //
        })(jQuery);

    作业：
        编辑框  input

实例

tab菜单-索引

前端学习：jQuery基础知识_javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab菜单-索引</title>
    <style>
        .pg-body{
            width: 700px;
            height:200px;
            margin:0 auto;
            border:1px solid #9d9d9d;
        }
        .menu{
            height:36px;
            line-height: 36px;
            background-color: rgba(179, 179, 179, 0.96);
        }
        .menu .menu-item{
            float:left;
            border-right: 1px solid red;
            padding:0 10px;
            cursor: pointer;  /*小手*/
        }
        .menu .active{
            background-color: #e4393c;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="pg-body">
        <div class="menu">
            <div class="menu-item active" >菜单一</div>
            <div class="menu-item" >菜单二</div>
            <div class="menu-item" >菜单三</div>
        </div>
        <div class="content">
            <div >内容1</div>
            <div class="hide" >内容2</div>
            <div class="hide" >内容3</div>
        </div>
    </div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    $(".menu-item").click(function () {
        // 点击菜单颜色变化
        $(this).addClass("active").siblings().removeClass("active");

        //找到对应内容
        var n = $(this).index();  //索引
        console.log(n);
        $(".content").children().eq(n).removeClass("hide").siblings().addClass("hide");
    })
</script>
</html>

tab菜单-自定义属性

前端学习：jQuery基础知识_javascript_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab菜单-自定义属性</title>
    <style>
        .pg-body{
            width: 700px;
            height:200px;
            margin:0 auto;
            border:1px solid #9d9d9d;
        }
        .menu{
            height:36px;
            line-height: 36px;
            background-color: rgba(179, 179, 179, 0.96);
        }
        .menu .menu-item{
            float:left;
            border-right: 1px solid red;
            padding:0 10px;
            cursor: pointer;  /*小手*/
        }
        .menu .active{
            background-color: #e4393c;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="pg-body">
        <div class="menu">
            <div class="menu-item active" menu-id="1">菜单一</div>
            <div class="menu-item" menu-id="2">菜单二</div>
            <div class="menu-item" menu-id="3">菜单三</div>
        </div>
        <div class="content">
            <div content-id="1">内容1</div>
            <div class="hide" content-id="2">内容2</div>
            <div class="hide" content-id="3">内容3</div>
        </div>
    </div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    $(".menu-item").click(function () {
        // 点击菜单颜色变化
        $(this).addClass("active").siblings().removeClass("active");

        //找到对应内容
        var menuId = $(this).attr("menu-id");
        var filter = "[content-id='"+ menuId+"']";
        $(".content").children(filter).removeClass("hide").siblings().addClass("hide");
    })
</script>
</html>

事件优先级

一般而言，自定义事件优先级高于标签自带事件
input chechbox 例外

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件优先级</title>
</head>
<body>
    <div><a onclick="return showMe()" href="http://www.baidu.com">baidu</a></div>
    <div><a id="i1" href="http://www.baidu.com">baidu</a></div>
</body>

<script src="jquery-3.3.1.js"></script>
<script>
    function showMe(){
        alert("123");
        return false;  //阻止链接跳转
    }

    $("#i1").click(function(){
       alert("456");
       return false; //阻止链接跳转
    });
</script>
</html>

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <style>
        div{
            width: 100px;
            height:36px;
            line-height: 36px;
            text-align:center;
            background-color: #0d3ea2;
            color: white;
            cursor:pointer;
            border-bottom:1px solid red;
        }
    </style>
</head>
<body>
    <div id="i1">一个标签1</div>
    <div id="i2">一个标签2</div>
    <div id="i3">一个标签3</div>
    <div id="i4">一个标签4</div>
    <div id="i5">一个标签5</div>
    <div id="i6">一个标签6</div>
    <div id="i7">一个标签7</div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        //方式一
        $("#i1").click(function () {
            alert("i1");
        });

        //方式二
        function myAlert(){
            alert($(this).attr("id"));
        }

        $("#i2").bind("click", myAlert);

        $("#i3").bind("click", myAlert);

        $("#i3").unbind("click", myAlert);

        //方式三  
        $("#i4").delegate("a", "click", myAlert);

        // 方式四
        $("#i6").on("click", myAlert);

        $("#i7").on("click", myAlert);
        $("#i7").off("click", myAlert);
    </script>

</body>
</html>

位置尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置尺寸</title>
    <style>
        body{
            height:1000px;
        }
        .gotoTop{
            position: fixed;
            right:0;
            bottom: 0;
            width: 100px;
            height: 36px;
            line-height: 36px;
            background-color: #9d9d9d;
            color:white;
            text-align: center;
            cursor: pointer;
        }
        .box{
            width: 400px;
            height: 300px;
            background-color: #2459a2;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="gotoTop">返回顶部</div>
</body>

<script src="jquery-3.3.1.js"></script>
<script>
    // 滚动条，回到顶部
    $(".gotoTop").click(function () {
        $(window).scrollTop(0);
    });

    //偏移量
    var off = $(".gotoTop").offset();
    console.log(off);
    console.log(off.top);
    console.log(off.left);

    //坐标
    var pos = $(".gotoTop").position();
    console.log(pos);

    //尺寸
    console.log("height：" + $(".box").height());
    console.log("width：" + $(".box").width());
    console.log("innerHeight：" + $(".box").innerHeight());
    console.log("innerWidth：" + $(".box").innerWidth());
    console.log("outerHeight：" + $(".box").outerHeight());
    console.log("outerWidth：" + $(".box").outerWidth());

    // height：300
    // width：400
    // innerHeight：300
    // innerWidth：400
    // outerHeight：302
    // outerWidth：402
</script>
</html>

全选取消反选

前端学习：jQuery基础知识_前端_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选取消反选</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverseAll()">
    <input type="button" value="取消" onclick="cancelAll()">
    <table border="1px">
        <thead>
            <tr>
                <th>选择</th>
                <th>ip</th>
                <th>port</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>0.0.0.1</td>
                <td>3306</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>0.0.0.1</td>
                <td>3306</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>0.0.0.1</td>
                <td>3306</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>0.0.0.1</td>
                <td>3306</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-3.3.1.js"></script>
    <script>
        function checkAll(){
            $(":checkbox").prop("checked", true);
        }

        function reverseAll() {
            // 通过Dom对象方式
            // $(":checkbox").each(function() {
            //     if(this.checked){
            //         this.checked=false;
            //     } else{
            //         this.checked=true;
            //     }
            // })

            // 通过jquery对象方式
            // $(":checkbox").each(function () {
            //     if($(this).prop("checked")){
            //         $(this).prop("checked", false);
            //     } else{
            //         $(this).prop("checked", true);
            //     }
            // })

            // 通过三元运算
            $(":checkbox").each(function () {
                var ret = $(this).prop("checked")? false: true;
                $(this).prop("checked", ret);
            })
        }

        function cancelAll() {
            $(":checkbox").prop("checked", false);
        }

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

侧边菜单

前端学习：jQuery基础知识_javascript_04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧边菜单</title>
    <style>
        .menu{
            width:200px;
        }

        .header{
            height: 40px;
            background-color: #0d3ea2;
            color:white;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
        }
        .content div{
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-color: #dddddd;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="item">
        <div class="header">菜单2</div>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div class="header">菜单1</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div class="header">菜单3</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div class="header">菜单4</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>

</div>
<script src="jquery-3.3.1.js"></script>
<script>
    // 思路：
    //     为每个标题栏绑定事件
    //     当前点击的标签$(this)
    //     获取下一个标签，展开
    //     获取父级标签
    //     获取所有兄弟标签
    //     添加和移除样式

    // 筛选器
    //     $(this).next()  下一个
    //     $(this).prev()  上一个
    //     $(this).parent()  父
    //     $(this).children()  孩子
    //     $(this).siblings()  兄弟
    //     $(this).find()  子子孙孙

    // 添加删除类
    //     $(this).addClass()
    //     $(this).removeClass()

    // 绑定事件
    // 链式编程

    $(".header").click(function () {
        $(this).next().removeClass("hide");
        $(this).parent().siblings().find(".content").addClass("hide");
    })

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

委托绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>委托绑定事件</title>
</head>
<body>

<div><input type="text"></div>
<div><input type="button" value="添加"></div>

<ul>
    <li>标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</li>
</ul>

<script src="jquery-3.3.1.js"></script>
<script>
    $(document).ready(function () {

        //添加列表元素
        $(":button").click(function () {
            var v = $(":text").val();
            var tag = document.createElement("li");
            tag.innerText = v;
            $("ul").append(tag);
        });

        //后面主动添加的元素也有点击事件
        $("ul").delegate("li", "click", function () {
            alert($(this).text());
        });
     }
    )
</script>
</body>
</html>

开关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关操作</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<input id="toggle" type="button" value="开关">
<a class="c1">文字</a>

<script src="jquery-3.3.1.js"></script>
<script>
    $("#toggle").click(function () {
        $(".c1").toggleClass("hide");

        // 相当于：
        // if($(".c1").hasClass("hide")){
        //     $(".c1").removeClass("hide");
        // } else{
        //     $(".c1").addClass("hide");
        // }
    })

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

扩展jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展jquery</title>
</head>
<body>
<script src="jquery-3.3.1.js"></script>
<script>
    //扩展方法：
    $.extend({
        "myFunc": function () {
            alert("my function")
        }
    });

    // $.myFunc();

    //扩展方法二：
    $.fn.extend({
        "myFoo": function () {
            alert("my foo")
        }
    });

    $().myFoo();
</script>
</body>
</html>

模态框

前端学习：jQuery基础知识_前端_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        .hide{
            display:none;
        }
        /*遮罩层*/
        .shadow{
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background-color: #333333;
            opacity: 0.6;
            z-index: 9;
        }
        /*模态框*/
        .mode{
            position: fixed;
            width:500px;
            height:400px;
            top:50%;
            left:50%;
            margin-top: -200px;
            margin-left:-250px;
            z-index: 10;
            background-color:#ffffff;
        }
    </style>
</head>
<body>
<input type="button" onclick="showMode()" value="显示">

<table border="1px">
    <thead>
        <tr><th>序号</th><th>ip</th><th>port</th><th>操作</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>0.0.0.1</td><td>3301</td>
            <td><a class="edit">编辑</a> | 删除</td></tr>
        <tr><td>2</td><td>0.0.0.2</td><td>3302</td>
            <td><a class="edit">编辑</a> | 删除</td></tr>
        <tr><td>3</td><td>0.0.0.3</td><td>3303</td>
            <td><a class="edit">编辑</a> | 删除</td></tr>
        <tr><td>4</td><td>0.0.0.4</td><td>3304</td>
            <td><a class="edit">编辑</a> | 删除</td></tr>
        <tr><td>5</td><td>0.0.0.5</td><td>3305</td>
            <td><a class="edit">编辑</a> | 删除</td></tr>
        <tr><td>6</td><td>0.0.0.6</td><td>3306</td>
            <td><a class="edit">编辑</a> | 删除</td></tr>
    </tbody>
</table>

<div class="shadow hide">
    <div class="mode">
        <input type="button" onclick="hideMode()" value="取消">

        <input type="text" name="hostname">
        <input type="text" name="port">
    </div>
</div>
<script src="jquery-3.3.1.js"></script>

<script>
    function showMode() {
        $(".shadow").removeClass("hide");
    }

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

    $(".edit").click(function () {

        showMode();

        // 获取本行的内容
        var tds = $(this).parent().prevAll();

        var hostname = $(tds[1]).text();
        var port = $(tds[0]).text();

        $(".mode input[name='hostname']").val(hostname);
        $(".mode input[name='port']").val(port);

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

模态框-属性使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        .hide{
            display:none;
        }
        /*遮罩层*/
        .shadow{
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background-color: #333333;
            opacity: 0.6;
            z-index: 9;
        }
        /*模态框*/
        .mode{
            position: fixed;
            width:400px;
            height:300px;
            top:50%;
            left:50%;
            margin-top: -200px;
            margin-left:-200px;
            z-index: 10;
            background-color:#ffffff;
            text-align: center;
        }
    </style>
</head>
<body>
<input type="button" onclick="showMode()" value="显示">

<table border="1px" id="tb">
    <thead>
        <tr><th>序号</th><th>ip</th><th>port</th><th>密码</th><th>操作</th></tr>
    </thead>
    <tbody>
        <tr class="first-tr"><td >1</td>
            <td target="hostname">0.0.0.1</td>
            <td target="port">3301</td>
            <td target="password">123451</td>
            <td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
        </tr>
        <tr><td>2</td>
            <td target="hostname">0.0.0.2</td>
            <td target="port">3302</td>
            <td target="password">123452</td>
            <td><a class="edit">编辑</a> | <a class="del" >删除</a></td></tr>
        <tr><td>3</td>
            <td target="hostname">0.0.0.3</td>
            <td target="port">3303</td>
            <td target="password">123453</td>
            <td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
        </tr>
        <tr><td>4</td>
            <td target="hostname">0.0.0.4</td>
            <td target="port">3304</td>
            <td target="password">123454</td>
            <td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
        </tr>
        <tr><td>5</td>
            <td target="hostname">0.0.0.5</td>
            <td target="port">3305</td>
            <td target="password">123455</td>
            <td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
        </tr>
        <tr><td>6</td>
            <td target="hostname">0.0.0.6</td>
            <td target="port">3306</td>
            <td target="password">123456</td>
            <td><a class="edit">编辑</a> | <a class="del" >删除</a></td>
        </tr>
    </tbody>
</table>

<div class="shadow hide">
    <div class="mode">

        <p>主机名：<input type="text" name="hostname"></p>
        <p>端口号：<input type="text" name="port"></p>
        <p> 密 码：<input type="text" name="password"></p>
        <input type="button" onclick="hideMode()" value="取消">
        <input type="button" onclick="confirm()" value="确定添加">
    </div>
</div>
<script src="jquery-3.3.1.js"></script>

<script>
    function showMode() {
        $(".shadow").removeClass("hide");
    }

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

    function confirm() {
        //创建行
        var tr = document.createElement("tr");

        //行号
        var td = document.createElement("td");
        td.innerText= "x";
        $(tr).append(td);

        $(".mode input[type='text']").each(function () {
            var td = document.createElement("td");
            td.innerText= $(this).val();
            $(tr).append(td);
            console.log(td);
        });

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

        hideMode();
    }

    $(".del").click(function () {
        $(this).parent().parent().remove();
    });

    $(".edit").click(function () {
        showMode();

        // 获取本行的内容
        var tds = $(this).parent().prevAll();

        tds.each(function(){
            // 获取属性值
            var target = $(this).attr("target");
            // 获取内容
            var text = $(this).text();

            $(".mode input[name="+ target +"]").val(text);

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

添加删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加删除元素</title>
</head>
<body>
<input type="text" name="inputBox">
<input type="button" name="add" value="增加">
<input type="button" name="remove" value="删除">
<input type="button" name="empty" value="清除">
<input type="button" name="clone" value="复制">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script src="jquery-3.3.1.js"></script>
<script>
    $("input[name='add']").click(function () {
        var value = $("input[name='inputBox']").val();
        var html = "<li>" + value +"</li>";
        $("ul").append(html);
    });

    $("input[name='remove']").click(function () {
        var index = $("input[name='inputBox']").val();

        $("ul").children().eq(index).remove();
    });

    $("input[name='empty']").click(function () {
        var index = $("input[name='inputBox']").val();

        $("ul").children().eq(index).empty();
    });

     $("input[name='clone']").click(function () {
        var index = $("input[name='inputBox']").val();

        var tag = $("ul").children().eq(index).clone();

        $("ul").append(tag);
    })
</script>
</body>
</html>

点赞效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞效果</title>
    <style>
        .container{
            width:700px;
            margin: 0 auto;
            border: 1px solid #9d9d9d;
        }
        .item{
            position: relative;
            height: 100px;
            width:30px;
            margin-left: 20px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"><span>赞</span></div>
    </div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>

    $(".item").click(function () {
        addFavor(this);
        console.log(this);
    });

    function addFavor(self) {
        //Dom对象
        var fontSize = 15;
        var top = 0;
        var right = 0;
        var opacity = 1;

        var tag = document.createElement("span");

        // 设置css属性
        $(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();
            }
        }, 50);


    }
</script>
</html>

编辑框

前端学习：jQuery基础知识_前端_06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑框</title>
</head>
<body>
    <input class="edit" type="button" value="编辑">
    <input class="confirm" type="button" value="确认">
    <table border="1px" id="tb">
        <thead>
            <tr>
                <th>序号</th>
                <th>ip</th>
                <th>port</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>10.0.0.1</td>
                <td>3301</td>
            </tr>
            <tr>
                <td>2</td>
                <td>10.0.0.2</td>
                <td>3302</td>
            </tr>
            <tr>
                <td>3</td>
                <td>10.0.0.3</td>
                <td>3303</td>
            </tr>
        </tbody>
    </table>


    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 编辑模式
            $(".edit").click(function(){
                $(this).attr("disabled", true);  //编辑不可用

                $("#tb").find("td").each(function(){
                    var v = $(this).text();  
                    $(this).text("");   //清空文本

                    var input = document.createElement("input");
                    $(input).attr("type", "text").val(v);
                    $(this).append(input);
                })
            })

            // 保存
            $(".confirm").click(function(){

                $(".edit").removeAttr("disabled");  //编辑可用
                console.log($(".edit")[0]);

                $("#tb").find("td").each(function(){
                    var v = $(this).children().val()
                    $(this).children().remove();
                    $(this).text(v);
                })
            })
        })
    </script>
</body>
</html>

表单验证

前端学习：jQuery基础知识_javascript_07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        .error{
            color:red;
        }

        form div{
            line-height: 36px;
        }
    </style>
</head>
<body>
<form action="http://www.baidu.com" method="get" id="f1">
    <div><input type="text" name="username"></div>
    <div><input type="password" name="password"></div>
    <div><input type="text" name="email"></div>
    <div><input type="text" name="phoneNumber"></div>
    <div><input type="submit" value="提交"></div>

</form>
<script src="jquery-3.3.1.js"></script>
<script>

    $(":submit").click(function(){

        $(".error").remove();  //清空验证

        var flag = true;  //作为全局标记
        console.log(this);

       $("#f1").find("input[type='text'],input[type='password']").each(function () {
            var v = $(this).val();
            console.log(v);

            if(v.length <= 0){
                flag = false;

                //添加错误提示
                var tag = document.createElement("span");
                tag.innerText = "必填";
                tag.className = "error";
                $(this).after(tag);

            }
       });
        return flag;
    });
</script>
</body>

</html>