Jquery 学习-菜鸟教程

最新推荐文章于 2025-06-19 14:35:59 发布

weixin_30897079

最新推荐文章于 2025-06-19 14:35:59 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/studynow/p/jquery.html

本文详细介绍jQuery中元素选择、事件绑定、动画效果等核心功能，包括hide、show、fadeIn等方法的使用，以及如何通过jQuery操作DOM元素，实现动态网页效果。

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

jquery效果和元素选择

 //元素选择
    $(this).hide();
    $("p.test") //隐藏所有class="test"的<p>元素
    $("p:first") //选取第一个<p>元素
    $("a[target='_blank']") ///选取所有target属性值等于"_bLank"的<a>元素

    //文档就绪事件
    $(document).ready(function() {
        //.........
    })

    //jquery事件
    $("p").click(function() {
        //执行代码
    });

    //jquery隐藏/显示
    $("p").hide(speed); //速度
    $("P").show(speed);
    $(selector).hide(speed, callback); //可以添加回调函数
    $(selector).toggle(speed, callback); //来回切换两种方法

    //淡入淡出
    $(selector).fadeIn(speed, callback);
    $(selector).fadeOut(speed, callback);
    $(selector).fadeToggle(speed, callback);
    $(selector).fadeTo(speed, opacity, callback); //允许渐变为给定的不透明度

    //滑动
    $(selector).slideDown(speed, callback); //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    //可选的 callback 参数是滑动完成后所执行的函数名称。
    $(selector).slideDown(speed, callback);
    $(selector).slideUp(speed, callback);
    $(selector).slideToggle(speed, callback);

    //动画
    $(selector).animate({params},speed,callback);
    //当使用animate（）时，必须使用Camel标记法书写所有的属性名 例如padding-left  =>  paddingLeft
    //jQuery stop()方法用于停止动画或效果，在他们完成之前。

    捕获内容
    text()  html()   val()
    设置属性的值
    $(selector).attr("href","http://www.com");
    添加新的内容
    $("p").append("追加文本")
    $("P").preappend("在开头追加文本");
    append/prepend 是在选择元素内部嵌入
    after/before   是在元素外面追加
    jQuery  remove()删除被选元素，包括子元素      empty()删除被选元素子元素
    
    设置css属性
    css({"propertyname":"value","propertyname":"value",...});