jQuery进阶
发布日期:2021-09-14 03:23:51 浏览次数:2 分类:技术文章

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

一、jQuery操作元素的显示与隐藏

之前我们用过这种方法来操作元素的显示与隐藏:

$div.css({'display':'block'});显示
$div.css({'display':'none'});隐藏
还有写法让人惊讶的三目运算:$div.css({'display':$div.css('display')=='none' ?'block':'none'});

而在jQuery中,自带封装了相关方法

1.hide(speed,easing,callback)

$div.hide();

元素隐藏

2.show(speed,easing,callback)

$div.show();

元素显示

3.toggle(speed,easing,callback)

$div.tiggle();

自动执行显示或者隐藏,如果当前是隐藏,那么当执行toggle()时,元素会自动显示出来。
在这里要提醒一下,元素如果从显示转变到隐藏,原先占有的位置也会滕让出来,其他元素就会占用这片区域,直至该元素再次显示出来。
以上三个方法,都可以加入时间参数,单位毫秒,可以在规定时间内实现元素的显示与隐藏,加入时间参数以后你会发现,图像的显示是从左上角到右下角扩展的,而隐藏则是从右下角到左上角收缩的。callback则为方法执行结束后要调用的功能函数.

二、 jQuery操作元素的淡入淡出

1.fadeIn(speed,easing,callback)

$div.fadeIn(2000);

元素淡入

2.fadeOut

$div.fadeOut(2000);

元素淡出

3.fadeToggle()

$div.fadeToggle(2000);

元素会根据自身当前状态自行选择淡入还是淡出

4.fadeTo(speed,opacity,easing,callback)

$div.fadeTo(0.2);

设置元素的透明度,有两个参数,1.时间 2.透明度 0-1之间的数字
$div.fadeTo(1000,0.15);表示在1s内将元素从当前状态设置到透明度为0.15的状态

其实在淡入淡出的过程中,操作的这些属性依然是在操作元素标签的行内式属性,通过浏览器调试可以发现,当元素在显示的时候,调用淡出的方法,会先去设置元素的透明度,当透明度为零的时候,再去自动调用元素display属性,将其值设置为none,使得元素彻底的消失,这也就是为什么当元素在淡出的时候,随着透明度的下降,而次元素依然占用着当前的位置,直到透明度为零的时候,系统调用了display:none这个方法,才会使得元素消失,把占用的空间让出来。

而在淡入的过程中则是和但出现相反的,即系统先去调用display:block; 使得元素先想“显示出来”,但是由于透明度为零,依然不可见,然后再去设置元素的透明度。

三、 jQuery操作元素的特效卷起和展开

1.slideUp(speed,easing,callback)

$div.slideUp(2000);

卷起效果,2秒完成。

2.slideDown(speed,easing,callback)

$div.slideDown(2000);

展开效果,2秒完成。

3.slideToggle(speed,easing,callback)

$div.slideToggle(2000);

自动实现展开卷起效果,每次都是2秒完成

四、 jQuery操作标签自带属性以及操作标签中包裹内容

jQuery可以获取也可以设置标签自带属性或者自定义属性的值。

1.prpo()

获取标签自带属性值

$div.prop(‘自带属性名’);

设置自带标签属性值

$div.prop({‘自带属性名’:’属性值’});

切记,prop()只可以获取或者设置标签自带的属性值,而不能操作自定义属性的值

2.attr()

获取标签属性值

$div.attr(‘属性名’);

设置标签属性值

$div.attr({‘属性名’:’属性值’});

attr()不仅可以获取或者设置标签自带属性的值,还可以操作自定义的属性值

3.val()

操作标签的value属性

1.获取属性值

var sData=$div.val();
2.设置属性值
var sData=$div.val(‘123’);

4.操作标签中包裹的内容

在js中,我们通过$div.innerHTML()来获取标签包裹的内容,进而去修改里面的内容。在jQuery中,这个功能被封装成了另外一个方法html()

1.获取包裹内容
$div.html();
2.修改包裹内容
$div.html(‘修改内容放在这里’);
修改的内容会覆盖原先标签内包裹的内容
在这里补充一个知识:如果当前对象是一个jQuery对象,但是我依然想使用JS对象的innerHTml方法,这个该怎么做呢? 其实只要把jQuery对象转化成JS对象就行了$div[0].innerHTML();这样就可以正常使用了

五、jQuery中的循环遍历

each()方法

each()方法为每个匹配元素规定要运行的函数

语法
$(selector).each(function(index,element))

参数分析:function(index,element) 这是个必不可少的参数

index—遍历时的索引
element—当前遍历到的元素(也可以使用’this’选择器)

六、jQuery中的鼠标事件

鼠标进入

$(selector).mouseover(function(){事件代码});

鼠标离开

$(selector).mouseout(function(){事件代码});

注意:鼠标事件会导致事件冒泡,在多次触发动画事件的时候,动画会累计,然后依次执行,也就出现了当你不在去触发动画事件时,动画还在执行着。

转载地址:https://blog.csdn.net/weixin_40612082/article/details/80457162 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:margin-top塌陷问题的现象与解决
下一篇:jQuery中动画函数animate的用法详解

发表评论

最新留言

很好
[***.229.124.182]2024年03月23日 17时49分11秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java 403怎么抛出_java – 如何在Spring MVC中返回403禁止? 2019-04-21
java jsch工具类_Java工具集-JSch连接远程服务器工具类 2019-04-21
cmd背景变红1003无标题_怎样修改cmd中文字的大小、颜色和背景颜色呢 原来是这样的... 2019-04-21
php rand() 重复,php – mt_rand()给我总是相同的数字 2019-04-21
php taglib.php,thinkphp5 taglib自定义标签教程 2019-04-21
java常用包类 array,Java中的StringBuffer和数组Arrays以及常用类型的包装类 2019-04-21
ctf常见php,CTF中常见的PHP伪协议 2019-04-21
php语言冒泡法,PHP 冒泡排序法 2019-04-21
php如何数组去重复,PHP如何去除数组重复元素? 2019-04-21
java转换ab的值,查看新闻/公告--[整理]Java将AB1234形式的16进制字符串转换为10进制数值,考虑字节序的影响.... 2019-04-21
ui php h5,画出自己的UI组件的详情 2019-04-21
linux服务文件编写,linux编写systemd下服务脚本 2019-04-21
hdfs linux 目录是否存在,Linux中判断hdfs文件是否存在 2019-04-21
linux学习需要什么基础,学linux需要什么基础? 2019-04-21
linux vim编辑kconfig 无法wq,Linux-4.9.2内核在mini2440上的移植(三)——编译环境测试... 2019-04-21
高斯勒让德在c语言中的程序,c语言:用递归方法编写程序,求n阶勒让德多项式的值... 2019-04-21
c语言单片机电子时钟,新人求个51单片机的电子时钟汇编语言(C语言的还没学到)... 2019-04-21
c++语言文件流,C++文件流 2019-04-21
android 动态毛玻璃,Android毛玻璃背景效果简单实现代码 2019-04-21
android 按钮提示,的Android按钮工具提示 2019-04-21