进入到一个项目期中，一边做项目，一边学习其中用到的知识。这些知识都是零碎的，有数据库，有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>

前端下拉框选择和动态生成调用div的更多相关文章

  1. Selenium 3----警告框处理+下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  2. Selenium3 + Python3自动化测试系列八——警告框处理和下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  3. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  4. PHP下拉框选择的实现方法

    实现 第一种PHP下拉框实现方法: < ?php //提交下拉框; //直接饱触发onchange事件的结果 $id=$_GET['myselect']; // myselect 为locati ...

  5. 下拉框选择blur与click冲突问题

    缘由:今天在做下拉框选择时,遇到click和blur冲突问题:具体现象如下 1.intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框 2.点击选择(clic ...

  6. 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  7. Python+selenium之获取文本值和下拉框选择数据

    Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...

  8. jquery根据下拉框选择的值显示输入框

    原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...

  9. js下拉框选择图片

    二种方式:下拉框里面选项有图片与没有图片 1.用下拉框写  下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式. <!DOCTYPE html> <html> ...

随机推荐

  1. 【cf789C】Functions again（最大子序列和）

    C.Functions again 题意 给你一个数组a[1..n].有一个函数\(f(l,r)=\sum_{i=l}^{r-1}\left| a[i]-a[i+1]\right| (-1)^{l-i ...

  2. python学习日记(函数基础)

    修改文件(原理)--回顾 #修改文件(原理) with open('name','r',encoding='utf-8') as f,\ open('password','w+',encoding=' ...

  3. 在 CentOS 上编写 init.d service script [转]

    背景:之前编写了一些脚本,下载了一些开源软件,想把它们做成系统服务,通过 service your_prog_name start 这样的方式来后台运行,并在开机时自动启动.在了解了 daemon 命 ...

  4. 简单聊聊WebSocket

    一.概述 上一篇文章<浅析一次HTTP请求>我们分析了简单的一次 HTTP 请求具体是怎么样完成的,分析了 HTTP 协议的数据结构,如何连接,如何断开,又是如何多路复用的,那么今天我们来 ...

  5. 【UOJ#177】欧拉回路

    [UOJ#177]欧拉回路 题面 UOJ 题解 首先图不连通就没啥好搞的了. 对于无向图而言,每个点度数为偶数. 对于有向图而言,每个点入度等于出度. 然后就是一本通上有的做法,直接\(dfs\)一遍 ...

  6. 一种导致 emwin 中 EDIT 控件不显示的情况

    @2018-12-11 [小记] 设计界面中使用了 EDIT 控件,但在其初始化语句中误使用了 text-color 属性API,导致了控件 EDIT 中的 Text 无法显示,具体如下 hItem ...

  7. python列表转字符串

    temp = "".join(sorted(arr[i])) arr[i] = temp

  8. Haunted Graveyard ZOJ - 3391（SPFA）

    从点(n,1)到点(1,m)的最短路径,可以转换地图成从(1,1)到(n,m)的最短路,因为有负权回路,所以要用spfa来判负环, 注意一下如果负环把终点包围在内的话, 如果用负环的话会输出无穷,但是 ...

  9. IO创建Socket通信中慎用BufferReader中的readLine()

    在编写Socket的Demo的时候,在Server中使用BufferReader获取从客服端发送过来的内容 package cn.lonecloud.socket; import cn.loneclo ...

  10. JavaScript深入之变量对象

    前言 在上篇<javascript深入之执行上下文栈>中讲到,当javascript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution ...