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的更多相关文章

  1. JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  2. 【jq】c#零基础学习之路(5)自己编写简单的Mylist<T>

    public class MyList<T> where T : IComparable { private T[] array; private int count; public My ...

  3. 基础JQ框架

    最近在研究jq的插件写法,看jq的源码.这里梳理一个最基本的JQ框架,从jq1.7提取.足够简单 <!DOCTYPE html> <html lang="en"& ...

  4. JQ写简单的伸缩菜单(内附效果图和源代码)

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. jq,js简单实现类似Angular.js数据绑定效果

    刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: <div ng-app="myApp" ng-controller=&quo ...

  6. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

  7. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  8. jq实现简单购物车增删功能

    https://www.cnblogs.com/sandraryan/ jq实现购物车功能 点击+- 增减数量,计算价格: 点击删除,删除当前行(商品) 点击- ,减到0 询问是否删除商品 点击全选 ...

  9. 【jq】c#零基础学习之路(1)Hello World!

    从今天起我会持续发表,这个就是一个日记型的,学习编程是枯燥的,况且我们还是零基础. 学前准备 1.编译环境 vs2010.vs2012.vs2015...(本人用的是vs2010旗舰版).vs2010 ...

随机推荐

  1. Cloneable接口的作用与深度克隆与浅度克隆

    cloneable接口的作用 cloneable其实就是一个标记接口,只有实现这个接口后,然后在类中重写Object中的clone方法,然后通过类调用clone方法才能克隆成功,如果不实现这个接口,则 ...

  2. CSS-动画,让图片上的图形有涨起来的效果(逐渐变高)和(逐渐变长)

    效果图: html: <div class="inner3"> <div class="over"> <img src=" ...

  3. Java——API文档

    Sun下载JDK--解压缩--javadoc文件(Constuctor Summary[构造方法]+Method Summary[方法])   [Object]   Object类是所有Java类的根 ...

  4. [BZOJ1547]周末晚会:Burnside引理+DP

    分析 Attention!这道题的模数是\(1e8+7\). 注意到循环同构会被认为是同一种方案,我们可以把顺时针旋转每个人的位置作为置换,容易发现这些置换一定会形成一个置换群,于是题目所求的所有合法 ...

  5. 学习wavenet_vocoder之预处理、训练

    一.预处理 1.在进行预处理时,如果不明白需要的参数,可以使用命令获取帮助,从这里我们可以看到可以具体的用法和对应的参数. python preprocess.py --help python pre ...

  6. Handling Configuration Changes with Fragments

    This post addresses a common question that is frequently asked on StackOverflow: What is the best wa ...

  7. Linux内核调试方法总结之strace

    strace [用途] strace是一个功能强大的调试.分析.诊断工具,跟踪程序或进程执行时的系统调用和所接收的信号.可将所调用的系统调用的名称.参数和返回值输出到标准输出或者输出到-o指定的文件. ...

  8. Gitblit 添加密钥实现客户端无密码pull、push代码

    之前管理代码用的是SVN,项目需要将管理代码软件切换为Git 折腾了一天,记录下遇到的小坑,方便后来人. 服务端 服务端 的系统是Windows Sever2008 ,首先在服务端安装window版本 ...

  9. Flask框架【七】—session组件详解

    一.flask session简介 flask中session组件可分为内置的session组件还有第三方flask-session组件,内置的session组件缺点: 功能单一 session是保存 ...

  10. 一个简单的INI读写文件类,基于C++的模板编程实现,使用超级方便

    GITHUB链接:https://github.com/brofield/simpleini 主体代码: /** @mainpage <table> <tr><th> ...