04-前端技术_简洁高效的jQuery

一,jQuery介绍与基本使用

参考手册jQuery API中文手册

jQuery是一个JavaScript库,极大的简化了JavaScript的编程。

jQuery主要用于PC端编程,虽然移动端编程正十分流行,但PC端仍受众广泛。

1,下载

jQuery官网jquery.com/

点击下载,有两种选择,压缩版和未压缩版。

将其放在代码所在目录中就可以了:(min是压缩后的,也就是删除空白和注释。一般使用min,因为一般是加载到客户端运行,所以越小速度越快)

2,使用

1)先将文件放在HTML文件所在目录;

2)在HTML文档头部添加引用:

3)如果将JavaScript代码写在前面,有三种方式:

方式一:使用window的onload

方式二:标准入口

方式三:简洁入口

二,jQuery选择器

1,基本选择器

举例:列举几种基本选择器的使用方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--基本选择器</h1>
    <ul>
        <li>aaa</li>
        <li class="cc">bbb</li>
        <li>ccc</li>
    </ul>
    <h2>aaaaaaaaaa</h2>
    <ol>
        <li class="cc">dddd</li>
        <li>eeee</li>
    </ol>
    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口(虽然js语句在下面 但是习惯性的加上入口函数)
        $(function(){
            // document.getElementById("hid"); //获取id值为hid元素节点
            //等价于上面语句,获取id值为hid元素节点,并设置css样式
            $("#hid").css("color","blue");

            //document.getElementsByTagName("li"); //获取网页中所有li元素节点
            //获取网页中所有li元素节点,并设置css样式
            $("li").css("color","red");
            
            //获取class属性值为cc所有元素节点,并设置css样式
            $(".cc").css("color","red");

            //选择器组,统一设置指定css样式
            $("h1,h2,h3,h4,h5,h6").css("background-color","#ddd");
        });
       
    </script>
</body>
</html>
复制代码

2,层级选择器

举例:列举层级选择器的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--层级选择器</h1>
    <ul>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <ol>
            <li>ddddd</li>
            <li>ddddd</li>
            <li>ddddd</li>
        </ol>
    </ul>
    <li>ccccc</li>
    <li>ddddd</li>
    <li>eeeee</li>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取ul中所有子元素节点li(包括后代节点),并设置样式
            $("ul li").css("color","red"); 
            
            //获取ul中所有直接子元素节点li(包括后代节点),并设置样式
            $("ul>li").css("color","red");

            //获取ul同级紧邻后面的第一个兄弟节点li,并设置样式
            $("ul+li").css("color","red");

            //获取ul后面所有同级兄弟li元素节点,并设置样式
            $("ul~li").css("color","red");
        });
       
    </script>
</body>
</html>
复制代码

3,基本筛选器

举例:列举基本筛选器的用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--基本筛选器</h1>
    <ul>
        <li>aaaaaa</li>
        <li class="cc">bbbbbb</li>
        <li>cccccc</li>
        <li class="cc">ddddd</li>
        <li>eeeee</li>
        <li>ffffff</li>
    </ul>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取所有li节点并设置样式
            //$("li").css("color","red");

            //获取第一个li节点并设置样式
            //$("li:first").css("color","red");

            //获取最后一个li节点并设置样式
            //$("li:last").css("color","red");

            //获取偶数索引号对应的所有li节点并设置样式
            //$("li:even").css("color","red");

            //获取奇数索引号对应的所有li节点并设置样式
            //$("li:odd").css("color","red");

            //获取class属性值为cc的所有li节点并设置样式
            //$("li.cc").css("color","red");

            //获取class属性值不为cc的所有li节点并设置样式
            //$("li:not(.cc)").css("color","red");

            //获取索引位置为2的li节点并设置样式
            //$("li:eq(2)").css("color","red");

            //获取前2个li节点并设置样式
            //$("li:lt(2)").css("color","red");

            //获取所有li节点并添加鼠标移入和移出事件
            $("li").mouseover(function(){
                $(this).animate({paddingLeft:"+=20"},800);
            }).mouseout(function(){
                $(this).animate({paddingLeft:"-=20"},500);
            });
        });
       
    </script>
</body>
</html>
复制代码

4,内容选择器

举例:列举常用内容选择器用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--内容选择器</h1>
    <div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            $("div:contains('John')").css("color","red");
        });
       
    </script>
</body>
</html>
复制代码

