前端下拉框选择和动态生成调用div

进入到一个项目期中，一边做项目，一边学习其中用到的知识。这些知识都是零碎的，有数据库，有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中，有三种常用的绑定事件的方法：

1. 在DOM元素中直接绑定；
2. 在JavaScript代码中绑定；
3. 绑定事件监听函数。

.嵌入dom

<button onclick="open()">按钮</button>

<script>
function open(){
    alert()
}
</script>

.直接绑定

<button id="btn">按钮</button>
<script>
document.getElementById('btn').onclick = function(){
    alert()
}
</script>

.事件监听

<button id="btn">按钮</button>
<script>
document.getElementById('btn').addEventListener('click',function(){
    alert()
})

})
</script>

用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

js绑定的方法：

 $(document).ready(function(){
   $("#clickme").click(function(){
        alert("Hello World  click");
   })
 });

动态添加元素

 <html>
     <head>
         <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
         <script type="text/javascript">
          $(document).ready(function(){
          $(".main").append("<h2>and me</h2>");

          for(var i=;i<;i++)
          {

            $(".main").append("<div id=\'ul_"+i+"\'> </div>");
          }
         });
         </script>
     </head>
     <body>

         <div class="main">
          <h1>only for</h1>
        </div>

     </body>

 </html>

实现效果如下，可以看到新添加的div的id都是动态生成的。

如果想在新添加的元素中动态添加值，那么实现如下：

 <html>
     <head>
         <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
         <script type="text/javascript">
          $(document).ready(function(){
          $(".main").append("<h2>and me</h2>");

          for(var i=;i<;i++)
          {

            $(".main").append("<div id=\'ul_"+i+"\'> </div>");

            html_p = "<p>"+i+"</p>";
            $('#ul_'+i).append(html_p);
          }
         });
         </script>
     </head>
     <body>

         <div class="main">
          <h1>only for</h1>
        </div>

     </body>

 </html>