jQuery开发手册 jQuery常用语法解析-职坐标

jQuery开发手册 jQuery常用语法解析

沉沙 2018-06-22 来源：阅读 1887 评论 0

摘要：本篇教程对一些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频道！

精通jquerypdf jquery实战第三版pdf jquery教程下载百度云

本文由 @沉沙发布于职坐标。未经许可，禁止转载。