摘要:本篇教程对一些jQuery常用的语法进行了讲解了,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
1. 控制字体style
<style> .fontcolor { color:#FF0000; font-size:15px; font-weight:bold; } </style>
2. td中换行,以及for展示
<td> <ul> #foreach($model in $!data.list1) <li>$!model</li> #end </ul> </td>
3. 一些简单语法
<head><script type="text/javascript" src="jquery.js"></script> </head> jQuery(document).ready(function(){ $("#searchSubmit").click(function() { $("#searchForm").submit(); return false; }); });
基础语法:$(selector).action()
· 美元符号定义 jQuery $
· 选择符(selector)“查询”和“查找” HTML 元素
· jQuery 的 action() 执行对元素的操作
· 示例:
· $(this).hide() - 隐藏当前元素
· $("p").hide() - 隐藏所有段落
· $("p.test").hide() - 隐藏所有 class="test" 的段落
· $("#test").hide() - 隐藏所有 id="test" 的元素
选择器-by tag:
· jQuery 使用 CSS 选择器来选取 HTML 元素。
· 示例:
· $("p") 选取 <p> 元素。
· $("p.intro") 选取所有 class="intro" 的 <p> 元素。
· $("p#demo") 选取 id="demo" 的第一个 <p> 元素。
选择器-by prop:
· jQuery 使用 XPath 表达式来选择带有给定属性的元素。
· 示例:
· $("[href]") 选取所有带有 href 属性的元素。
· $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
· $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
· $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
选择器-css:
· jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
· 示例:
· $("p").css("background-color","red");
来点事件:
· 基于事件,我们可以做许多事情。
· 示例:
· $(document).ready(function)
· $(selector).click(function)
· $(selector).focus(function)
jQuery与html:
· jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
· 三个简单实用的用于 DOM 操作的 jQuery 方法,get -- set:
· $(selector).text() -- text("")
· $(selector).html() -- html("")
· $(selector).val() -- html("")
· $(selector).attr("") -- attr("", "")
· 等同于,获name来找,$("input[name='whichName']").val(),对它重新赋值$("input[name='whichName']").val(oldTopic);
jQuery-GET:
· $.get("yourUrl", function(data, status){}); 其中,data是controller里这样写回的response.write("")/modelMap带回
· 示例:
$("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });
jQuery-POST:
$.post(URL,data,callback); 其中,data是controller里这样写回的response.write("")/modelMap带回
· 示例:
$("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });
jQuery-遍历:
$(selector).each(function(index,element))
· 示例:
· $("table").find("tr").each(function(){ $(this).find("td").each(function(){ alert($(this).text()); }); });
4. 常用方法
放在一个vm里太长了,可以单独建立自己的.js文件,.vm里引入即可。
<script> /** elementName标识的页面元素的值,是否为空. */ function isNULL(elementname){ if($("input[name=" + elementname + "]").val() == ""){ return true; } return false; } /** elementName标识的页面元素的值,是否超时limitedLength. */ function exceedLimitedLength(elementname, limitedLength){ if($("input[name=" + elementname + "]").val().length > limitedLength){ return true; } return false; } /** elementName标识的页面元素的值,是否为数字. */ function isNum(elementname){ return isNaN($("input[name=" + elementname + "]").val()); } /** 光标显示在elementname标识的元素内. */ function focus(elementname){ $("input[name=" + elementname + "]").focus(); } /** elementname标识的页面元素是否为数字,如果不是,那么光标标在那里,并且提示用户. */ function isNumber(elementname){ if(isNum(elementname)){ focus(elementname); alert(elementname + "必须为数字"); return false; } return true; } /** elementname标识的页面元素的值,是否包含了中文. */ function containsChinese(elementname){ var str = $("input[name=" + elementname + "]").val(); if(escape(str).indexOf("%u")>=0){ return true; } return false; } /** elementname标识的页面元素的值,是否只包括字母、数字、中划线和下划线. */ function containsOnlyLettersNumberAndTwoDash(elementname){ var str = $("input[name=" + elementname + "]").val(); var patten = new RegExp(/^[a-zA-Z0-9\_\-]+$/); return patten.test(str); } /** elementname标识的页面元素的值,是否满足这些约束:不为空、 长度<limitedLength、不包含中文、只包含字母数字中划下划. */ function satisfyAllConstraints(elementname, limitedLength){ if(isNULL(elementname)){ focus(elementname); alert(elementname + "不可为空"); return false; } if(exceedLimitedLength(elementname, limitedLength)){ focus(elementname); alert(elementname + "超过长度限制" + limitedLength); return false; } if(containsChinese(elementname)){ focus(elementname); alert(elementname + "不支持中文"); return false; } // 注意! if(!containsOnlyLettersNumberAndTwoDash(elementname)){ focus(elementname); alert(elementname + "仅支持字母、数字、中划线-、下滑线_"); return false; } return true; }</script>
本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号