jQuery2.0

AoA.

于 2023-10-08 09:00:00 发布

阅读量40

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_64022848/article/details/133654418

版权

一、DOM编程

1.操作文本

html() 相当于innerHTML

html() 获取文本节点（标签+文本）

html(标签) 添加标签，会覆盖原有的所有内容

text() 相当于innerText

text() 获取文本节点（文本）

text(文本内容) 添加文本，会覆盖原有的所有内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //获取文本节点
            var html = $("#div1").html();
            var text = $("#div1").text();
            console.log(html);
            console.log(text);

            //设置文本节点
            $("#div2").html("<h2>h2</h2>");
            $("#div3").text("#div3");
        });
    </script>
</head>
<body>
    <div id="div1">
        <p>p1</p>
        <p>p2</p>
    </div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</body>
</html>

2.操作属性

attr(属性名) 获取属性值

attr(属性名, 属性值) 设置属性值

removeAttr(属性名) 移除属性

prop(属性名) 获取属性值

prop(属性名, 属性值) 设置属性值

jQuery 1.6新增加prop()方法。如checked, selected、readonly、disabled 使用prop()时，返回值是true或者false，更加方便处理。

val() 获取value属性值

val(值) 设置value属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn1').click(function () {
                console.log($('a').attr('href'));
            });

            $('#btn2').click(function(){
                $('a').attr('href', 'https://www.baidu.com');
            });

            $('#btn3').click(function(){
                $('a').removeAttr('href');
            });

            $('input:submit').prop('disabled', true);

            $('#agree').change(function(){
                // alert(1);
                if($(this).prop('checked')){
                    $('input:submit').prop('disabled', false);
                }else{
                    $('input:submit').prop('disabled', true);
                }
            });
        })
    </script>
</head>
<body>
<a href="https://www.jd.com">京东</a><br>
<button id="btn1">测试attr获取属性的值</button>
<br>
<button id="btn2">测试attr修改属性的值</button>
<br>
<button id="btn3">测试removeAttr</button>
<br>

<h2>注册</h2>
<hr>
<form action="">
    账号: <input type="text"><br>
    密码: <input type="text"><br>
    <input type="checkbox" name="agree" id="agree">我同意协议 <br>

    爱好：<select name="hobby" id="hobby">
            <option value="篮球">篮球</option>
            <option value="足球">足球</option>
            <option value="网球">网球</option>
        </select>
    <input type="submit" value="注册">
</form>
</body>
</html>

3.操作元素

append()、appendTo() 添加子元素节点（末尾）

父元素节点.append(新的子元素节点)

新的子元素节点.appendTo(父元素节点)

prepend()、prependTo() 添加子元素节点（前置）

before() 、insertBefore() 添加平级元素节点（前面）

after()、insertAfter() 添加平级元素节点（后面）

parent() 获取父元素节点

remove() 删除元素节点

empty() 删除子元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn1').click(function(){
                $('div').append('<span>我是新加的span！</span>');
                // $('<span>我是新加的span！</span>').appendTo($('div'));
            });

            $('#btn2').click(function(){
                $('div').prepend('<span>我是新加的span！</span>');
            });

            $('#btn3').click(function(){
                $('div').before('<h2>我是新加的标题！</h2>');
                // $('<h2>我是新加的标题！</h2>').insertBefore($('div'));
            });

            $('#btn4').click(function(){
                $('div').after('<h2>我是新加的标题！</h2>');
            });

            $('#btn5').click(function(){
                $('span').replaceWith('<h3>我是标题h3</h3>');
                // $('<h3>我是标题h3</h3>').replaceAll('span');
            });

            $('#btn6').click(function(){
                $('div').remove();
            });

            $('#btn7').click(function(){
                $('div').empty();
            });
        })
    </script>
</head>
<body>
    <div>
        <span>我是span1.</span>
        <span>我是span2.</span>
        <span>我是span3.</span>
    </div>

    <button id="btn1">测试append</button>
    <br>
    <button id="btn2">测试prepend</button>
    <br>
    <button id="btn3">测试before</button>
    <br>
    <button id="btn4">测试after</button>
    <br>
    <button id="btn5">测试replaceWith</button>
    <br>
    <button id="btn6">测试remove</button>
    <br>
    <button id="btn7">测试empyt</button>
</body>
</html>

二、操作CSS

1.直接操作CSS样式

本质上是修改指定元素的style属性的值。

缺点是会涉及多个css样式的修改，稍显繁琐。可以将多个css样式定义为class类样式，直接操作class属性值即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){

            $('li').mouseover(function(){
                // alert($(this).css('background-color'));
                // $(this).css('background-color', 'red');
                $(this).css({'background-color' : 'red', 'font-size' : '25px'});
            });

            $('li').mouseout(function(){
                $(this).css('background-color', '');
            });

        })
    </script>
</head>
<body>
    <ul>
        <li>赵敏</li>
        <li>张无忌</li>
        <li>金毛狮王</li>
        <li>灭绝师太</li>
    </ul>
</body>
</html>

2.操作类样式

addClass(值) 追加类属性值，而不是覆盖

removeClass(值) 移除属性值

toggleClass(值) 不存在，添加。存在，移除

本质是修改指定元素的class属性值。

addClass()只负责追加，而不是覆盖，所以必要时需要和removeClass()结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('div').mouseover(function(){
                $(this).removeClass('out');
                $(this).addClass('over');
            });

            $('div').mouseout(function () {
                $(this).removeClass('over');
                $(this).addClass('out');
            });

            $('button').click(function(){
                $('h2').toggleClass('over');
            });
        })
    </script>

    <style>
        .over{
            background-color: red;
        }

        .out{
            background-color: white;
        }

        div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>

    </div>

    <h2>
        锋利的jQuery！
    </h2>
    <button>切换样式的开关</button>
</body>
</html>

三、表单验证

1.目的

保证数据符合要求

降低数据符合要求，降低服务器端负担

案例

需求：

用户名不能为空

用户名长度大于6

密码同用户名的校验

邮箱格式正确, 必须包含@

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .err{
            color: red;
        }
        .ok{
            color: green;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //用户名校验
            $("input:eq(0)").blur(function () {
               var val = $(this).val();
               if(val=="" || val==null){
                   $("tr:eq(0)>td:eq(2)").html("<span class='err'>× 用户名不能为空</span>");
               }else if(val.length<6){
                   $("tr:eq(0)>td:eq(2)").html("<span class='err'>× 用户名长度不能少于6位</span>");
               }else {
                   $("tr:eq(0)>td:eq(2)").html("<span class='ok'>√ 用户名合法</span>");
               }
            });
            //密码校验
            $("input:eq(1)").blur(function () {
                var val = $(this).val();
                if(val=="" || val==null){
                    $("tr:eq(1)>td:eq(2)").html("<span class='err'>× 密码不能为空</span>");
                }else if(val.length<6){
                    $("tr:eq(1)>td:eq(2)").html("<span class='err'>× 密码长度不能少于6位</span>");
                }else {
                    $("tr:eq(1)>td:eq(2)").html("<span class='ok'>√ 密码合法</span>");
                }
            });
            //邮箱验证
            $("input:eq(2)").blur(function () {
                var val = $(this).val();
                if(val=="" || val==null){
                    $("tr:eq(2)>td:eq(2)").html("<span class='err'>× 邮箱不能为空</span>");
                }else if(val.indexOf("@") == -1){
                    $("tr:eq(2)>td:eq(2)").html("<span class='err'>× 邮箱格式不正确</span>");
                }else {
                    $("tr:eq(2)>td:eq(2)").html("<span class='ok'>√ 邮箱合法</span>");
                }
            });
            //手机号码校验
            $("input:eq(3)").blur(function () {
                var val = $(this).val();
                if(val=="" || val==null){
                    $("tr:eq(3)>td:eq(2)").html("<span class='err'>× 手机号码不能为空</span>");
                    return;
                }
                if(val.length!=11){
                    $("tr:eq(3)>td:eq(2)").html("<span class='err'>× 手机号码必须为11位</span>");
                    return;
                }
                for (var i=0;i<val.length;i++){
                    if (isNaN(val.charAt(i))){
                        $("tr:eq(3)>td:eq(2)").html("<span class='err'>× 手机号码格式不正确</span>");
                        return;
                    }
                }
                $("tr:eq(3)>td:eq(2)").html("<span class='ok'>√ 手机号码合法</span>");

            });
            //协议
            $("#ck").click(function () {
                var prop = $("#btn").prop("disabled");
                if (prop){
                    $("#btn").prop("disabled", false);
                }else {
                    $("#btn").prop("disabled", true);
                }
            });
            //提交
            $("#btn").click(function () {
               $(".inp").trigger('blur');
               var length = $(".err").length;
               if (length > 0){
                   return false;
               }
               return true;
            });
        });
    </script>
</head>
<body>
    <div style="text-align: center">
        <h2>注册页面</h2>
        <hr>
        <form action="https://www.baidu.com" method="get">
            <table align="center">
                <tr>
                    <td>用户名：</td>
                    <td><input class="inp" type="text" name="username" id="username"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input class="inp" type="password" name="password" id="password"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>邮箱：</td>
                    <td><input class="inp" type="text" name="email" id="email"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>手机号：</td>
                    <td><input class="inp" type="text" name="phone" id="phone"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td align="left">
                        <input type="radio" name="sex" checked> 男
                        <input type="radio" name="sex"> 女

                    </td>
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td align="left">
                        <input type="checkbox" name="hobby" checked> 学习
                        <input type="checkbox" name="hobby" checked> 整天学习
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><input id="ck" type="checkbox"> 同意协议</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" id="btn" value="注册" disabled>
                        <input type="reset">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

四、正则表达式

为什么使用正则表达式
简洁的代码，严谨的验证文本框中内容
正则表达式举例
1. 匹配国内电话号码：^\d{3}-\d{8}|\d{4}-\d{7}$
2. 匹配腾讯QQ号：^[1-9][0-9]{4,} $
3. 匹配中国邮政编码：^\d{6} $
4. 匹配身份证：^\d{15}|\d{18} $
5. 匹配由数字和26个英文字母组成的字符串 ^[A-Za-z0-9]+$　
6. 匹配Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
7. 匹配中文字符的正则表达式： ^[\u4e00-\u9fa5] $
什么是正则表达式
1. Regular Expression，在代码中常简写为regex
2. 正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。
3. 在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。
正则表达式的通配符号

正则表达式的重复字符

常用的正则表达式参照

https://tool.oschina.net/regex

http://www.w3s.com.cn/js/jsref_obj_regexp.asp

AoA.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery2.0

addClass()只负责追加，而不是覆盖，所以必要时需要和removeClass()结合使用。before() 、insertBefore() 添加平级元素节点（前面）after()、insertAfter() 添加平级元素节点（后面）匹配国内电话号码：^\d{3}-\d{8}|\d{4}-\d{7}$prepend()、prependTo() 添加子元素节点（前置）append()、appendTo() 添加子元素节点（末尾）text(文本内容) 添加文本，会覆盖原有的所有内容。
复制链接

扫一扫