JQ总结

• JQ入门

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

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

2、当浏览器解析完document后，执行ready小括号内的函数

3、JQ优点： 轻量级、强大的选择器、出色的DOM操作、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方式、丰富的插件支持、完善的文档、开源

4、 jQuery选择器的优势

简洁的写法、支持CSS1到CSS3选择器、完善的处理机制

5、 jQuery选择器的分类

 基本选择器、层次选择器、过滤选择器

• JQ动画

 1、 toggle开关

toggle(null/speed , easing , fn);

参数：

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

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

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

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

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

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

例子：$('#btn').click(function (){//开关功能

$('#box').stop().toggle('slow');//控制显示或者隐藏

})

1. 显示和隐藏

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

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

参数：

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

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

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

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

通过显示/隐藏元素实现效果

例子：$('#show').click(function (){

$('#box').show({

duration:2000,//设置动画持续时间

easing:'easeOutBack',//设置动画效果

complete:function (){//动画执行完后执行回调函数

// alert('动画执行完后执行这个');

}

});

})

$('#hide').click(function (){

$('#box').hide({

duration:2000,//设置动画持续时间

easing:'easeInBack',//设置动画效果

complete:function (){//动画执行完后执行回调函数

// alert('动画执行完后执行这个');

}

});

1. 淡入和淡出

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

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

参数：

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

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

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

fn：回调函数，当动画执行完毕以后执行    通过不透明度的变化实现淡入和淡出效果

1. 高度变化

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

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

参数：

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

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

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

fn：回调函数，当动画执行完毕以后执行    通过改变元素高度实现展开或收起效果

1. 自定义动画

animate({params} , speed , easing , fn)

参数：

{params}：一组动画设置集合

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

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

fn：回调函数，当动画执行完毕以后执行    自定义动画的函数，设置一组需要动画效果的属性和值

1. 停止动画

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

stop(true)停止所有动画

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

 例子： $("#go").click(function(){

   $(".block").animate({left: '+200px'}, 5000);

});

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

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

});

• JQ-DOM操作  

1. 创建节点 ：$(‘
   ’);
2. 创建一个有文本的节点：$(‘
   My Demo
   ’);
