04 . 前端之JQuery

iginkgo18

发布于 2020-09-27 15:48:58

3.3K0

发布于 2020-09-27 15:48:58

文章被收录于专栏：devops_k8s devops_k8sdevops_k8s

JQuery简介

# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
# 能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

什么是JQuery?

# JQuery是一个JavaScript函数库
# JQuery是一个轻量级的"写的少，做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中．

# JQuery库包含以下功能:

# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities

# 除此之外，JQuery还提供了大量的插件

为什么使用JQuery?

# 目前网络上有大量开源的JS框架，但是JQuery是目前最流行的JS框架，而且提供了大量的扩展.
# 很多大公司都在使用JQuery，例如:
# Google,Microsoft,IBM,Netflix

# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!

JQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持*

JQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。 $(“#i1”).html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。相当于： document.getElementById(“i1”).innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

Example DOM和JQuery对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <link rel="stylesheet" href="csswenjian"/>
    <style>

    </style>
<body>
    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1")
    </script>
</body>
</html>

# 打开浏览器访问这个html的console
document.getElementById('i1')
<div id=•"i1">•123•</div>•

$('#i1')           
jQuery.fn.init [div#i1, context: document, selector: "#i1"]

$('#i1')[0]
<div id=•"i1">•123•</div>•

# JQuery对象[0]  => DOM对象
# Dom对象   =>  $(Dom对象)

JQuery安装

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：从 jquery.com 下载 jQuery 库从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

HTML标签引用JQuery

有两个版本的 jQuery 可供下载：

* Production version - 用于实际的网站中，已被精简和压缩。
* Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <link rel="stylesheet" href="csswenjian"/>
    <style>

    </style>
<body>
    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1")
    </script>
</body>
</html>

# 将下载的文件放在网页的同一目录下，就可以使用JQuery

CDN引用JQuery

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。 Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：

Staticfile CDN:

<head>  
<script  src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">  </script>  
</head>

百度CDN

<head>  
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script>  
</head>

新浪CDN

<head>  
<script  src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">  </script> 
</head>

Google CDN

<head>  
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>  
</head>
# Google产品在中国很不稳定

Microsoft CDN

<head>  
<script  src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>  
</head>

# 使用CDN的JQuery，有一个很大的优势:
# 许多用户访问其他站点时，已经从上面各种CDN加载过JQuery，所以结果是，他们访问你站点时，
# 会从缓存中加载JQuery，这样可以减少加载时间，同时，大多数CDN都可以确保当用户向其请求文件时，
# 会从离最近的服务器上返回响应，这样也可以提高加载速度.

# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.

JQuery基础语法

# 通过JQuery，可以选取(查询,query)HTML元素，并对他们执行"操作"(actions).

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<script>
    $(document).ready(function () {
        // alert("文档加载完毕");
        //  当前函数执行完执行alert弹出框
        $("p").click(function () {
            $(this).hide();
        // 隐藏p元素   
        })
    });
</script>
</body>
</html>

查找标签

1. 基本选择器 id选择器：

$("#id")

标签选择器

$("tagName")

Class选择器

$(".className")

配合使用

$("div.c1")
// 找到c1  class类的div标签

所有元素选择器

$("*")

组合选择器

$("#id,.className,tagName")

层级选择器 x和y可以为任何选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

Example1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <p class="pclass">p1</p>
    <p id="pid">p2</p>
    <button>
        click
    </button>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").text("p元素被修改了");
                $(".pclass").text("p元素通过class被修改了");
                $("#pid").text("p元素通过pid被修改了");
            });
        });
    </script>
</body>
</html>

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>Click</button>
<script>
    $(document).ready(function () {
        // $("button").click(function () {
        //     $(this).hide();
            // 单击事件
        // });

        // $("button").dblclick(function () {
            // $(this).hide();
            // 双击事件
        // });

        $("button").mouseenter(function () {
            $(this).hide();
            // 当鼠标放到按钮上触发此事件，
            // mouseleave是鼠标移开按钮触发的事件
        });
    })
