提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Web前端开发JQuery框架笔记

jQuery笔记Web框架 前端开发
2023-06-13 09:16:17 时间

jQuery 是一个写的更少,但做的更多的轻量级 JavaScript 库

JQuery 常用选择器

ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下.

<body>
    <div id="1000"> hello lyshark </div>
    <div id="2000"> hello lyshark </div>
    <div id="3000"> hello lyshark </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#2000").css("background","red");          //通过ID号选择指定元素
        var temp = $("#1000").text();                //获取到文本的内容
        document.write("文本内容: " + temp);          //打印出这个文本的内容
    </script>
</body>

标签选择器: 通过使用$("element")标识前缀,匹配页面中所有P标签,并设置成红色.

<body>
    <div id="1000"> hello lyshark </div>
    <p id="2000"> hello p</p>
    <div id="3000"> hello lyshark </div>
    <p id="4000"> hello p</p>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("p").css("background","red");          //通过p标签定位修改所有P标签
    </script>
</body>

类选择器: 通过使用$("ClassName")标识前缀,匹配页面中所有class="MyClass"的类属性.

<body>
    <div class="MyClass"> hello lyshark </div>
    <div class="MyClass"> hello lyshark </div>
    <div class="lyshark"> hello lyshark </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".MyClass").css("background","green");        //通过.MyClass找到一类属性并修改
    </script>
</body>

通配符选择器: 通过使用$("body*")标识前缀,匹配页面中所有开头是div的标签,并设置成绿色.

<body>
    <div class="MyClass"> hello lyshark </div>
    <div class="MyClass"> hello lyshark </div>
    <h1 class="lyshark"> hello lyshark </h1>
    <div class="lyshark"> hello lyshark </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("div*").css("background","green");        //修改所有div标签的属性
    </script>
</body>

组合选择器: 使用组合选择器可以扩大选择器的选择范围,可以通过逗号分隔符分割多个不同的选择器.

<body>
    <h1 class="MyClass"> hello lyshark </h1>
    <div class="MyClass">
        <div id="MyID1">hello MyID1 </div>
        <div id="MyID2">hello MyID2 </div>
    </div>
    <div id="lyshark"> hello lyshark </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".MyClass #MyID1 , h1 , #lyshark").css("background","green");
    </script>
</body>

属性选择器: 根据元素的属性及其值作为过滤条件,来匹配DOM元素,它以中括号作为分界符.

<body>
    <input type="text" name="Text" value="标签1">
    <input type="password" name="Text">
    <p id="id1"> hello P </p>
    <p id="id2" alex="sb"> hello P </p>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("input[type='text']").css("color","red");            //修改input,且类型是text的标签
        $("p[id='id1']").text("修改id1的标题");                 //修改标题,是p标签且id=id1的
        $("input[name='Text']").val("修改成我");                //将标签中的value属性修改掉
        $("p[alex='sb']").css("background","red");             //也可以自定义查找标签
    </script>
</body>

后代选择器: 该选择器常用于批量修改,匹配所有的后代,所有选中的DIV标签后代都会应用变化.

<body>
    <div class="MyClass">
        <div class="div1"> hello div div1</div>
        <div class="div2">
            <div class="divA">hello div A</div>
            <div class="divA">hello div B</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".MyClass div").css("background","green");        //修改指定.MyClass下的所有DIV标签
    </script>
</body>

子代选择器: 子代选择器常用于缩小查询范围,在匹配的父元素下,选择所有匹配的子元素.

<body>
    <div class="MyClass">
        <div class="div1"> hello div div1</div>
        <div class="divA">hello div A</div>
        <div class="div2">
            <div class="divA">hello div A</div>
            <div class="divA">hello div B</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".MyClass > .div2").css("background","green");        //修改.MyClass类里面的,div2的所有子元素
    </script>
</body>

相邻选择器: 在所有匹配的元素后选择同级别相邻元素,如下匹配所有跟在.outer后面的所有P标签,并设置成红色.

<body>
    <div class="outer">
        <p class="outer"> hello p1</p>
        <p class="outer"> hello p2</p>
        <p class="outer"> hello p3</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".outer + p").css("color","red");    //匹配所有.outer类中,第一个p标签相邻的元素.
    </script>
</body>

兄弟选择器: 兄弟选择器就是在所有匹配的元素后选择同级的所有元素,如下匹配.outer类后面的所有同级DIV标签.

<body>
    <div class="outer"> hello div1</div>
    <div class="outer"> hello div2</div>
    <div class="outer"> hello div3</div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".outer~div").css("color","red");   //将属于outer类中的所有同级DIV设置成红色.
    </script>
</body>

JQuery 文档操作

Text(): 该函数常用于设置或者是读取标签里面的内容.

<body>
    <div class="MyDiv">
        <div class="MyName"> hello lyshark </div>
        <div class="MyAge"> age:22 </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var temp = $(".MyDiv .MyName").text();           //查找指定的标签元素内容
        document.write("获取到标签的内容: " + temp);
        $(".MyAge").text("hello world");                 //修改指定的标签元素内容
    </script>
</body>

html(): 该函数常用于设置或者是读取标签内容,但是可以在设置标签内容的同时添加格式属性.

<body>
    <div class="MyDiv">
        <div class="MyName"> hello lyshark </div>
        <div class="MyAge"> age:22 </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var temp = $(".MyDiv .MyName").html();           //查找指定的标签元素内容
        document.write("获取到标签的内容: " + temp);
        $(".MyAge").html("<b> hell html </b>");          //修改指定的标签元素内容
    </script>
</body>

val(): 用于获取或者是设置指定标签的value值.

<body>
    <div class="MyDiv">
        <input type="text" name="MyText1" value="标签1">
        <input type="text" name="MyText2" value="标签2">
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("input[name='MyText1']").val();          //定位并获取文本的value选项
        document.write("获取到文本name属性的值: " + data);

        $("input[name='MyText2']").val("lyshark");            //修改文本的value属性为lyshark
    </script>
</body>

append(): 给指定的标签添加内容,分别可以在开头插入().prepend,结尾插入().append等.

<body>
    <div class="MyDiv"> hello lyshark ---></div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(".MyDiv").append("结尾加入");                //在标签结尾插入新数据
        $(".MyDiv").prepend("开头加入");               //在标签开头插入新输入
        $(".MyDiv").prepend("<b> hello </b>");        //开头插入带格式的文本
    </script>
</body>

appendTo(): 该函数可以实现将外部的标签插入到一个块级标签里面,动态添加元素.

<body>
    <div class="MyDiv">
        <h1 id="Myh1"> hello h1</h1>
    </div>
    <p> hello p1</p>
    <p> hello p2</p>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("p").appendTo("div");                 //将p标签加入到div标签里面
        $("p").appendTo("div");

         $("div").prependTo("h1")
    </script>
</body>

empty()/remove()： 使用empty()可以清空标签中的内容,remove()用于彻底移除标签.

<body>
    <p class="p1"> hello p1</p>
    <p class="p2"> hello p2</p>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(".p1").empty();
        $(".p2").empty();              //清空标签内的内容.
        $(".p2").remove();             //彻底移除标签.
    </script>
</body>

before()/after(): 可以实现在指定标签的上方(.before)插入内容,或者下(.after)方插入内容.

<body>
    <div class="MyDiv">
        <div class="div1"> hello div </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(".MyDiv div").before("<h1> before </h1>")         //在div上方插入内容
        $(".MyDiv div").after("<h1> after </h1>")           //在div下方插入内容
    </script>
</body>

insertBefore()/insertAfter(): 在每个DIV标签前面(insertBefore)插入新标签,或者在后面(insertAfter)插入.

<body>
    <div class="MyDiv"> hello div</div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("<span> hello span </span>").insertBefore("div");         //在div前面插入span标签
        $("<h1> hello h1</h1>").insertAfter("div");                 //在每个div标签后面插入h1
    </script>
</body>

replaceWith(): 查找与替换,将所有的类属性是class=".MyDiv"的标签替换成粗体的hello div.

<body>
    <div class="MyDiv"> hello div1 </div>
    <div class="MyDiv"> hello div2 </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(".MyDiv").replaceWith("<b> hello div </b>");            //将所有div标签替换成粗体的hello div
    </script>
</body>

clone: 克隆并追加一个DIV标签,追加到body页面中.

<body>
    <div class="MyDiv"> hello div1 </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("body").append($("div").clone());         //克隆并追加到body中.
        $("body").append($("div").clone());
    </script>
</body>

JQuery 属性操作

attr(): 可实现获取和设置,指定标签的属性信息.

<body>
    <div class="MyDiv">
        <input type="text" name="MyText1" value="标签1">
        <input type="text" name="MyText2" value="标签2">
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var names = $("input[name='MyText2']").attr("name");      //获取MyText2标签的name字段内容
        var types = $("input[type='text']").attr("type");         //获取Type标签的type字段内容
        document.write("标签name字段内容: " + names + "<br>");
        document.write("标签type字段内容: " + types + "<br>");

        $("input[name='MyText2']").attr("name","lyshark");       //将MyText2标签的name字段修改成lyshark
    </script>
</body>

removeAttr(): 找到指定的字段并可以自定义移除相关字段.

<body>
    <input type="text" name="MyText" value="标签1">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("input[name='MyText']").attr("value");    //找到value字段的内容
        document.write("当前value值: " + data);

        $("input[name='MyText']").removeAttr("value");         //移除value字段的内容
    </script>
</body>

prop(): 设置标签的属性,常用于设置单选框和复选框.

<body>
    <input type="checkbox" name="check">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("input[name='check']").prop("checked");        //获取checkbox默认状态
        document.write("选择框默认状态:" + data)

        $("input[name='check']").prop("checked",true);             //设置checkbox为选中状态
        $("input[name='check']").prop("disabled",true);            //设置checkbox为禁用状态
    </script>
</body>

removeprop： 删除由prop设置的属性集,(不明白)

<body>
    <input type="checkbox" name="check">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("input[name='check']").prop("disabled",true);
        $("input[name='check']").removeProp("");
    </script>
</body>

addClass(): 动态的将一个CSS属性添加到一些标签中.

<head>
    <style type="text/css">
        .mode{
            background-color: #17a2b8;
        }
    </style>
</head>

<body>
    <div class="MyClass"> hello lyshark </div>
    <div class="MyClass"> hello lyshark </div>

    <script type="text/javascript">
        $(".MyClass").addClass("mode");     //对所有的MyClass标签,添加mode的属性.
    </script>
</body>

removeClass: 动态的将一个CSS属性在标签中删除.

<head>
    <style type="text/css">
        .mode{
            background-color: #17a2b8;
        }
    </style>
</head>
<body>
    <div class="mode"> hello lyshark </div>
    <div class="mode"> hello lyshark </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("div").removeClass("mode");    //删除所有div标签中的mode类属性.
    </script>
</body>

