博客
关于我
小白必知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/

你可能感兴趣的文章
Multicast1
查看>>
mysql client library_MySQL数据库之zabbix3.x安装出现“configure: error: Not found mysqlclient library”的解决办法...
查看>>
MySQL Cluster 7.0.36 发布
查看>>
Multimodal Unsupervised Image-to-Image Translation多通道无监督图像翻译
查看>>
MySQL Cluster与MGR集群实战
查看>>
multipart/form-data与application/octet-stream的区别、application/x-www-form-urlencoded
查看>>
mysql cmake 报错,MySQL云服务器应用及cmake报错解决办法
查看>>
Multiple websites on single instance of IIS
查看>>
mysql CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>
MySQL Connector/Net 句柄泄露
查看>>
multiprocessor(中)
查看>>
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>