进入到一个项目期中，一边做项目，一边学习其中用到的知识。这些知识都是零碎的，有数据库，有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. [ZJOI2015]地震后的幻想乡(期望+dp)

    题目描述 傲娇少女幽香是一个很萌很萌的妹子,而且她非常非常地有爱心,很喜欢为幻想乡的人们做一些自己力所能及的事情来帮助他们. 这不,幻想乡突然发生了地震,所有的道路都崩塌了.现在的首要任务是尽快让幻想 ...

  2. 蓝桥杯 错误票据 （stringstream的使用）

    题目链接:http://lx.lanqiao.cn/problem.page?gpid=T28 问题描述 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号.全年所有票据的ID号是 ...

  3. Servlet -- 重定向

    重定向的两种方式: 1: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws S ...

  4. return break continue的区别 js java

    return :结束函数的执行, return后面的所有代码都不再执行 break: 结束循环, 执行循环后面的代码(如果有的话) continue: 结束本次循环, 循环变量继续递增或递减, 开始下 ...

  5. 在MacOS上使用gdb(cgdb)调试Golang程序

    如果你在MacOS上使用GDB工具载入Golang程序时无法载入,这篇文章可以解决.本文不具体介绍调试的方法,网上的文章太多了就不赘述了. cgdb使用的是gdb的内核,方法和原理试用本文. 问题分析 ...

  6. Arch Linux中使用VMware Workstation不能打开vmmon内核模块

    打开VMware Workstation出现错误提示:Could not open /dev/vmmon: No such device.Please make sure that the kerne ...

  7. A1112. Stucked Keyboard

    On a broken keyboard, some of the keys are always stucked. So when you type some sentences, the char ...

  8. JAVA概述 也许你会豁然开朗

    1.JDK:Java Development Kit,java的开发和运行环境,java的开发工具和jre. 2.JRE:Java Runtime Environment,java程序的运行环境,ja ...

  9. 团体程序设计天梯赛(CCCC) L3012 水果忍者 上凸或下凹的证明

    团体程序设计天梯赛代码.体现代码技巧,比赛技巧.  https://github.com/congmingyige/cccc_code #include <cstdio> #include ...

  10. haploview出现“results file must contain a snp column”的解决方法

    将plink文件用“--recode HV ”的参数生成即可 /software/plink --file yourfile --recode HV --snps-only just-acgt --o ...