用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位就可以了!

posted @ 2016-03-08 17:23 noitanym 阅读(1120) 评论(0) 编辑收藏举报

刷新页面返回顶部

noitanym

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

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