toggleClass: 实现了动态的切换类的样式.使标签不可见.

    <style type="text/css">
        .show{
            background-color: #17a2b8;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <div class="mode"> hello lyshark </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("div").toggleClass("hidden");             //切换成隐藏属性
    </script>
</body>

hasClass(): 该函数用来判断当前的样式,存在返回真,不存在返回假.

    <style type="text/css">
        .mode{
            background: red;
        }
    </style>
</head>
<body>
    <div class="mode"> hello lyshark </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("div").hasClass("mode");
        document.write(data)
    </script>
</body>

JQuery 样式操作

修改CSS属性:

<body>
    <div class="MyClass1" style="background-color: rebeccapurple"> hello lyshark</div>
    <div class="MyClass2" style="font-size: 30px"> hello lyshark</div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(".MyClass1").css("background-color","red");          //修改MyClass1的背景属性
        $(".MyClass2").css("font-size","10px");                //修改MyClass2的字体大小
    </script>
</body>

追加CSS属性:

<body>
    <div class="MyClass1"> hello lyshark</div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(".MyClass1").css({"background-color":"red","font-size":"20px"});
    </script>
</body>

过滤筛选器

first()/last(): first()筛选出所有li标签中第一个标签,last()筛选出所有标签中的最后一个标签.

<body>
    <div class="MyClass">
        <ul>
            <li>首页</li>
            <li>主机</li>
            <li>系统</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("li:first").text();                  //找出第一个标签的标签内容
        document.write("第一个标签内容是:" + data + "<br>");

        var data = $("li:last").text();                  //找出最后一个标签的标签内容
        document.write("最后一个标签内容是:" + data + "<br>");

        $("li:last").remove();                            //实现移除最后一个标签
        $("li:last").append("<li>添加</li>");             //实现添加一个新标签
    </script>
</body>

even()/odd(): even()筛选出所有li标签中偶数标签,odd()筛选出所有li标签中基数标签.

<body>
    <div class="MyClass">
        <ul>
            <li>首页</li>
            <li>主机</li>
            <li>系统</li>
            <li>菜单</li>
            <li>搞事</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $(".MyClass ul li:even").text();
        document.write("基数标签为: " + data + "<br>");
        var count = $(".MyClass ul li:even");
        document.write("基数标签个数: " + count.length + "<br>");

        var data = $(".MyClass ul li:odd").text();
        document.write("偶数标签为: " + data + "<br>");
        var count = $(".MyClass ul li:odd");
        document.write("偶数标签个数: " + count.length);
    </script>
</body>

eq(): 过滤出所有li标签中,索引是2的那个标签.

<body>
    <div class="MyClass">
        <ul>
            <li>首页</li>
            <li>主机</li>
            <li>系统</li>
            <li>菜单</li>
            <li>搞事</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("li:eq(2)").text();                //所有li标签中,索引是2的标签
        document.write("索引是2的标签内容是: " + data + "<br>");

        var data = $("li:eq(0)").text();                //所有li标签中,索引是0的标签
        document.write("索引是0的标签内容是: " + data + "<br>");

        var data = $(".MyClass ul li").eq(4);          //另一种写法,结果相同.
        document.write("索引是4的标签内容是: " + data.text() + "<br>");
    </script>
</body>

gt(): 所有li标签中，索引大于2的标签

<body>
    <div class="MyClass">
        <ul>
            <li>首页</li>
            <li>主机</li>
            <li>系统</li>
            <li>菜单</li>
            <li>搞事</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("li:gt(2)").text();                //所有li标签中,索引大于2的标签
        document.write("索引大于2的标签内容是: " + data + "<br>");
    </script>
</body>

lt(): 所有li标签中，索引小于3的标签

<body>
    <div class="MyClass">
        <ul>
            <li>首页</li>
            <li>主机</li>
            <li>系统</li>
            <li>菜单</li>
            <li>搞事</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $("li:lt(3)").text();                //所有li标签中,索引小于3的标签
        document.write("索引小于3的标签内容是: " + data + "<br>");
    </script>
</body>

hasclass(): 检测li中的是否含有某个特定的类，有的话返回true

<body>
    <div class="MyClass">
        <ul class="lyshark">
            <li>首页</li>
            <li>主机</li>
            <li>系统</li>
            <li>菜单</li>
            <li>搞事</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var data = $(".MyClass ul").hasClass("lyshark");
        document.write(data);
    </script>
</body>

查找筛选器

children(): 获取指定标签的所有子标签,以下在类名为"MyForm"盒子里,找所有div子标签,并将其设置为绿色.

<body>
    <form class="MyForm">
        <div class="Mydiv"> hello lyshark </div>
        <div class="Mydiv"> hello lyshark </div>
        <p> hello lyshark </p>
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(".MyForm").children(".Mydiv").css("color","green");
    </script>
</body>

parent(): 获取指定标签的所有父标签,以下代码找所有P标签的父标签,并设置成红色.

<body>
    <div class="Mydiv"> hello lyshark
        <p> hello p </p>
        <p> hello p </p>
    </div>
        
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
       var data = $("p").parent().css("color","red");
    </script>
</body>

next(): 寻找指定标签的下一个标签,以下代码根据第1个Mydiv1为条件寻找下一个div.

<body>
    <div class="Mydiv1">
        <p> hello p </p>
    </div>
    <div class="Mydiv2">
        <p> hello p </p>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
       $("div").next().css("background","red");
       $(".Mydiv1").next().css("background","red");
    </script>
</body>

prev(): 寻找指定标签的上一个标签,以下代码根据第2个Mydiv2为条件寻找上一个div.

<body>
    <div class="Mydiv1">
        <p> hello p </p>
    </div>
    <div class="Mydiv2">
        <p> hello p </p>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
       $(".Mydiv2").prev().css("background","red");
    </script>
</body>

siblings(): 查找标签的所有兄弟标签,查找所有的同辈标签.

<body>
    <div class="Mydiv1">
        <div class="Min">hello div</div>
    </div>

    <div class="Mydiv2">
        <div class="Min">hello div</div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
       $(".Mydiv1").siblings().css("background","red");
    </script>
</body>

find(): 在form标签中找到text,password标签,并将其设置为绿色.

<body>
    <form class="forms" method="post">
        <input type="text" value="用户名">
        <input type="password" value="密码">
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("form").find(":text,:password").css({"color":"red","background":"green"})
    </script>
</body>

JQuery 事件处理

注册单次事件: one()方法是bind()方法的特例,由它绑定的事件在执行一次相应后就会失效.

<body>
    <p id="MyP"> </p>
    <input type="button" id="MyID" value="添加内容" />

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("#MyID").one("click",function(){
           $("p").append("hello lyshark");            //给P标签添加内容
        });
    </script>
</body>

注册循环事件: bind()作为统一的接口,用来为每个匹配元素绑定事件处理程序.

<body>

    <input type="button" id="MyID1" value="无参数绑定" />
    <input type="button" id="MyID2" value="带参数绑定" />

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("#MyID1").bind("click",function(){
           alert("绑定无参数的事件...")
        });

        $("#MyID2").bind("click",{x:"参数1",y:"参数2"},function(event){
            $(this).text(event.data.x + event.data.y);
        });
    </script>
</body>

绑定事件：

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
          $("#MyButton").click(function(){
            $("p").slideToggle();
          });
        });
        </script>
    </head>
<body>
    <p>这是一个段落</p>
    <button type="button" id="MyButton" class="btn btn-primary">点我隐藏p标签</button>
</body>
</html>

绑定多个事件:

