Jquery特殊效果

1.jquery特殊效果

 

fadeIn() 淡入

$btn.click(function(){

$('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

});

fadeOut() 淡出
fadeToggle()切换淡入淡出
hide()隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起

slideToggle()依次展开或卷起某个元素

 

 

2.尺寸相关,滚动事件

 

1、获取和设置元素的尺寸

width()height()            获取元素widthheight 
innerWidth()、innerHeight()  包括paddingwidthheight 
outerWidth()、outerHeight()  包括paddingborderwidthheight 
outerWidth(true)、outerHeight(true)  包括paddingborder以及marginwidthheight

 

2、获取元素相对页面的绝对位置

  offset();
 
获取元素的lefttop,位置

 

1.浏览器的宽高:$(window).width();

2.文档的宽高:$(document).width();

3.获取页面滚动的距$(document).scrollTop();$(document).scrollLeft();

4.监听页面滚动距离$(window).scroll(function(){  })

 

 

3.jquery循环

 

对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:

 

 $(function(){
  
 $('.listli').each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   <li></li>
</ul>

 

4.回到顶部固定写法:

 

$("html,body").animate({"scrollTop":0})

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473953.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DB2表的重组

DB2在存储大数据的时候&#xff0c;遇到一个问题&#xff0c;将数据导入表中保存不了&#xff0c;最后是重组后才解决。 下面是从IBM官网上搜集的资料&#xff1a; 官网地址&#xff1a;http://publib.boulder.ibm.com/infocenter/db2e/v9r1/index.jsp?topic%2Fcom.ibm.db2e.d…

开发语言

开发语言 高级语言&#xff1a;Python、Java、PHP、C#、Go、Ruby、C…   代码编译得到 字节码 &#xff0c;虚拟机执行字节码并转换成机器码再后在处理器上执行低级语言&#xff1a;C、汇编   代码编译得到 字节码 &#xff0c;虚拟机执行字节码并转换成机器码再后在处理器…

LeetCode 775. 全局倒置与局部倒置(归并排序/二分查找/一次遍历)

文章目录1. 题目2. 解题2.1 归并排序求逆序度2.2 二分查找2.3 一次遍历1. 题目 数组 A 是 [0, 1, ..., N - 1] 的一种排列&#xff0c;N 是数组 A 的长度。 全局倒置指的是 i,j 满足 0 < i < j < N 并且 A[i] > A[j] &#xff0c;局部倒置指的是 i 满足 0 < i…

Jquery事件、冒泡、委托与节点

1-jquery属性操作 1、html() 取出或设置html内容 // 取出html内容 var $htm $(#div1).html(); // 设置html内容 $(#div1).html(<span>添加文字</span>); 2、prop() 取出或设置某个属性的值 注&#xff1a;attr可以读取自定义属性 // 取出图片的地址 var $src $(#i…

使用 ServiceStack 构建跨平台 Web 服务

本文主要来自MSDN杂志《Building Cross-Platform Web Services with ServiceStack》&#xff0c;Windows Communication Foundation (WCF) 是一个相当优秀的服务框架&#xff0c;当我们讨论跨平台的服务的时候&#xff0c;虽然WCF对WebService的支持还行&#xff0c;在面对一些…

Hive基础(一)

一、Hive是什么 Hive是基于Hadoop的一个数据仓库工具(离线)&#xff0c;可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供类SQL查询功能。&#xff0c;它能接收用户输入的sql语句&#xff0c;然后把它翻译成mapreduce程序对HDFS上的数据进行查询、运算&#xff0c;…

LeetCode 926. 将字符串翻转到单调递增(动态规划)

文章目录1. 题目2. 解题1. 题目 如果一个由 0 和 1 组成的字符串&#xff0c;是以一些 0&#xff08;可能没有 0&#xff09;后面跟着一些 1&#xff08;也可能没有 1&#xff09;的形式组成的&#xff0c;那么该字符串是单调递增的。 我们给出一个由字符 0 和 1 组成的字符串…

利用Jqurey写一个输入内容增加并且可以删除,上下移动的标签

最终结果如下&#xff0c;输入内容增加标签并且可以删除&#xff0c;上下移动&#xff1a; 代码赏析&#xff1a; <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><title>todolist</title><style type…

java的注释、关键字、标识符、变量常量、数据类型、运算符、流程控制等

java的注释、关键字、标识符、变量常量、 数据类型、运算符、流程控制等 1. java概述 1.1 java的技术体系 Java SE&#xff1a;是Java的标准版&#xff0c;提供了完整的java核心API。 Java EE&#xff1a;是Java的企业版&#xff0c;主要用于开发…

LeetCode 851. 喧闹和富有(拓扑排序)

文章目录1. 题目2. 解题1. 题目 在一组 N 个人&#xff08;编号为 0, 1, 2, ..., N-1&#xff09;中&#xff0c;每个人都有不同数目的钱&#xff0c;以及不同程度的安静&#xff08;quietness&#xff09;。 为了方便起见&#xff0c;我们将编号为 x 的人简称为 "perso…

Jquery练习题—实现分组添加功能

实现分组添加功能&#xff1a; <title>Insert title here</title> <script type"text/javascript" src"js/jquery-1.12.4.min.js"></script> <script type"text/javascript"> $(function(){ //需求1&#xff1a;…

PostgreSQL参数学习:vacuum_defer_clean_age

官方文档&#xff1a; http://www.postgresql.org/docs/9.3/static/runtime-config-replication.html 为了防止slave端读取数据时&#xff0c;因为读到的是旧有数据而被强制取消&#xff0c;设定了这么一个以transaction为单位的值。 就是可以保证经过这么多的trsanction后&…

java的常用引用类、数组、String类

java的常用引用类、数组、String类 1. 常用引用类 1.1 Scanner 一个简单的文本扫描器类。 使用&#xff1a; //创建扫描器对象 Scanner sc new Scanner(System.in); //接收用户输入字符串类型的数据 String str sc.next(); //接收用户输入整数类型的数据 …

json-ajax-jsonp-cookie

json json是 JavaScript Object Notation的首字母缩写&#xff0c;单词的意思是javascript对象表示法&#xff0c;这里说的json指的是类似于javascript对象的一种数据格式&#xff0c;目前这种数据格式比较流行&#xff0c;逐渐替换掉了传统的xml数据格式。 json是轻量级,易解…

LeetCode 981. 基于时间的键值存储(哈希+二分查找)

文章目录1. 题目2. 解题1. 题目 创建一个基于时间的键值存储类 TimeMap&#xff0c;它支持下面两个操作&#xff1a; set(string key, string value, int timestamp) 存储键 key、值 value&#xff0c;以及给定的时间戳 timestamp。 get(string key, int timestamp) 返回先…

java的类与对象

java的类与对象 1 面向对象 1.1 面向对象与面向过程的区别 面向过程和面向对象都是解决问题的逻辑方法&#xff0c;面向过程是强调解决问题的步骤&#xff0c;可以先定义多个函数&#xff0c;在使用的使用调用函数即可&#xff1b;面向对象把问题分解成多个对象&#xff0c;…

学车总结

学车总结&#xff1a; 1、左脚离合&#xff0c;右脚油门和刹车。2、左脚脚跟着地&#xff0c;用脚尖控制离合。3、踩离合要快&#xff0c;松要慢点&#xff1b;刹车刚好相反。4、平时不要猛打方向盘&#xff0c;轻微调整就行&#xff0c;需要拐急弯要降低车速。5、换挡时需要将…

建设网站需要的Bootstrap介绍与操作

01-流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度值固定, calc()&#xff1a;可以通过计算的方式给元素添加尺寸,比如:width:calc(25%-4px); box-sizing&#xff1a;content-box默认的盒子计算方式 2.border-box 盒子的计算方式从边框开始,盒子的尺寸,边框和…

04.卷积神经网络 W4.特殊应用:人脸识别和神经风格转换

文章目录1. 什么是人脸识别2. One-Shot学习3. Siamese 网络4. Triplet 损失5. 人脸验证与二分类6. 什么是神经风格迁移7. 深度卷积网络在学什么8. Cost function9. Content cost function10. Style cost function11. 一维到三维推广作业参考&#xff1a;吴恩达视频课深度学习笔…

java的封装,继承,多态

java的封装&#xff0c;继承&#xff0c;多态 1 封装 1.1 封装 指一种将抽象性函式接口的实现细节部份包装、隐藏起来的方法。封装可以被认为是一个保护屏障&#xff0c;防止该类的代码和数据被外部类定义的代码随机访问。要访问该类的代码和数据&#xff0c;必须通过严格的…