html常用標簽的取值和賦值操作
我們在html頁面當中，面對各種各樣的標簽，經常需要處理取值和賦值的問題，下面，就把常見的一些html標簽元素的取值和賦值操作進行總結整理，以後備用。
1.button:改變button按鈕上面的值，比如把確定按鈕取消按鈕
<button id="btn">確定</button>
$("#btn").click(function () {
$("#btn").text("取消");//這個是改變按鈕上面顯示的值，用這個
$("#btn").val("取消");//這個不是按鈕上面顯示的值
});
2.span：取出span對應的值和給span賦值
<span></span>
console.log("span標簽裏面的值是："+$("span").html());//取值的方法
3.a：a標簽的href，下劃線，css，文本值的常見操作
<a href="https://www.baidu.com" id="baidu" target="_blank">百度一下，就看廣告</a>
<style type = “text/css”>
a {font-size:16px} //設置字體大小
a:link {color: blue; text-decoration:none;} //鏈接未訪問：藍色、無下劃線
a:visited {color:purple;text-decoration:none;} //鏈接已訪問：紫色、無下劃線
a:hover {color: red; text-decoration:underline;} //鏈接鼠標覆蓋時：紅色、下劃線
</style>
//修改a標簽href的值
$("#baidu").attr("href","https://www.csdn.net/");
//修改a標簽文本的值
$("#baidu").text("csdn學技術吧");
//none(去掉下劃線),underline(下劃線),blink(閃爍),overline(上劃線),line-through(貫穿線)
4.select:確定下拉選的值及其他常見操作
<select id="fruit_select" >
<option>--請選擇--</option>
<option value="1">Orange</option>
<option value="2">BuleBerry</option>
<option value="3">Apple</option>
<option value="4">Lemen</option>
<option value="5">Grape</option>
<option value="6">Strawberry</option>
</select>
下拉選的改變事件：獲取當前選擇的值、選擇值的value值、選擇值的下標大小
//下拉選的改變事件
$("#fruit_select").change(function () {
var selectText = $("#fruit_select").find("option:selected").text();
console.log("當前選擇的是哪一種水果:"+selectText);
//獲取下拉框選中項的value屬性值
var selectValue = $("#fruit_select").val();
console.log(selectValue);
//獲取下拉框選中項的index屬性值：index從0開始
var selectIndex = $("#fruit_select").get(0).selectedIndex;
});
//設置slectIndex=5為選中的值：當前對應Grape
$("#fruit_select").get(0).selectedIndex = 5;
//設置下拉框value屬性為4的選項選中:當前對應Lemen
$("#fruit_select").val(4);
//設置下拉框text屬性為Grape的選項選中
$("#fruit_select option:contains(‘Grape‘)").attr("selected", true);
//在下拉框最後添加一個選項
$("#fruit_select").append("<option value=‘7‘>WaterMelon</option>");
//在下拉框最前添加一個選項
$("#fruit_select").prepend("<option value=‘0‘>--請不要選擇--</option>")
//移除下拉框所有選項option
$("#fruit_select").empty();
$("#fruit_select").html("");
//移除下拉框最後一個選項
$("#fruit_select option:last").remove();
//移除下拉框 value屬性為4的選項
$("#fruit_select option[value=4]").remove();
5.radio:默認情況下選擇（checked="checked"），表單提交的時候獲取選定的值
<label><input type="radio" name="sex" value="m" checked="checked">男</label>
<label><input type="radio" name="sex" value="f">女</label>
var val = $(‘input[name="sex"]:checked‘).val();
console.log("當前選擇的是男是女："+val);//出來的值對應的m或者f
//設定name="sex"的第一個radio為選中狀態
$("input[name=‘sex‘]").get(0).checked=true;
6.checkbox:設置checkbox的選中狀態和獲取checkbox是否選中
<input type=‘checkbox‘ id=‘cb‘/>
var isChecked = $(‘#cb‘).attr(‘checked‘);//有些可以這麽獲取，但是一般情況下無效了
下面是改進的方法
//獲取是否選中
var isCheckedA = $(‘#cb‘).prop(‘checked‘);
var isCheckedB = $(‘#cb‘).is(":checked");
console.log("cb是否選中："+isCheckedA);
console.log("cb是否選中："+isCheckedB);
if(!isCheckedA&&!isCheckedB){
//設置選中
$(‘#cb‘).prop(‘checked‘,true);
}
7.ul li:去掉li前面的黑點，設置鼠標樣式，並且取值
<ul id="ul_id">
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
<li>選項4</li>
<li>選項5</li>
</ul>
$("#ul_id").css({"list-style":"none","cursor":"pointer"});//去掉黑點，鼠標為手型
$("#ul_id li").click(function () {
//測試直接獲取值
var value=$(this).text();
console.log("當前點擊的li的值是："+value);
ar count=$(this).index();//獲取li的下標
console.log("當前點擊的li的下標是："+count);
});
$("#btn").click(function () {
$("#ul_id").append("<li>選項6</li>");//動態的往ul上面增加li標簽
}
8.input:type="text"的取值和賦值的操作
<input type="text" placeholder="請輸入內容" id="context">
$("#btn").click(function () {
$("#context").val("點擊按鈕之後給context的輸入框賦值");
console.log("當前輸入框的內容是："+$("#context").val());
}
9.把一個div變成一個可以編輯的區域
<div contenteditable="true" class="editor_area"></div>
$(".editor_area").css({
"width":"500px",//寬度
"height":"216px",//高度
"border":"1px solid #E4E8EB",//邊框
"padding":"14px 20px",//離邊框的間距
"outline":"none",//不要輪廓線
"margin":"auto"//div的margin
});
//取值
var content = $(".editor_area").text().trim();
//賦值或者清空
$(".editor_area").html("");
以上是對html一些元素常用的取值賦值操作的一些總結，希望能在以後對這篇文章進行補充，一是備忘，而是學習的總結過程。
---------------------
原文：https://blog.csdn.net/qq_38455201/article/details/80594104
html常用標簽的取值和賦值操作