进入到一个项目期中，一边做项目，一边学习其中用到的知识。这些知识都是零碎的，有数据库，有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. 洛谷AT2046 Namori（思维，基环树，树形DP）

    洛谷题目传送门 神仙思维题还是要写点东西才好. 树 每次操作把相邻且同色的点反色,直接这样思考会发现状态有很强的后效性,没办法考虑转移. 因为树是二分图,所以我们转化模型:在树的奇数层的所有点上都有一 ...

  2. 添加默认安全组规则-openstack

    if [ "$1" ] ;then neutron security-group-rule-create --direction ingress --ethertype ipv4 ...

  3. webRequest封装

    from requests.models import Response import requests import random import time class WebRequest(obje ...

  4. 用Python3、NetCore、Shell分别开发一个Ubuntu版的定时提醒（附NetCore跨平台两种发布方式）

    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai Python3 与 C# 基础语法对比:https://www.cnblogs.com/ ...

  5. QML学习笔记（二）-纯qml画图实现canvas画板-鼠标画图

    作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 用纯qml实现canvas画板功能,用鼠标进行画图,可以画直线,画圆,画矩形,画弧线. 由于canvas画图会有延迟和 ...

  6. 洛谷P4319 变化的道路

    题意:给定图,每条边都有一段存在时间.求每段时间的最小生成树. 解:动态MST什么毒瘤...洛谷上还是蓝题... 线段树分治 + lct维护最小生成树. 对时间开线段树,每条边的存在时间在上面会对应到 ...

  7. [luogu1110][报表统计]

    题目链接 思路 set+map+优先队列就可以水过去.可以发现,每插入一个元素,都会使得操作2中原来相邻的那个差值消失,然后多了两个新的差值.对于新的差值,只要直接扔到优先队列里就好了.那么删除呢.可 ...

  8. Ubuntu的 g++ gcc版本升降级

    更改gcc默认版本(gcc版本降级/升级) ### 以降级到gcc-6为例 >* sudo apt install gcc-6 g++-6 >* sudo update-alternati ...

  9. jenkins发版svn

    1.在mac上直接安装Jenkins,下载地址 : 2.安装插件:系统管理-->插件管理 publish over ssh Exec command: cd /usr/local/apache- ...

  10. gradle 的jar下载到哪里了

    很好奇 gradle 的jar下载到哪里了,好顿翻,原来在C:\Users\(你的用户名)\.gradle\caches\modules-2\files-2.1目录下,使用gradle引用lib会先查 ...