</script>
</body>
</html>

事件之绑定，解除绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="clickBind">ClickBind</button>
<script>
    $(document).ready(function () {
        // $("#clickBind").click(function () {
            // alert("hello")
            // 当我们的事件很多时，这样写非常消耗内存
        // });

        $("#clickBind").bind("click",clickHandler1);
        $("#clickBind").bind("click",clickHandler2);
        // $("#clickBind").unbind("click"); //这种解除绑定会解除所有
        $("#clickBind").unbind("click",clickHandler1()); //解除单一绑定


        $("#clickBind").on("click",clickHandler1);  // bind底层都是使用on,off实现
        $("#clickBind").off("click",clickHandler2);
    });

    function clickHandler1(e) {
        console.log("clickHandler1")
    }
    function clickHandler2(e) {
        console.log("clickHandler2")
    }
</script>
</body>
</html>

自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <button id="ClickMeBtn">Click</button>
    <script>
        var ClickMeBtn
        $(document).ready(function () {
            ClickMeBtn = $("#ClickMeBtn");
            ClickMeBtn.click(function () {
                var e = jQuery.Event("MyEvent");
                ClickMeBtn.trigger(e);
            });

            ClickMeBtn.bind("MyEvent",function(event) {
                console.log(event);
            })
        })
    </script>
</body>
</html>

Example2

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

Example3 多选，全选，反选

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

    <input type="button" value="全选" onclick="ChackAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <input type="button" value="取消" onclick="CancleAll()" />


    <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.2</td>
                <td>3306</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function ChackAll() {
            $(':checkbox').prop('checked',true);
        }

        function CancleAll() {
            $(':checkbox').prop('checked',false);
        }

        function ReverseAll() {
            $(':checkbox').each(function (k) {
                //  this代表当前循环的每一个元素
                //  反选，循环出来每个元素,
                //     console.log(k,this)
                //     if(this.checked){
                //         this.checked = false;
                //     }else{
                //         this.checked = true;
                //     }
                // })


                // if ($(this).prop('checked')) {
                //     $(this).prop('checked', false);
                // } else {
                //     $(this).prop('checked', true);
                // }
                //三元运算 var v = 条件? 真值:假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

/*
$(':checkbox').prop('checked');     获取值
$('checkbox').prop('checked',true); 设置值

JQuery方法内置循环:  $(':checkbox').xxxx

$(':checkbox').each(function(k)){
    // k当前索引
    // this,DOM,当前循环的元素 $(this)
}
*/

Example4 筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: aliceblue;
        }

        .content{
            min-height: 50px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height: 400px; width: 200px; border: 1px solid green">
        <div class="item">
            <div class="header">标题1</div>
            <div id="i1" class="content hide">内容</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>
            // jquery绑定事件
            $('.header').click(function () {
                // 当前点击标签 $(this)
                // 获取某个标签的下一个标签
                // 获取某个标签的父标签,然后获取所有兄弟标签.
                // 找到后将content加上hide给关掉
                //  添加样式和移除样式
                //  $('.i1'）.addClass('hide')
                //  $('#i1').removeClass('hide')
                //  var v = $('this + div');
                //  $('label + input')
                // console.log(v);

                // 筛选器
                // $(this).next()   下一个
                // $(this).prev()  上一个
                // $(this).parent() 父
                // $(this).children() 孩子
                // $('#i1').sibling() 兄弟
                // ('#i1').find('#i1')  子子孙孙查找

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

Example模态编程框

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button


$(":checkbox")  //找到所有的checkbox

操作标签

jQuery隐藏/显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
    <style>
        div{
            background: #ece023;
            width: 50px;
            height: 50px;
            margin: 2px;
            float: left;
        }
    </style>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>

<script>
    for(var i = 0;i<5;i++){
        $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
        $(this).hide(2000,function () {
            $(this).remove();
        });
    })
</script>

<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            $("p").hide(1000);
            //1000毫秒隐藏
        });

        $("#show").click(function () {
            $("p").show(1000);
            //1000毫秒显示周期
        });

        $("#toggle").click(function () {
            $("p").toggle(1000);
            // 一个按钮实现显示/隐藏两个功能
        });
    });
