前端分页功能的实现以及原理（jQuery）(4)_H5之家

$('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name，把数据序列化成字符串；eg：name=yang $('#form').serializeArray(); //会根据input里面的name，把数据序列化成数组；eg：[object] 　　//注意：没有name会获取不到值 //下面两种不是jQuery的方法 JSON.parse() //json字符串转化为json对象 JSON.stringify() //json对象转化为json字符串 });

jQuery的ajax方法：

$.ajax({ url:'/comm/test1.php', type:'POST', //GET async:true, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) console.log('发送前') }, success:function(data,textStatus,jqXHR){ console.log(data) console.log(textStatus) console.log(jqXHR) }, error:function(xhr,textStatus){ console.log('错误') console.log(xhr) console.log(textStatus) }, complete:function(){ console.log('结束') } })

原生的ajax方法：

$('#send').click(function(){ //请求的5个阶段，对应readyState的值 //0: 未初始化，send方法未调用； //1: 正在发送请求，send方法已调用； //2: 请求发送完毕，send方法执行完毕； //3: 正在解析响应内容； //4: 响应内容解析完毕； var data = 'name=yang'; var xhr = new XMLHttpRequest(); //创建一个ajax对象 xhr.onreadystatechange = function(event){ //对ajax对象进行监听 if(xhr.readyState == 4){ //4表示解析完毕 if(xhr.status == 200){ //200为正常返回 console.log(xhr) } } }; xhr.open('POST','url',true); //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //可有可无 xhr.send(data); //发送 });

jQuery实现的简单悬浮层功能完整实例

[8396]

本文实例讲述了jQuery实现的简单悬浮层功能。分享给大家供大家参考，具体如下：

运行效果图如下：

jQuery实现的简单悬浮层功能完整实例

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" language="javascript" > $(function() { var timer, scrollTop, sideDiv = $('#fudong').appendTo('body'); $(window).scroll(function() { timer && clearTimeout(timer); scrollTop = $(this).scrollTop(); timer = setTimeout(function() { sideDiv.animate({ top: scrollTop + 100 + 'px' }, 600); }, 200); }); }); </script> </head> <body > <div> 右侧悬浮层 </div> </body> </html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 全选全不选事件绑定的实现代码

[8392]

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<td colspan="3"> <input type="checkbox">全选 <input type="checkbox">反选 </td> <td colspan="3"> <s:checkboxlist list="resList" listKey="uuid" listValue="name"></s:checkboxlist> </td> $(function(){ //全选 $("#all").click(function(){ //将下面所有组件全部选中 //$("[name=resUuids]") 是多个组件，整体是个对象数组 //$("[name=resUuids]").attr("checked","checked"); //先获取当前组件的状态 //$(this).attr("checked") //将所有组件设置为对应状态 //$("[name=resUuids]").attr("checked",$(this).attr("checked")); //$(this).attr("checked")获取的值究竟是什么 //alert($(this).attr("checked")); //undefined //$("[name=resUuids]").attr("checked","undefined"); //js语法规则，除了false,FALSE,"false","FALSE",0五个值之外的所有值，认定为true //$("[name=resUuids]").attr("checked",false); var flag = $(this).attr("checked"); $("[name=resUuids]").attr("checked",flag == "checked"); }); //反选 $("#reverse").click(function(){ //将所有组件的状态切换成原始状态的反状态 //$("[name=resUuids]").attr("checked",!($("[name=resUuids]").attr("checked")=="checked")); //当选择器选中的组件是多个时，获取组件的任何数据都是对第一个组件进行操作 //alert(!($("[name=resUuids]").attr("checked")=="checked")); //对每个组件进行迭代，让其操作状态为对应组件的原始状态的反状态 $("[name=resUuids]").each(function(){ //使用each操作实现对每个组件的操作 var flag = $(this).attr("checked"); $(this).attr("checked", !(flag =="checked")); }); checkSelect(); }); //绑定组件 $("[name=resUuids]").click(function(){ //将全选的状态设置为基于所有组件的综合状态值 checkSelect(); }); function checkSelect(){ var allFlag = true; $("[name=resUuids]").each(function(){ var flag = $(this).attr("checked") == "checked"; //&:位运算与 &&:逻辑与 allFlag = allFlag && flag; }); $("#all").attr("checked",allFlag); } });

以上所述是小编给大家介绍的jQuery 全选全不选事件绑定的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对梦搏网络网站的支持！

jQuery弹出层插件popShow用法示例

[8386]

本文实例讲述了jQuery弹出层插件popShow用法。分享给大家供大家参考，具体如下：

popShow弹出层

jQuery弹出层插件popShow用法示例

图1.1 弹出层效果

1、引入JS和CSS文件