3. jQuery中插入节点：

    var str=$('

lalalla

');//创建带有文本的节点

$('#box').append(str);//在box节点里面末尾插入str节点

$(str).appendTo('#box');//把str节点插入到box节点里面末尾

 

$('#box').prepend(str);//在box节点里面前置一个str节点

$(str).prependTo('#box');//把str节点前置在box节点里面前

 

$('#box').after(str);//在box节点外面后面（同级）插入str节点

$(str).insertAfter('#box');//把str节点插入到box节点外面后面（同级）

 

$('#box').before(str);//在box节点外面 前面（同级）插入str节点

$(str).insertBefore('#box');//把str节点插入到box节点外面前面（同级）

 

$('#box h3').remove();//删除节点(包括标签)

$('#box h3').empty();//清空节点内容(不删除标签)

 

$(str).replaceAll('#box h2');//str节点替换h2节点

$('#box h3').addClass('yeee aaa');//添加类名

1. 删除节点：

    $('h3').remove();//删除节点h3，包括标签

$('h3').empty();//清空节点h3，只删除内容，标签保留

5、替换节点：

$(“

替换 test1！

”).replaceAll(“#test1″);

6、复制节点：

    var str2=str.clone();//复制节点

$('#box').append(str2);      JQ复制（true）复制脚本，可以执行，js不可以

7、

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

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

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

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

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

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

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

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

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

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

.toggleClass()从匹配的元素中添加或删除一个类（有-删除，无-添加）

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

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

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

.html()设置或取得第一个匹配元素的html内容 -相当于innerHTML

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

.css() 设置或返回匹配元素的样式属性-多个值小括号里加{}，每个值之间，分开，属性值用‘’；一个值直接（‘’，‘’）；

.width() 设置或返回匹配元素的宽度--得到的值不带单位

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

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

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

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

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

 

• 事件机制

1. 事件绑定及移除

  1、最常用的：on()  在选择元素上绑定一个或多个事件的事件处理函数

语法：on(events,[selector],[data],fn)

$("p").on("click", function(){

   alert( $(this).text() );

});

$("ul").on( "click" , "li",  function(){

     alert( $(this).html() );

});

JQ1.7开始引入了全新事件绑定机制

off( type , fn )--on()的反向操作，移除用on()绑定的事件处理程序

 2、live()  把事件绑定到当前及以后添加的元素上面

语法：live( type , fn )

$("p").live("click", function(){

   alert( $(this).text() );

});

JQ1.4之前用得比较多，现在已被放到不推荐使用列表中

die( type , fn )--live()的反向操作，删除先前用live()绑定的事件

3、delegate()  把事件绑定到当前及以后添加的元素上面

语法：delegate(selector,[type],[data],fn)

$("ul").delegate("li", "click", function(){

     alert( $(this).html() );

});

JQ1.4之后加入的，和live有点相似

undelegate( type , fn )--删除由 delegate() 方法添加的一个或多个事件处理程序

4、bind()  为每个匹配的元素绑定一个或多个事件处理函数（当前元素，不包括新添加的）

语法：bind( type , fn )

$("p").bind("click", function(){

   alert( $(this).text() );

});

$("button").bind({

   mouseover:function(){$("body").css("background","red");},  

   mouseout:function(){$("body").css("background","#FFF");}  

});

unbind( type , fn )--bind()的反向操作，删除元素的一个或多个事件

 

5、从jQuery1.7开始，jQuery引入了全新的事件绑定机制，

on()和off()两个函数统一处理事件绑定。

jQuery推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。

尤其是不要再用live()了，因为它已经放入不推荐使用列表中，随时会被弃用。

6、one()  为匹配的元素绑定一次性的事件处理函数

语法：one(type,[data],fn)

$("p").one("click", function(){

   alert( $(this).html() );

});

当使用 one() 方法时，每个元素只能运行一次事件处理器函数，执行完之后事件就会被移除

 

1. Jq合成事件----hover( )

hover( )方法

语法：hover(fn1,fn2);    鼠标进入时执行fn1，鼠标离开时执行fn2

$("td").hover(

   function () {

      $(this).addClass("hover");

   },

   function () {

      $(this).removeClass("hover");

   }

);

3、Jq合成事件----toggle( )

toggle( )方法-------被1.9以上版本弃用

语法：toggle(fn1,fn2,fn3,fn4...);   

匹配元素的轮流的click事件或

$("li").toggle(

  function () {

    $(this).addClass("show");

  },

  function () {

    $(this).removeClass("show");

  }

);

4、事件对象

事件对象存储了和事件相关的信息

原生JS事件对象

oDiv.οnclick=function (ev){

      var oEvent=ev||event;

      console.log(oEvent);//oEvent即为事件对象

}

JQ处理了其中的兼容问题，可以直接使用

$('body').click(function(e){

      console.log(e);//e即为事件对象

})

1. 常用事件其他属性

阻止冒泡：e.stopPropagation()

阻止默认行为：e.preventDefault();

事件类型：e.type

触发事件的元素：e.target

相对文档的坐标：e.clientX/Y   e.pageX/Y

鼠标事件中离开或者进入的DOM元素：e.relatedTarget

事件发生时的时间戳：e.timeStamp （返回总毫秒数）

指示按了哪个键或按钮：e.which

1. 转换

在实际工作中，我们可能会有这样的需求

使用JQ获取DOM对象，然后在JS对象使用

或者JS获取的DOM对象，然后在JQ对象使用

例子 var oDiv=document.getElementById("div1");

$(oDiv).css("background","red");

$("#div1").get(0).style.background="red";

get(index)方法   取得其中一个匹配的元素   参数：index 表示取得第几个匹配的元素

 

• AJAx 阿贾克斯

1、

参数名称	类型	说明
type	string	"get"或"post"
url	string	发送请求的URL
timeout	number	超时时间（毫秒）
async	Boolean	默认: true , 为异步请求
data	string或object	要发送给服务器的数据。示例： "name=abc&age=19"

 

success	function	请求成功的回调函数
error	function	请求失败的回调函数
complete	function	请求完成后的回调函数，无论成功与失败
cache	Boolean	默认: true , 为false不读取缓存
dataType	string	服务器返回的数据类型。特殊的格式JQ会进行预解析和兼容性修复。可选择的值： "xml" , "html" , "script" , "json" , "text"等

1. 序列化

$(form).serialize()  将一个form表单内的所有数据转换为可以发送给服务器的字符串

通过序列化表单值，创建URL编码文本字符串

例子 url:"act.php?"+$("form").serialize(),

"act.php?name=小明&age=19&msg=a"

1. $.load()

$(parent).load( url [, data] [, callback]); 

请求一个HTML页面，并替换为parent的innerHTML

url : 请求HTML页面的URL

data ： 可选，发送至服务器的数据

callback ： 可选，请求完成时的回调，无论成功失败

1. $.get()

$.get( url [, data] [, callback] [, dataType]);     get方式请求指定的url。

url : 请求的URL

data ： 可选，发送至服务器的数据

callback ： 可选，请求完成时的回调函数

dataType ： 可选，参照$.ajax参数中的dataType

例子 $.get("act.php",{user:"cainiao",pass:"123"},function (data){

var str=eval('('+data+')');

alert(str.msg);

});

 

1. $.post()

$.post与$.get相同， 唯一的不同就是请求是以post方式进行。

例子 $.post("act.php",{user:"cainiao",pass:"123"},function (data){

var str=eval('('+data+')');

alert(str.msg);

});

1. $.getScript()

$.getScript(url [, callback]);   加载一段JS并执行

例子  $.getScript("test.js",function (data){

  alert(data);

  });

 

1. $.getJSON()

$.getJSON(url [, callback]);    加载一段JSON并解析

 

六、JQ-extend

1、$符冲突问题

在jQuery中，$符号是jQuery的别名   所有使用$的地方都可以使用jQuery来替换   例如：

   $('#div').click(....);  等同于  jQuery('#div').click(....);

当我们引入多个js库后，在另一个js库中也定义了$符号的话，我们使用$符号时就会发生冲突。

jquery最后引入   此时，$指向jquery中定义的$符号，运行最后

prototype最后引入   此时，$指向prototype中定义的$符号

 

1. 解决冲突

  1、jQuery中的noConflict( )方法    该方法的作用就是让jQuery放弃对$的所有权

   $.noConflict( );   当代码中调用该方法后，不可以使用$来调用jQuery方法

   $('#div').click(....);   无效

   jQuery('#div').click(....);   有效

  2、 自定义jQuery的别名    var jq=$.noConflict();   jq('#div').click(....);    有效

   3、如果jQuery代码块习惯使用$简写，并且不愿意改变这种习惯，

可以把$符号作为变量传递给ready方法，函数内可以正常使用$符

jQuery(function ($){

$('h1').click(function (){

alert($(this).html())

});

});

$('#div').click(....);   函数外无效

jQuery('#div').click(....);   函数外有效

 

1. $.extend和$.fn.extend的区别

$.extend( ) 方法

   把jQuery看成一个类，$.extend( )是扩展的jQuery这个类

   这个方法，主要是用来扩展全局函数，例如$.ajax()这种

 $.fn.extend( ) 方法

   源码如下:

   jQuery.fn = jQuery.prototype = {

constructor: jQuery,

......

   jQuery.fn=jQuery.prototype   就是原型

   $.fn.extend扩展的是jQuery对象（原型）的方法