<body>
    <input type="button" id="MyID1" value="按钮1" />
    <input type="button" id="MyID2" value="按钮2" />

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("#MyID1,#MyID2").click(function(){
           var currentId = $(this).attr("id");       //获取它的ID名称
           if(currentId == "MyID1"){                 //说明点击了按钮1
               alert("您点击了按钮1");
           }else if(currentId == "MyID2"){           //说明点击了按钮2
               alert("您点击了按钮2");
           }
        });
    </script>
</body>

表单数据提交:

<body>
<div class="MyDIV">
    姓名: <input type="text" id="input1" />
    性别: <input type="text" id="input2" />
    年龄: <input type="text" id="input3" />
    <input type="button" id="button1">
</div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $("#button1").click(function(){
            var name = $(".MyDIV #input1").val();     //获取到元素值
            var sex = $(".MyDIV #input2").val();
            var age = $(".MyDIV #input3").val();

            alert("姓名: " + name + "性别: " + sex + "年龄: " + age);
        });
    </script>
</body>

回调函数:

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide(1000,call_back());
            })
        });
        function call_back() {
            alert("回掉函数使用...")
        }
    </script>
</head>
<body>
    <button>隐藏</button>
    <p>hello lyshark</p>
</body>

JQuery 开发案例

标签克隆的两种实现方式:

<body>
    <div>
        <p>
            <a onclick="Add(this)">+</a>
            <input type="text"/>
        </p>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        function Add(ths) {
            var p = $(ths).parent().clone();
            p.find('a').text('-');
            p.find('a').attr('onclick','Remove(this)');
            $(ths).parent().parent().append(p);
        }
        function Remove(ths) {
            $(ths).parent().remove();
        }
    </script>
</body>
<head>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script>
        function add(self){
          // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
          var $clone_obj=$(self).parent().clone();
           $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
           $(self).parent().parent().append($clone_obj);
        }
       function removed(self){
           $(self).parent().remove()
       }
    </script>

<body>
      <div class="outer">
          <div class="item">
                  <input type="button" value="+" onclick="add(this);">
                  <input type="text">
          </div>
      </div>
</body>

实现记住密码:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
        var strName = localStorage.getItem('keyName');
        var strPass = localStorage.getItem('keyPass');
        if(strName){
            $('#user').val(strName);
        }if(strPass){
            $('#pass').val(strPass);
        }
        if(strName!=null && strPass!=null)
            $('#remember').attr("checked",true);
    });
    function login_click(){
            var strName = $('#user').val();
            var strPass = $('#pass').val();
            if($('#remember').is(':checked')){
                localStorage.setItem('keyName',strName);
                localStorage.setItem('keyPass',strPass);
            }else{
                localStorage.removeItem('keyName',strName);
                localStorage.removeItem('keyPass');
            }
            window.location.reload();
        }
</script>

<body>
    <form action="/" method="post" onsubmit="return login_click();">
        账号: <input type="text" id="user" placeholder="用户名" name="username" /><br><br>
        密码: <input type="password" id="pass" placeholder="密码" name="password" /><br><br>
        记住密码: <input type="checkbox" id="remember">
        <input type="submit" value="用户登录"/>
    </form>
</body>

全选全不选与反选:

