進入到一個項目期中，一邊做項目，一邊學習其中用到的知識。這些知識都是零碎的，有數據庫，有html，有js，還有django。趁周末時間，整理前面遇到過的前端相關的知識點。
下拉框選擇
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function doSome(){
alert($("#select_id option:selected").text());//方法一：獲取select標簽選中的option中的文本。
alert($("#select_id").find("option:selected").text());//方法二：獲取select標簽選中的option中的文本。
alert($("#select_id option:selected").val());//方法一：獲取select標簽選中的option中的value的值。
alert($("#select_id").find("option:selected").val());//方法二：獲取select標簽選中的option中的value的值。
alert($(".select_class option:selected").text());//通過classname來來實現以上功能
}
</script>
</head>
<body>
<div>
<select id="select_id",onchange="doSome();">
<option value="aa">bb</option>
<option>cc</option>
<option>dd</option>
</select>
</div>
<div>
<select class="select_class",onchange="doSome();">
<option value="aa">bb</option>
<option>cc</option>
<option>dd</option>
</select>
</div>
</body>
</html>
js綁定事件三種方式
在JavaScript中，有三種常用的綁定事件的方法：
- 在DOM元素中直接綁定；
- 在JavaScript代碼中綁定；
- 綁定事件監聽函數。
1.嵌入dom <button onclick="open()">按鈕</button> <script> function open(){ alert(1) } </script> 2.直接綁定 <button id="btn">按鈕</button> <script> document.getElementById('btn').onclick = function(){ alert(1) } </script> 3.事件監聽 <button id="btn">按鈕</button> <script> document.getElementById('btn').addEventListener('click',function(){ alert(1) }) }) </script>
用 "addeventlistener" 可以綁定多次同一個事件，且都會執行，而在DOM結構如果綁定兩個 "onclick" 事件，只會執行第一個；在腳本通過匿名函數的方式綁定的只會執行最后一個事件。
js綁定的方法：
1 $(document).ready(function(){ 2 $("#clickme").click(function(){ 3 alert("Hello World click"); 4 }) 5 });
動態添加元素
1 <html> 2 <head> 3 <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $(".main").append("<h2>and me</h2>"); 7 8 for(var i=0;i<4;i++) 9 { 10 11 $(".main").append("<div id=\'ul_"+i+"\'> </div>"); 12 } 13 }); 14 </script> 15 </head> 16 <body> 17 18 <div class="main"> 19 <h1>only for</h1> 20 </div> 21 22 </body> 23 24 </html>
實現效果如下，可以看到新添加的div的id都是動態生成的。
如果想在新添加的元素中動態添加值，那么實現如下：
1 <html> 2 <head> 3 <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $(".main").append("<h2>and me</h2>"); 7 8 for(var i=0;i<4;i++) 9 { 10 11 12 $(".main").append("<div id=\'ul_"+i+"\'> </div>"); 13 14 html_p = "<p>"+i+"</p>"; 15 $('#ul_'+i).append(html_p); 16 } 17 }); 18 </script> 19 </head> 20 <body> 21 22 <div class="main"> 23 <h1>only for</h1> 24 </div> 25 26 </body> 27 28 </html>
