jquery操作字串常用方法總結及工作代碼

來源:互聯網
上載者:User
1.javascript數組用法
方法 描述 FF IE
concat() 串連兩個或更多的數組,並返回結果。 1 4
join() 把數組的所有元素放入一個字串。元素通過指定的分隔字元進行分隔。 1 4
pop() 刪除並返回數組的最後一個元素 1 5.5
push() 向數組的末尾添加一個或更多元素,並返回新的長度。 1 5.5
reverse() 顛倒數組中元素的順序。 1 4
shift() 刪除並返回數組的第一個元素 1 5.5
slice() 從某個已有的數組返回選定的元素 1 4
sort() 對數組的元素進行排序 1 4
splice() 刪除元素,並向數組添加新元素。 1 5.5
toSource() 返回該對象的原始碼。 1 -
toString() 把數群組轉換為字串,並返回結果。 1 4
toLocaleString() 把數群組轉換為本地數組,並返回結果。 1 4
unshift() 向數組的開頭添加一個或更多元素,並返回新的長度。 1 6
valueOf() 返回數組對象的原始值 1 4
上邊列出來的就是JavaScript對數組對象的封裝,通過以上方法,可以輕鬆便捷的運算元組對象,引用網址:http://www.cnblogs.com/zyh-nhy/archive/2007/08/08/847876.html

2.checkbox
對於複選框來說,一般有一個固定的流程,許多的複選框都歸結於一個屬性,所以通常使用textbox或者label對象來儲存一族複選框的值,只需要把textbox或者label的屬性設定成hidden即可。在頁面傳參或者擷取參數時,只需要操作響應的textbox或者label即可。
例如:
<div id="crowd" class="checkbox_bgfl">
  <input name="crowd" type="hidden"/>
  <p><inputtype="checkbox" value="137"/><span>老人</span></p>
  <p><inputtype="checkbox" value="138"/><span>青年</span></p>
  <p><inputtype="checkbox" value="139"/><span>兒童</span></p>
 </div>
該複選框族是選出適宜人群,在js中對其操作如下:
var crowd=[],//聲明存取複選框值的數組
$("#crowd input:checkbox:checked").each(function(){
   crowd.push(this.value);
 });//遍曆複選框,將選中的值存入crowd 數組
   $("#crowdinput:hidden").val(crowd.join(","));//從crowd數組中取出值,並且將這些值串成一個字串,值與值之間用逗號分隔。
例如選中老人和兒童,則參數格式如下:...?crowd=137,139

3.select
jquery中select的操作相對簡單,但是,可以通過append()函數動態添加option項即可。
例如頁面中有一個select控制項如下:
<select id="crowd " name="crowd ">
     <optionvalue="-1">請選擇</option>
</select>
js代碼如下所示:
var crowd="老人 137,青年 138,兒童 139";  //選項字串數組
   crowd=crowd.split(",");//字串分割
    vartemp=$("#crowd");//擷取頁面中的對象
   $each(crowd,function(){ //遍曆選項串
     var value=this.split(" "); //將選項串繼續分隔
     temp.append($("<option/>").html(value[0]).attr("value",value[1]));//添加option
 });
至此,select選項的初始化已經完成,由於該控制項大多數情況下是使用的單值,所以表單值的擷取不需要再寫
此外select最重要的一個事件就要數onChange了,只需要在頁面上加上onchange事件聲明,然後再在jQuery中處理即可。