<head>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<script type="text/javascript">
        function CheckAll(){
            $('tbody input[type="checkbox"]').prop('checked',true);
        }
        function CancleAll(){
            $('tbody input[type="checkbox"]').prop('checked',false);
        }
        function ReverseAll() {
            $('tbody input[type="checkbox"]').each(function () {
                if($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else{
                    $(this).prop('checked',true);
                 }
             });
        }
</script>
<body>
<table id="tab" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>选择</th><th>用户ID</th><th>用户名称</th><th>用户邮箱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <input type="checkbox"></td>
            <td name="uid"> 1001</td>
            <td name="user"> lyshark</td>
            <td name="email"> lyshark@123.com</td>
        </tr>
        <tr>
            <td> <input type="checkbox"></td>
            <td name="uid"> 1002</td>
            <td name="user"> admin</td>
            <td name="email"> admin@123.com</td>
        </tr>
    </tbody>
</table>
    <input type="button" id="but1" value="全选" onclick="CheckAll()" />
    <input type="button" id="but1" value="全不选" onclick="CancleAll()" />
    <input type="button" id="but1" value="反选" onclick="ReverseAll()" />
</body>

提取选中表格指定字段: 选择框表单,通过选择不同表格读取表格中的数据.

<head>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<script type="text/javascript">
    $(document).ready(function(){
      $("#but1").click(function(){
            var obj = $("#tab");          // 定位到table表格
            // 在table中找input下类型为checkbox属性为选中状态的数据
            var check = $("table input[type=checkbox]:checked");
            check.each(function(){        // 遍历节点
                var row = $(this).parent("td").parent("tr");  // 获取选中行
                var id = row.find("[name='uid']").html();     // 取出第一行的属性
                var name = row.find("[name='user']").html();
                alert("选中行的ID: " + id + "名字: " + name)
            });
      });
    });
</script>
<body>
<table id="tab" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>选择</th><th>用户ID</th><th>用户名称</th><th>用户邮箱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <input type="checkbox"></td>
            <td name="uid"> 1001</td>
            <td name="user"> lyshark</td>
            <td name="email"> lyshark@123.com</td>
        </tr>
        <tr>
            <td> <input type="checkbox"></td>
            <td name="uid"> 1002</td>
            <td name="user"> admin</td>
            <td name="email"> admin@123.com</td>
        </tr>
    </tbody>
</table>
    <input type="button" id="but1" value="选择" onclick="check()" />
</body>

表格行号的提取(1): 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
    $("#table tbody>tr").click(function() {
        var trSeq = $(this).parent().find("tr").index($(this)[0]);   // 获取到行号
        var text = $(this).find("td:eq(0)").text();                  // 可以取出当前td标签里面的内容
        var input_val = $("#table tbody>tr").eq(trSeq).find("input[name='number']").val();
        console.log(text)
        alert("当前行号为: " + (trSeq + 1) + ",   " + "且其name为number的值为: " + input_val);
    });
});
</script>
<div>
    <table id="table" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hello</td>
                <td>网格</td>
                <td>男</td>
                <td>杭州</td>
            </tr>
            <tr>
                <td><input type="text" name="number" value="333456"></td>
                <td>王2</td>
                <td>男</td>
                <td>杭州</td>
            </tr>
        </tbody>
    </table>
</div>
表格行号的提取: 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#tab").on("click", ":button", function(event){
            var id = $(this).closest("tr").find("td").eq(0).text();
            var name = $(this).closest("tr").find("td").eq(1).text();
            alert("ID:" + id + "Name:" + name);
        });
    });
</script>

    <table border="1" id="tab">
        <thead>
            <tr><td>编号</td><td>姓名</td><td>操作</td></tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>lyshark</td>
                <td><input type="button" value="删除" /></td>
            </tr>
            <tr>
                <td>2</td>
                <td>admin</td>
                <td><input type="button" value="删除" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

表格行号的提取(2): 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
    $("#table tbody>tr").click(function() {
        var trSeq = $(this).parent().find("tr").index($(this)[0]);   // 获取到行号
        var text = $(this).find("td:eq(0)").text();                  // 可以取出当前td标签里面的内容
        var input_val = $("#table tbody>tr").eq(trSeq).find("input[name='number']").val();
        console.log(text)
        alert("当前行号为: " + (trSeq + 1) + ",   " + "且其name为number的值为: " + input_val);
    });
});
</script>
<div>
    <table id="table" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hello</td>
                <td>网格</td>
                <td>男</td>
                <td>杭州</td>
            </tr>
            <tr>
                <td><input type="text" name="number" value="333456"></td>
                <td>王2</td>
                <td>男</td>
                <td>杭州</td>
            </tr>
        </tbody>
    </table>
</div>

返回顶部的实现方式:

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
  window.onscroll=function(){
  var current=$(window).scrollTop();
  console.log(current)
    if (current>100)
    {
      $(".returnTop").removeClass("hide")
    }
    else {
      $(".returnTop").addClass("hide")
    }
  }
   function returnTop(){
       $(window).scrollTop(0)
   }
</script>
<style>
    .returnTop{
        height: 60px;
        width: 100px;
        background-color: darkgray;
        position: fixed;
        right: 0;
        bottom: 0;
        color: greenyellow;
        line-height: 60px;
        text-align: center;
    }
    .hide{
    display: none;
    }
</style>
</head>
<body>
     <p>hello</p>
     <p>hello</p>
     <p>hello</p>
     <p>请手动添加更多标签来测试.</p>
     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>

二级联动菜单(纵向)的实现:

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <style>
          .menu{
              height: 500px;
              width: 10%;
              background-color: gainsboro;
              float: left;
          }
         .title{
             background-color: #425a66;
           }
         .hide{
             display: none;
         }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
    </div>
</div>
<script>
      $(".item .title").click(function () {
        $(this).next().removeClass("hide")
        $(this).parent().siblings().children(".con").addClass("hide");
           })
</script>
</body>

