Jquery操作DOM元素方法詳解
更新時(shí)間：2023年03月24日 15:03:15 作者：springsnow
本文詳細(xì)講解了Jquery操作DOM元素的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、文本輸入框: text
<input type="text" value="99.com" size=12 id="input1" />
1、獲取文本值：
$("#input1").val();2、選中文本：
$("#input1").select();3、禁用、啟用文本框
$("#input1"].attr("disabled",true);4、只讀、取消只讀：
$("#input1"].attr("readonly",true);二、單選框: radio
<intput type="radio" name="sex" value="0"/>男 <intput type="radio" name="sex" value="1"/>女
1、得到單選框的選中項(xiàng)的值：
$("input[type=radio][name=sex]:checked").val();2、勾選單選框的項(xiàng)：
$("input:radio][name=sex][value=0]).prop("checked",true);
--或者
$("input:radio][name=sex"]).val(["0"]);3、判斷是否勾選：
$("input:radio][name=sex][value=0]).prop("checked")==true;4、禁用、啟用單選框：
$("input:radio][name=sex].prop("disabled",true);
--或
$("input:radio][name=sex].removeAttr("disabled");三、復(fù)選框: checkbox
<intput type="checkbox" name="sex" value="0"/>男 <intput type="checkbox" name="sex" value="1"/>女
1、得到所有checked中項(xiàng)的值：
$("input[type=checkbox][name=sex]:checked").each(function(i,n){ //由于復(fù)選框一般選中的是多個(gè),所以可以循環(huán)輸出
alert($(n).val());
});2、勾選復(fù)選框的項(xiàng)：
$("input:checkbox][name=sex][value=0]).prop("checked",true);
--或者
$("input:checkbox][name=sex"]).val(["0"]);3、判斷是否勾選：
$("input:radio][name=sex][value=0]).prop("checked")==true;4、禁用、啟用復(fù)選框：
$("input:checkbox][name=sex].prop("disabled",true);
--或
$("input:checkbox][name=sex].removeAttr("disabled");5、全選、全不選
$("input:checkbox][name=sex].prop("checked",true);
--或
$("input:checkbox][name=sex].removeAttr("checked");6、反選
$("input[type=checkbox][name=sex]").each(function(i,n){
$(this).attr('checked',!$(this).attr('checked')==true);
});四、下拉框 select
<select name="select" id="sel"> <option value="00">a </option> <option value="11">b </option> <option value="22">c </option> </select>
1、 獲取選擇項(xiàng)的值：
$("#sel").val();2、獲取選擇項(xiàng)的文本：
$("#sel option:selected").text();3、選中第二個(gè)項(xiàng)：
$("#sel").val("11");
$("#sel").val(["11"]);
$("#sel").val("b");
$("#sel").val(["bb"]);
$("#sel option[value="11"]").attr("selected",true);
$("#sel option:contains('b')").attr("selected",true);4、禁用、啟用下拉框：
$("#sel"].prop("disabled",true);
--或
$("#sel").removeAttr("disabled");5、清空項(xiàng)：
$("#sel").empty();
$("#sel").html('');6、添加項(xiàng)：
$("#sel").append("<option value='33'>dd</option>");
$("#sel").prepend("<option value=''>請(qǐng)選擇</option>"); //為Select插入一個(gè)Option(第一個(gè)位置)7、移除選擇項(xiàng)：
$("#sel option:selected").remove();五、多選下拉框 select-multiple
<select name="selectMul" id="selMul" size=4 multiple="multiple">//size列表框的高度 <option value="00">a </option> <option value="11">b </option> <option value="22">c </option> </select>
1、 獲取選擇項(xiàng)的值：
$("#selMul").val();//如果多選，返回一個(gè)數(shù)組val().join(‘,')2、獲取選擇項(xiàng)的個(gè)數(shù)：
$("#selMul option").length3、獲取選擇項(xiàng)的文本：
$("#selMul option:selected").each(function(i,n){
$(this).text();
});4、選中第二個(gè)項(xiàng)：
$("#selMul ").val("11");
$("#selMul ").val(["11","22"]);
$("#selMul ").val("b");
$("#selMul ").val(["aa","bb"]);
$("#selMul option[value="11"]").attr("selected",true);
$("#selMul option:contains('b')").attr("selected",true);5、禁用、啟用下拉框：
$("#selMul"].prop("disabled",true);
--或
$("#selMul").removeAttr("disabled");6、清空項(xiàng)：
$("#selMul").empty();
$("#selMul").html('');7、添加項(xiàng)：
$("#selMul").append("<option value='33'>dd</option>");
$("#selMul").prepend("<option value=''>請(qǐng)選擇</option>"); //為Select插入一個(gè)Option(第一個(gè)位置)8、移除選擇項(xiàng)：
$("#selMul option:selected").remove();9、全選、全不選
$("#selMul option).attr("selected",true);
--或
$("("#selMul option).removeAttr("selected");10、反選
$("#selMul option).each(function(i,n){
$(this).attr(‘selected',!$(this).attr(‘selected')==true);
});到此這篇關(guān)于Jquery操作DOM元素的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JQuery上手簡(jiǎn)單，也很容易學(xué)，即使是剛接觸JQuery的開(kāi)發(fā)人員，借助JQuery手冊(cè)，也很快能在項(xiàng)目中使用開(kāi)發(fā)，這篇文章針對(duì)jquery原理以及學(xué)習(xí)技巧進(jìn)行介紹，感興趣的小伙伴們可以參考一下2015-11-11
JQuery獲取當(dāng)前屏幕的高度寬度的實(shí)現(xiàn)代碼
JQuery獲取瀏覽器窗口寬高，文檔寬高的代碼，使用jquery的朋友可以參考下。2011-07-07
這篇文章主要介紹了jQuery內(nèi)容過(guò)濾選擇器用法,實(shí)例分析了:contains()、:has()、:empty()、:parent等內(nèi)容過(guò)濾選擇器的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了如何在MVC應(yīng)用程序中使用Jquery，并附上示例，給需要的小伙伴們參考下吧2014-11-11
jquery實(shí)現(xiàn)移動(dòng)端按鈕組左右滑動(dòng)
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)移動(dòng)端按鈕組左右滑動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
jQuery子選擇器與可見(jiàn)性選擇器實(shí)例分析
這篇文章主要介紹了jQuery子選擇器與可見(jiàn)性選擇器,結(jié)合實(shí)例形式分析了jQuery子選擇器與可見(jiàn)性選擇器的功能、常見(jiàn)用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
input輸入框在獲得或失去焦點(diǎn)時(shí)隱藏或顯示文字，這樣的焦點(diǎn)效果想必很多朋友在填寫form表格的時(shí)候都曾見(jiàn)識(shí)過(guò)吧，本文使用jquery實(shí)現(xiàn)以下，感興趣的朋友可以參考下哈2013-04-04
基于jquery的居中彈出層效果代碼，需要的朋友可以參考下核心的代碼。2010-08-08
這篇文章與大家分享30個(gè)精美的的 jQuery 幻燈片效果插件和教程。您可能經(jīng)常能看到一些網(wǎng)站上特色區(qū)域的內(nèi)容以滾動(dòng)方式變化2011-08-08