JQ(上)

jQuery简介

 

jQuery也就是JavaScript和查询（Query）即 辅助JavaScript开发的类库。

jQuery是一个兼容多浏览器的javascript库。

 

核心理念是 write less,do more (写得更少,做得更多)。

 

jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入。

曾经，jQuery是最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery！

 

大多数 JavaScript 类库一般都具备的特性包括：

选择器（Selector）、DOM操作、实用函数、事件处理、Ajax等

 

 

jQuery使用

 

进入jQuery官网或其他平台下载jQuery文件，并且引入页面：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

 

http://www.jq22.com/jquery-info122

 

通常每个版本号有两个版本可供下载

生产版 - 用于实际的网站中，已被精简和压缩

开发版 - 用于测试和开发，未压缩，是可读的代码

 

注意：2.0及之后的版本，不再兼容 IE 6 7 8

 

也可以引入服务器上的jQuery文件

<script type=“text/javascript” src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

 

在jQuery库中，$ 就是jQuery的一个简写形式

例如： $(“#nan”) === jQuery(“#nan”)

 

当浏览器解析完DOM之后，执行ready小括号内的函数

$(document).ready( function () { …} )

可简写为：$(function () {…} )

 

JQ的优势：

轻量级                         强大的选择器

出色的DOM操作         可靠的事件处理机制

完善的Ajax                  出色的浏览器兼容性

链式操作方式               丰富的插件支持

完善的文档                   开源

......

 

 

jQuery选择器

 

选择器：简洁的写法，支持CSS1到CSS3的选择器

 

$(“#test”)选取id为test的元素---单个元素

$(“.test”)选取所有class为test的元素---元素集合

$(“div”)选取所有的<p>元素---元素集合

$(“div  span”)选取<div>里的所有的<span>(可以选到子和孙所有元素)元素---元素集合

$(“div:first”)选取所有<div>元素中第1个<div>元素---单个元素

$(“div:last”)选取所有<div>元素中最后一个<div>元素---单个元素

$(“input:even”)选取索引(索引从0开始,0算为偶数)是偶数的<input>元素---元素集合

$(“input:odd”)选取索引(索引从0开始)是奇数的<input>元素---元素集合

$(“div[title=test]”)选取属性title为“test”的<div>元素---元素集合

$(“div:nth-child(1)”) 选取所有div中，是其父标签的第一个子元素的div元素---元素集合

.......

 

 

jQuery DOM

 

创建节点:

运用传统的javascript方法，创建一个div节点：

var newDiv = document.createElement(‘div’);

 

jQuery中创建一个div节点：

$(‘<div>新建节点</div>’);

 

插入节点:

用javascript方法，插入一个节点：

var Newp = document.createElement(“p”);

document.body.appendChild(Newp);

 

jQuery中插入节点：例：$( a ).append( c );

append  ------a里末尾插c

appendTo  ---c插到a里末尾

prepend ------a里前面插c

prependTo ---c插到a里前面 

 

after-----------a之后插c

insertAfter ----c插到a之后

before --------a之前插c

insertBefore --c插到a之前

 

删除节点:

用javascript方法，删除一个节点：

var b = document.getElementById(“test”);

var c = b.parentNode;

c.removeChild(b);

 

jQuery中删除节点：

$('#test').remove();

remove() 删除节点

empty() 清空节点内容

 

替换节点:

用javascript方法，替换节点：

parent.replaceChild( newNode , oldNode );

 

jQuery中替换节点：

$(“<p>替换 </p>”).replaceAll(“#test1″);

 

复制节点:

运用传统的javascript方法，复制一个节点：

var txt = document.querySelector("p");

var clonep = txt.cloneNode(true);

document.body.appendChild(clonep);

 

jQuery中复制一个节点：

var clone_a = a.clone(true);  深复制包括事件处理函数

$('body').append(clone_a);

 

常用方法:

.children() 获得匹配元素集合中每个元素的所有子元素

.next() 获得匹配元素集合中每个元素的下一个同辈元素

.prev() 获得匹配元素集合中每个元素紧邻的上一个同辈元素

.parent() 获得当前匹配元素集合中每个元素的父元素

.find(child) 获得当前匹配元素集合中每个元素的后代

.siblings() 获得匹配元素集合中所有元素的同辈元素

.eq() 匹配元素集合中指定索引的一个元素

. index() 方法返回指定元素相对于其他指定元素的 index 位置

.end() 将匹配的元素变为前一次的状态

.each() 循环，为每个匹配的元素执行函数

.is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果有元素匹配给定的参数，则返回 true

.addClass() 为每个匹配的元素添加指定的类名

.removeClass() 从匹配的元素中删除全部或者指定的类

.toggleClass() 从匹配的元素中添加或删除一个类

.hasClass() 检查元素是否含有某个特定的类，有则返回true

.attr() 设置或返回被选元素的属性值

.removeAttr() 从每一个匹配的元素中删除一个属性

.html() 设置或取得第一个匹配元素的html内容

.val() 设置或返回匹配元素的值(表单元素)

.css() 设置或返回匹配元素的样式属性

.width() 设置或返回匹配元素的宽度

.height() 设置或返回匹配元素的高度

.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移

.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移

.position() 获取匹配元素相对于定位父元素的偏移

.offset() 获取或设置匹配元素在当前视口的相对偏移

. substr() 从字符串中抽取指定位置开始指定长度的字符

......

 

 

jQuery动画

 

展开／收起:

slideUp(null/speed , easing , fn);   收起

slideDown(null/speed , easing , fn);   展开

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或 毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

 

示例

$('#con').slideDown( 1000 , 'swing' , function (){ alert('123'); } );

$('#con').slideUp({

       duration:1000,

       easing:'easeOutElastic',

       complete:function (){

            alert('再见~');

       }

});

 

反转开关:

toggle(null/speed , easing , fn);

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或 毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

 

1.用于绑定两个或多个事件处理器函数，以响应被选元素轮流的 click 事件

2.如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

 

显示隐藏：

show(null/speed , easing , fn);   显示

hide(null/speed , easing , fn);   隐藏

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或 毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

 

淡入淡出：

fadeIn(null/speed , easing , fn);   淡入

fadeOut(null/speed , easing , fn);   淡出

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或 毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

 

自定义动画：

用法一 : animate({styles} , speed , easing , fn)

参数：可选

{styles}：一组css设置集合

speed：'slow'|'normal'|'fast' 或 毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

animate( )方法执行css属性集的自定义动画

 

用法二 : animate({styles} ,{queue,duration,easing,complete});

参数：

{styles}：一组css设置集合

queue：是否加入动画队列执行 true/false (默认true)

duration：定义动画持续时间

easing：指定动画效果，默认是“swing”，可扩展

complete：回调函数，当动画执行完毕以后执行

 

可操作属性：

不是所有的css属性都可以用Jquery动画（animate函数）来动态改变，下面是JQ可以操作的css属性：

backgroundPosition    borderWidth    borderBottomWidth

borderLeftWidth    borderRightWidth    borderTopWidth

borderSpacing    margin    marginBottom    marginLeft

marginRight    marginTop    outlineWidth    padding

paddingBottom    paddingLeft    paddingRight

paddingTop    height    width    maxHeight    maxWidth

minHeight    maxWidth    font    fontSize    opacity

bottom    left    right    top    letterSpacing    wordSpacing

lineHeight     textIndent     scrollLeft     scrollTop

… …

 

停止动画：

stop()停止当前动画(并不会停止动画队列中剩下的动画)

stop(true)停止所有动画

stop(true,true)停止所有动画,并到达当前动画的终点

$("#go").click(function(){

  $(“.block”).animate({left: ‘200px'}, 5000);

});

$("#stop").click(function(){

  $(".block").stop(); //停止当前动画

});