5,属性选择器

举例: 列举属性选择器用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--属性选择器</h1>
    <form>
        姓名:<input type="text" name="uname" value="zhangsan"/><br/><br/>
        年龄:<input type="text" name="age"/><br/><br/>
        邮箱:<input type="text" name="email"/><br/><br/>
        电话:<input type="text" name="phone"/><br/><br/>
        地址:<input type="text" name="address"/><br/><br/>
    </form>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取所有含有value属性的input元素标签,并设置样式
            //$("input[value]").css("border","1px solid red");

            //获取name属性值为phone的input元素标签,并设置样式
            //$("input[name='phone']").css("border","1px solid red");

            //获取name属性值不为phone的input元素标签,并设置样式
            //$("input[name!='phone']").css("border","1px solid red");

            //获取name属性值是以a字符开头的所有input元素标签,并设置样式
            //$("input[name^='a']").css("border","1px solid red");

            //获取name属性值是以e字符结尾的所有input元素标签,并设置样式
            //$("input[name$='e']").css("border","1px solid red");

            //获取name属性值中含有m字符的所有input元素标签,并设置样式
            $("input[name*='m']").css("border","1px solid red");
        });
       
    </script>
</body>
</html>
复制代码

6,子元素选择器

举例:常用子元素选择器使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--子元素选择器</h1>
    <ul>
        <li>aaaaaaa</li>
        <li>bbbbbbb</li>
        <li>ccccccc</li>
        <li>ddddddd</li>
        <li>eeeeeee</li>
    </ul>
    <ul>
        <li>1111111</li>
        <li>2222222</li>
        <li>3333333</li>
        <li>4444444</li>
        <li>5555555</li>
    </ul>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取每组ul中的第一个li节点并添加样式
            //$("ul li:first-child").css("color","red");

            //获取每组ul中的最后一个li节点并添加样式
            //$("ul li:last-child").css("color","red");

            //获取每组ul中的第三个li节点并添加样式
            $("ul li:nth-child(3)").css("color","red");
        });
       
    </script>
</body>
</html>
复制代码

7,表单选择器

举例:表单选择器的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--表单中选择器</h1>
    <ul>
        <li><input type="checkbox" name="likes[]" value="1"/> aaaaaaa</li>
        <li><input type="checkbox" name="likes[]" value="2"/> bbbbbbb</li>
        <li><input type="checkbox" name="likes[]" value="3"/> ccccccc</li>
        <li><input type="checkbox" name="likes[]" value="4"/> ddddddd</li>
        <li><input type="checkbox" name="likes[]" value="5"/> eeeeeee</li>
    </ul>
   <button onclick="doFun()">获取</button>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        function doFun(){
            //获取所有多选框中选择中的元素节点
            //var list = $("input[type='checkbox']:checked");
            var list = $(":checkbox:checked");
            alert(list.length);
            
            //获取li元素节点(条件是里面的多选框必须选中),并设置样式
            $("li:has(input:checked)").css("color","red");
        }
       
    </script>
</body>
</html>
复制代码

三,jQuery属性

1,属性操作

举例:简单用例实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery属性操作</h1>
    
    <a id="aid" href="http://www.baidu.com" title="百度链接">百度</a><br/><br/>

    <button onclick="dofun()">更改链接属性</button>
    
    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        function dofun(){
            var a = $("#aid");
            console.log(a.attr("href")); //获取(类似于XML)
            console.log(a.prop("href")); //获取(类似于HTML)
            console.log(a.attr("title"));
            console.log(a.prop("title"));
            a.attr("href","http://news.baidu.com"); //添加或更改
            a.removeAttr("title"); //删除属性
            //a.attr("aa","bb"); //添加属性
            // a.prop("aa","bb"); //添加属性 prop方法不可以添加不能存在的属性
            a.prop("title","百度新闻"); //只支持HTML DOM的属性操作
           
        }
       
    </script>
</body>
</html>
复制代码

2,CSS类操作

举例:通过CSS类操作,实现点击添加属性,再次点击取消属性的效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        ul,li{padding:0px;margin:0px;}
        ul.uu{list-style:none;}
        ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
        ul.uu li:hover{background-color:#fc0;}
        ul.uu li.active{background-color: #f0c;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery属性--class类操作</h1>
    <ul class="uu">
        <li>苹果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
        <li>菠萝</li>
        <li>芒果</li>
    </ul>
    
    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取上面所有的li节点并添加点击事件
            $("ul.uu li").click(function(){
                // 方法一:切换class类属性
                $(this).toggleClass("active");
                /*
                // 方法二:
                //判断当前节点li是否含有active class属性
                if($(this).hasClass('active')){
                    //删除class类属性
                    $(this).removeClass("active");
                }else{
                    //添加class类属性
                    $(this).addClass("active");
                }
                */
            });
        });
       
    </script>
</body>
</html>
复制代码

3,HTML文本与值操作

不带参数是获取,带参是更新值。

举例:简单展示这些属性的使用方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery属性--HTML代码/文本/值的操作</h1>
    <ul>
        <li class="c1"><a href="http://www.baidu.com">百度</a></li>
        <li class="c2"><a href="http://www.163.com">网易</a></li>
        <li class="c3"><a href="http://www.qq.com">腾讯</a></li>
        <li class="c4"><a href="http://www.sina.com">新浪</a></li>
    </ul>
    搜索:<input type="text" name="kw" value="html"/> <button>搜索</button>
    <br/><br/>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            console.log($("li.c1").html()); //类似于js中的innerHTML
            console.log($("li.c2").text());
            $("li.c3").html('<a href="http://www.qq.com">腾讯2</a>');
            $("li.c4").text('<a>新浪2</a>');

            console.log($("input[name='kw']").val());
            $("input[name='kw']").val('CSS样式');

        });
       
    </script>
</body>
</html>
复制代码

举例:综合实现多选框的全选/全不选/反选

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery属性操作--全选/全不选</h1>
    <ul class="uu">
        <li><input type="checkbox" name="likes[]" value="1"/> 苹果</li>
        <li><input type="checkbox" name="likes[]" value="2"/> 橘子</li>
        <li><input type="checkbox" name="likes[]" value="3"/> 哈密瓜</li>
        <li><input type="checkbox" name="likes[]" value="4"/> 菠萝</li>
        <li><input type="checkbox" name="likes[]" value="5"/> 芒果</li>
    </ul>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取按钮并绑定点击事件
            $("button").click(function(){
                //判断按钮上的文本,指定对应的操作
                switch($(this).html()){
                    case "全选":
                        //获取所有多选框并设置选中(prop不会出现浏览器不兼容问题)
                        $("ul.uu input:checkbox").prop("checked",true);
                        break;
                    case "全不选":
                        $("ul.uu input:checkbox").prop("checked",false);
                        break;
                    case "反选":
                        $("ul.uu input:checkbox").each(function(){
                            $(this).prop("checked",!$(this).prop("checked"));
                        });
                        break;
                }
            });
        });
       
    </script>
</body>
</html>
复制代码

四,jQuery中的CSS样式操作

1,CSS

2,位置

3,尺寸

举例:通过jQuery实现对页面元素相关CSS样式修改

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        *{padding:0px;margin:0px;}
        #outer{background-color:#ddd;width:400px;height:400px;margin:50px;padding:20px;position:relative;}
        #inner{background-color:#fc0;width:200px;height:200px;position:absolute;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--jQuery中的CSS样式操作</h1>
    <div id="outer">
        <div id="inner"></div>
    </div>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取标题并设置css样式
            //$("#hid").css("color","red"); //单个属性设置
            $("#hid").css({"color":"green","background-color":"#ddd"});
            console.log($("#hid").css("color")); //获取css属性

            //获取div层的位置
            var offset = $("#inner").offset();
            console.log(offset.left,offset.top);

            //获取偏移位置
            var position = $("#inner").position();
            console.log(position.left,position.top);

            //获取尺寸
            console.log($("#inner").width(),$("#inner").height());
            $("#inner").width(300)
        });
       
    </script>
</body>
</html>
复制代码

五,jQuery节点遍历

举例:通过each方法实现节点遍历,使每个li元素的值乘以2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--节点遍历操作</h1>
    <ul>
        <li>2</li>
        <li>1</li>
        <li>10</li>
        <li>18</li>
        <li>8</li>
    </ul>
    <button>乘以2</button>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
           $("button").click(function(){
               //$("li").css("color","red");
               //获取li节点并遍历执行操作
               $("li").each(function(i){
                    //alert(i); //索引位置
                    $(this).html($(this).html()*2);
               });
           });

           /*
           //统一绑定点击事件
           $("li").click(function(){
               alert($(this).html());
           });
           */
        });
    </script>
