jQuery笔记后续回忆使用不喜勿喷

最新推荐文章于 2024-08-13 16:27:57 发布

原创最新推荐文章于 2024-08-13 16:27:57 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了jQuery中各种动画效果的实现方法，包括隐藏、显示、淡入淡出及滑动等，并详细介绍了如何使用jQuery进行DOM元素的获取、设置及操作，如text、html、val和attr等方法的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//$().方法名（function () “函数名可以匿名” { }） //匿名：不取名
//文档就绪函数 $document).ready(function 函数名(){ }) //$ (“document”).ready(function myfunction() {–>
$(function () {
//click点击事件
$("#BtnA").click(function () {
//css样式
//css(“background”,“red”) 类比键值对 key键：value值
//{}对象
//css({"":"","":""})多个样式时使用
//滑动方式：slideUp()向上 slideDown()向下
$("#pA").css({“background”:“red”,“font-size”:“30px”,“color”:“darkgoldenrod”}).slideToggle(2000);
});
});

<h1 id="h1">99999</h1>
<p>898564</p>
<script src="js/prototype-1.6.0.3.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// var 变量名=jQuery.noConflict()

    jQuery.noConflict(); //转让控制权=============================
    $("h1").style.display = 'none';
    jQuery(document).ready(function () { ========页面加载事件
        jQuery("h1").css("display", "none").slideDown(2000).slideUp(2000);
        alert(jQuery("p").html());
    });
</script>

========================================
动画效果

隐藏/显示
隐藏： hide()
显示： show(speed,callback)
可选： speed：（时间）slow慢 fast快或者毫秒
可选： callback：执行完后所执行的函数名称
隐藏/显示：toggle(speed,callback) 若显示则隐藏或！

======================================
淡入/淡出
淡入：fadeIn(speed,callback); //出现
淡出： fadeOut() ;//消失
淡入/淡出：fadeToggle()
渐变给定的不透明值：fadeTo（speed,opacity,callback);
必选：效果时长：speed（时间）slow慢 fast快或者毫秒、
必选：不透明度：opacity（0与1之间）
可选：callback：执行完后所执行的函数名称

滑动
向下滑动：slideDown(speed,callback);
向上滑动：slideUp();
若下则上/!slideToggle();

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，
要记得首先把元素的 CSS position
属性设置为
relative、（相对定位；相对于自身）
fixed 或（绝对定位；相对于body）
absolute（绝对定位；相对于上一级）！

动画：animate（）
自定义动画：animate({params},speed,callback）；
必选：params:参数定义形成动画css属性；
可选：speed（时间）slow慢 fast快或者毫秒、
可选：callback 执行完后所执行的函数名称

stop
停止当前动画或滑动：stop(stopAll,goToEnd);
stopALL：（默认false）停止当动画，排队的动画继续执行
goToEnd：（默认false）是否立即完成当前动画
stop():停止当前，排队的继续
stop(true)停止所有动画
stop(true，true)完成当前动画在停止
stop(false，true)立即完成当前在继续下一步动画

jQueryHTML

获取/设置
text（）返回所选元素的文本
html（）返回所选元素的文本及标签
val（）表单字段的值
attr（“href”）获取herf属性值
设置值
text（“内容”）
…
…

添加
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容

jQuery笔记 后续回忆使用 不喜勿喷

======================================== 动画效果

滑动 向下滑动：slideDown(speed,callback); 向上滑动：slideUp(); 若下则上/!slideToggle();

动画：animate（） 自定义动画：animate({params},speed,callback）； 必选：params:参数定义形成动画css属性； 可选：speed（时间）slow慢 fast快 或者 毫秒、 可选：callback 执行完后所执行的函数名称