jquery练习

7-04 287 views

1、入口函数

$(document).ready(function(){

代码;

});

 

简写:

$(function(){

代码;

});

 

js的window.onload事件是等到所有内容都加载完成之后,才会去执行;

jQuery的入口函数是在html所有标签都加载之后,就会去执行。

 

2、选择器

基本选择器:如:$('div')、$('.li')、$('#demo')、$('*')等

层级选择器:空格(后代)、>(子代)、+(紧邻)、~(兄弟)

过滤选择器::eq(index)、:gt(index)、:lt(index)、:odd、:even、:first、:last

属性选择器:如:$("a[href='miss']")

3、常用函数

slideDown():高度逐渐增加

slideUp():高度逐渐减小

fadeIn(1000):透明度在1秒内逐渐增加到100%

fadeOut(1000):透明度在1秒内逐渐减小到0

 

index():搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

siblings():同辈其他元素;

 

css():访问匹配元素的样式属性

animate():用于创建自定义动画的函数。

 

each():以每一个匹配的元素作为上下文来执行一个函数。

stop():停止所有在指定元素上正在运行的动画。

 

before():在每个匹配的元素之前插入内容

fadeTo():把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

hover():一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

 

scrollTop():获取匹配元素相对滚动条顶部的偏移

offset():获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。

 

scroll():当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

window.innerWidth:获取浏览器的宽度;

preventDefault():取消事件的默认动作。

stopPropagation():不再派发事件到其他节点。

text():无参数时,取得所有匹配元素的内容。有参数时,设置内容

prevAll():查找当前元素之前所有的同辈元素

end():回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。

nextAll():查找当前元素之后所有的同辈元素。

data():在元素上存放数据,返回jQuery对象。

 

map():将一组元素转换成其他数组(不论是否是元素数组),全局的map 函数 参数 跟 jQuery对象的参数是反的

 

 

懒加载插件

第一:lazyLoad简介及作用:

网站性能优化的插件,提高用户体验。

页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。

 

第二:使用场合

涉及到图片,falsh资源,iframe,网页编辑器(CK),JS文件 等占用较大带宽,避免网页打开时加载过多资源,让用户等待太久。

 

第三:代码使用

1.导入JS插件(前提有 1.6.2.js文件)

<script src="js\jquery.lazyload.js" type="text/javascript"></script>

2.在你的页面中加入如下:

<script type="text/javascript">

$("img").lazyload();

</script>

所以图片都延迟加载。

 

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。

 

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

欢迎留言