用jquery写循环播放div的相关笔记 珍贵的总结 -1

用jquery写循环播放div

line-height应用的元素的 层次?

line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行之间的距离.而不管容器是块级还是行级.

它等于font-size 与 行间距 之和.

line-height是指 (块级/行内)元素容器 中包含的 文本行之间 的距离.

line-height并没有限制 包含 文字/文本 的父容器的 类型, 它可以是 块级元素, 也可以是行内容器.

也就是说, 块级元素和 行内元素, 都可以使用 line-height样式. 文本可以是 单行, 也可以是多行.

如: p.small, p.big , p , div,li, span { line-height: 200px;}

如果 块级元素中, 只包含一行, 单行, 那么, 设置行高line-height等于容器(如li, p, div)的高度, 则文字的上下正好填充行间距的1/2.

从而使单行文字 居于容器的 垂直居中. 这是line-height非常常用的一个用法

文本或图片垂直居中有两种方法?

line-height和vertical-align都可以实现 垂直 居中的效果,

一般来说:

• line-height, 常用于 容器(块级和行内都可以)中的 单行(一定是单行的) 文本( 一定是文本/文字的, 不能是图片)的垂直居中;
• vertical-align, 常用于 多行的文本 /或图片的(更多的是 图片)的 垂直居中

实际上, 图片用line-height也是可以用来排版 图片 居中的! 但是也要靠 前后的文字来辅助布局.

也就是说, 要实现图片居中, 不管是用line-height,or vertical-align, 都要借助文字辅助布局(可以用空的span)来实现!!

line-height: 将会把图片当作文字, 用(line-height - 图片高度)/2 间距加在图片的上下两侧, 自然就垂直居中了.

---

---

---

jqueryui就是把css和jquery的js脚本整合了

所以实际上用jqueryui的话,就只是写web,div html标签了.

脱离正常的文档流, float和absolute定位都可以,

区别是: float会依次排列(没有z-index的变化概念),绝对不会发生重叠的,(反过来说,如果依次排列的,就用float而不用absolute)

而absolute会全部重叠(反过来说, 像图片轮播的效果, 就是绝对定位).也就说, 如果有块在z轴上的重叠,

那么一定有absolute定位.同时, 就一定要考虑z-index的上下问题, z轴在下方的absolute层/包括其特效动画都将看不到.

css中, 多个并列的/平行的元素, 通常都是通过 列表 li来做的

很重要的一点是: 当div 下有 ul/ol > li的时候, 要分别设置 ul/ol 和 其下面的li的css属性.

这时候, li的父容器要 看成是 ul/ol, 而不是div. 因此li绝对定位的时候,

jquery获得 jquery对象有两种途径,

一是用 选择器;

如 选择器的层级中, "空格 表示ancestor decendant 祖先 后代" " + ", " > " ," ~ "

二是用 jquery的方法(即筛选方法)

获得jquery对象后, 就可以对它应用处理方法了

注意: 两种途径获得结果是一样的, 都可以应用 jquery的方法

获得的jquery对象, 它的类型是一个对象, 实质上是一个js集合/js数组: [p.../p, div.../div..]

代码示例:

匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />jQuery 代码:
$("label + input")结果:
[ <input name="name" />, <input name="newsletter" /> ]
// 结果是一个 由html文档对象dom 组成的 js 集合, js数组.
// 所以, 要从jquery对象$, 获得dom对象的方法就是 取数组的元素: $("label + input")[0]...

在做前端页面时, 真正比较麻烦的还是 css, 因为要实现某种布局, 有时候, 还必得用那种

css, 必须要那么去做. 而js,jquery的方法上, 反而要灵活得多.可以用多种方法来实现...

当多个 inline元素, 或者inline-block元素, 或者 float元素, 因为line-height不同,而不能

排列在同一水平(底)线上时, 可以设置不同的 margin-top来弥补高度的不同.

jquery选择器 在处理 事件 时 对元素的遍历?

第一, jquery选择器本身返回的就是一个集合, 不管它包含的是多个,还是1个dom元素;

所以可以对其中 "每一个匹配的元素" 进行遍历

第二, 对jquery选择器集合 的遍历, 有两种方式:

a. 可以 显式的 使用 each 函数, 这个用得不多