</script>
</body>
</html>

jQuery淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#in").on("click",function () {
                $("#div1").fadeIn(1000);
                $("#div2").fadeIn(1000);
                $("#div3").fadeIn(1000);
            });
            $("#out").on("click",function () {
                $("#div1").fadeOut(1000);
                $("#div2").fadeOut(1000);
                $("#div3").fadeOut(1000);
            });
            $("#toggle").on("click",function () {
                $("#div1").fadeToggle(1000);
                $("#div2").fadeToggle(1000);
                $("#div3").fadeToggle(1000);
            });
            $("#to").on("click",function () {
                $("#div1").fadeTo(1000, 0.2);
                $("#div2").fadeTo(1000, 0.4);
                $("#div3").fadeTo(1000, 0.7);
            });
        });
    </script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeOut</button>
<button id="toggle">toggle</button>
<button id="to">fadeto</button>
<div id="div1" style="width: 80px;height: 80px; display: none;  color: rgb(17, 119, 0);">>1</div>
<div id="div2" style="width: 80px;height: 80px; display: none;  color: rgb(17, 119, 0);">>2</div>
<div id="div3" style="width: 80px;height: 80px; display: none;  color: rgb(17, 119, 0);">>3</div>
</body>
</html>

jQuery滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
    <style>
        #content, #flipshow, #flighide, #fliptoggle {
            padding: 5px;
            text-align: center;
            background-color: aqua;
            border: solid 1px antiquewhite;
        }

        #content {
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="flighide">隐藏</div>
<div id="fliptoggle">隐藏/出现</div>
<div id="content">hello</div>
<script>
    $(document).ready(function () {
        $("#flipshow").click(function () {
            $("#content").slideDown(1000);
        });

        $("#flighide").click(function () {
            $("#content").slideUp(500);
        });

        $("#fliptoggle").click(function () {
            $("#content").slideToggle(500);
        });
    });
</script>
</body>
</html>

回调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>隐藏</button>
<p>hello world</p>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            // $("p").hide(1000,function () {
            //     alert("动画结束,这个方法称为回调")

            $("p").css("color", "red").slideUp(1000).slideDown(1000);
        });
    });
</script>
</body>
</html>

JQuery的HTML操作

jQuery的HTML捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="text">this is my webpage</p>
<button id="btn1">点击</button>
<p><input type="text" id="it" value="youmen"></p>
<p><a href="http://www.baidu.com" id="aid">百度一下</a></p>
<button id="btn2">百度</button>

<script>
    $(document).ready(function () {
        // $("#btn1").click(function () {
        //     alert("text:" + $("#text").text());
        // });

        $("#it").click(function () {
            alert("text:"+$("#it").val());
        });

        $("#btn2").click(function () {
            //获取属性
            alert("text:"+$("#aid").attr("href"));
            alert("text:"+$("#aid").attr("id"));
        });

        // $("#btn1").click(function () {
        //     alert("text:"+$("#text").html());
        // });
    });
</script>
</body>
</html>

处理HTML捕获内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <p id="p1">Hello Web</p>
    <p id="p2">Hello World</p>
    <input type="text" id="i3" value="hello">
    <button id="btn1">click1</button>
    <button id="btn2">click2</button>
    <button id="btn3">click3</button>

    <a id="aid" href="http://www.baidu.com">最初是百度,然后换成39.108.140.0:520</a>
    <button id="btn4">跳转</button>

    <br/>
    <p id="p5">hello</p>
    <button id="btn5">按钮</button>

    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#p1").text("YouMen");
                // 将捕获到的内容进行修改
            });

            $("#btn2").click(function () {
                $("#p2").html("<a href='http://baidu.com'>百度一下</a>")
                // 修改标签
            });
            
            $("#btn3").click(function () {
               $("#i3").val("幽梦");
               // 对输入框内容进行修改
            });

            $("#btn4").click(function () {
                $("#aid").attr({
                    "href":"http://39.108.140.0:520",
                    "title":"hello"
                },);
                // 修改属性
            });

            $("#btn5").click(function () {
                $("#p5").text(function (i,ot) {
                    return "old:" +ot+"new:这是新的内容"+(i);
                });
            });
        });
    </script>
