jquery常用的一些语法

转载 2017年09月19日 08:05:51

1. 控制字体style

<style>
.fontcolor {
    color:#FF0000;
    font-size:15px;
    font-weight:bold;
}
</style>

颜色查看:

http://www.wahart.com.hk/rgb.htm

 

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>
复制代码

 

 以上是我用到的一些语法,更多可以参考w3school的教程,简单又贴心: http://www.w3school.com.cn/jquery/jquery_syntax.asp

 

判断字符串开头、结尾,正则表达式:

var str = "xxx.xml.bak";
if (str.match("^xxx")) {
alert("xxx starts");
}

if (str.match("xml$")) {
alert("xml ends");
}

总结一下JQuery的常用API

jQuery基本语法:$(selector).action() $:相当于jQuery对相关 (selector):选择符(选择/查询)元素 action:对元素的操作 基本选择器: ...
  • kennsand
  • kennsand
  • 2017年01月01日 20:40
  • 608

jquery有用却不常用的方法分享

工具方法 $.isArray(obj); //检测一个对象是否是数组 $.isFunction(obj); //检测一个对象是否是函数 $.trim(str); // 去除string 的空格 ...
  • u012763269
  • u012763269
  • 2015年08月21日 14:33
  • 728

jQuery常用语法总结笔记

jQuery 1.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery...
  • qq_34477549
  • qq_34477549
  • 2016年10月15日 11:16
  • 3296

ES6常用的一些语法总结

1. let和const的使用 * let和const类似于javascript中的var的使用,都是用来声明变量的,只是都存在各自的特殊用法。 //javascript 只有全局作用域和函数...
  • u012862227
  • u012862227
  • 2017年01月16日 18:43
  • 1583

halcon基本语法和常用算法

count_obj select_obj 工具栏里有几个按钮在图像分析中比较方便 第一个是灰度直方图,用于将灰度图像变成二值图像 里面有个插入代码,点击一下会插入代码比如t...
  • songqqnew
  • songqqnew
  • 2012年08月17日 22:06
  • 1728

Python爬虫:一些常用的爬虫技巧总结

目录[-] 1、基本抓取网页 get方法 post方法 2、使用代理IP 3、Cookies处理 4、伪装成浏览器 5、页面解析 6、验证码的处理 7、gzip压缩 8、多...
  • xiaolinzi007
  • xiaolinzi007
  • 2016年04月01日 13:39
  • 1021

常用的jquery函数总结

1、表单验证 2、$.post 3、
  • qq_16465949
  • qq_16465949
  • 2014年08月08日 12:04
  • 956

Canvas 常用API总结

基础部分参见上篇,《Canvas常用语法详解》。 本文的详细参数和例子,参见《玩转html5 画图》:http://www.cnblogs.com/tim-li/archive/2012/08/06...
  • SeekerTime
  • SeekerTime
  • 2017年04月20日 10:41
  • 319

jQuery基本语法和选择器

jQuery 一、jQuery介绍 1、JS类库 l  JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 2、当前流行的Ja...
  • CSDN_GIA
  • CSDN_GIA
  • 2017年02月02日 14:49
  • 381

常用jQuery选择器详解

元素选择是一切操作的前提,jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器') $('...
  • a153375250
  • a153375250
  • 2016年05月26日 14:46
  • 1506
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery常用的一些语法
举报原因:
原因补充:

(最多只允许输入30个字)