jq2

jQuery(javaScript库)

一、jquery效果

1、基本效果

用法:   $('#box').show('fast',function(){});

 

l show()：将隐藏的元素显示

l show(speed,[callback]) ：以设定speed的速度将隐藏的元素显示，完毕后执行callback回调函数

l hide()：将显示的元素隐藏

l hide(speed,[callback]) ：以设定speed的速度将隐藏的元素显示，完毕后执行callback回调函数

l toggle() ：如果显示就隐藏  如果隐藏就显示

l toggle(switch) ：如果switch这个参数的值为true表示只显示  如果为false 表示只隐藏

l toggle(speed,[callback]) 以设定speed的速度进行显示或者隐藏

speed这个参数有两种表示方式 ：毫秒数、英文单词

speed:"slow", "normal", "fast"

callback：可缺省   表示当动画执行完成以后再来执行的函数！

 

实例代码：

 

 

2、滑动效果

l slideDown()：将隐藏的元素显示（滑）出来

l slideDown(speed,[callback]) ：以设定speed的速度将隐藏的元素显示出来

l slideUp()：将显示的元素隐藏

l slideUp(speed,[callback]) ：以设定speed的速度将显示的元素隐藏

l slideToggle()：显示或者隐藏

l slideToggle(speed,[callback]) ：以设定speed的速度显示或者隐藏

 

 实例代码：

 

 

3、淡入淡出

l fadeTo(时间,opacity)：当指定的时间实现淡入或者淡出到指定的透明度,透明度在0-1

l fadeIn()：淡入

l fadeOut()：淡出

l fadeToggle()：淡入或者淡出开关

实例代码：

 

 

 

4、自定义动画

l animate(params,[speed],[callback])：在规定的时间内 完成动画的执行！

参数说明：

params：要求是一个JSON对象

speed：动画完成所需要的时间[必须为数值]

callback：完成动画后执行的回调函数

 

实例代码：

 

 

二、文档操作

1、jquery创建节点

原生JavaScript方式：var  div=document.createElement(“div”);   //div是DOM对象

jQuery方式：var div=$(“<div><b>5e35345<b></div>”);  //div是jquery对象

 

 

 

2、内部插入

插入图解：

 

 

标签内部最后面

l $(selector).append(content) ：将content追加到selector内部的最后面

l $(content).appendTo(selector)：将content追加到selector内部的最后面

标签内部最前面

l $(selector).prepend(content) ：将content追加到selector内部的最前面

l $(content).prependTo(selector) ：将content追加到selector内部的最前面

 

实例代码：

 

 

3、外部插入

 

 

标签外部后面

l $(selector).after(content) ：将content插入到selector选择器外部的最后面

l $(content).insertAfter(selector) ：将content插入到selector选择器外部的最后面

标签外部前面

l $(selector).before(content) ：将content插入到selector选择器外部的最前面

l $(content).insertBefore(selector) ：将content插入到selector选择器外部的最前面

 

实例如下：

 

 

4、删除操作

l empty()：将元素里面的内容清空但是保留自身标签。(掏空)

l remove()：自杀操作将当前元素里面的内容与标签同时移除 。

 

实例代码：

 

 

 

5、复制

l clone([true])  谁调用这个方法就会将当前的元素进行克隆一份

参数说明：

true：可缺省的，如果带true这个参数 表示克隆元素的本身的同时还会将该元素身上绑定的事件也会克隆 ，但是如果没有带true这个参数，它只会克隆元素本身不会克隆其事件。

 

实例代码：

 

 

6、替换

l replaceWith(content) ：对元素进行替换操作 

 

实例代码：

 

 

 

7、包裹

l wrap(html) ：对匹配到的每个元素分别使用内容html包裹起来

l wrapAll(html)：对匹配到的所有元素统一使用内容html包裹起来

l wrapInner(html)  对匹配到的每个元素的子元素分别使用内容html包裹起来 

 

  

实例代码：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8、【重点】节点查找（链式编程）

链式编程(方法返回的是对象可以连续调用，即return this)  

形如：对象.方法().方法().方法()   

 

 

常用的用于查找的方法如下：

l eq(index)  ：获取指定下标的元素

l filter(expr) ： 将查找到的元素进行过滤筛选，查找符合筛选条件元素

l not(expr) ：获取不符合某个匹配条件的元素

l next([expr]) ：获取当前元素的下一个兄弟元素

l prev([expr])：获取当前元素的上一个兄弟元素

l parent([expr])：获取当前元素的父元素(亲爹)

l parents([expr])：获取元素所有的祖先元素（祖先）

l siblings([expr])：获取除了当前元素以外的所有兄弟元素

l children([expr])：获取当前元素的子元素

l find([expr]):获取当前元素下满足条件的子元素

l last()：获取最后一个元素

l first()：获取第一个元素

 

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

 

 

实例代码：

这些连贯方法都是方法方法所获取到的对象，涉及到了对象转移

 

 

 

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

