jquery 常用知识

geeksun · 发表于 2013-1-23 02:17:52

jquery:顾名思义，就是javascript的query，在整个document中查询元素。
$("#var")=document.getElementById(var);
$('.sumbit'): 获得document的按钮或css的class值。
val(): 获得第一个匹配元素的当前值。
text(val): 设置所有匹配元素的文本内容
$("div p"): 得到所有<div>标签下的<p>元素
$("div.container"): 得到class为container的<div>元素
$("div #msg"): 得到<div>标签下面id为msg的元素
$("table a",context): 得到context为上下文的table里面所有的连接元素
$(document).ready(function(){
alert("hello");
});(1)
<body >（2）
上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
不管怎么说，这个惯例可以分离javascript与HTML。推荐使用。
同一函数实现set&get:
$("#msg").html();
$("#msg").html("hello");
velocity中使用jquery:
在velocity中使用jquery时可以用jQuery.ajax()在velocity中代替$.ajax()，因为$跟velocity中的$有冲突。
使用jquery创建动态的二级菜单：
此处是实现根据语言的变化显示和语言相对应的分类。

velocity代码：
<script language="javascript" type="text/javascript" src="$content.getURI('js/json.js')"></script><script language="javascript" type="text/javascript" src="$content.getURI('js/jquery.js')"></script><tr bgcolor="#FFFFFF"> <td height="24"align="right" valign="middle"><p>语言：</p> </td> <td height="24" align="left" valign="middle"> <select name="articleLanguage" id="articleLanguage" onchange="changeLanguage()" > <option value="1" #if($!articleVo.articleLanguage.equals("1"))selected="selected"#end>中文</option> <option value="0" #if($!articleVo.articleLanguage.equals("0"))selected="selected"#end>英文</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> <td width="150" height="24"align="right" valign="middle">分类：</td> <td height="24" align="left" valign="middle"> <select id="articlecatId" name="articlecatId"> #foreach($category in $catList) <option value="$!category.articlecatId" #if($!articleVo.articleCatId==$!category.articlecatId)selected="selected"#end>$category.articleCatName</option> #end </select> </td> </tr>
js代码：
function changeLanguage(){var articleLanguage = jQuery("#articleLanguage").val(); jQuery.ajax({ url:"$link.setAction('cmsmanaage.article.GetArticleCategoryAction')?"+Math.random(), data:{language : articleLanguage}, type : "post", cache : false, dataType : "json", error:function(){ alert("error occured!!!"); }, success:function(data){ if(data!="0"){var articlecatId = document.getElementById('articlecatId');//清空数组articlecatId.length = 0;for(var i=0;i<data.length;i++){ var xValue=data[i].articlecatId; var xText=data[i].articleCatName; var option=new Option(xText,xValue); articlecatId.add(option); } }else{ var articlecatId = document.getElementById('articlecatId'); articlecatId.length = 0; } } });}

		自动登录	找回密码
密码			立即注册