您的位置：首页 > Web前端 > JQuery

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

2018-09-09 11:17 141 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航