ul

on()方法的几种用法

戏子无情 提交于 2019-11-28 14:20:01
 第一种:    $ ( " p " ) . on ( " click " , function ( ) {     alert ( " 段落被点击了。 " ) ;    } ) ;  第二种:   使用on来监控input框在输入的val的长度   <input type="text" class="txt">   $('.txt').on('input',function(){   len=$('.txt').val().length;   console.log(len);  });第三种:  给没有生成的dom添加click事件   <ul class="list">   <li class="list_item">内容一</li>  </ul>  以上HTML在页面加载的时候就会出来,给它加点击事件是没有问题的,但是如果ul里面的内容发生改变,   <li class="list_item1">内容一</li>  这样的话,先的事件就不会执行,那么就需要用到on(),以下是JS代码 $('.list').on('click','.list_item1',function(){ alert('成功了!');}); 来源: http://www.cnblogs.com/qiuchuanji/p/7662181.html

bootstrap-combined.min.css 与 bootstrap.css冲突

亡梦爱人 提交于 2019-11-28 13:22:22
使用 bootstrap-paginator.js 分页组件时,根据github上的demo,需要引入下列css: <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 但是引入 bootstrap-combined.min.css 后,发现和 bootstrap.css 中的一些样式冲突了,导致页面显示不正常。 打开 bootstrap-paginator.js ,搜索 bootstrapMajorVersion , 将: bootstrapMajorVersion2 ,改为 bootstrapMajorVersion: 3 , 同时使用ul来标记分页控件: <ul class="pagination" id="paginator"></ul> 这时候移除 bootstrap-combined.min.css 即可,使用bootstrap 3就可以了。 bootstrap-combined.min.css 是针对bootstrap 2的。 最后打个小广告,闲着没事东拼西凑了个小程序(好多妹子奥😊),闲着无聊的小伙伴帮我扫扫凑凑人数哈: 作者:忧郁的小码仔 链接:https://www.jianshu.com/p

HTML+CSS之金立官网部分实现

送分小仙女□ 提交于 2019-11-28 12:44:16
一、HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>金立手机官网—金立手机及配件官方正品专卖网站_金立全面全面屏s11新品首发</title> <link rel="icon" href="jinli_images/favicon.ico"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/jinli.css"> </head> <body> <!--导航栏开始--> <div class="nav"> <div class="wrap"> <div class="logo"> <img src="jinli_images/logo.png" alt="无法加载该图片"> </div> <div class="nav_right"> <div class="enter"> <ul> <li><a href="#">amigo账号登录</a> | </li> <li><a href="#">原账号登录</a> | </li> <li><a href="#">注册</a></li> <li><a href="#">购物车(0)</a></li> </ul> </div>

DIV+CSS实现旅游网站首页

自古美人都是妖i 提交于 2019-11-28 11:00:33
<!DOCTYPE html>      <html lang="en">      <head>      <meta charset="UTF-8">      <title>旅游网站首页</title>      </head>      <body>      <div>      <img src="../images/header.jpg" style="width:980px;height:237px;" title="天天旅游在线"/>      </div>      <span style="width: 240px;float: left;">      <ul>      <li>旅游须知</li>      <ul>      <li><a href="a1.html">参加旅行社注意事项</a></li>      <li><a href="a1.html">旅游保险常识</a></li>      </ul>      <li>旅游景点</li>      <ul>      <li><a href="b1.html">广场/建筑</a></li>      <li><a href="b2.html">博物馆/纪念馆/展览馆</a></li>      <li><a href="b3.html">主题公园/游乐场</a></li>      <li>

vue

為{幸葍}努か 提交于 2019-11-28 08:35:03
Vue 渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 一、走进Vue 1、what -- 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架 2、why -- 为什么要学习Vue 三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发 3、special -- 特点 单页面web应用数据驱动数据的双向绑定虚拟DOM 4、how -- 如何使用Vue 开发版本: vue.js 生产版本: vue.min.js <div id="app"> {{ }}</div><script src="js/vue.min.js"></script><script> new Vue({ el: '#app' })</script> 二、Vue实例 1、el:实例 new Vue({ el: '#app'})// 实例与页面挂载点一一对应// 一个页面中可以出现多个实例对应多个挂载点// 实例只操作挂载点内部内容 2、data:数据 <div id='app'> {{ msg }}</div><script> var app = new Vue({ el: '#app', data: {