注意:

这些链式编程函数,只有明确的对象(一个)才能调用,对象集合不能调用

 

 

 

 

 

三、案例-菜单特效

效果如下：

 

 

html和css样式：

 

 

jq代码：

 

 

效果：

 

 

 

 

 

四、案例-tab选项卡切换

html 结构：

 

 

css样式：

 

 

jq代码：

 

 

效果：

 

 

 

 

 

五、循环对象

each()方法：主要用来循环jquery对象。

语法：

jquery对象.each(function(k,v){

 

});

或者：

$.each(jquery对象或数组,function(k,v){

 

});

 

实例代码：

 

 

 

结果：

 

 

 

六、短信按钮倒计时

 

 

效果：

 

 

注意：jq改不了input的type类型为password修改不了，只能换成原生对象DOM去改。

 

 

 

七、jquery中插件扩展机制

1、介绍

我们去工作中 发现我们需要实现某一个功能，需要用到一个方法  但是jQuery并没有给我们进行封装这个方法 ！

jQuery它给我们预留了一个扩展方法的接口！

 

格式：

$.fn.extend(object)或jQuery.fn.extend(object)

注意：在jQuery中jQuery等价于$符号，他们完全相等。

 

 

语法：

$.fn.extend({

 方法名:function(){ },

方法名:function(){},

......

});

 

 

注意：

在整个jQuery中除了扩展机制里面的方法this是指向的jQuery对象 ，其它的地方都是指向的DOM对象

 

如:$(“#btn”).click(function(){

//this是DOM对象

//$(this)才是 jquery对象

});

 

2、扩展机制完成全选全不选反选功能

原生js实现：

 

 

 

 

jq插件：

我们可以把封装好的插件写在js文件中，使用到的时候引入即可：

 

 

使用的时候直接调用：

 

 

 

特别注意：还可以给jQuery变量本身加方法：

 

 

jquery中存在的一些方法：

 

 

重点复习：

jquery选择器:

选择器：

$("input[type='submit']")

     id和class选择器

节点查找

siblings(),parent(),next,eq()

jquery方法：

   attr() prop()

html() 和val

   插入，克隆

jquery事件：

通过事件名和bind绑定

    on（后面新增的元素同样有事件绑定）

jquery效果：

  hide();show();toggle()

Ajax请求:

 

一、案例-双列表选择

select是可以多选的，给select加属性multiple=”multiple”。

append()或appendTo()有移动的含义，把一个元素移到另一个元素中去。

 

html结构：

 

 

jq代码：

 

 

效果：

 

 

 

 

 

 

 

二、jQuery中的Ajax操作

1、 介绍

在jQuery中发送一个Ajax请求常用的有以下两种方式：

（1）方式一 ： $.ajax( object )

jQuery 底层 AJAX 实现。此方法功能最强大，get和post请求都可以发送，回调函数也最多，如：发送之前、发送失败、发送成功、发送完毕的回调函数都可以设置。

参数说明：

object：json格式的对象，常用的键值有以下几种

键名	说明
type	请求的方式。常用的有get和post，默认为get请求
url	请求的地址。
data	携带的请求参数，格式为请求字符串id=100&name=zs或者json格式
async	是否异步请求，默认为true异步，false同步
dataType	期望服务器返回的数据类型，值有text、json、xml等
cache	是否允许缓存，默认为true缓存，false不缓存
success	成功的回调函数，相当于原生Ajax状态等于4
beforeSend	发送请求之前调用，相当于原生Ajax状态不等于4
complete	请求完毕的回调函数，无论失败或成功都会触发
error	发送失败的回调函数

 

 

 

 

 

（2）方式二：简单易用的高级实现

语法格式：

$.get(url, [data], [callback], [type]) 

$.post(url, [data], [callback], [type])

说明：$.get()只能发送get请求，$.post()只能发送get请求

参数说明：

url：请求的地址

data：请求的参数

callback：请求成功的回调函数

type：期望返回的数据类型,有xml, json, text等

 

 

2、 入门案例-实现加减乘除

使用$ajax实现：

 

 

结果：

 

 

 

使用$.get或者$.post

 

 

后台使用post接收参数：

 

3、案例-免费快递接口调用

快递接口：

http://www.kuaidi100.com/query?type=zhongtong&postid=59130112195

参数说明：

type:快递公司编号

postid:运单号

 

快递公司编码：

 

申通=”shentong” 

EMS=”ems”

顺丰=”shunfeng”

圆通=”yuantong”

中通=”zhongtong”

韵达=”yunda”

天天=”tiantian”

汇通=”huitongkuaidi”

全峰=”quanfengkuaidi”

德邦=”debangwuliu”

宅急送=”zhaijisong”

 

 

注意：因为接口地址是第三方的api接口，本地域名local.com上面的ajax访问跨域了，只能使用php做代理去请求。

 

代码：

 

 

发送ajax请求：

 

 

php做代理请求：

 

 

效果：