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