javascript: 常用操作

1，取得输入框的输入值，修改输入框的输入值

根据id获取id的值

jquery代码：

$('#version_number').val();

解释：$是jQuery的标准用法，('#version_number')这个是jquery获取id=version_number的函数，取出来是一个id为version_number的dom对象。val()是对象的一个方法，表示取出输入的值。

2，修改id=version_number的输入值

$('#version').val(version);

解释：id为version的object，修改输入值为version变量

区分三种情况：
a，通过id获取节点：$('#id')
b，通过类型获取多个节点：$('input')
c，通过class名称获取多个节点：$('.class1')

id相关的操作

html代码
<input type="text" id="product_id" name="product_id" value="2036003600"  title="test-title" class="span3">

js函数：
>$('#product_id')
[<input type="text" id="product_id" name="product_id" value="2036003600" class="span3">]

获取和修改input的值
>$('#product_id').val()
"2036003600"
>$('#product_id').val(100)
>$('#product_id').val()
"100"

获取和修改属性
>$('#product_id').attr("title")
"test-title"
>$('#product_id').attr("title", "update-title")
>$('#product_id').attr("title")
"update-title"
>$('#product_id').attr({title:"new-title",class:"span5"})
[<input type="text" id="product_id" name="product_id" value="2036003600" title="new-title" class="span5">]

代码片段1：

小功能：正则选择，字符串转int，根据id取和设置值

<script type="text/javascript">
function changeVersion()
{
    var v_number = $('#version_number').val();
    var m = v_number.match(/d+/g);
    if (m.length == 4) {
        var version = 0;
        var flag = true;
        for (var i=0;i<m.length; i++) {
            if (m[i] >= 0 && m[i] < 256) {
                version = 256 * version + parseInt(m[i]);
            } else { 
                flag = false;
                break;                                                                                                            
            }
        }
        if (flag) {
            $('#version').val(version);
        } else {
            $('#version').val("");
        }
    } else {
        $('#version').val("");
    }
}
</script>

 代码片段2

小功能：弹出输入框，ajax请求，url跳转

<a href="javascript:void(0)" target="_blank" onclick="addItem('100')">添加</a>

<script>
function addItem(appid)
{
    var input = prompt("请输入设备的产品id", "");
    if (input == null || input.length == 0) {
        alert("输入有误");
    } else {
        $.post("/adminProductRelate/doCreate", {product_id:appid, device_product_id:input}, 
        function(data){
            if (data.errno == 0) {
                location.href="/adminProductRelate/list";
            } else {                                                                                                                  
                alert(data.errmsg);
            }
        });
    }
}
</script>

代码片段3

 id=1，通过某个接口取得对应的名称，展现在id为name的html上

    $("#companyIdInput").blur(function(){
        var id = $('#companyIdInput').val();
        $.post("/adminBusiCompany/name", {"id":id}, function(data){
            var name = "";
            if (data.errno == 0) {
               name = data["data"]["name"];
            } else {
               name = "";
            }
        $('#companyName').html(name);
     })});

知识点：

disabled和readonly的含义：http://blog.csdn.net/fancyerii/article/details/4083353

js的正则匹配和提取数据：

var page = 1;
var pageUrl = $(this).attr('href'); //‘?page=100&num=10’
var reg = /page=(d*)/i;
var matches = reg.exec(pageUrl);
if (matches[1]) {
  page = matches[1];
} else {
  page = 1;
}
//最终page提取出来是100