h5-切割轮播图

本秂侑毒 提交于 2019-11-28 08:15:44
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div,ul,li,span{ 8 margin: 0; 9 padding: 0; 10 } 11 .view{ 12 width: 1920px; 13 height: 1080px; 14 margin: 100px auto; 15 position: relative; 16 } 17 ul{ 18 width: 100%; 19 height: 100%; 20 list-style: none; 21 /*transform: rotate3d(1,1,0,-30deg);*/ 22 transform-style: preserve-3d; 23 } 24 ul >li{ 25 width: 20%; 26 height: 100%; 27 float: left; 28 position: relative; 29 transform-style: preserve-3d; 30 /*添加过度效果*/ 31 transition: transform 0.5s; 32 33 } 34 ul > li > span{ 35 width: 100%; 36

xpath语法总结1

本秂侑毒 提交于 2019-11-28 07:22:37
XPath 使用路径表达式来选取 XML或HTML文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。 HTML实例文档 <html><body> <div id="yl_xx"> <span><input type="checkbox" name="chbSave" id="chbSave" value="3436" /> <a href="#" onclick="jumpDown('Details.aspx?id=3436',1)">裸花紫珠片</a></span> <ul>   <li>药品分类:<b><a href="Quadratic.aspx?Query=Med_CategoryID1=8315">抗生素</a>/<a href="Quadratic.aspx?Query=Med_CategoryID2=8322">抗感染植物药</a></b></li>   <li>药物剂型:<b>*片剂:每片含干浸膏0.5g。</DIV></b></li>   <li>适应证:<b>*用于细菌感染引起的炎症,急性传染性肝炎,呼吸道和消化道出血。</DIV></b></li>   <li class="method">用法用量:<b>*口服,一次2片,一天3次。</DIV></b></li> </ul> </div></body></html> 1

二级菜单的制作

你说的曾经没有我的故事 提交于 2019-11-28 06:11:53
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin: 0; padding: 0; } .nav{ list-style: none; width: 300px; margin: 100px auto; } .nav > li{ border: 1px solid #000; line-height: 35px; border-bottom: none; text-indent: 2px; position: relative; } .nav li:last-child{ border-bottom: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .nav li:first-child{ border-top-left-radius: 10px; border-top-right-radius: 10px; } .nav >li > span{ display: inline-block; background-image: url(./img/right.png) ; width: 32px;

自定义侧边栏博客目录

孤街醉人 提交于 2019-11-28 06:08:30
参考: <!-- 目录索引列表生成 --> <script language="javascript" type="text/javascript"> function GenerateContentList() { if ($('#cnblogs_post_body').length == 0) { return; } var jquery_h1_list = $('#cnblogs_post_body h1'); var jquery_h2_list = $('#cnblogs_post_body h2'); var jquery_h3_list = $('#cnblogs_post_body h3'); if (jquery_h1_list.length != 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目录</b></p>'; content += '<ul class="first_class_ul">'; for (var i = 0; i < jquery_h1_list.length; i++) { var go_to_top = '<div style=

摸鱼的前端练习学习笔记(二)

你说的曾经没有我的故事 提交于 2019-11-28 05:43:25
摸鱼的前端练习学习笔记(二) 今天第二天进行独立编写,因为今天要学习ELK,所以只写了一个导航栏,但是还有首尾的位置没有调出来。 HTML 今天加了一个div,在其中使用< ul >标签和< li >标签显示导航栏,在li标签中加入< a >标签,将列表设为超链接。 CSS 在css中将此div设置margin-top,设置距离上一个元素距离,在ul标签中设置每个标签都居中,设置文字大小和字体,设置每个li为左浮。设置li标签风格为none,设置文字行高和div块一样高,设置居顶部高度使之在垂直方向可以居中。 list-style: none; float: left; text-align: center; width: 120px; height: 35px; font-size: 20px; font-family: "宋体"; border-right: #00008B 2px solid; line-height: 35px; margin-top: -15px; 记录一些所学知识: ul标签配合li标签使用 li标签可以设置取消点,list-style:none; 设置边框可以单独设置边框的一边 设置line-height就是设置文字的行高 margin-top等可以为负数 图片在下面,留个记录看看每天的进度 来源: https://blog.csdn.net/qq