</body>
</html>
复制代码

六,jQuery文档处理

1,内部插入(针对子节点)

举例:实现文档内容的前添加(prepend,prependto)/后追加(append,appendto)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--文档处理--内部插入</h1>
    <ul class="uu">
        <li>苹果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    名称:<input type="text" name="tname"/>
    <button>前添加</button>
    <button>后追加</button>
    
    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取按钮并绑定点击事件
            $("button").click(function(){
                //获取输入框中的内容
                var tname = $("input[name='tname']").val();
                //获取上的内容判断执行对应的操作
                switch($(this).html()){
                    case "前添加":
                        //$("ul.uu").prepend("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>").prependTo("ul.uu");
                        break;
                    case "后追加":
                        //$("ul.uu").append("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>").appendTo("ul.uu");
                        break;
                }
            });
        });
    </script>
</body>
</html>
复制代码

2,外部插入(针对同级节点)

举例:实现同级节点的前添加和后添加

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        ul,li{padding:0px;margin:0px;}
        ul.uu{list-style:none;}
        ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
        ul.uu li:hover{background-color:#fc0;}
        ul.uu li.active{background-color: #f0c;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--文档处理--外部插入</h1>
    <ul class="uu">
        <li class="active">苹果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
        <li>菠萝</li>
        <li>芒果</li>
    </ul>
    名称:<input type="text" name="tname"/>
    <button>前添加</button>
    <button>后追加</button>
    
    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取所有的li节点并绑定点击事件
            $("ul.uu li").click(function(){
                $("ul.uu li").removeClass("active");
                $(this).addClass("active");
            });
            //获取所有按钮并绑定点击事件
            $("button").click(function(){
                //获取输入框中的内容
                var tname = $("input[name='tname']").val();
                //获取按钮上的文本并判断执行对应操作
                switch($(this).html()){
                    case "前添加":
                        //$("li.active").before("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>").insertBefore("li.active");
                        break;
                    case "后追加":
                        //$("li.active").after("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>")
                            .insertAfter("li.active")
                            .click(function(){
                                $("ul.uu li").removeClass("active");
                                $(this).addClass("active");
                            });// 需要重新添加点击事件 否则按钮将无法改变样式
                        break;
                }
            });
        });
       
    </script>
</body>
</html>
复制代码

举例:实现表单的获得焦点、失去焦点事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
</head>
<body>
    <h1 id="hid">jQuery实例--文档处理--外部插入和删除</h1>
    <form>
        姓名:<input type="text" title="姓名" name="uname"/><br/><br/>
        年龄:<input type="text" title="年龄" name="age"/><br/><br/>
        邮箱:<input type="text" title="邮箱" name="email"/><br/><br/>
        电话:<input type="text" title="电话" name="phone"/><br/><br/>
        地址:<input type="text" title="地址" name="address"/><br/><br/>
    </form>
    <br/><br/>

    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取所有的输入框并绑定获得和失去焦点事件
            $("input:text").focus(function(){
                //获得焦点事件处理
                var title = $(this).attr("title");
                $("<span> 请输入正确的"+title+"信息</span>").insertAfter(this).css("color","#ddd");
            }).blur(function(){
                //失去焦点事件处理
                $(this).next("span").remove();
            });

        });
       
    </script>
</body>
</html>
复制代码

3,节点删除

举例:选中节点删除

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实例</title>
    <style>
        ul,li{padding:0px;margin:0px;}
        ul.uu{list-style:none;}
        ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
        ul.uu li:hover{background-color:#fc0;}
        ul.uu li.active{background-color: #f0c;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery实例--文档处理--删除操作</h1>
    <ul class="uu">
        <li>苹果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
        <li>菠萝</li>
        <li>芒果</li>
    </ul>
    <button>删除</button>
    <button>清空</button>
    
    <script src="https://juejin.cn/post/jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取li节点并添加选中效果
            $("ul.uu li").click(function(){
                $(this).toggleClass("active");
            });
            //获取按钮并绑定点击事件
            $("button").click(function(){
                //根据按钮上的文本执行对象操作
                switch($(this).html()){
                    case "删除":
                        $("li.active").remove();
                        break;
                    case "清空":
                        $("ul.uu").empty();
                        break;
                }
            });
        });
       
    </script>
</body>
</html>
复制代码

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享