1. 程式人生 > >html常用標簽的取值和賦值操作

html常用標簽的取值和賦值操作

html www ted http console lin color index 輸入

我們在html頁面當中,面對各種各樣的標簽,經常需要處理取值和賦值的問題,下面,就把常見的一些html標簽元素的取值和賦值操作進行總結整理,以後備用。

1.button:改變button按鈕上面的值,比如把確定按鈕取消按鈕

<button id="btn">確定</button>
$("#btn").click(function () {
$("#btn").text("取消");//這個是改變按鈕上面顯示的值,用這個
$("#btn").val("取消");//這個不是按鈕上面顯示的值
});
2.span:取出span對應的值和給span賦值

<span></span>

$("span").html("現在給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:active:{color: red; } //鏈接激活:紅色
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(貫穿線)
$("#baidu").css("text-decoration","none");
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常用標簽的取值和賦值操作