JQuery 常用功能

末蓝、 2022-05-11 06:52 279阅读 0赞

### **隐藏和显示:** ###

$("#hide").click(function(){ 
      $("p").hide(); //缓慢 $("p").hide(1000);
    }); 
    
    $("#show").click(function(){ 
      $("p").show(); 
    });
    
    $(document).ready(function(){
      $("button").click(function(){
        $("p").toggle("slow");
      });
    });//点击隐藏或者显示

### **淡入淡出:** ###

$("button").click(function(){ 
      $("#div1").fadeIn(); //淡入  可加参数"slow"、"fast" 或毫秒
    });
    
    $("button").click(function(){ 
      $("#div3").fadeOut(3000); //淡入
    });
    
    $("button").click(function(){ 
      $("#div2").fadeToggle("slow"); //切换
    });
    
    
    $("button").click(function(){ 
      $("#div1").fadeTo("slow",0.15); //降低透明度
    });

### **元素上下滑动:** ###

$("#flip").click(function(){ 
      $("#panel").slideDown(); 
    });//下滑
    
    $("#flip").click(function(){ 
      $("#panel").slideUp(); 
    });//上滑
    
    $("#flip").click(function(){ 
      $("#panel").slideToggle(); 
    });//下滑或者上滑
    
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideDown(5000);
      });
      $("#stop").click(function(){
        $("#panel").stop();//停止滑动
      });
    });

### **自定义动画:** ###

<button>开始动画</button>
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
    
    <script> 
    $(document).ready(function(){
      $("button").click(function(){
        var div=$("div");  
        div.animate({left:'100px'},"slow");
        div.animate({fontSize:'3em'},"slow");
      });
    });
    </script>

### **切换class:** ###

$(document).ready(function(){
      $("button").click(function(){
        $("h1,h2,p").toggleClass("blue");
      });
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery常用技巧

1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集

比眉伴天荒/ 2024年02月19日 18:18/ 0 赞/ 72 阅读

相关常用功能记录

本篇博文是博主用来记录自己在开发时常用功能的写法（方便自己复制粘贴），大家也可以从中获取些自己所需要的功能。前端js 时间格式转换 x为时间，y为格式 fu

骑猪看日落/ 2022年09月10日 04:22/ 0 赞/ 275 阅读

相关 jQuery常用方法

[jQuery常用方法][jQuery] //找tag $("a"); //找到a的tag $("amyId"); //找到id為myId的a

妖狐艹你老母/ 2022年08月12日 13:58/ 0 赞/ 223 阅读

相关 Jquery常用方法

Attribute： $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr(\{src:”test.jpg”,al

超、凢脫俗/ 2022年08月11日 03:25/ 0 赞/ 240 阅读

相关 JQuery常用函数

这一章主要是对JQuery常用函数的汇总，方便查询使用，没什么技术含量，收集而已~~~~ 1.jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均

骑猪看日落/ 2022年06月08日 13:18/ 0 赞/ 258 阅读

相关 jquery常用事件

1. 点击事件：$（“button”）.clik（function（）\{ \}）； 2. 删除事件：$（“元素”）.remove（）；

谁借莪１个温暖的怀抱￠/ 2022年06月07日 11:19/ 0 赞/ 237 阅读

相关 JQuery 常用功能

隐藏和显示: $("hide").click(function(){ $("p").hide(); //缓慢 $("p").hide(1000);

末蓝、/ 2022年05月11日 06:52/ 0 赞/ 280 阅读

相关 JQuery常用方法

.prop() 调整元素属性 .html() 方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。 :: em可以强调和重写文本 .text

素颜马尾好姑娘i/ 2022年04月15日 01:46/ 0 赞/ 277 阅读

相关 jquery常用语法

高级事件 $('.box').on('click','.button',function(){ alert('on click')

雨点打透心脏的1/2处/ 2022年04月05日 15:17/ 0 赞/ 266 阅读

相关整理jQuery操作select控件常用功能代码

网页开发中，jQuery操作select下拉框是比较常用的！今天整理一下相关功能代码。一、基础取值问题例如<select class="selector"></s

怼烎@/ 2021年12月22日 02:37/ 0 赞/ 291 阅读