jQuery基础-第四章
记录一下学到的知识点吧!
1,.css()的方法。
getter(获取方法)和setter(设置方法)一身。
//取得单个属性值
.css('property')
//返回‘value’
//获取多个属性值
.css({'property1','property2')}
//返回
{'property1':'value','property2':'value'}
设置央视属性是,.css()能够接受的参数有两种,一种是为他传递一个单纯的属性和值,一种是为他传递一个又 属性-值 对构成的对象:
//单个属性及其值
.css('property','value')
//属性-值对构成的对象
.css({property:'value1',
'property-2':'value2'})
这些键值的集合叫做 对象字面量 ,是在代码中直接创建JavaScript对象。
2.parseFloat()函数 虎仔一个字符串从左到右的查找一个浮点(十进制)数。例如,他会将字符串‘12’转换成数字12。灵位,他还会去掉末尾的非数字字符,因此‘12’就变成了
12。如果字符串本身以一个非数字开头,那么parseFloat()会返回NaN,即Not a Number (非数字)。
3.switch (){
case ‘条件’:
执行语句;
break;
case ‘条件’:
执行语句;
break;
default:
执行语句;
}
4. 厂商前缀的样式属性
-webkit- -o- -ms- -moz-
如果在JavaScript中设置这些属性,就需要提前测试他们在DOM中是否存在(大概是:if(!document.getElementById) return false;)propertName 以及-webkit-propertyName 都要检测。 但在jQuery中可以直接使用标准属性名,比如:.css(‘propertyName’,‘value’)。如果样式对象不存在这个属性,jQuery就会一次检测所有带前缀的(webkit,ms,moz,o)属性,然后使用第一个找到的那个属性。
5. 隐藏和显示元素
基本的.hide()和.show()方法不带任何参数。
.hide()方法会将匹配的元素集合内联 style 属性设置为 display:none。 但是他能记住display变为none之前的display值,
6.不得不再说一下 stopPropagation 和preventDefault
stopPrapagation()
定义和用法
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
语法
event.stopPropagation()
说明
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。
preventDefault()
取消事件的默认动作。
语法
event.preventDefault()
说明
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
7.效果和时长
在.show和.hide中建一个指定时长(准确来说是速度) 例如 .hide(‘duration’)
指定显示速度 slow 是0.6秒 600毫秒 fast 是 0.2秒 200毫秒0 默认是400毫秒
8.淡入淡出
.fadeIn(‘slow’),会在一开始设置段落的尺寸,以便内容能够逐渐显示出来,类似的要逐渐减少不透明度,使用.fadeOut()
9.滑上和滑下
.slideDown()和.slideUp() 两个动画仅改变元素的高度。
10.$(this)不重复调用 将其放在 var link =$(this)中
11. .outWidth()计算宽度
borderWidth边框宽度,
通过css定位
在使用.animate()方法时,必须明确css对我们要改变元素所施加的限制。在元素的css定位没有设置成relative或者absolute的情况下,调整left属性对于匹配的元素毫无作用。
所有的块级元素磨人的css定位属性都是static,这个值精确地表明: 在改变元素定位属性之前试图移动他们,他们只会静止不动。
12. 并非和排队效果
连缀可以轻松的实现排队效果。
queue:false // 把该选项设置为false即可让当前动画与前一个动画同时开始。
手工排队列
有关为一组元素应用排队效果的最后一个需要注意的问题,就是排队不能自动应用到其他的费效果方法,比如css()下面。
然而,及时把修改背景颜色的代码放在连缀序列正确的位置上,他也会在单击后即刻执行。
把非效果方法添加到对列中的一种方式就是使用.queue()方法。
举例:
.fadeTo('slow',1.0)
.slideUp('slow')
.queue(function(next){
$switch.css({backgroundColor:'#f00'});
next();
})
.slideDown('slow');
像这样一个回调函数, .queue()方法就可以把该函数添加到相应元素的效果对列中。在这个函数内部,我们把背景颜色改为红色,然后又调用了next()方法,柒返回的结果将作为参数传给回调函数。 添加这个next()方法可以让队列在终端的地方再接续起来,然后在于后续的.slideDown(‘slow’)连缀在一起。 如果此处不适用next()方法,画面就会中断。
13.next()下一个 、、 排队和回调函数
为了对不同元素上的效果实现排队,jQuery为每个效果方法都提供了回调函数。 回调函数挺有用的 用于队列效果。
鉴别及概括
一组元素上的效果
当一个.animate()方法中以多个属性的方式应用,是同时发生的;
当以方法连缀的形式应用,是按顺序发生的(排队效果)----除非queue选项值为false。
多组元素上的效果
默认情况下是同时发生的
当在一个效果方法或者在queue()方法的回调函数中应用时,是按照顺序发生的(排队效果)
第四章结束,编辑有些乱。