</body>
</html>

JQury添加,删除元素

添加,插入元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <p id="p1">幽梦</p>
    <p id="p2"></p>
    <button id="btn1">添加</button>
    <button id="btn2">插入</button>

    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#p1").append("this is my webpage add content,");
                // $("#p1").prepend("this is my webpage add content,");
            });

            $("#btn2").click(function () {
                // $("#p2").before("hello");
                $("#p2").after("world");
            });
        })
    </script>
</body>
</html>

删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="div" style="
          height: 200px;
          width: 200px;
          border: 1px solid dimgray;
           color: rgb(0, 0, 204);">;>
    hello
    <p>hello</p>
    <p>world</p>
</div>
<button id="btn1">删除</button>

<script>
    //remove  empty
    $(document).ready(function () {
        $("#btn1").click(function () {
            // $("p").remove();
            // $("p").empty();
            $("div").empty();
            // $("div").remove();
            // empty一般只会删除内容相关，remove删除元素
        });
    });
</script>
</body>
</html>

JQuery的CSS方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
    <style>
        .style1 {
            width: 100px;
            height: 100px;
            background-color: #cccccc;
        }

        .style2 {
            width: 100px;
            height: 100px;
            background-color: darkseagreen;
        }
    </style>
</head>
<body>
<div>
    sdaf
</div>

<script>
    $(document).ready(function () {
        // $("div").css("width","100px");
        // $("div").css("hight","100px");
        // $("div").css("background","#FF0000");

        // $("div").css({
        //     width: "100px", height: "100px", backgroundColor: "#00FF00"
        // });
        $("div").addClass("style1");
        $("div").click(function () {
            $(this).toggleClass("style2");
        });
    });
</script>
</body>
</html>

jQuery的盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
    <style>
        #div{
            width: 100px;
            height: 100px;
            margin: 50px;
            padding: 50px;
            border: 2px solid darkseagreen;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="div"></div>

    <script>
        $(document).ready(function () {
            //innerHeight　指内边距+外边距+Height
            alert($("#div").innerHeight());
        })
    </script>
</body>
</html>

JQuery的元素遍历与过滤

JQuery向下遍历元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 500px;
            height: 200px;
            background-color: #cccccc;
            border: 3px solid darkseagreen;
        }

        #div2{
            width: 400px;
            height: 150px;
            margin-top: 10px;
            margin-left: 10px;
            border: 30px solid chocolate;
        }

        p{
            margin-left: 10px;
            margin-top: 10px;
            width: 150px;
            height: 80px;
            border: 3px solid green;
        }
    </style>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <div id="div1">div1
        <div id="div2"> div2
            <p>
                <a>
                    Hello
                </a>
            </p>
        </div>
    </div>

    <script>
        // children
        // find
        $(document).ready(function () {
            // $("#div1").children().css({border:"3px solid red"})
            $("#div1").find("p").css({border: "3px solid gold"})
        })
    </script>
</body>
</html>

向上遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 500px;
            height: 200px;
            background-color: #cccccc;
            border: 3px solid darkseagreen;
        }

        #div2{
            width: 400px;
            height: 150px;
            margin-top: 10px;
            margin-left: 10px;
            border: 30px solid chocolate;
        }

        p{
            margin-left: 10px;
            margin-top: 10px;
            width: 150px;
            height: 80px;
            border: 3px solid green;
        }
    </style>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <div id="div1">div1
        <div id="div2"> div2
            <p>
                <a>
                    Hello
                </a>
            </p>
        </div>
    </div>

    <script>
        // parent()  只能寻找到他的直接父类
        // parents()
        // parentUntil()
        $(document).ready(function () {
            $("a").parent().css({border:"3px solid #FF0000"})
            // $("p").parents("#div1").css({border:"3px solid #FF0000"})
            $("p").parentsUntil("#div1").css({border:"3px solid #FF0000"})
        })
    </script>
</body>
</html>

同级遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
    <style>
        .bd * {
            display: block;
            border: 3px solid gray;
            color: gray;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>
<div class="bd">
    <p>P</p>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>

<script>
    // sibings()
    // next()
    // nextAll()
    // nextUntil()
    // prev() 跟上面区别在于一个向上一个向下
    // preUntil()
    $(document).ready(function () {
        // $("h4").siblings().css({border: "3px solid #FF0000"});
        // 修改同级所有元素
        // $("h4").next().css({border: "3px solid #FF0000"});
        // $("h4").nextAll().css({border: "3px solid #FF0000"});
        // $("h4").nextUntil("h6").css({border: "3px solid #FF0000"});
        // 从你寻找的元素到指定元素期间的遍历


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

jQuery之过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <div>
        <p>div1</p>
    </div>

    <div>
        <p id="pid">div2</p>
    </div>

    <div>
        <p id="pid2">div3</p>
    </div>

    <div>div4</div>

<script>
    /*
    * fisrt() 只对第一个生效
    * last() 最后一个生效
    * eq() 从0开始指定,0指定1,1指定2
    * filter() 规定一个同样的标准
    * not() 过滤,相反的效果
    */

    $(document).ready(function () {
        // $("div p").first().css("background-color","red");
        // $("div p").eq(1).css("background-color","red");
        // $("div p").filter("p").css("background-color","red");
        $("div p").not(".pid").css("background-color","red");
    });
</script>
</body>
</html>

小案例

用户输入为空提示报错信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/jquery.js"></script>
    <style>
        .c1 {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div>
    用户名: <input type="text" id="username">
    <span class="c1"></span>
</div>

<div>
    密码: <input type="password" id="password">
    <span class="c1"></span>
</div>
<button id="btn">提交</button>

<script>
    $('#btn').click(function () {
        var user = $('#username').val();
        var pwd = $('#password').val();
        if (user.length == 0) {
            $('#username').siblings('.c1').text("用户名不能为空");
        } else {
            $('#username').siblings('.c1').text('');
        }

        if (pwd.length == 0) {
            $("#password").siblings('.c1').text("密码不能为空");
        } else {
            $("#password").siblings('.c1').text('');
        }
    })
</script>
</body>
</html>

全选,反选,新增,编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 99;
        }

        .c2 {
            height: 200px;
            width: 300px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;;
            margin-left: -150px;
            z-index: 100;
        }

        .hide {
            display: none;
        }
    </style>
    <script src="../static/jquery.js"></script>
</head>
<body>

<button id="add">新增</button>
<button id="chose_all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>

<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>主机</th>
        <th>IP</th>
        <th>端口</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>nginx</td>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>mysql</td>
        <td>1.1.1.2</td>
        <td>3306</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>php</td>
        <td>1.1.1.3</td>
        <td>9000</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="cc hide">
    <div class="c1"></div>
    <div class="c2">
        <div>
            主机: <input type="text" id="username">
        </div>

        <div>
            IP: <input type="text" id="ip">
        </div>

        <div>
            端口: <input type="text" id="port">
        </div>

        <div>
            <button id="sub">提交</button>
            <button id="cannel">取消</button>
        </div>
    </div>
</div>

<script>
    // 全选
    $('#chose_all').click(function () {
        $(":checkbox").prop("checked", true);
    });

    // 取消
    $('#cancel').click(function () {
        $(":checkbox").prop("checked", false);
    });

    // 反选
    $('#reverse').click(function () {
        var a = $(':checkbox');
        for (var i = 0; i < a.length; i++) {
            var status = a.eq(i).prop('checked');
            //     if (status == true){
            //         a.eq(i).prop('checked',false);
            //     }else {
            //         a.eq(i).prop('checked',true);
            a.eq(i).prop('checked', !status);
        }
    });

    var editBtn;
    var flag;

    // 新增
    // 1. 点击新增按钮,弹出模态对话框
    $('#add').click(function () {
        $('.cc').removeClass('hide');
        $('#username').val('');
        $('#ip').val('');
        $('#port').val('');
        flag = 1;
    });

    // 2. 用户输入内容,点击确定按钮,生成一条记录添加到table标签的最后面,并且关闭模态对话框
    $('#sub').click(function () {
        if (flag == 1) {
            // 2.1 获取用户输入内容
            var username = $('#username').val();
            var ip = $('#ip').val();
            var port = $('#port').val();

            // 2.2 创建tr标签,然后将用户输入的数据放到tr对应的td标签里面去
            var newTr = '<tr><td><input type="checkbox"></td><td>' + username + '</td><td>' + ip + '</td><td>' + port + '</td><td><button class="fire">开除</button> <button class="edit">编辑</button></td></tr>';

            // 2.3 将新创建的tr标签添加到table标签的tbody的最后
            $('tbody').append(newTr);
        } else {
            var username = $('#username').val();
            var ip = $('#ip').val();
            var port = $('#port').val();

            // 获取该行的数据
            editBtn.parent().prev().text(username);
            editBtn.parent().prev().prev().text(ip);
            editBtn.parent().prev().prev().text(port);
        }
        $('.cc').addClass('hide');
    });

    // 点击取消,关闭模态对话框
    $("#cannel").click(function () {
        $('.cc').addClass('hide');
    });

    // 删除
    $('tbody').on('click', '.fire', function () {
        $(this).parent().parent().remove();
    });

    // 编辑
    // 1. 弹出模态对话框,并且将之前的数据获取到,然后赋值给输入框
    $('tbody').on('click', '.edit', function () {
        flag = 2;
        editBtn = $(this);
        $('.cc').removeClass('hide');
        // 获取该行数据
        var username = $(this).parent().prev().text();
        var ip = $(this).parent().prev().prev().text();
        var port = $(this).parent().prev().prev().text();

        // 赋值给模态对话框的input标签
        $('#username').val(username);
        $('#ip').val(ip);
        $('#port').val(port);
    });
</script>
</body>
</html>

JQuery Ajax

JQuery UI

JQueryUI简介

JQuery UI 是以JQuery为基础的JavaScript网页用户界面的开源库,包含底层用户交互，动画和特效和可更换主题的可视控件，我们可以直接用它来构建具有很好交互性的web应用程序. 包含了许多维持状态的小部件(Widget),因此，他与典型的JQuery插件使用模式略有不同，所有的JQuery UI小部件(Widget)使用相同的模式，所有，只要你学会其中一个,你就知道如何使用其他的小部件(Widget) 支持版本 IE6.0+Firefox 3 + Safari 3.1 + Opera9.6和GoogleChrome JQuery UI主要分为3个部分: 交互,小部件和效果库 a: 交互交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortabie等 b: 小部件主要是一些界面的扩展,包括AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner等 c: 效果用于提供丰富的动画效果,包括: Add Class,Color Animation,Togller等.

JQuery UI的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.css"></script>
    <script src="jquery-ui.min.js"></script>
    <link type="text/css" href="jquery-ui.min.css" rel="stylesheet">

</head>
<body>
<button>百度一下</button>
<a href="http://www.baidu.com" id="a_btn">百度一下</a>

<script>
    $(document).ready(function () {
        $("#a_btn").button();
    });
</script>
</body>
</html>

JQuery Draggable

拖动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery-ui.min.css"></link>
</head>
<body>
    <div style="width: 100px; height: 100px;border: 20px solid #FF0000;" id="div">
    
    </div>

<script>
    $(document).ready(function () {
        $("#div").draggable();
    })
</script>
</body>
</html>

放置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
    <div style="width: 100px;height: 100px; border: 2px solid #7e55ff;" id="div1"></div>
    <div style="width: 200px;height: 200px; border: 2px solid #7e55ff;" id="div2"></div>

<script>
    $(document).ready(function () {
        $("#div1").draggable();
        $("#div2").droppable();

        $("#div2").on("drop",function (event,ui) {
            $("#div2").text("drop事件");
        });
    });
</script>
</body>
</html>

可拖动大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
    <div style="width: 100px; height: 100px;  color: rgb(0, 0, 204);">id="div1"></div>

    <script>
        $(document).ready(function () {
            $("#div1").resizable();
        })
    </script>
</body>
</html>

可选列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
    <style>
        .ui-selected{
            background: #31b0d5;
        }
    </style>
</head>
<body>
    <strong>世界上最美丽的人是?</strong>
    <ul id="select">
        <li id="right">A.me</li>
        <li>B.我</li>
        <li>C.I</li>
    </ul>
    <a href="#" id="btn">提交</a>

    <script>
        $(document).ready(function () {
            $("#btn").button();
            $("#select").selectable();
            $("#btn").on("click",function () {
                if($("#right").hasClass("ui-selected")){
                alert("恭喜您答对了!");
            }
            });
        });
    </script>
</body>
</html>

sortable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
    <ul id="sortable">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>桃子</li>
    </ul>
    <script>
        $(document).ready(function () {
            $("#sortable").sortable();
        });
    </script>
</body>
</html>

JQuery UI小部件

多个下拉框菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">
    <h3>选项一</h3>
    <div>
        <p>
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
        </p>
    </div>

    <h3>选项二</h3>
    <div>
        <p>
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
        </p>
    </div>

    <h3>选项三</h3>
    <div>
        <p>
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
        </p>
    </div>
</div>


<script>
    $(document).ready(function () {
        $("#div1").accordion();
    });
</script>
</body>
</html>

自动补全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">
    <h3>选项一</h3>
    <div>
        <p>
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
        </p>
    </div>

    <h3>选项二</h3>
    <div>
        <p>
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
        </p>
    </div>

    <h3>选项三</h3>
    <div>
        <p>
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
            hellohellohellohellohellohellohellohello
        </p>
    </div>
</div>


<script>
    $(document).ready(function () {
        $("#div1").accordion();
    });
</script>
</body>
</html>

日期控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>Date:<input type="text" id="datepicker"></p>
    <a href="#" id="btn">按钮</a>

    <script>
        $(function () {
            $("#datepicker").datepicker();
            $("#btn").button();
        })
    </script>
</body>
</html>

对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">
        <p>这是一个对话框Dialog</p>
    </div>
    <a id="btn">按钮</a>

    <script>
        $(function () {
            $("#btn").button().on("click",function () {
                $("#div").dialog();
            });
        });
    </script>
</body>
</html>

进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="pb"></div>

    <script>
        var pb;
        var max=100;
        var current=0;
        $(document).ready(function () {
            pb=$("#pb");
            pb.progressbar({max:100});
            setInterval(changepd,100);
        });

        function changepd() {
            current++;
            if(current>=100){
                current = 0;
            }
            pb.progressbar("option","value",current);
        }
    </script>
</body>
</html>

menu菜单 垂直菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    <style>
        #menu{
            width: 150px;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>
            <a href="#">Java</a>
            <ul>
                <li><a href="#">JAVAEE</a>JAVA</li>
                <li><a href="#">JAVASE</a></li>
                <li><a href="#">JAVAME</a></li>
            </ul>
        </li>
        <li>C</li>
        <li>C++</li>
        <li>Go</li>
    </ul>

    <script>
        $(document).ready(function () {
            $("#menu").menu({position:{at:"right bottom"}});
        });
    </script>
</body>
</html>

水平菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    <style>
        .ui-menu:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }

        .ui-menu .ui-menu-item{
            display: inline-block;
            float: left;
            margin: 0;
            padding: 10px;
            width: auto;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>
            <a href="#">Java</a>
            <ul>
                <li><a href="#">JAVAEE</a></li>
                <li><a href="#">JAVASE</a></li>
                <li><a href="#">JAVAME</a></li>
            </ul>
        </li>
        <li>C</li>
        <li>C++</li>
        <li>Go</li>
    </ul>

    <script>
        $(document).ready(function () {
            $("#menu").menu({position:{at:"left bottom"}});
        });
    </script>
</body>
</html>

样式操作

样式类

addClass();  //添加指定的CSS类名
removeClass();  //移除指定的CSS类名
hasClass(); //判断样式存不存在
toggleClass();  //切换CSS类名，如果有就移除，如果没有就添加.

slider(拖动条)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<span id="span">0</span>
<div id="slider"></div>

<script>
    var valueSpan,slider;
    $(document).ready(function () {
        slider=$("#slider");
        valueSpan=$("#span");

        // slider.slider({
        //     change:function (event,ui) {
        //         valueSpan.text(slider.slider("option","value"));
        //     }
        // });

        slider.slider({
            slide:function (event,ui) {
                valueSpan.text(slider.slider("option","value"));
            }
        })
    });
</script>
</body>
</html>

Example 开关灯和模态框 CSS

css("color","red")   //DOM操作: tag.style.color="red"

$("p").css("color","red");  //将所有p标签的字体设置为红色.

输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
    <input id="input">
    <button id="btn">getValue</button>
<script>
    $(function () {
        $("#input").spinner();
        $("#input").spinner("value","18");
        $("#btn").on("click",function () {
            alert($("#input").spinner("value"));
        });
    });
</script>
</body>
</html>

spinner(下拉菜单/列表)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    <script>
        $(function () {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="#hello1">hello</a></li>
        <li><a href="#hello2">hello</a></li>
        <li><a href="#hello3">hello</a></li>
    </ul>
    <div id="hello1">
        hello1
        hello1
        hello1
        hello1
    </div>
    <div id="hello2">
        hello2
        hello2
        hello2
        hello2
    </div>
    <div id="hello3">
        hello3
        hello3
        hello3
        hello3
    </div>
</div>

</body>
</html>

位置操作

offset()    //获取匹配元素在当前窗口的相对偏移或设置元素位置
position()  //获取匹配元素相对父元素的偏移
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft()    //获取匹配元素相对滚动条左侧的偏移

# offset()方法允许我们检索一个元素相对于文档(document)的当前位置
# 和.position()的差别在于: .position()是相对于父级元素的位移.

Example1

文本操作

HTML代码

# html()        //取得第一个匹配元素的html内容
# html(val) //设置所有匹配元素的html内容

文本值

# $('this').text()      //取得所有匹配元素的内容
# $('this').text(val)       //设置所有匹配元素的内容

# $('this').val("YouMen")   //val能修改input里面输入的内容

值

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

Example1 模态编程框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</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="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>

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

    <script src="jquery-1.12.4.js"></script>
    <script>

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

        function  confirmModal() {

            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement('td');
            td2.innerHTML = "8001";

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

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

            $(".modal,.shadow").addClass('hide');
//            $('.modal input[type="text"]').each(function () {
//                // var temp = "<td>..."
//
//
//
//            })
        }

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

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });


//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value

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

Example2 开关

<!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">YouMen</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            if($('.c1').hasClass('hide')){
                $('.c1').removeClass('hide');
            }else{
                $('.c1').addClass('hide');
            }
        })
    </script>
</body>
</html>

属性操作

用于ID等或自定义属性

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

注意：在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别

# attr全称attribute(属性)
# prop全称property(属性)
# 虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，
# 而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

文档处理

Example 多个菜单多个内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            
            line-height: 38px;
        }

        .active{
            
        }

        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px ;
            // 小手
            cursor: pointer;
        }
        .content{
            min-height: 500px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px; margin: 0 auto;">
        <div class="menu">
            <div class="menu-item active" a="1">菜单一</div>
            <div class="menu-item" a="2">菜单二</div>
            <div class="menu-item" a="3">菜单三</div>
        </div>

        <div class="content">
            <div b="1">内容一</div>
            <div class="hide" b="2">内容二</div>
            <div class="hide" b="3">内容三</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('a');
            $('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-05-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！