jQuery 实用版(二)

版权声明: https://blog.csdn.net/weixin_42157608/article/details/80472706

一、选择器不存在,也会返回一个对象,判断是否选择了元素,可以用length属性,如果length>0,就选择了元素,如果length=0 就没有选中元素

 

二、特殊动画效果

1、hide()  元素隐藏

2、Show()  元素显示

3、Toggle()  元素切换显示和隐藏

4、fadeIn()  元素淡入

5、fadeOut  元素淡出

6、fadeToggle()  元素切换淡入淡出

7、slideUp()  元素向上卷起

8、slideDown()  元素向下展开

9、slideToggle()  元素切换向下展开和向上卷起

 

注意:反复触发元素的动画效果,元素会持续做动画,解决方法:使用stop() 方法

三、链式调用

jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

$('#div1') // id为div1的元素

.children('ul')//该元素下面的ul子元素

.slideDown('fast')//高度从零变到实际高度来显示ul元素

.parent()  //跳到ul的父元素,也就是id为div1的元素

.siblings()  //跳到div1元素平级的所有兄弟元素

.children('ul')//这些兄弟元素中的ul子元素

.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

四、操作元素的属性,除了style属性:

读取属性值:$div.prop(‘id’)

设置属性值:$a.prop({‘href’:’http://www.baidu.com’,’title’:’提示文字’})

操作value属性可以用 val() 方法

  

五、操作元素包裹的内容:

读取:$div.html()

写入:$div.html( ‘内容’ )


六、事件函数列表:

blur() 元素失去焦点

focus() 元素获得焦点

click() 鼠标单击

mouseover() 鼠标进入(进入子元素也触发)

mouseout() 鼠标离开(离开子元素也触发)

mouseenter() 鼠标进入(进入子元素不触发)

mouseleave() 鼠标离开(离开子元素不触发)

hover() 同时为mouseenter和mouseleave事件指定处理函数

ready() DOM加载完成

submit() 用户递交表单

七、表单验证

1、什么是正则表达式: 
能让计算机读懂的字符串匹配规则。

2、正则表达式的写法:
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

3、规则中的字符 
1)普通字符匹配:
如:/a/ 匹配字符 ‘a’,/a,b/ 匹配字符 ‘a,b’

2)转义字符匹配:
\d 匹配一个数字,即0-9
\D 匹配一个非数字,即除了0-9
\w 匹配一个单词字符(字母、数字、下划线)
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符

var sTr01 = '123456asdf';

var re01 = /\d+/;

//匹配纯数字字符串

var re02 = /^\d+$/;

alert(re01.test(sTr01)); //弹出true

alert(re02.test(sTr01)); //弹出false

4、量词:对左边的匹配字符定义个数 
? 出现零次或一次(最多出现一次)
+ 出现一次或多次(至少出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

5、任意一个或者范围 
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾 
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

7、修饰参数:
g: global,全文搜索,默认搜索到第一个结果接停止
i: ingore case,忽略大小写,默认大小写敏感

8、常用函数 
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[34578]\d{9}$/;




猜你喜欢

转载自blog.csdn.net/weixin_42157608/article/details/80472706
今日推荐