JQ的简单使用(基础)——————JQ

Wesley13
• 阅读 681

JQ基础——JQ的简单使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .w{}
        </style>
    </head>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <body>
    1.    弹窗
        <script>
            $(function(){
                alert("JQ超简")
            })
        </script>
    2.    修改文本
        <div>张山</div>
        <script>
            $(function(){
                $("div").html("李四")
            })
        </script>
            
    3.    点击事件
        <button id="btn">点我</button>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("#btn").html("修改成功")
                });
            });        
        </script>
    4.图片显示/隐藏  (自建效果)
    <img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" width="200px"> <br />
    <button id="btn1">显示</button><button id="btn2">隐藏</button>
<a href="#" id="btn1">显示</a><a href="#" id="btn2">隐藏</a>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#img").show(2000);
                $("#img").fadeOut(2000);//渐出
                $("#img").slideDown(2000);//向下出
                
            });
        });
        $(function(){
            $("#btn2").click(function(){
                $("#img").hide(2000);
                $("#img").fadeIn(2000);//渐入
                $("#img").slideUp(2000);//下上藏
            })
        })
        自建效果
        $(function(){
            $("#btn1").click(function(){
            $("#img").animate({
                width: "400px",
                opacity:"0.1" ,
            },3000)
        })
    })
    </script>
    5.Ad广告。定时弹出。
    <img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" />
    <script>
        $(function(){
            setTimeout("hideAd()",3000);
        });
        function showAd(){
            $("#img").show();
            
        }
        function hideAd(){
            $("#img").hide();
            setTimeout("showAd()",3000);
        }
    </script>
    </body>
</html>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
JQuery
一、jq简介jq其实就是js的一个文件。二、jq书写步骤1、先引入jq文件(min的文件)<scripttype"text/javascript"src"file:///C|/jquery/jquery3.3.1.min.js"</script2、换新的一行写js代码<scripttype"text/javascri
Stella981 Stella981
3年前
Appscan的下载安装
1、下载Appscan:http://download2.boulder.ibm.com...2AppScan\_Setup.exe(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fdownload2.boulder.ibm.com%2Fsar%2FCMA%2FRAA%2F00jq2
Wesley13 Wesley13
3年前
Java爬虫之JSoup使用教程
title:Java爬虫之JSoup使用教程date:201812248:00:000800update:201812248:00:000800author:mecover:https://imgblog.csdnimg.cn/20181224144920712(https://www.oschin
Stella981 Stella981
3年前
JavaScript:改变 HTML 图像
JavaScript:改变HTML图像1.代码如下:<!DOCTYPEHTML<html<head<metacharset"utf8"/<title改变Html图片</title</head<body<
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
Echarts
<!DOCTYPEhtml<html   <head      <metacharset"utf8"/      <title</title   </head   <body      <divid"main"style"height:600px;width:500
Stella981 Stella981
3年前
Js使用面向对象和面向过程的方法实现拖拽物体的效果
1.面向过程的拖拽实现代码:!(https://oscimg.oschina.net/oscnet/d680c759957babef2fec0902676eaa35ad9.gif)<!DOCTYPEhtml<html<head<titledragDiv</title
Wesley13 Wesley13
3年前
2018.3.29 网页中嵌套网页的两种方法
第一种:<!DOCTYPEhtml<html   <head      <metacharset"UTF8"      <title</title   </head   <body      <marqueedirection"right"style"color: