Jquery进阶

一、 Jquery常用特效
在这里插入图片描述
1.直接显示、隐藏
在这里插入图片描述
2.淡入、淡出
在这里插入图片描述
3.滑动
在这里插入图片描述
代码
在这里插入图片描述
三套显示隐藏的区别:
在这里插入图片描述
二、 Jquery操作CSS

jquery中可以通过方法 css 修改元素的样式,
 还可以通过addClass、removeClass对样式css进行操作

css 修改单个样式
元素.css(“样式名”,”样式值”);

css修改多个样式
元素.css({“样式名1”:”样式值1”,”样式名2”:”样式值2”});

addClass  添加一个、多个类
元素.addClass(“类名1 类名2 类名3”);

removeClass  移除类
元素.removeClass(“类名”);

动态切换类
元素.togglerClass(“类名”);


两套方法的使用区别:
1.	css这种方法优先级是最高的
2.	css这种写法适合少量样
3.	addClass这种写法能够提高代码的可重用性,可维护性,并且不需要频繁切换复用性。优先级比css低

代码
在这里插入图片描述
效果
在这里插入图片描述
三、Jquery操作属性

全选、选不选

jquery操作属性的方法有两个 attr()  prop()


获取参数
jquery对象.attr(属性名);       jquery对象.prop(属性名);

修改参数
jquery对象.attr(属性名,属性值)  jquery对象.prop(属性名,属性值)

具体两个方法使用区别

<a href=”” alt=”” action=”” >超链接</a>
href、alt 这两个属性都有一个特点,html能认识他们。 这种也叫固有属性。
action这个属性在a标签,html不认识,但是可以加。 这种叫做自定义属性. 或者叫特性

1.固有属性适合 prop获取
2.自定义属性、特性适合attr 获取
3.prop是jquery1.6之后提出新方法。
4.attr 在jquery1.5之后就不再维护了
5.优先使用prop

代码
在这里插入图片描述
四、 Jquery操作DOM

jquery操作Dom主要分为 三种操作  1.添加节点   2.修改节点
  		 3.删除节点  4.获取

添加子节点
	append()    追加到末尾
	prepend    追加到开头
添加同辈节点
	after()      之后添加
	before()     之前添加

修改节点
	需要先获取节点通过 html()即可修改元素

删除 remove
	先获取节点调用remove()进行删除元素

代码
在这里插入图片描述
五、jquery插件-validation-表单验证

之前我们使用js实现表单验证,代码量比较大,如果单纯使用js验证,
遇到很多验证项就会相当麻烦.
因此使用validation验证框架方便完成表单验证操作.
	
步骤
1.	需要导入validation的插件相关资源
jquery.validate.js 、jquery-1.8.3.js  、messages_zh.js
2.	对需要验证的表单,添加验证方法 validate()
$(“#myForm”).validate()
3.	 在需要验证的输入项目中 加入具体的验证规则
input type=”text” name=”username” required=”true” />
4.	自定义错误提示
  1. 导入相关资源
    在这里插入图片描述
  2. 表单添加验证方法
    在这里插入图片描述
  3. 添加规则
    在这里插入图片描述
    代码
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值