jQuery13 元件選取(html元素+CSS ID)+修改元件內容/屬性
jQuery13 元件選取(html元素+CSS ID)+修改元件內容/屬性
資料來源:http://www.w3school.com.cn/jquery/index.asp
code2html:http://tohtml.com/
<!DOCTYPE html>
<html>
<head>
<title>jQuery 元件選取(html元素+CSS ID)+修改元件內容/屬性</title>
<!--資料來源 http://www.w3school.com.cn/jquery/index.asp-->
<scriptsrc="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
/*HTML+class作為選擇器*/
$("button.text01").click(function(){
console.log("text01");
$("p#test1").text("Hello world!");
});
$("button.html01").click(function(){
console.log("html01");
$("p#test2").html("<b>Hello world!</b>");
});
$("button.val01").click(function(){
console.log("val01");
$("input#test3").val("Hello world")
});
$("button.attr01").click(function(){
console.log("attr01");
$("a#url").attr("href","http://jashliao.pixnet.net/blog/post/202110310")
});
});
</script>
</head>
<body>
<buttontype="button"class="text01">修改內容-text()</button>
<buttontype="button"class="html01">修改HTML-html()</button>
<buttontype="button"class="val01">修改input值-val()</button>
<buttontype="button"class="attr01">修改屬性值-attr()</button>
<pid="test1">段落01。</p>
<pid="test2">段落02。</p>
<p>Input field: <inputtype="text"id="test3"value="Mickey Mouse"></p>
<p><ahref="http://jashliao.pixnet.net/blog"id="url">jashliao.pixnet.net</a></p>
</div>
</body>
</html>