jquery常用技巧拾貝

2022-04-09 04:52:27 字數 2208 閱讀 2734

本文目的

使用jquery有一段時間,積累了一些使用技巧,記錄在這裡,方便日後查閱。jquery的確實現了對使用者的承若 —— 「write less, do more」。

文字框

html頁面**:

獲取文字框輸入:var stxt = $(『#id_demo_text』).val();  // stxt變數現在的值為文字框的輸入

設定文字框:$(『#id_demo_text』).val(『some text that will be shown in the text box』);

p.s.: 注意訪問控制項時,id前面有個『#』號。

單選框

html頁面**:

啟動停止

獲取單選框選項:

var sselectedval = $(『input:[name=rb_status]:radio:checked』).val();

// sselectedval得到被選擇的單選框的value

設定單選框:

var nselected = 0;   // 0:「啟動」被選上,1:「停止」被選上

$("input[name='rb_status'][value='" + nselected + "']").attr("checked",true);

多選框

html頁面**:香蕉

判斷是否被選中:

var bselected = $(「#cb_alarm」).is(「:chekced」);  // bselected為 true表示被勾選,否則為false

設定多選框:

var bselected = true;  // true設定選擇,false取消選擇

$(「#cb_alarm」).attr(『checked』, bselected);

【全選/反選】控制,html**如下:

全選/反選

選項1選項2

選項3選項4

現在想要點選【全選/反選】多選框,完成對選項1-4的批量抄作,**如下:

$(「#select_all」).click(function());

上面的**繫結了select_all的click時間,在點選select_all後,根據當前select_all狀態批量修改選項1-4的狀態。

如果想獲取選項1-4中選取的value呢?**如下:

var selected = ;

$(「input[name=』opt』]」).each(function()

});這樣,後面selected陣列中的值就是選擇的check的value值列表。

下拉列表

html頁面**:

香蕉鴨梨

獲取當前選中的值:

var scurval = $(「#select_id」).val(); // 與文字框相同

獲取當前選中的option dom物件(有時需要訪問到選擇的option的文字):

var opt = $(「#select_id」).children(「option:selected」);

設定當前選中值

$(「#select_id」).val(sval);

多屬性選擇器

除了id可以用來精確定位dom元素,多屬性選擇器也可以哦!看看下面的列子:

所以,可以用兩種方式選取第二個li元素

id選擇器:var opt = $(「#only_1」);

多屬性選擇器:var opt = $(「li[name=』li_name』][order=』1』]」);

多屬性選擇器雖然麻煩一點,但是卻提高了靈活性,可以比較容易的通過js控制,而id一般不易靈活控制。order是自定義屬性,也可以作為選取條件,是不是很好用!

動態繫結事件時傳遞引數

直接上例子

$(「#some_id」).click(,function(event));

值就是這樣傳遞的,你猜他會輸出什麼?

總結

因為jquery使用了css選擇器,使得**變得簡介,所以如果要使用好jquery,必須了解常用css選擇器。css選擇器幫助我們拿到具體的html dom物件,然後再通過jquery提供的api操作這些物件。

參考資料

沙海拾貝(一) 201409

鑑於有很多零碎的知識,寫在筆記本裡面容易搞忘了,所以單獨開一篇文章來記錄。1.1 no init 是乙個segment 段 是給linker用的,定義到不初始化的塊中去。常用來儲存一些敏感資訊,特殊應用場合下的不能被復位的資料或者做復位判斷標誌等資料 詳細使用方法見 1.2 就是指定位址 大部分編譯...

苦海拾貝 職業思考

真正的愛一行才能做好一行,之前是只聽過這個道理,秋招之後有點懂了。大家的offer基本可以分為三個等級 普通,sp,ssp。我發現能拿到ssp的,靠的並不是實習的時長,他們絕大部分都對 十分熱愛,對相關知識有強烈的探索慾望。對應的,他們也基本建立了相關的知識體系,已經對工作內容有了較為系統的理解。而...

碼海拾貝 之Perl 獲取日期以及日期的加減

在perl 中,不安裝其他模組的狀況下,可以使用 localtime 來獲取當地日期和時間。在標量上下文中,返回的是字串格式。my localtime localtime print n localtime n 返回 thu jan 1 18 17 56 2015 在列表上下文中,返回的是描述當前時...