zoukankan html css js c++ java

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=" 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=" 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>

查看全文

相关阅读:
LeetCode OJ 107. Binary Tree Level Order Traversal II
LeetCode OJ 116. Populating Next Right Pointers in Each Node
LeetCode OJ 108. Convert Sorted Array to Binary Search Tree
LeetCode OJ 105. Construct Binary Tree from Preorder and Inorder Traversal
LeetCode OJ 98. Validate Binary Search Tree
老程序员解Bug的通用套路
 转载四年努力，梦归阿里，和大家聊聊成长感悟
 转载面试感悟----一名3年工作经验的程序员应该具备的技能
 Web Service和Servlet的区别
 关于spring xml文件中的xmlns,xsi:schemaLocation

原文地址：https://www.cnblogs.com/yl-code/p/9260014.html