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()方法的回调函数中应用时,是按照顺序发生的(排队效果)

第四章结束,编辑有些乱。

posted @ 2017-05-31 16:22  张洪源  阅读(197)  评论(1编辑  收藏  举报