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