博客
关于我
小白必知jQuery对象9种常用方法(含测试用例)
阅读量:167 次
发布时间:2019-02-28

本文共 1810 字,大约阅读时间需要 6 分钟。

本博文源于jquery基础,在jquery对象常用方法中,有这几种我们经常使用,它们使用方法简单,组合起来可以制作很多炫酷的特效,下面一起来温故和学习它们,每一种都附有小例子辅助记忆

css()方法

在我们用jquery操纵css时,必然需要用到css方式。其实操纵的时候,有几条规则一定要熟记,分别是:

  • 多条语句格式json原则
  • 单条语句的格式
  • 支持累加
  • 默认单位px
  • 段横杠也支持驼峰原则
  • 含有多个dom对象,只返回序列中首项

提示:在这里json格式就是必须双引号引起来的意思,比如下面

$("#box").css (	{   		"width":"100px",		"height":"200px",		"backgroundColor":"red"	});

单条语句的格式可以用css(k,v)也可以使用css({“k”:v})都是合法的.累加就是在原基础上做加法,比如

$("#box").css({   "width":"+=20"});

在原先基础上增加20px。大家在写单位默认添加px,但是最好大家写上去,便于阅读。短横杠支持驼峰,也就是它们两个都适合,大家认驼峰就行了。比如这个:

$("#box").css({   "backgroundColor":"red"});$("#box").css({   "background-color":"red"});

它们两个等价。

得到css样式

比如你想获得某个对象的width,dom也支持,直接打"."然后属性值就行了。比如:

var w = $("#box").css("width");var w = $("#box").width();

click()方法

大家都知道jquery默认有循环机制,一次设置,貌似有全部改变的效果。在原生态js中,click是属性,而jquery是不一样的。它可以为同一个元素添加多个事件监听,同样的监听并不冲突不会相互覆盖,而是顺序执行。可以体会下面一个简单的例子:

测试代码

			

//可以为同一个元素添加多个事件监听 //同样的监听并不冲突,不会相互覆盖

测试效果

当用户单击任何一个p标签时,都会弹出”你好!“对话框

在这里插入图片描述

show()和hide方法

show()显示元素,hide()隐藏元素,看一个案例就明白

测试效果

在这里插入图片描述

测试代码

			

addClass和removeClass方法

这里只需要会添加,会删除,会做替换就行了。所谓的添加是在原基础上添加,而不覆盖原先的。移除是虚拟移除,替换是先删除后增加,看几个例子

测试效果

通过效果看到class有两个了,这就是add的好处

在这里插入图片描述

测试代码

			

删除只需要把addClass改为removeClass,而替换,就是连续打"."先打remove,后打add

$("#box").removeClass("abc").addClass("cur");

测试效果

在这里插入图片描述

attr()方法

attr就是改变某一个具体的属性。类似css,

格式如下:

$().attr(属性,值)

下面用一个案例讲解,

鼠标指针滑过图片时图片发生改变,鼠标离开后图片还原

测试用图

鼠标右击另存为,海绵宝宝pic_a.jpg,派大星pic_b.jpg

请添加图片描述请添加图片描述

测试效果

在这里插入图片描述

鼠标移到图片变成派大星,否则就是海绵宝宝
在这里插入图片描述

测试代码

			

html()和attr()方法

这个类似原生态js中innerHTML和innerText一样,只需要掌握会不会发生html格式转换就行

测试效果

图片还是楼上的图片

在这里插入图片描述

测试代码

			

index()方法

index方法就是返回当前的列表中的序号,案例:之前点击p弹出你好,现在点击下圆圈返回当前序号

测试效果

在这里插入图片描述

测试代码

			

each()方法

这个方法主要用来遍历dom节点的,它的参数是一个函数,每遍历一次就执行一次函数。

例子:将遍历的p标签改为dom节点序号

测试效果

在这里插入图片描述

测试代码

			

转载地址:http://kard.baihongyu.com/

你可能感兴趣的文章
mysql 中的all,5分钟了解MySQL5.7中union all用法的黑科技
查看>>
MySQL 中的外键检查设置:SET FOREIGN_KEY_CHECKS = 1
查看>>
Mysql 中的日期时间字符串查询
查看>>
mysql 中索引的问题
查看>>
MySQL 中锁的面试题总结
查看>>
MySQL 中随机抽样:order by rand limit 的替代方案
查看>>
MySQL 为什么需要两阶段提交?
查看>>
mysql 为某个字段的值加前缀、去掉前缀
查看>>
mysql 主从
查看>>
mysql 主从 lock_mysql 主从同步权限mysql 行锁的实现
查看>>
mysql 主从互备份_mysql互为主从实战设置详解及自动化备份(Centos7.2)
查看>>
mysql 主从关系切换
查看>>
MYSQL 主从同步文档的大坑
查看>>
mysql 主键重复则覆盖_数据库主键不能重复
查看>>
Mysql 事务知识点与优化建议
查看>>
Mysql 优化 or
查看>>
mysql 优化器 key_mysql – 选择*和查询优化器
查看>>
MySQL 优化:Explain 执行计划详解
查看>>
Mysql 会导致锁表的语法
查看>>
mysql 使用sql文件恢复数据库
查看>>