1.JQuery是javascript的类库


2.下载JQuery


3.导入JQuery

<script src="jquery-3.0.0.js"></script>

4.JQuery的基本功能

http://www.php100.com/manual/jquery/


5.用JQuery实现点击按钮返回页面顶部的功能

//里面用到了Jquery里面的事件-scroll ,当页面滚动条发生变化执行的函数

$(window).scroll( function() { /* ...do something... */ } );

//里面还用到了Jquery里面的CSS对应的scorllTop,查看当前距离头部的位置
 
//removeClass和addClass分别是Jquery里面属性中对应的内容,添加css样式类
//初始的时候是hide样式被添加到,滚动的时候这个样式被移除
//$('#id');id选择器
方法1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到我的网站</title>
<style>
.returnTop{
position:fixed;
width:50px;
height: 60px;
right: 20px;
bottom: 20px;
background-color: red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id='return_top' class='returnTop hide' onclick="Go();">返回顶部</div>
<!-- <div id='return_top' class='returnTop hide'>返回顶部</div> -->
<div style="height:3000px;">asd</div> <script src="jquery-3.0.0.js"></script>
<script type="text/javascript"> // $(function(){
// //当页面加载完成之后默认会执行的一个函数
// $('#return_top').click(function(){
// $(window).scrollTop(0);
// });
// }) $(window).scroll( function() {
// console.log(123);
//每滚动一下滑轮,就执行下consolg.log
var height = $(window).scrollTop();
if(height>0){
//显示返回顶部
$('#return_top').removeClass('hide');
}else{
//影藏返回顶部
$('#return_top').addClass('hide');
}
} );
function Go() {
// body...
$(window).scrollTop(0);
}
</script>
</body>
</html>

JQuery基础知识学习1的更多相关文章

  1. jquery基础知识学习笔记

    jquery是一个js库/常用版本是jjquery-1.7.2.js/这个版本主要是用来做开放用途 做产品的时候是用它的min版本.玩jquery的时候,不管干啥都要花钱(美元)   注意点: 1.s ...

  2. 20170811 JQuery基础知识学习记录(一)

    基本写法 $(selector).action() $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $(&quo ...

  3. JQuery基础知识(1)

    JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...

  4. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  5. JQuery基础知识(2)

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  6. 0417 jQuery基础知识

    jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...

  7. GCC基础知识学习

    GCC基础知识学习 一.GCC编译选项解析 常用编译选项 命令格式:gcc [选项] [文件名] -E:仅执行编译预处理: -S:将C代码转换为汇编代码: -c:仅执行编译操作,不进行连接操作: -o ...

  8. (转)Linux基础知识学习

    Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过 ...

  9. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

随机推荐

  1. JDOJ-P1260 VIJOS-P1083 小白逛公园

    首先,在这里给大家推荐一个网站,https://neooj.com:8082,这是我母校的网站 言归正传,题目描述 VIJOS-P1083 小白逛公园 Time Limit: 1 Sec  Memor ...

  2. C#高性能大容量SOCKET并发(八):通讯协议

    协议种类 开发Socket程序有两种协议类型,一种是用文本描述的,类似HTTP协议,定义字符集,好处是兼容性和调试方便,缺点是解析文本会损耗一些性能:一种是用Code加结构体,定义字节顺序,好处是性能 ...

  3. zabbix action理解

    Maintenance status not in maintenance   谷歌翻译:维护状态不在维护中,中文意思就是监控的设备有problem,触发器报警了,然后执行action {TRIGGE ...

  4. nginx加权轮询和ip_hash

    nginx为后端web服务器(apache,nginx,tomcat,weblogic)等做反向代理 几台后端web服务器需要考虑文件共享,数据库共享,session共享问题.文件共享可以使用nfs, ...

  5. python使用上下文管理器实现sqlite3事务机制

    如题,本文记录如何使用python上下文管理器的方式管理sqlite3的句柄创建和释放以及事务机制. 1.python上下文管理(with) python上下文管理(context),解决的是这样一类 ...

  6. python 列表操作方法详解

    列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表是一个数据的集合,集合内可以放任何数据类型,可对集合方便的增删改查操作.Python已经内置确定序列的长度以及确定最大和最 ...

  7. xBIM 格式之间转换

    目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...

  8. Java程序只运行一个实例[转]

    如果希望你的Java程序只能存在一个实例,可以参考下面的用法. 原文链接:http://blog.csdn.net/yaerfeng/article/details/7264729 Java没有提供这 ...

  9. BZOJ 3168: [Heoi2013]钙铁锌硒维生素 [线性基 Hungary 矩阵求逆]

    3168: [Heoi2013]钙铁锌硒维生素 题意:给一个线性无关组A,再给一个B,要为A中每个向量在B中选一个可以代替的向量,替换后仍然线性无关.判断可行和求字典序最小的解 PoPoQQQ orz ...

  10. BZOJ 3731 3731: Gty的超级妹子树 [树上size分块 !]

    传送门 题意:一棵树,询问子树中权值大于k的节点个数,修改点权值,插入新点,断开边:强制在线 该死该死该死!!!!!! MD我想早睡觉你知不知道 该死该死沙比提 断开边只会影响一个块,重构这个块就行了 ...