4.字串函數
字串的封裝是許多語言中很重要的應用,因為非常實用,使用機率也很高,js也不例外,對字串進行了一系列的封裝,具體方法如下:
方法 描述 FF IE
anchor() 建立 HTML 錨。 1 3
big() 用大號字型顯示字串。 1 3
blink() 顯示閃動字串。 1  
bold() 使用粗體顯示字串。 1 3
charAt() 返回在指定位置的字元。 1 3
charCodeAt() 返回在指定的位置的字元的 Unicode 編碼。 1 4
concat() 連接字串。 1 4
fixed() 以打字機文本顯示字串。 1 3
fontcolor() 使用指定的顏色來顯示字串。 1 3
fontsize() 使用指定的尺寸來顯示字串。 1 3
fromCharCode() 從字元編碼建立一個字串。 1 4
indexOf() 檢索字串。 1 3
italics() 使用斜體顯示字串。 1 3
lastIndexOf() 從後向前搜尋字串。 1 3
link() 將字串顯示為連結。 1 3
localeCompare() 用本地特定的順序來比較兩個字串。 1 4
match() 找到一個或多個正在運算式的匹配。 1 4
replace() 替換與Regex匹配的子串。 1 4
search() 檢索與Regex相匹配的值。 1 4
slice() 提取字串的片斷,並在新的字串中返回被提取的部分。 1 4
small() 使用小字型大小來顯示字串。 1 3
split() 把字串分割為字串數組。 1 4
strike() 使用刪除線來顯示字串。 1 3
sub() 把字串顯示為下標。 1 3
substr() 從起始索引號提取字串中指定數目的字元。 1 4
substring() 提取字串中兩個指定的索引號之間的字元。 1 3
sup() 把字串顯示為上標。 1 3
toLocaleLowerCase() 把字串轉換為小寫。 - -
toLocaleUpperCase() 把字串轉換為大寫。 - -
toLowerCase() 把字串轉換為小寫。 1 3
toUpperCase() 把字串轉換為大寫。 1 3
toSource() 代表對象的原始碼。 1 -
toString() 返回字串。 - -
valueOf() 返回某個字串對象的原始值。 1 4
引用網址:http://www.w3school.com.cn/js/jsref_obj_string.asp

5.至於其他控制項的使用在此先不贅述,後邊用到在寫,表單元素添加完成之後就是表單的提交了,以前也許是使用html的頁面通用對象,比如request等設定參數,或者直接跟在地址後邊,不論怎麼處理,都要寫一大堆的代碼,然而使用jQuery之後,這一工作變的異常的簡單。原因就是serialize()方法的使用。
例子如下:
html:
<form name="form1" id="form1"method="post">
 <input type='text' name='name' value='John'/> <input type='text' name='location' value='Boston'/><button name="bt" click="btClick"></form>jquery代碼:<script type="text/javasctipt">  function btClick()  {     window.location.href=url+"?"+$("#form1").serialize();  }</script>
Result:
 url?name=John&location=Boston  // 訂單金額資訊    var $orderMoneyInfo = $('#track'+orderId).children('td').eq(3).text();        // 分割金額和支付方式文案    var moneyIndex = $orderMoneyInfo.indexOf(".");        var $moneyInfo = $orderMoneyInfo.substr(0, moneyIndex+3);    var $paymentWayInfo = $orderMoneyInfo.substr(moneyIndex+3, $orderMoneyInfo.length);            var $contend =        "<div id=\"mbz\">" +        "    <div class=\"m-text\"><i class=\"bg-joy\"></i>" +        "        <p class=\"ftx-04\">replaceValue</p>" +        "    </div>" +                    "<div class=\"m minfo\">" +        "    <div class=\"mt\"><h3>訂單資訊</h3></div>" +        "<div class=\"mc\">" +        "    <ul class=\"list-oinfo\">" +        "        <li>訂單號:"+orderId+"</li>" +        "        <li>訂單金額:<strong class=\"ftx-01\">"+$moneyInfo+"</strong>&nbsp;&nbsp;&nbsp;"+$paymentWayInfo+"</li>" +        "    </ul>" +        "    <h5>訂單商品:</h5>" +        "    <div class=\"scrollimg\">" +        "        <div id=\"scrollimg\" style=\"position: relative; width: 392px; height: 56px; overflow: hidden;\">" +        "          <ul style=\"position: absolute; left: 0px; top: 0px; width: 784px;\">" +                        $wareImagList +        "          </ul>" +        "        </div>" +        "          <span id=\"prev\" class=\"disabled\">&lt;</span>" +        "          <span id=\"next\" class=\"\">&gt;</span>" +        "    </div>" +        "</div>" +        "</div>" +        "<div class=\"btns\">" +            "<a class=\"btn btn-6\" href=\"#none\" onclick=\"finishConfirm("+orderId + "," + orderType + "," + venderId + ")\"><s></s>確定</a><a id='cancelBtn"+ orderId +"' class=\"btn btn-10\" href=\"#none\" onclick=\"jdThickBoxclose()\"><s></s>取消</a>"+        "</div>"+        "</div>";        if(orderType >=21 && orderType <=25){        $contend = $contend.replace("replaceValue", "value1");    } else {        $contend = $contend.replace("replaceValue", "value2");    }

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.