JQ的简单使用(基础)——————JQ
2024-10-07 11:16:37
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>
最新文章
- python-高阶函数
- MySQL获取汉字的首字母
- Hangfire项目使用
- AFNetworking 与 UIKit+AFNetworking 详解
- 报表控件NCReport教程:集成NCReport到Qt应用程序中
- ubuntu 使用adb shell命令识别android设备
- RabbitMQ安装和配置
- Redis学习手册(String数据类型)
- 使用php glob函数查找文件,遍历文件目录(转)
- Multiple outputs from T4 made easy – revisited » DamienG
- 自学HTML5第三节(拖放效果)
- linux Bash bug修复记录
- Hive导出复杂数据到csv文件
- ubuntu常用命令及操作,包括安装CUDA
- sklearn库 线性回归库 LinearRegression
- 【原创】运维基础之Zabbix(1)简介、安装、使用
- python 迭代多个对象
- jsp-9大内置对象简介
- AI 数值计算
- python实现模拟登录
热门文章
- luogu【P1024 一元三次方程求解】题解
- Kohana Cache
- 基于Cesium的Web3d实现二三维室内外一体化融合
- 修改springboot控制台输出的图案
- optistruct线性求解一次二次单元应力位移比较
- java将url里面的中文改成ASCII字符集 和 SCII字符集 改成 中文
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_05 IO字符流_8_使用try_catch_finally处理流中的异常
- 【ABAP系列】SAP 销售订单的行项目里条件的增强
- 【EWM系列】SAP EWM WCU和Non-SAP系统接口
- day15生成器send方法,递归,匿名函数,max结合匿名工作原理,常用的内置函数