jQuery 事件&表单验证&属性操作

最新推荐文章于 2023-07-02 17:20:56 发布

Step_Top

最新推荐文章于 2023-07-02 17:20:56 发布

阅读量555

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery事件正则表达式属性操作

本文链接：https://blog.youkuaiyun.com/qq_41333582/article/details/82556766

jQuery 专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了jQuery事件的使用，包括事件函数列表和事件冒泡原理。接着，文章详细介绍了正则表达式的基础，如规则中的字符、量词、修饰参数和常用函数。在表单验证部分，讨论了正则表达式的应用。最后，文章讲解了jQuery中的属性操作，如html()、val()、prop()和attr()函数的用法，强调了它们在处理元素内容和属性值上的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery事件

事件函数列表：

比原生 js 省略了 ‘on’

这里涉及到一些事件冒泡的内容, 主要原理:

我们点击子元素的时候,子元素会将事件传递到父元素去,进而触发父元素的事件.

blur()              元素失去焦点
focus()             元素获得焦点
click()             鼠标单击
mouseover()         鼠标进入（进入子元素也触发）
mouseout()          鼠标离开（离开子元素也触发）
mouseenter()        鼠标进入（进入子元素不触发）
mouseleave()        鼠标离开（离开子元素不触发）
hover()             同时为mouseenter和mouseleave事件指定处理函数
ready()             DOM加载完成
submit()            用户递交表单

例如:

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $input = $('#input1')
            // 默认,一上来就选中
            $input.focus()
            // 取消焦点时调用的方法
            $input.blur(function(){
                // alert('haha')
            })

            var $div1 = $('.box')
            // mouseover和mouseout的使用
            // $div1.mouseover(function(){
            //     $div1.stop().animate({'margin-top':'60px'})
            // })
            // $div1.mouseout(function(){
            //     $div1.stop().animate({'margin-top':'0px'})
            // })

            // mouseenter和mouseleave的使用
            // $div1.mouseenter(function(){
            //     $div1.animate({'margin-top':'100px'})
            // })
            // $div1.mouseleave(function(){
            //     $div1.animate({'margin-top':'0px'})
            // })

            // hover的使用
            $div1.hover(function(){
                $div1.animate({'margin-top':'100px'})
            },function(){
                $div1.animate({'margin':'0px'})
            })
        })
    </script>
</head>
<body>
    <input type="text" id="input1">
    <div class="box">
        <div class="son"></div>
    </div>
</body>

再例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $form = $('#form1')
            var $user = $('#name')
            $form.submit(function(){
                alert($user.val())
                // 阻止提交事件
                return false
            })
        })
    </script>
</head>
<body>
    <form action="" id="form1">
        <p>
            <label for="name">姓名:</label>
            <input type="text" id="name"> 
        </p>

        <p>
            <label for="pswd">密码:</label>
            <input type="password" id="pswd">
        </p>

        <input type="submit">
    </form>
</body>

表单验证

正则表达式

能让计算机读懂的字符串匹配规则。

正则表达式的写法

使用方法: 


// 定义一个正则表达式(两种方法)
var re = new RegExp('规则', '可选参数');


var re = /规则/参数;


// 测试正则表达式: 
var result = re.test(要测试的字符串)
// result  --->  true  
// result  --->  false

规则中的字符

普通字符匹配

规则使用方式:

/a/                  匹配字符 ‘a’  
/a,b/               匹配字符 ‘a,b’

转义字符匹配

规则使用方式: 



\d      匹配一个数字，即0-9
\D      匹配一个非数字，即除了0-9
\w      匹配一个单词字符（字母、数字、下划线）
\W      匹配任何非单词字符。单词字符包括：a-z、A-Z、0-9，以及下划线。
\s      匹配一个空白符
\S      匹配一个非空白符
.       匹配一个任意字符

例如:

var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

量词

对左边的匹配字符定义个数

规则使用方式: 


?           出现零次或一次（最多出现一次）
+           出现一次或多次（至少出现一次）
*           出现零次或多次（任意次）
{n}         出现n次
{n,m}       出现n到m次
{n,}        至少出现n次

任意一个或者范围

[abc123] :  匹配‘abc123’中的任意一个字符

[a-z0-9] :  匹配a到z或者0到9中的任意一个字符

限制开头结尾

^       以紧挨的元素开头

$      以紧挨的元素结尾

修饰参数

g：      global: 全文搜索，默认搜索到第一个结果接停止


i：      ingore case: 忽略大小写，默认大小写敏感
/规则/i

常用函数 test

使用方法: 

正则.test(字符串) 

// 匹配成功，就返回真，否则就返回假

正则默认规则

匹配成功就结束，不会继续匹配，区分大小写

常用正则规则

// 用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;

// 邮箱验证：    
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

// 密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;

// 手机号码验证：
var rePhone = /^1[3456789]\d{9}$/;

例如:

<script src="./jquery-1.12.4.min.js"></script>
<script>
    // var str = 'helloA world'
    // var reg = /a/i

    var str = 'a123ab'
    var reg = /^\d/

    var result = reg.test(str)
    alert(result)
</script>

jquery 属性操作

html ( )

使用: html( ) 取出元素文本或设置元素内容

作用类似于 innerHTML( )

使用方式: 

// 取出html内容
var $htm = $('#div1').html();

// 设置html内容
$('#div1').html('<span>添加文字</span>');

val( )

val( ) 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

使用方式:

// 取出html内容
var val = $("input").val();

// 设置html内容
$("input").val("Hello World");

prop( ) / attr( )

attributes : 属性

取出或设置某个属性的值

这里的属性是指标签除 css 样式以外的其他属性

使用方式:


// 取出图片的地址
var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

<head>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#div1');
            var $a = $('#link01');

            // 读取元素包裹的内容
            var sTr = $div.html();            
            // alert(sTr);

            // 写入或者叫设置元素包裹的内容
            $div.html('改变的文字');

            $div.html('<a href="http://www.baidu.com">百度网</a>')
            $div.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>');

            // 操作元素标签内除样式之外的其他的属性
            // 读取属性值：
            alert( $a.prop('id') );

            // 写入或者叫设置属性值
            $a.prop({'href':'http://www.google.com','title':'这是去到谷歌的网站的链接'});
            $a.html('110');
        })
    </script>
</head>
<body>
    <div class="box" id="div1">这是一个div</div>
    <a href="#" id="link01">这是一个链接</a>
</body>