JQ的简单使用（基础）——————JQ
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>
JQ的简单使用（基础）——————JQ的更多相关文章
- JS模式：jq中简单的模式--》采摘自js设计（tomxu_version）
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- 【jq】c#零基础学习之路（5）自己编写简单的Mylist<T>
public class MyList<T> where T : IComparable { private T[] array; private int count; public My ...
- 基础JQ框架
最近在研究jq的插件写法,看jq的源码.这里梳理一个最基本的JQ框架,从jq1.7提取.足够简单 <!DOCTYPE html> <html lang="en"& ...
- JQ写简单的伸缩菜单（内附效果图和源代码）
效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jq,js简单实现类似Angular.js数据绑定效果
刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: <div ng-app="myApp" ng-controller=&quo ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- jq实现简单的二级联动下拉框
1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- jq实现简单购物车增删功能
https://www.cnblogs.com/sandraryan/ jq实现购物车功能 点击+- 增减数量,计算价格: 点击删除,删除当前行(商品) 点击- ,减到0 询问是否删除商品 点击全选 ...
- 【jq】c#零基础学习之路（1）Hello World！
从今天起我会持续发表,这个就是一个日记型的,学习编程是枯燥的,况且我们还是零基础. 学前准备 1.编译环境 vs2010.vs2012.vs2015...(本人用的是vs2010旗舰版).vs2010 ...
随机推荐
- android 如何引用jar包
首先,把jar包放到项目目录app/libs下,然后是项目引用:三个方法 方法一.添加compile 打开app下的build.gradle,在dependencies里面添加 implementat ...
- luogu P1125 笨小猴 x
P1125 笨小猴 题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设max ...
- [CF1177B]Digits Sequence (Hard Edition)题解
一个简单的模拟,首先先计算当前是几位数,然后根据几位数推断当前的数是什么,然后求出该位即可 #include <cstdio> int main(){ long long k; scanf ...
- Maven的settings.xml配置详解
子节点详细介绍转载:http://www.cnblogs.com/jingmoxukong/p/6050172.html?utm_source=gold_browser_extension 全局配置 ...
- Supervised pre-trainning有监督预训练
如我们有一个分类任务,数据库很小,这时还是需要通过预训练来避免深度模型的过拟合问题的,只不过预训练是通过在一个大的数据库上(比如imagenet),通过有监督的训练来完成的.这种有监督预训练加小的数据 ...
- 「LibreOJ β Round #2」计算几何瞎暴力
https://loj.ac/problem/517 题解 首先我们如果没有排序这个骚操作的话,可以直接记一下各个数位的前缀和,然后异或标记给全局打,查询的时候先把区间信息提取出来然后整体异或就好了. ...
- [BZOJ3527][ZJOI2014]力：FFT
分析 整理得下式: \[E_i=\sum_{j<i}{\frac{q_i}{(i-j)^2}}-\sum_{j>i}{\frac{q_i}{(i-j)^2}}\] 假设\(n=5\),考虑 ...
- Oracle Like子句
Oracle Like子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle LIKE运算符来测试列中的值是否与指定 ...
- POJ 1384 Piggy-Bank （完全背包）
Piggy-Bank 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/F Description Before ACM can d ...
- [CSP-S模拟测试]:辣鸡(ljh) （暴力）
题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.然而在上化学课的时候,数学和化学都不好的$ljh$却被一道简单题难住了,受到了大佬的嘲笑.题目描述是这样的:在一个二维平面上有一层 ...