$("p").each(function(){
	this.src=...
	$(this)....
	$("div.class")....
	}

b.  就是 常用的 jquery 事件, 在所有的 jquery 事件处理函数中, 全都 "隐式" 的
  对 jquery选择器对象集合 其中"每一个匹配的元素"都进行了遍历.
  (用jquery官方的话说, 就是 事件处理函数fn是:  对选择器返回的集合中的每一个匹配的元素,
     的xxx 如mouseover/mouseenter等事件中都绑定的函数)
 也就说, 对$("ol li")选择器 "集合" 的mouseover事件绑定fn函数, 就等于是 对集合中的
 每一个匹配元素的 mouseover事件 都绑定了fn函数. 这就是一种隐式的遍历

  $("ol li").mouseover(function(){
	this.src=...
	$(this)....
	$("div.class")....
  });

第三, 在遍历函数中,

可以使用this, 表示当前正在遍历的/ 正在操作的 dom元素本身:

this.src=...

也可以使用 $(this), 表示当前正在遍历的/ 正在操作的 集合中的每一个jquery元素本身,

$(this)....

当然, 你也可以在遍历事件函数中, 不操作 集合中的遍历元素 本身, 不操作this, $(this),

而去处理其他元素..., 如:

$("div.class")....

在上面的情形中, 第二种情形用得最多, 操作最多的是 $(this).

索引的起始值?

从正向开始算的话, 第一个元素的索引通常为0,

从最后反向开始算的话, 索引从-1开始算起, 肯定是-1, 不可能是-0, 因为-0 = = 0, 那岂不是跟正向的

初始索引相同了?

js jquery中的变量如何使用?

• 不管是原生的js还是jquery中, 都可以使用变量:

• 变量必须用 var 关键字来定义: var foo = ....;

• 变量可以是任意类型: var foo=1, "abc" , $("p"), $(this), this, $("div")[0];

• 变量的使用方法是, 直接在表达式/语句中使用变量, 不需要加任何前缀, 因为这个变量单词已经在

• 前面用var定义过了, 所以jquery/js引擎/解释器 是能够识别的:

  var num=$(this).index();
  
  $("ul li").eq(num).css(....);

jquery动画效果, 预定义和自定义?

静态的css效果, 用css方法, **animate就是动态的css变化效果, ** 用animate方法, 实质都是一样的.

如果使用静态的css, 效果是直接变化的, "蹦" 的效果,

如果是慢慢变化的, 让你看到变化的过程就是 animate动画, 所以中间有个设置时间/ 快慢的参数.

预定义动画还是有限的, 如: slideUP/down, fadeIn/out, show/hide, 但是, 要设置任意的css样式属性的 动态变化, 还是得要使用animate方法.

自定义用animate方法, 可以修改任意的css样式属性!!!

css样式属性: 注意在css方法, animate方法等 中, 所提到的 : css样式属性不仅仅是指width,height,color

等等, 凡是 可以写在 style样式中的 属性都是css样式属性, 如left , display, border, background等等..都可以在 animate中使用...

jquery设置多个平行操作的惯用方式?

是把多个平行/类似的操作/设置, 写成 key: value的形式, 然后放在一个大的{...}中, 如:

动画的代码

    animate({
        left: '0',
        opacity: 'show',
        height: '100px'

    }, 1000);

判断相关联的两个 div 里面的元素 之间的对应关系?

使用jquery的index方法:

如： $(this).index()

jquery鼠标移上 当前"高亮", 其他变暗?

实际上, 当前没有高亮, 只是其他变暗了, 所以对比出来的

效果是:fadeTo．因为fadeIn是

jquery中的setInterval?

interval = inter + val 名字中包含val, 其内部也就是调用了val()函数.

对计时器的控制:

设置计时器: timer = setInterval(...);

清除计时器:　clearInterval(timer). 所以上面的setInterval要把创建的计时器保存起来.

setInterval参数要用匿名函数来实现...:

timer = setInterval(function(){

    ....

    });

在fade动画中,用得最多的 fadeTo?

fadeIn和fadeOut fadeToggle都是把透明度 要么变为0, 要么变为1. 所以就只带一个" 速度" 参数, 表示变化的快慢:

slow = 600ms,
normal = 400ms
fast = 200ms
其他数值是多少毫秒 ms

实际中, 用得较多的是 fadeTo, 规定了最后变化到的透明度值. 所以带两个参数:

fadeTo(speed, opacity_end);
fadeTo(200, 0.3);

关于透明度的数字的 设置?

• 首先要搞清楚的是, 透明/不透明究竟是哪两个单词?

  opactiy: 是 模糊, 晦涩, "不透明"的意思
  
  而transparent 才是透明的意思

• 因此, o'pacity的值大, 就越不透明, opacity的值越小就越透明, 0为完全不可见, 完全透明, 1为完全不透明
• 不同的浏览器, 对opacity的值有不同的规定, 如ie是用0~100来表示, 而ff是用0.0 ~ 1.0 来表示的, jquery进行了整合, 统一用 0.0到1.0
• opacity的取值可以是 小数点后2位, 即 .01 和.02 的透明度是不同的, 实际应用中一般精确到 小数点后1位就可以了!