JS遍历2层DOM装入数组转JSON【实例】
2015/06/12 15:42 | by 刘新修 ]
JS遍历2层DOM装入数组转JSON【实例】
- <!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>无标题文档</title>
- <style>
- *{ margin:0; padding:0;}
- body{ color:#333; font-family:'Microsoft Yahei'; font-size:16px;}
- ul,li{ list-style:none; line-height:30px;}
- .conbox{ padding:10px;}
- .conbox .selected{ color:#CC0033}
- .conbox .lis span{ padding:0 5px;}
- </style>
- </head>
- <body arrData="111,222,333,444,555,666">
- <div class="conbox">
- <ul class="lisbox">
- <li data-qId="11" n="aaa" class="lis selected"><span class="on">111c</span><span class="on">222c</span><span class="on">333c</span></li>
- <li data-qId="22" n="bbb" class="lis">bbb</li>
- <li data-qId="33" n="ccc" class="lis selected"><span class="on">111a</span><span class="on">222a</span><span class="on">333a</span></li>
- <li data-qId="44" n="ddd" class="lis">ddd</li>
- <li data-qId="55" n="eee" class="lis selected"><span class="on">111b</span><span class="on">222b</span><span class="on">333b</span></li>
- <li data-qId="66" n="fff" class="lis">fff</li>
- </ul>
- </div>
- <div id="submitBtn" style=" width:100%; height:50px; line-height:50px; text-align:center; color:#fff; background:#CC0000">点击事件</div>
- </body>
- <script type="text/javascript" src="http://code.liuxinxiu.com/lib/zepto/zepto-1.1.6.js"></script>
- <script type="text/javascript">
- $("#submitBtn").on("click",function(){
- /********* 声明变量获取节点 ***************/
- var qList=$(".lisbox li.selected"),qLen=qList.length,arr=[];
- /********* 循环第一层问题 ***********/
- for(var i=0;i<qLen;i++){
- /**** var $anList=$qList.eq(i).find("[name=an" + i + "]:checked"),subArr=[]; ****/
- var anList=qList.eq(i).find(".on"),subArr=[];
- var qid=qList.eq(i).attr("data-qId");
- /***** 循环第二层答案 **********/
- for(var key=0;key<anList.length;key++){
- subArr.push(anList.eq(key).text());
- }
- /***** 添加到整体数组 ************/
- arr.push({Question:qid,Answer:subArr});
- }
- /***** 转化成JSON结构字符串 *******/
- var subArrst=JSON.stringify(subArr);
- var jsondata=JSON.stringify(arr);
- /***** 使用replace替换"号为空、可全部 ******/
- var _subArrst=subArrst.replace(/"/g,"");
- var _datalist=jsondata.replace(/"/g,"");
- var _dataJson={guId:111222,eventId:11,plat:5,datalist:subArrst};
- alert(_datalist)
- });
- </script>
- </html>
如何成为一名优秀的前端工程师 (share)
2015/03/25 09:28 | by 刘新修 ]
一、技术的必须的
作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通，类似我这样对前端知识一知半解的，一遇到问题就停下工作就四处搜索解决方案的，首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下（包括搜索引擎），能够完成大多数任务。
以下知识点是作为一个前端工程师必须了解和熟悉的：
- DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
- DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
- 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
- XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
- 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
- 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
- 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
- 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
- HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
- JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识，也还需学会至少一门后端编程语言，让你自己学会如何与后端进行更好的交互。
很多前端工程师对一些库非常的熟悉，jQuery，Bootstrap等，但是对于库的熟悉并不能提现你的优秀，真正优秀的是那些理解库背后的机制，特别是能够徒手写出一个自己的库的人。
真正合格的前端工程师是能实现具体的功能要求，而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。
二、沟通很重要
优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关。在任何情况下，前端工程师至少都要满足下列四类客户的需求。
- 产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求，以及怎样通过他们设计的模式赚到钱（但愿如此）。一般来说，这些人追求的是丰富的功能。
- UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。
- 项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
- 最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道，但他们的反馈意见至关重要；没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
不要在没有作出评估之前就随便接受某项任务。你必须始终记住，一定先搞清楚别人到底想让你干什么，不能简单地接受“这个功能有问题”之类的大概其的说法。而且，你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理，问一问这个按钮有什么用处，然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师，这种沟通至关重要。
那么，前端工程师应该最关注哪些人的意见呢？答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期，然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上，因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能，必须删繁就简，你怎么跟产品经理解释？再比如，假设某个设计如果不改回原方案可能会给应用程序造成负面影响，你怎么才能说服UI设计师？作为前端工程师，你必须了解每一类人的想法从何而来，必须能拿出所有各方都能接受的解决方案。从某种意义上说，优秀的前端工程师就像是一位大使，需要时刻抱着外交官的心态来应对每一天的工作。
专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。
三、提升无止境
优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
四、前端开发知识架构
- 前端工程师
- 浏览器
- 编程语言
- 切页面
- 开发工具
- 代码质量
- 前端库/框架
- 前端标准/规范
- HTTP1.1
- ECMAScript3/5
- W3C/DOM/BOM/XHTML/XML/JSON/JSONP
- CommonJS/AMD
- HTML5/CSS3
- 性能
- 编程知识储备
- 数据结构
- OOP/AOP
- 原型链/作用域链
- 闭包
- 函数式编程
- 设计模式
- Javascript Tips
- 部署流程
- 代码组织
- 类库模块化
- CommonJS/AMD
- YUI3模块
- 业务逻辑模块化
- 文件加载
- 类库模块化
- 安全
- 移动Web
- HTML5/CSS3
- 响应式设计
- Zeptojs/iScroll
- V5/Sencha Touch
- PhoneGap
- jQuery Mobile
- JavaScript生态
- MongoDB/CouchDB
- 前沿技术社区/会议
- D2/WebRebuild
- NodeParty/W3CTech/HTML5梦工厂
- JSConf/沪JS(JSConf.cn)
- QCon/Velocity/SDCC
- JSConf/NodeConf
- YDN/YUIConf
- 计算机知识储备
- 编译原理
- 计算机网络
- 操作系统
- 算法原理
- 软件工程/软件测试原理
- 软技能
- 知识管理/总结分享
- 沟通技巧/团队协作
- 需求管理/PM
- 交互设计/可用性/可访问性知识
- 可视化
- 后端工程师
- 编程语言
- C/C++/Java/PHP/Ruby/Python/…
- 数据库
- SQL
- MySQL/MongoDB/Oracle
- 操作系统
- Unix/Linux/OS X/Windows
- 数据结构
- 编程语言
js正则表达式/replace替换变量方法
2014/11/20 16:09 | by 刘新修 ]
1、javascript 正则对象替换创建 和用法： /pattern/flags 先简单案例学习认识下replace能干什么
正则表达式构造函数： new RegExp("pattern"[,"flags"]);
正则表达式替换变量函数：stringObj.replace(RegExp,replace Text);
参数说明：
pattern -- 一个正则表达式文本
flags -- 如果存在，将是以下值：
g: 全局匹配
i: 忽略大小写
gi: 以上组合
//下面的例子用来获取url的两个参数，并返回urlRewrite之前的真实Url
var reg=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var url="http://www.qidian.com/BookReader/1017141,20361055.aspx";
//方式一,最简单常用的方式
var rep=url.replace(reg,"$1ShowBook.aspx?bookId=$2&chapterId=$3");
alert(rep);
//方式二 ,采用固定参数的回调函数
var rep2=url.replace(reg,function(m,p1,p2,p3){return p1+"ShowBook.aspx?bookId="+p3+"&chapterId="+p3});
alert(rep2);
//方式三，采用非固定参数的回调函数
var rep3=url.replace(reg,function(){var args=arguments; return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];});
alert(rep3);
//方法四
//方式四和方法三很类似, 除了返回替换后的字符串外，还可以单独获取参数
var bookId;
var chapterId;
function capText()
{
var args=arguments;
bookId=args[2];
chapterId=args[3];
return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];
}
var rep4=url.replace(reg,capText);
alert(rep4);
alert(bookId);
alert(chapterId);
//使用test方法获取分组
var reg3=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
reg3.test("http://www.qidian.com/BookReader/1017141,20361055.aspx");
//获取三个分组
alert(RegExp.$1);
alert(RegExp.$2);
alert(RegExp.$3);
2、 学习最常用的 test exec match search replace split 6个方法
1） test 检查指定的字符串是否存在
var data = “123123″;
var reCat = /123/gi;
alert(reCat.test(data)); //true
//检查字符是否存在 g 继续往下走 i 不区分大小写
2） exec 返回查询值
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/i;
alert(reCat.exec(data)); //Cat
3）match 得到查询数组
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/gi;
var arrMactches = data.match(reCat)
for (var i=0;i < arrMactches.length ; i++)
{
alert(arrMactches[i]); //Cat cat
}
4） search 返回搜索位置 类似于indexof
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/gi;
alert(data.search(reCat)); //23
5） replace 替换字符 利用正则替换
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /cat/gi;
alert(data.replace(reCat,”libinqq”));
6）split 利用正则分割数组
var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
var reCat = /\,/;
var arrdata = data.split(reCat);
for (var i = 0; i < arrdata.length; i++)
{
alert(arrdata[i]);
}
3、常用表达式收集：
"^\\d+$" //非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$" //正整数
"^((-\\d+)|(0+))$" //非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$" //负整数
"^-?\\d+$" //整数
"^\\d+(\\.\\d+)?$" //非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"
//正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$" //非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"
//负浮点数
"^(-?\\d+)(\\.\\d+)?$" //浮点数
"^[A-Za-z]+$" //由26个英文字母组成的字符串
"^[A-Z]+$" //由26个英文字母的大写组成的字符串
"^[a-z]+$" //由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$" //由数字和26个英文字母组成的字符串
"^\\w+$" //由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$" //email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$" //url
"^[A-Za-z0-9_]*$"。
============================================正则表达式基础知识==============================================
^ 匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a"
$ 匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A"
* 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次，/ba+/将匹配ba,baa,baaa
? 匹配前面元字符0次或1次，/ba?/将匹配b,ba
(x) 匹配x保存x在名为$1...$9的变量中
x|y 匹配x或y
{n} 精确匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)
[^xyz] 不匹配这个集合中的任何一个字符
[\b] 匹配一个退格符
\b 匹配一个单词的边界
\B 匹配一个单词的非边界
\cX 这儿，X是一个控制符，/\cM/匹配Ctrl-M
\d 匹配一个字数字符，/\d/ = /[0-9]/
\D 匹配一个非字数字符，/\D/ = /[^0-9]/
\n 匹配一个换行符
\r 匹配一个回车符
\s 匹配一个空白字符，包括\n,\r,\f,\t,\v等
\S 匹配一个非空白字符，等于/[^\n\f\r\t\v]/
\t 匹配一个制表符
\v 匹配一个重直制表符
\w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9]
\W 匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。
JSP获取服务器时间+JS截取匹配
2014/11/20 13:02 | by 刘新修 ]
- <%
- java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy-MM-dd_HH:mm:ss");
- java.util.Date currentTime = new java.util.Date();//得到当前系统时间
- String DateTime = formatter.format(currentTime); //将日期时间格式化
- %>
- ############################################ 我是华丽分割线 ########################################
- <div class="yy_header" sex="<c:if test="${USER.sex==1}">mm</c:if><c:if test="${USER.sex==0}">gg</c:if>" guid="${GUID}" taohua="<c:if test="${USER.level==5 or USER.monthUser}"><fmt:formatDate value="${muDate}" type="both" pattern="yyyy-MM-dd"/></c:if><c:if test="${USER.level!=5 and not USER.monthUser}">false</c:if>" datetime="<%=DateTime%>">
- <!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>无标题文档</title>
- <script type="text/javascript" src="http://static.3snews.net/public/js/jquery-1.5.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- var datetime=$(".yy_header").attr("datetime");
- var taohuavip=$(".yy_header").attr("taohuavip");
- var regdatetime=$(".yy_header").attr("regdatetime");
- var datetimedatetimeNN=datetime.replace(/\-/g,"").replace(/\:/g,"");
- var taohuaviptaohuavipNN=taohuavip.replace(/\-/g,"").replace(/\:/g,"");
- var regdatetimeregdatetimeNN=regdatetime.replace(/\-/g,"").replace(/\:/g,"");
- //匹配服务器时间
- var snowdate=datetimeNN.split(" ")[0];
- var snowtime=datetimeNN.split(" ")[1];
- var snowdatesnowdatetime=snowdate+snowtime;
- //匹配桃花VIP时间
- var taohuadate=taohuavipNN.split(" ")[0];
- var taohuatime=taohuavipNN.split(" ")[1];
- var taohuadatetaohuadatetime=taohuadate+taohuatime;
- //匹配用户注册时间
- var regdate=regdatetimeNN.split(" ")[0];
- var regtime=regdatetimeNN.split(" ")[1];
- var regdateregdatetime=regdate+regtime;
- alert(snowdatetime)
- alert(taohuadatetime)
- alert(regdatetime)
- //alert(Thuatime.replace(" ","").replace("-",""));
- //alert(Thuatime.replace(/\ /g,"").replace(/\-/g,"").replace(/\:/g,""))
- //删除第二次出现的test
- var str="testORtest"
- var h=str.replace(/test$/,"hello")
- //alert(h)
- })
- </script>
- </head>
- <body>
- <div class="yy_header" sex="gg" guid="215416540" datetime="2014-11-20 12:52:12" taohuavip="2016-12-01 00:00:00" regdatetime="2013-01-01 15:50"></div>
- </body>
- </html>
JS 事件 DOM2 的进化
2014/09/25 18:31 | by 刘新修 ]
DOM2 的进化:
DOM 0 Event | DOM 2 Event |
onblur() | blur |
onfocus() | focus |
onchange() | change |
onmouseover() | mouseover |
onmouseout() | mouseout |
onmousemove() | mousemove |
onmousedown() | mousedown |
onmouseup() | mouseup |
onclick() | click |
ondblclick() | dblclick |
onkeydown() | keydown |
onkeyup() | keyup |
onkeypress() | keypress |
onsubmit() | submit |
onload() | load |
onunload() | unload |
1. 利用JQuery中如何判断元素中是否有文本
- <script type="text/javascript">
- $(function(){
- $("body").each(function(){
- if($(this).find("h1").text().trim()==""){
- $(this).css("background","blue");
- }else{
- $(this).css("background","red");
- }
- });
- });
- </script>
注：//trim()方法是去空格，$.trim()函数删除提供字符串的所有换行符,空格（包括非中断空格
2. 判断ul标签下是否有li元素
- var jqObj = $(this);
- if(!jqObj.has('li').length){
- jqObj.hide();
- }
3. 遍历/判断子节点（带某些参数子节点）的个数，如果有少于1的给出提示.
- $("div[id^=div]").each(function(){
- //alert($(this).find(".subclass").children('ul').size());
- var lili=$(this).find(".subclass").children('ul').size();
- //alert(lili)
- if(lili<1){
- alert("ddd")
- }
- });
- <div id="div1" class="topclass"><ul><li></li></ul><div class="subclass"><ul><li></li></ul><ul><li></li></ul></div></div>
- <div id="div2" class="topclass"><ul><li></li></ul><div class="subclass"><ul><li></li></ul></div></div>
YY项目中的例子：
- //限制每提最少选择一个答案
- var stop=true;
- $(".lisbox").each(function () {
- //alert($(this).find(".subclass").children('ul').size());
- var lili = $(this).find("input:checked").length;
- //alert(lili)
- if (lili < 1) {
- stop=false;
- }
- });
- if(!stop){ alert("每个调查最少选择一个答案哦～");return false; }
- $.ajax({ ... })
4. 检查某个元素是不是再另外一个元素中？
- <ul><li></li></ul>
- <script>
- $("ul").append("<li>" + ($("ul").has("li").length ? "yes__" : "no_") + "</li>");
- $("ul").has("li").addClass("full");
- </script>
5. 遍历保存所有Input内地值
- <script>
- $("p").append( $("input").map(function(){
- return $(this).val();
- }).get().join(", ") );
- </script>
- ====================================================
- Values: John, password, http://qq.com/
6.邮件订阅提交
- <script type="text/javascript">
- function subscribe(){
- $.post('/ebapi/subscribe.php', {"ispub":1, "email":$("input[name=email]").val()}, function(jsondata){
- if (jsondata.code == 1){
- $('.bu_success').css("display", "block");
- $('.bu_error').css("display", "none");
- $('.bu_success').html('订阅成功');
- }else{
- $('.bu_success').css("display", "none");
- $('.bu_error').css("display", "block");
- if (jsondata.code == 2)
- $('.bu_error').html('您已经订阅了，不需要重复订阅');
- else if (jsondata.code == -1)
- $('.bu_error').html('邮箱格式错误，请重新输入');
- else if (jsondata.code == 0)
- $('.bu_error').html('订阅失败');
- }
- }, 'json');
- }
- $('input[name="email"]').bind('keypress', function(event){
- if (event.keyCode == '13'){
- subscribe();
- }
- });
- $('#subscribeBtn').bind('click', function(){
- subscribe();
- });
- </script>
- *********************************************
- 返回Json格式:｛code: 1｝
7.通用Tab选项卡
- //tab标签切换
- var $tabcon=$(".tabbox .tabcon .tcon");
- var $tabconliN=$(".tabbox li");
- var $tabconliH=$(".tabbox li[name='tabH']");
- var $tabconliC=$(".tabbox li[name='tabC']");
- $tabconliH.hover(function(){
- $(this).siblings().removeClass("current").addClass("current");
- var index = $tabconliN.index(this);
- $tabcon.eq(index).show().siblings('.tcon').hide();
- });
- $tabconliC.click(function(){
- $(this).siblings().removeClass("current").addClass("current");
- var index = $tabconliN.index(this);
- $tabcon.eq(index).show().siblings('.tcon').hide();
- });
- <div class="tabbox">
- <div class="tit">
- <ul>
- <li name="tabC">aaaaaaaaaa</li>
- <li name="tabC">bbbbbbbbbb</li>
- <li name="tabC">cccccccccc</li>
- </ul>
- </div>
- <div class="tabcon">
- <div class="tcon">1111</div>
- <div class="tcon">2222</div>
- <div class="tcon">3333</div>
- </div>
- </div><!-- tabbox -->
8. 提交问卷实例（抓取页面中所有被选中的Input_value值，及对应的问题ID，输出Json）
- function showVal(){
- var val=$('.lisbox').map(function(){
- var pid=$(this).attr('id');
- var val=$('input:checked',this).map(function(){
- return $(this).val();
- }).get();
- var obj={key:pid,id:val};
- return obj;
- }).get();
- alert(JSON.stringify(val));
- <div class="lisbox" id="120">
- <div class="lisT l-h-30 co30">1.你从哪里知道的我们的？</div>
- <input type="radio" name="an0" value="316" id="316"><label for="316">电视广告</label>
- <input type="radio" name="an0" value="318" id="318"><label for="318">地铁公交广告</label>
- <input type="radio" name="an0" value="317" id="317"><label for="317">互联网文字广告</label>
- <input type="radio" name="an0" value="315" id="315"><label for="315">互联网视频广告</label>
- <input type="radio" name="an0" value="327" id="327"><label for="327">亲朋好友介绍</label>
- </div>
- <div class="lisbox" id="120">
- <div class="lisT l-h-30 co30">2.你从哪里知道的我们的？</div>
- <input type="checkbox" name="an0" value="316" id="316"><label for="316">电视广告</label>
- <input type="checkbox" name="an0" value="318" id="318"><label for="318">地铁公交广告</label>
- <input type="checkbox" name="an0" value="317" id="317"><label for="317">互联网文字广告</label>
- <input type="checkbox" name="an0" value="315" id="315"><label for="315">互联网视频广告</label>
- <input type="checkbox" name="an0" value="327" id="327"><label for="327">亲朋好友介绍</label>
- </div>
- <input type="submit" onClick="showVal()">
9.JS定期器
- clearTimeout()和clearInterval() ：
- JS里设定延时：
- 使用SetInterval和设定延时函数setTimeout 很类似。
- setTimeout 运用在延迟一段时间，再进行某项操作。
- setTimeout("function",time) 设置一个超时对象
- setInterval("function",time) //设置一个超时对象
- SetInterval为自动重复，setTimeout不会重复。
- clearTimeout(对象) 清除已设置的setTimeout对象
- clearInterval(对象) 清除已设置的setInterval对象
10.JQ(Ajax)实例
- $("#bt1").click(function(){
- var name =$("#tx1").val();
- var URL = "../validate?name="+name+"&date="+new Date().getTime();
- $.ajax({
- type:"GET",
- url:URL,
- dataType:"xml",
- success:function(msg){
- alert(msg);
- var jqueryObj =$(msg) ;//把后台传来的对象转为JQuery对象
- alert(jqueryObj);
- var content = jqueryObj.text();
- $("#sp1").text(content);
- }
- });
- })
php提交JSON并返回JSON格式数据（附AJAX部分）
2014/09/13 08:30 | by 刘新修 ]
- <?php
- header("content-type:text/html;charset=utf-8");
- $username = $_POST['hiusername'];
- $sex = $_POST['hisex'];
- $age = $_POST['hiage'];
- //$json_res = {'username':$username,'sex':$sex,'age':$age};
- $json_res = array("username"=>$username,'sex'=>$sex,'age'=>$age);
- $res = json_encode($json_res);
- file_put_contents("c:/1.txt",$res);
- echo $res;
- ?>
- <html>
- <head>
- <title>php jquery json数据传输</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $('#send').click(function(){
- $.ajax({
- type: "post",
- url: "/php/s1.php",
- data: {hiusername:$("input[name='username']").val(),hisex:$("input[name='sex'][checked]").val(),hiage:$("input[name='age']").val()},
- dataType: "json",
- success: function(msg){
- if(msg!=null){
- alert("提交成功！")
- }
- },error:function(){
- alert("ddddd")
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <!-- <form action="/php/s1.php" method="post"> -->
- 姓名：<input type="text" name="username" /><br />
- 性别：<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女<br />
- 年龄：<input type="text" name="age" />
- <input type="submit" name="sub" id="send" value="提交" />
- <!-- </form> -->
- <div id="test"></div>
- </body>
- </html
JQuery对CheckBox的一些相关操作
2014/09/13 08:12 | by 刘新修 ]
一、对CheckBox的操作：
根据NAME值及所匹配的value去提交参数值serialize()
2014/09/13 01:01 | by 刘新修 ]
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("div").text($("form").serialize());
- });
- });
- </script>
- </head>
- <body>
- <form action="">
- username: <input type="text" name="hiusername" value="liuxinxiu" /><br />
- age: <input type="text" name="hiage" value="28" /><br />
- </form>
- <button>序列化表单值</button>
- <div></div>
- </body>
- </html>
Jquery 垂直滚动条移动到指定位置
2014/03/20 15:58 | by 刘新修 ]
- $("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
在底部放一个id是box的标签就可以了。
