1.jQuery实例
·select框子
获取id为checkAll添加点击事件,时间内改变所有:checkbox的属性checked为true;
获取id为checkNo添加点击事件,事件内改变所有:checkbox的属性checked为false;
获取id为checkAga添加点击事件,事件内利用each()事件遍历:checkbox【name=items】的条目,改变checked属性为!(this)》attr(“checked”);
·精简显示列表
首先控制显示索引大于2并且除去最后一个条目的li标签隐藏;
给“显示全部品牌”<span>添加toggle事件,第一个函数让所有li.show()显示,并且改变span的text(“精简显示”);
第二个函数重复隐藏大于2并且除去最后一个条目的所有li,并且给span标签重新text(“显示全部品牌”);
·选项卡
首先给li标签添加mouseenter鼠标移入事件,获取this并且添加属性(被选中的类),同时siblings(li).removeClass("被选中的类名"),从而控制只让被选中的li变色
第二步控制内容显示框的所有子元素children().eq($(li).index(this)).fadeIn(),并且让所有的siblings().hide().
·表单验证
获取所有类名为require的input标签添加一个strong标签内加一颗星星!
第二步当所选元素失去焦点是添加一个blur事件;
第三在blur事件函数内判断当$(this).is("#username")时进行用户名验证;当$(this).is("#email")时进行email验证;
在用户名验证时,判断this.value.length<6时 给选中元素的父元素添加一个错误提示文字的span标签,反之亦然;
在邮件验证时首先根据创建span标签时所创建的class属性清空span标签,然后创建一个reg验证变量,调用reg的test()方法验证选中的$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一个接收过$_REQUEST的html格式返回值。
·json
在客户端触发$.get()或者$.post()传递数据,包含参数有 发送地址,发送json格式的数据data,成功回调后的执行函数,参数为data,data调用eval(“(”+data+“)”)将接收过来的文本数据转化成json对象,并进行调用其key的value对html进行赋值。
在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语句,调用baseModel的getAll函数将返回值赋值给数组的一个索引,在调用getone函数执行求总数的sql语句,将数值返回给数组的另一个索引,并renturn 这个数组;
第四步:在控制器端,接收列表和总数并赋值给视图端;
第五步:调用new pageHelper();调用show函数传递¥total¥pagesize ¥page
第六步:在helper端,求出总页数¥pages, 写出¥info 显示总页数 总条数 当前页数 设置第一页 前一页 下一页 末页的值 调用 sprintf(%s)方法写出每一项的html格式字符串,在写select_html时应当注意 传递一个onchange事件 函数为 goPage 并且传递参数 this.value ,for循环 当页数等于i时 让其默认selected选项 ;接下来就是写script语句 开头结尾用 <<<SCR SCR(顶头写);脚本文件加载jqery.js,并且 定义 函数 goPage 传递参数page 在函数内部 开启$.ajax()传递到处理界面 ,定义传递类型,是否异步,是否缓存,传递page的data,定义dataType 成功返回调用函数,给body标签的html赋值data 如果错误,则返回错误信息
4.jquery小案例
·jQuery小案例分析
·nav.js
获取navigation 下 ul 下 li 加载hover()事件,鼠标移入函数为当前对象的所有ul子元素,停止所有正在该元素上正在运行的动画,之后加载slideDown事件;鼠标移出函数内容为 获取当前对象的所有ul子元素,停止所有正在该元素上正在运行的动画,之后加载slideUp事件。
·slide.js
获取id为p1的元素,加载toggle事件,第一次单击函数为获取当前元素的上一个兄弟元素,执行slideUp事件,在slideUp时间内,改变img的src属性,使其变作相反的图片;第二次单击函数内容为获取当前对象的前一个兄弟元素,添加slideDown事件,回调函数为获取#p1下的img标签元素改变其src属性为相反图片地址。
·scroll.js
创建interId 获取类别为scrollNews的元素对象,给其添加hover事件,第一个鼠标移入函数内容为clearInterval(interId)清空,时间间距函数;第二个鼠标移出函数内容为开启并设置setInterval(function(){scrollNews(¥this)})时间间距函数控制其在一定时间内重复执行scrollNews函数;
scrollNews函数接收参数obj,获取¥ul为obj下所有的ul子元素,定义lineHeight为¥ul下第一个li子元素的高度,让¥ul停止所有正在进行的动画,并且加载一个动画annimate设置参数是让其marginTop的值减去lineHeight,,回调函数为 ¥ul寻找第一个li元素,改变其marginTop为0,并追加到¥ul的尾部。
·tree.js
结合css样式获取m-expanded span 元素集合,加载单击事件,函数内容为获取当前元素的ul兄弟元素的父元素,加载toggleClass(“m-collapased”);