jquery 常用知识

最新推荐文章于 2022-04-19 13:51:17 发布

jzq1999

最新推荐文章于 2022-04-19 13:51:17 发布

阅读量70

点赞数

分类专栏： web&js 文章标签： jQuery velocity JavaScript Ajax json ViewUI

本文链接：https://blog.csdn.net/jzq1999/article/details/83527933

版权

web&js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

jquery:顾名思义，就是javascript的query，在整个document中查询元素。

$("#var")=document.getElementById(var);

$("var")=document.getElementByName(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 οnlοad="alert('hello');">（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" οnchange="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;
	      }
       }
   });
}