联动菜单(横向)的实现:

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script>
           function tab(self){
               var index=$(self).attr("item");
               $("#"+index).removeClass("hide").siblings().addClass("hide");
               $(self).addClass("current").siblings().removeClass("current");
           }
    </script>
    <style>
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }
        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li item="c1" class="current" onclick="tab(this);">菜单一</li>
              <li item="c2" onclick="tab(this);">菜单二</li>
              <li item="c3" onclick="tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>
      </div>
</body>

弹出式模态对话框:

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script>
    function action1(self){
        $(self).parent().siblings().removeClass("hide");
    }
    function action2(self){
        //$(self).parent().parent().children(".models,.shade").addClass("hide")
        $(self).parent().addClass("hide").prev().addClass("hide");
    }
</script>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }
        .hide{
            display: none;
        }
        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: gold;
        }
    </style>
</head>

<body>
    <div class="back">
        <input id="ID1" type="button" value="弹出" onclick="action1(this)">
    </div>
    <div class="shade hide"></div>
    <div class="models hide">
        <input type="text">
        <input id="ID2" type="button" value="取消" onclick="action2(this)">
    </div>
</body>

拖动面板的实现:

<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;
            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;
            $(this).bind('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;
                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);
                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>

<body>
  <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
      <div id="title" style="background-color: black;height: 40px;color: white;">标题</div>
      <div style="height: 300px;">主体内容</div>
  </div>
</body>

显示隐藏与切换按钮:

<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
    $(document).ready(function() {
        $("#hide").click(function () {
            $("p").hide(1000);
        });
        $("#show").click(function () {
            $("p").show(1000);
        });

    //用于切换被选元素的 hide() 与 show() 方法。
        $("#toggle").click(function () {
            $("p").toggle();
        });
    })
</script>
</head>
<body>
    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>
</body>

页面标签隐藏:

<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>
 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })
   })
    </script>
</body>

图片放大镜的实现:

<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
    $(function(){
          $(".small_box").mouseover(function(){
              $(".float").css("display","block");
              $(".big_box").css("display","block")
          });
          $(".small_box").mouseout(function(){
              $(".float").css("display","none");
              $(".big_box").css("display","none")
          });

          $(".small_box").mousemove(function(e){
              var _event=e || window.event;
              var float_width=$(".float").width();
              var float_height=$(".float").height();
              console.log(float_height,float_width);
              var float_height_half=float_height/2;
              var float_width_half=float_width/2;
              console.log(float_height_half,float_width_half);
               var small_box_width=$(".small_box").height();
               var small_box_height=$(".small_box").width();
//  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
              var mouse_left=_event.clientX-float_width_half;
              var mouse_top=_event.clientY-float_height_half;

              if(mouse_left<0){
                  mouse_left=0
              }else if (mouse_left>small_box_width-float_width){
                  mouse_left=small_box_width-float_width
              }
              if(mouse_top<0){
                  mouse_top=0
              }else if (mouse_top>small_box_height-float_height){
                  mouse_top=small_box_height-float_height
              }
               $(".float").css("left",mouse_left+"px");
               $(".float").css("top",mouse_top+"px")

               var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
               var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
                console.log(percentX,percentY)

               $(".big_box img").css("left", -percentX*mouse_left+"px")
               $(".big_box img").css("top", -percentY*mouse_top+"px")
          })
    })
</script>

<style>
    *{
        margin: 0;
        padding:0;
    }
    .outer{
        height: 350px;
        width: 350px;
        border: dashed 5px cornflowerblue;
    }
    .outer .small_box{
        position: relative;
    }
    .outer .small_box .float{
        height: 175px;
        width: 175px;
        background-color: darkgray;
        opacity: 0.4;
        fill-opacity: 0.4;
        position: absolute;
        display: none;
    }
    .outer .big_box{
        height: 400px;
        width: 400px;
        overflow: hidden;
        position:absolute;
        left: 360px;
        top: 0px;
        z-index: 1;
        border: 5px solid rebeccapurple;
        display: none;
    }
    .outer .big_box img{
        position: absolute;
        z-index: 5;
    }
</style>
</head>
<body>
    <div class="outer">
        <div class="small_box">
            <div class="float"></div>
            <img src="small.jpg">
        </div>
        <div class="big_box">
            <img src="big.jpg">
        </div>
    </div>
</body>

JQuery操作表格的各种办法:

