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

    上改完cv2那个文件夹后,发现在使用导入的cv2中的方法时没有代码提示,于是搞啊搞,终于让我搞坏了mmp,这也太脆弱了. 无奈组装了一个全新的方法 过程比较坎坷也就没怎么记录 我的版本是选择最后一个o ...

  2. vscode跳转到函数定义处

    需要安装对应语言的插件,帮助-欢迎使用,安装javascript, php php还需要安装php7, 到官网https://windows.php.net/download#php-7.2 下载解压 ...

  3. 「AtCoder Grand018B」Sports Festival（暴力）

    题目链接B - Sports Festival 题意 n(1~300)个人m(1~300)个活动,\(A_{ij}\)表示i第j喜欢的活动,每个人选择在举办的活动里最喜欢的,因此可以通过选择一些活动来 ...

  4. python学习日记（生成器函数进阶）

    迭代器和生成器的概念 迭代器 对于list.string.tuple.dict等这些容器对象,使用for循环遍历是很方便的.在后台for语句对容器对象调用iter()函数.iter()是python内 ...

  5. 【luogu3733】【HAOI2017】 八纵八横 （线段树分治+线性基）

    Descroption 原题链接 给你一个\(n\)个点的图,有重边有自环保证连通,最开始有\(m\)条固定的边,要求你支持加边删边改边(均不涉及最初的\(m\)条边),每一次操作都求出图中经过\(1 ...

  6. grafana安装使用及与zabbix集成

    grafana简介Grafana是一个完全开源的度量分析与可视化平台,可对来自各种各种数据源的数据进行查询.分析.可视化处理以及配置告警. Grafana支持的数据源:官方:Graphite,Infl ...

  7. Hdoj 1176.免费馅饼 题解

    Problem Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁 ...

  8. 学习笔记：fhq-treap

    0. 前置知识:\(treap\)的定义 树堆,在数据结构中也称Treap,是指有一个随机附加域满足堆的性质的二叉搜索树,其结构相当于以随机数据插入的二叉搜索树. ​ >--摘自百度百科 形象化 ...

  9. centos7/RHEL7下快速搭建DNS域名解析服务器

    应用场境:此处搭建的DNS(Domain Name Server)更加偏向于企业内部需要一个域名服务器专门用来解析自己局域网内定义的域名: 比如:app1.company.com, app2.comp ...

  10. nodejs的某些api~（一）node的流2

    可写流writablewritable.write(chunk, [encoding], [callback])chunk {String | Buffer} 要写入的数据encoding {Stri ...