Python之路--前端知识--jQuery

一、简介

　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery 库 - 特性：

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

在页面中添加jQuery 库：

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

jQuery 语法：

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：

　　$(this).hide() - 隐藏当前元素

　　$("p").hide() - 隐藏所有 <p> 元素

　　$(".test").hide() - 隐藏所有 class="test" 的所有元素

　　$("#test").hide() - 隐藏所有 id="test" 的元素

二、jQuery 选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

1、元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

2、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("input[type='text']") 选取所有type=text的input输入框。

3、组合选择器

　　$('div,p,span') 选取所有的div标签、p标签、span标签。

　　$('form input') 选取所有form表单下的所有input标签。（子子孙孙的找）

　　$('parent > child') 选取子标签

4、其他

$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

栗子：

表格的全选、反选、取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="SelectAll();">
<input type="button" value="取消" onclick="CancelAll();">
<input type="button" value="反选" onclick="ReverseAll();">

<table border="1px" width="400px">
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td><input type="checkbox"/></td>
    </tr>
</table>

    <script src="jquery.js"></script>
    <script>
        function SelectAll() {
            $("input[type='checkbox']").prop("checked",true)
        }

        function CancelAll() {
            $("input[type='checkbox']").prop("checked",false)
        }

        function ReverseAll() {
            $("input[type='checkbox']").each(function () {
                var s = $(this).prop("checked");
                if(s){
                    $(this).prop("checked",false);
                }else{
                    $(this).prop("checked",true);
                }
            })
        }
    </script>
</body>
</html>

三、jQuery筛选器

next 获取紧邻的下一个元素
prev 获取紧邻的上一个元素
children 获取所有子元素
parent 获取父元素
siblings 获取兄弟元素

栗子：

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .info{
            width: 400px;
        }

        .item{
            //height: 34px;
        }

        .header{
            background-color: deepskyblue;
            cursor: pointer;
        }
        
        .content{
            display: none;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <div class="info">
        <div class="item">
            <div class="header">菜单一</div>
            <div class="content">内容一</div>
        </div>
        <div class="item">
            <div class="header">菜单二</div>
            <div class="content">内容二</div>
        </div>
        <div class="item">
            <div class="header">菜单三</div>
            <div class="content">内容三</div>
            <div class="content">内容三</div>
            <div class="content">内容三</div>
        </div>
        <div class="item">
            <div class="header">菜单四</div>
            <div class="content">内容四</div>
            <div class="content">内容四</div>
            <div class="content">内容四</div>
        </div>
    </div>

    <script src="jquery.js"></script>
    <script>
        $(".header").click(function () {
            $(this).nextAll().css("display", "block");
            $(this).parent(".item").siblings(".item").children(".content").css("display", "none");
        })
    </script>
</body>
</html>

四、样式操作

$("xxx").css("display",none)

addClass()---------添加样式
removeClass()----移除样式
hasClass()---------判断有没有这个样式

栗子：

开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .on{
            background-image: url("on.jpg");
        }

        .off{
            background-image: url("off.jpg");
        }

    </style>
</head>
<body>
    <div id="myimg" class="on off" style="width: 287px;height: 470px" onclick="bright();">

    </div>

    <script src="jquery.js"></script>
    <script>
        function bright() {
            //$("#myimg").removeClass("off");
            if($("#myimg").hasClass("off")){
                $("#myimg").removeClass("off");
            }else{
                $("#myimg").addClass("off")
            }
        }
    </script>
</body>
</html>

tab菜单切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            height: 38px;
            line-height: 38px;
            background-color: darkslategrey;
            width: 300px;
        }

        .menu{
            float: left;
            border-right: 1px solid deepskyblue;
            padding: 0 10px;
            color: white;
            cursor: pointer;
        }

        .hide{
            display: none;
        }

        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin: 0 auto;">
        <div class="item">
            <div class="menu" a="1">菜单一</div>
            <div class="menu" a="2">菜单二</div>
            <div class="menu" a="3">菜单三</div>
        </div>

        <div class="content">
            <div class="info hide" b="1">内容一</div>
            <div class="info hide" b="2">内容二</div>
            <div class="info hide" b="3">内容三</div>
        </div>
    </div>


    <script src="jquery.js"></script>
    <script>
        $(".menu").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var v = $(this).attr("a");//1,2,3
            $(this).parent().siblings().children("[b='"+v+"']").removeClass("hide").siblings().addClass("hide");
        })
    </script>
</body>
</html>

模态对话框

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

        .shadow{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            opacity: 0.5;
            background-color: gray;
            z-index: 10;
        }

        .show{
            display: block;
        }

        .modal{
            position: fixed;
            top: 10%;
            left: 20%;
            right: 20%;
            bottom: 30%;
            background-color: wheat;
            z-index: 11;
        }
    </style>
</head>
<body>
    <input type="button" onclick="addEle();" value="添加">
    <table border="1" width="400px" id="info">
        <tr>
            <td target="ip">192.168.1.1</td>
            <td target="port">81</td>
            <td>
                <input type="button" value="编辑" class="edit"/>
            </td>
            <td>
                <input type="button" value="删除">
            </td>
        </tr>
        <tr>
            <td target="ip">192.168.1.2</td>
            <td target="port">82</td>
            <td>
                <input type="button" value="编辑" class="edit"/>
            </td>
            <td>
                <input type="button" value="删除">
            </td>
        </tr>
        <tr>
            <td target="ip">192.168.1.3</td>
            <td target="port">83</td>
            <td>
                <input type="button" value="编辑" class="edit"/>
            </td>
            <td>
                <input type="button" value="删除">
            </td>
        </tr>
    </table>

    <div class="modal hide" >
        主机号：<input type="text" value="" name="ip"><p>
        端口号：<input type="text" value="" name="port"><p>
        <input type="button" value="确认">
        <input type="button" value="取消" onclick="cancelModal();">
    </div>
    <div class="shadow hide"></div>

    <script src="jquery.js"></script>
    <script>
        function addEle() {
            $(".hide").css("display","block");
        }
        
        function cancelModal() {
            $(".hide").css("display","none");
        }

        $(".edit").click(function () {
            $(".hide").css("display","block");
            var tds = $(this).parent().siblings("td");

            //过于low
            // //获取IP和port
            // var ip = $(tds[0]).text();
            // var port = $(tds[1]).text();
            //
            // //IP和port到模态框内
            // $("input[name='ip']").val(ip);
            // $("input[name='port']").val(port);

            //牛逼版
            tds.each(function () {
                var k = $(this).attr("target");
                var v = $(this).text();
                $("input[name='"+k+"']").val(v);
            })
        })


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

表格隔行换色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="2" width="400">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>


    <script src="jquery.js"></script>
    <script>
        $("tr").mouseover(function () {
            $(this).css("background-color","blue");
        })

        $("tr").mouseout(function () {
            $(this).css("background-color","");
        })
    </script>
</body>
</html>

五、文档操作

append()-----往选中的元素内部的后面添加元素
appendTo()
prepend()----往选中的元素内部的前面添加元素
prependTo()
after()------往选中的元素外部的后面添加元素
before()-----往选中的元素外部的前面添加元素
empty()------将元素内部的内容删除
remove()-----将元素的标签删除

栗子：

文档操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>艺术家们</li>
    </ul>
    <br>
    <input type="button" onclick="add();" value="向ul中添加一个li元素">
    <input type="button" onclick="del1();" value="删除元素内容">
    <input type="button" onclick="del2();" value="删除标签">
    <script src="jquery.js"></script>
    <script>
        function add() {
            // var myli = $("<li>alex</li>")
            // $("ul").append(myli)    //往后插入

            // var myli = $("<li>egon</li>");
            // myli.appendTo($("ul"));

            var myli = $("<li>chang</li>");
            $("ul").prepend(myli);  //往前插入

            var myspan = $("<span>感谢艺术家们alex</span><br>");
            $("ul").after(myspan)
        }
        
        function del1() {
            $("ul").empty();
            
        }

        function del2() {
            $("ul").remove();

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

左右元素选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width: 150px;
            height: 300px;
        }
    </style>
</head>
<body>
    <select name="fruit" id="fruit" multiple></select>
    <input type="button" value="<---" onclick="toLeft();">
    <input type="button" value="<==" onclick="totalLeft();">
    <input type="button" value="--->" onclick="toRight();">
    <input type="button" value="==>" onclick="totalRight();">

    <select name="fish" id="fish" multiple>
        <option value="">大鱼</option>
        <option value="">中鱼</option>
        <option value="">小鱼</option>
        <option value="">虾米</option>
        <option value="">财鱼</option>
        <option value="">黄鱼</option>
        <option value="">菠萝</option>
        <option value="">香蕉</option>
        <option value="">苹果</option>
    </select>

    <script src="jquery.js"></script>
    <script>
        function toLeft() {
            $("#fish option:selected").appendTo("#fruit");
        }

        function totalLeft() {
            $("#fish option").appendTo("#fruit");
        }

        function toRight() {
            $("#fruit option:selected").appendTo("#fish");
        }

        function totalRight() {
            $("#fruit option").appendTo("#fish");
        }
    </script>
</body>
</html>

阻止事件发生：return false

表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .err{
            color: #ff253a;
        }
    </style>
</head>
<body>
    <!--阻止事件发生-->
    <!--<a href="https://www.baidu.com/" onclick="return dianji();">走一波</a>-->

    <!--<script src="jquery.js"></script>-->
    <!--<script>-->
        <!--function dianji() {-->
            <!--alert("sure?");-->
            <!--return false;-->
        <!--}-->
    <!--</script>-->

    <form action="https://www.baidu.com/" id="info" method="get">
        用户名: <input type="text" desc="用户名"><br>
        密码:   <input type="password" desc="密码"><br>
        邮箱:   <input type="text" desc="邮箱"><br>
        地址:   <input type="text" desc="地址"><br>
        <input type="submit" value="提交">
    </form>


    <script src="jquery.js"></script>
    <script>
        $(":submit").click(function () {
            var flag = true;
            $(".err").remove();

            $("input[type='text'],input[type='password']").each(function () {
                var v = $(this).val();
                if(v.length == 0){
                    flag = false;
                    var desc = $(this).attr("desc");
                    $(this).after($("<span class='err'>"+desc+"必填</span>"));
                    return false;
                }
            });
            return flag;
        })
    </script>
</body>
</html>

六、属性操作

$("xxx").attr("1","2") 赋值
$("xxx").attr("target") 取值
$("xxx").removeAttr("target") 移除属性
$("xxx").text("hello") 设置值，不填参数即为获取值

input系列，框里面的值
$("xxx").val() 设置值，不填参数即为获取值

在jQuery1.xx版本中，操作关于input系列【radio checkbox】选中或取消，不能采用attr来进行设置,用$('xxx').prop()，（表格实例中用的就是prop给checkbox设置值的）
在3.xxx版本中修复了这个bug

实例：

搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" value="请输入关键字">


    <script src="jquery.js"></script>
    <script>
        $("input[type='text']").focus(function () {
            var v = $(this).val();
            if(v=="请输入关键字"){
                $(this).val("");
            }
        });
        $("input[type='text']").blur(function () {
            var v = $(this).val();
            if(v==""){
                $(this).val("请输入关键字")
            }
        })
    </script>
</body>
</html>