现在的位置: 首页 > 综合 > 正文

1.jQuery实例 2.jQuery load get post 数据提交方式 3.jquery ajax 应用 4.jquery小案例

2013年01月06日 ⁄ 综合 ⁄ 共 3361字 ⁄ 字号 评论关闭

 

1.jQuery实例

·select框子

获取idcheckAll添加点击事件,时间内改变所有:checkbox的属性checkedtrue

获取idcheckNo添加点击事件,事件内改变所有:checkbox的属性checkedfalse

获取idcheckAga添加点击事件,事件内利用each()事件遍历:checkboxname=items】的条目,改变checked属性为!(this)》attr(“checked”);

·精简显示列表

首先控制显示索引大于2并且除去最后一个条目的li标签隐藏;

给“显示全部品牌”<span>添加toggle事件,第一个函数让所有li.show()显示,并且改变spantext(“精简显示”);

第二个函数重复隐藏大于2并且除去最后一个条目的所有li,并且给span标签重新text(“显示全部品牌”);

·选项卡

首先给li标签添加mouseenter鼠标移入事件,获取this并且添加属性(被选中的类),同时siblingsli.removeClass("被选中的类名"),从而控制只让被选中的li变色

第二步控制内容显示框的所有子元素children().eq($(li).index(this)).fadeIn(),并且让所有的siblings().hide().

·表单验证

获取所有类名为requireinput标签添加一个strong标签内加一颗星星!

第二步当所选元素失去焦点是添加一个blur事件;

第三在blur事件函数内判断当$this.is("#username")时进行用户名验证;当$(this).is("#email")时进行email验证;

在用户名验证时,判断this.value.length<6时 给选中元素的父元素添加一个错误提示文字的span标签,反之亦然;

在邮件验证时首先根据创建span标签时所创建的class属性清空span标签,然后创建一个reg验证变量,调用regtest()方法验证选中的$email.val().当验证值为false的时候创建错误提示span标签并添加到当前选中元素的父元素!反之亦然!

 2.jQuery load get post 数据提交方式

·数据传输

·load

获取一块文本让其用load方法加载$("#resText").load("load.html .para");

·get

事件触发$.get()方法传递数据,$.get(".get().php",{name:$("#username").val(),content:$("#content").val()},function(data){

$("#resText").html(data);

});

php服务器端处理为 echo一个接收过$_REQUESThtml格式返回值。

·json

在客户端触发$.get()或者$.post()传递数据,包含参数有 发送地址,发送json格式的数据data,成功回调后的执行函数,参数为datadata调用eval(“(”+data+“)”)将接收过来的文本数据转化成json对象,并进行调用其keyvaluehtml进行赋值。

php服务器端处理,header(Content-Type:text/html;charset=utf-8)来声明内容格式为文本html;echo一个json字符串格式的的返回值供前台赋值显示。

·xml

在客户端发送data到相应服务器地址,执行回调函数 实例化参数data$(data),可运用jQuery对象的操作方法去操作返回值;

在服务器端口声明header("Content-Type:text/xml;charset=utf-8"),echo 一个xml字符串格式的返回值。

·ajax

在客户端开启$.ajax()数据发送,json格式参数集合内含有 url type data async cache dataType success:function(data , textStatus){} error:function(xhr,errMsg){}

在服务器端,判断并echo一个返回值!

 3.jquery ajax 应用

·mvc $.ajax()分页

第一步:else if(strpos($class_name,'Helper')!==false){

require ROOT_PATH."helpers/".$class_name.".class.php";

}

第二步:获取¥page 设置¥pagesize 求出¥offset 调用 new pageModel(‘localhost’‘root’‘root’‘page’)的 getPageList传递参数 ¥offset和¥pagesize

第三步:在模型控制端写出条目的sql语句,调用baseModelgetAll函数将返回值赋值给数组的一个索引,在调用getone函数执行求总数的sql语句,将数值返回给数组的另一个索引,并renturn 这个数组;

第四步:在控制器端,接收列表和总数并赋值给视图端;

第五步:调用new pageHelper();调用show函数传递¥totalpagesize page 

第六步:在helper端,求出总页数¥pages, 写出¥info 显示总页数 总条数 当前页数 设置第一页 前一页 下一页 末页的值 调用 sprintf%s)方法写出每一项的html格式字符串,在写select_html时应当注意 传递一个onchange事件 函数为 goPage 并且传递参数 this.value ,for循环 当页数等于i时 让其默认selected选项 ;接下来就是写script语句  开头结尾用 <<<SCR SCR(顶头写);脚本文件加载jqery.js,并且 定义 函数 goPage 传递参数page 在函数内部 开启$.ajax()传递到处理界面 ,定义传递类型,是否异步,是否缓存,传递pagedata,定义dataType  成功返回调用函数,给body标签的html赋值data 如果错误,则返回错误信息

 4.jquery小案例

·jQuery小案例分析

·nav.js

获取navigation 下 ul 下 li 加载hover()事件,鼠标移入函数为当前对象的所有ul子元素,停止所有正在该元素上正在运行的动画,之后加载slideDown事件;鼠标移出函数内容为 获取当前对象的所有ul子元素,停止所有正在该元素上正在运行的动画,之后加载slideUp事件。

·slide.js

获取idp1的元素,加载toggle事件,第一次单击函数为获取当前元素的上一个兄弟元素,执行slideUp事件,在slideUp时间内,改变imgsrc属性,使其变作相反的图片;第二次单击函数内容为获取当前对象的前一个兄弟元素,添加slideDown事件,回调函数为获取#p1下的img标签元素改变其src属性为相反图片地址。

·scroll.js

创建interId 获取类别为scrollNews的元素对象,给其添加hover事件,第一个鼠标移入函数内容为clearIntervalinterId)清空,时间间距函数;第二个鼠标移出函数内容为开启并设置setIntervalfunction(){scrollNews(¥this})时间间距函数控制其在一定时间内重复执行scrollNews函数;

scrollNews函数接收参数obj,获取¥ulobj下所有的ul子元素,定义lineHeight为¥ul下第一个li子元素的高度,让¥ul停止所有正在进行的动画,并且加载一个动画annimate设置参数是让其marginTop的值减去lineHeight,,回调函数为 ¥ul寻找第一个li元素,改变其marginTop0,并追加到¥ul的尾部。

·tree.js

结合css样式获取m-expanded span 元素集合,加载单击事件,函数内容为获取当前元素的ul兄弟元素的父元素,加载toggleClass(“m-collapased”);

【上篇】
【下篇】

抱歉!评论已关闭.