<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
  <style type="text/css">
    .on {background-color:#ddd}
  </style>
</head>
<body style="text-align:center"><div class="m-1"></div>
  <h3>jquery操作table的各种方法</h3><div class="m-2"></div>
<table id="aijquery" border="1" cellpadding="7" cellspacing="0" align="center">
    <tr><td>测试1.1</td><td>测试1.2</td><td>测试1.3</td><td>测试1.4</td><td>测试1.5</td><td>测试1.6</td></tr>
    <tr><td>测试2.1</td><td>测试2.2</td><td>测试2.3</td><td>测试2.4</td><td>测试2.5</td><td>测试2.6</td></tr>
    <tr><td>测试3.1</td><td>测试3.2</td><td>测试3.3</td><td>测试3.4</td><td>测试3.5</td><td>测试3.6</td></tr>
    <tr><td>测试4.1</td><td>测试4.2</td><td>测试4.3</td><td>测试4.4</td><td>测试4.5</td><td>测试4.6</td></tr>
    <tr><td>测试5.1</td><td>测试5.2</td><td>测试5.3</td><td>测试5.4</td><td>测试5.5</td><td>测试5.6</td></tr>
</table><div class="m-2"></div>
  <button id="huanse">鼠标经过时换色</button> <button id="jiou">奇偶行不同颜色</button> <button id="addtr">插入一行</button> <button id="addtd">插入一列</button><div class="m-1"></div>
  <button id="hidetr">隐藏/显示第三行</button>
  <button id="hidetd">隐藏/显示第三列</button>
  <div class="m-1"></div>
  <button id="deltr">删除第四行</button>
  <button id="deltd">删除第五列</button>
  <button id="deltrt">删除第二行外所有行</button>
  <button id="deltrd">删除第2到第4行</button>
  <div class="m-1"></div>
  <button id="deltrs">只留前三行</button>
  <button id="deltrf">只留第二到第四行</button>
  <div class="m-1"></div>
  <button id="readtd">读取第三行第四列的值</button>
  <button id="readtdt">读取第三列所有值</button>
  <button id="readtr">读取第三行所有值</button>
<script language="javascript">
    //鼠标经过换色
    $("#huanse").on("click",function(){
        $("#aijquery tr").hover(function(){$(this).children("td").addClass("on");},function(){$(this).children("td").removeClass("on")});
    });
    //奇偶行不同颜色
    $("#jiou").on("click",function(){
        //偶数行 奇数行的话 odd改为even
        $("#aijquery tr:odd").find("td").css("background-color","#e7ffff");
    });
    //插入一行
    $("#addtr").on("click",function(){
        //在表格的末尾添加一行
        //$("#aijquery").append('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>');
        //在表格的开头添加一行
        //$("#aijquery").prepend('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>');
         //在表格的第二行后面插入一行
          $("#aijquery tr").eq(1).after('<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>');
    });
    //插入一列
    $("#addtd").on("click",function(){
       //在表格的末尾添加一列
       //$("#aijquery tr").append('<td>newTD</td>');
       //在表格的开头添加一列
       //$("#aijquery tr").prepend('<td>newTD</td>');
       //在表格的第二列后添加一列
       $("#aijquery tr td:nth-child(2)").after('<td>newTD</td>');
    });
    //隐藏/显示第三行
    $("#hidetr").on("click",function(){
        $("#aijquery tr").eq(2).toggle();
    });
    //隐藏/显示第三列
    $("#hidetd").on("click",function(){
        //第一种方法
        //$("#aijquery tr td:nth-child(3)").toggle();
        //第二种方法
        $("#aijquery tr").each(function(){
            //$(this).find("td").eq(2).toggle();
            $("td",$(this)).eq(2).toggle();
        });
    });
    //删除第四行
    $("#deltr").on("click",function(){
        $("#aijquery tr").eq(3).remove();
    });
    //删除第五列
    $("#deltd").on("click",function(){
        $("#aijquery tr td:nth-child(5)").remove();
    });
    //删除第二行外所有行
    $("#deltrt").on("click",function(){
        $("#aijquery tr:not(:eq(1))").remove();
    });
    //只留前三行
    $("#deltrs").on("click",function(){
        $("#aijquery tr:gt(2)").remove();
    });
    //删除第2到第4行
    $("#deltrd").on("click",function(){
        $("#aijquery tr").slice(1,4).remove();
    });
    //只留第二到第四行
    $("#deltrf").on("click",function(){
        $("#aijquery tr").not($("#aijquery tr").slice(1,4)).remove();
    });
    //读取第三行第四列的值
    $("#readtd").on("click",function(){
        var v=$("#aijquery tr:eq(2) td:eq(3)").html();
          alert(v);
    });
    //读取第三列所有值
    $("#readtdt").on("click",function(){
          var arr=[];
        $("#aijquery tr").each(function(){
            arr.push($(this).find("td").eq(2).html());
        });
          alert(arr.join(","));
    });
    //读取第三行所有值
    $("#readtr").on("click",function(){
          var arr=[];
        $("#aijquery tr:eq(2) td").each(function(){
            arr.push($(this).html());
        });
          alert(arr.join(","));
    });
</script>
</body>
</html>

相关文章