ul | 易学教程

2.数据绑定、循环语法

阅读更多关于 2.数据绑定、循环语法

数据绑定与循环语法 <template> <div id="app"> <p>{{msg}}</p> <br> <p>我公司的名字是：{{obj.company}}</p> <br> <ul> <li v-for="(item,index) in list" :key=index> {{item}} </li> </ul> </div> </template> <script> export default { name: 'app', data () { return { msg:'hello world', obj:{company:'落忆网络科技有限公司'}, list:['111','222','333'] } } } </script> <style> </style> 效果图来源： https://www.cnblogs.com/xuepangzi/p/11577839.html

js特效-下拉菜单

阅读更多关于 js特效-下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul, li { list-style: none; padding: 0; margin: 0; cursor: pointer; } a { text-decoration: none; } .nav { width: 420px; font-size: 12px; } .nav>li { width: 100px; display: inline-block; position: relative; text-align: center; } .nav>li>a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display:

XPath匹配含有指定文本的标签---contains的用法

阅读更多关于 XPath匹配含有指定文本的标签---contains的用法

1、标签中只包含文字 <div> <ul id="side-menu"> <li class="active"> <a href="#"> 卷期号： </a> </li> </ul> </div> 取包含 '卷期号' 三个字的节点 //ul[@id='side-menu']/li/a[contains( text() ,"卷期号")] 取其内容 //ul[@id='side-menu']/li/a[contains( text() , '卷期号')]/ text() 运行结果： 2、文字没有被一个明确的标签包裹 <div> <ul id="side-menu"> <li class="active"> <a href="#"> <i>DOI</i> 卷期号： <span>xxxx</span> </a> </li> </ul> </div> 再用上边的xpath表达式就到不到了, 不过可以借助 string() ，将a 标签里边的东西全部转换成字符串 , 再用contains判断： //ul[@id='side-menu']/li/a[contains(string(), '卷期号')]/text()运行结果：来源： https://www.cnblogs.com/liangmingshen/p/11567780.html

响应式选项卡

阅读更多关于响应式选项卡

响应式选项卡网页展示：编辑器制作效果展示：代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d {position: absolute;margin: auto;left: 0;right: 0;width: 50%;min-width: 400px} #u {display: flex;height: 50px} #u li {text-align: center;line-height: 50px;list-style: none;flex: 1;margin-left: 10px} #u li:hover {background-color: #02B2B5;color: white} #d1 ul {display: none;flex-flow: column wrap;height: 800px} #d1 ul li {background-size: cover;list-style: none;height: 210px;margin: 15px;width: 50%} #d1 ul:nth-child(1) li {background: url("img/1.PNG") no-repeat} #d1 ul li

div布局ul时，竖向转横向

阅读更多关于 div布局ul时，竖向转横向

<html><head><meta charset="UTF-8"> <title >Css学习</title>  <link rel="stylesheet" href="style1.css" />  <style> #menu li{ display: inline; height: 0rem; } </style></head><body ><div id="menu"> <ul> <li><a href="C:/Users/MrLi/Desktop/HTML/918.html">首页</a></li> <li><a href="#">百度一下</a></li> <li><a href="#">学习首页1</a></li> <li><a href="#">学习首页2</a> </li> </ul></div></body></html>---------------------------------------------------------- 未转前转后来源： https://www.cnblogs.com/liyunchuan/p/11561247.html

jQuery实例方法 — 动画

阅读更多关于 jQuery实例方法 — 动画

动画相关方法 hide()隐藏、show()展示、toggle() // 移入p标签ul显示，移出整体时隐藏ul < style > .demo { width : 100px ; border : 1px solid black ; } ul { display : none ; } </ style > < div class = " demo " > < p > Rose </ p > < ul > < li > li-1 </ li > < li > li-2 </ li > < li > li-3 </ li > </ ul > </ div > // 由hide转为show时，你没有设置display属性时它会给你添加默认的，这个就会给ul添加block属性，添加了属性时按照你添加的来，且它们会把透明度宽高等一起变化 $ ( 'p' ) . on ( 'mouseenter' , function ( ) { $ ( this ) . next ( ) . show ( 3000 , 'swing' ) ; // 利用3秒将这个ul显示出来，第二个参数是你以什么运动方式显示出来，swing先慢再快再慢 } ) ; $ ( '.demo' ) . on ( 'mouseleave' , function ( ) { $ ( 'ul' ) . hide ( 3000 ,

五角星评分

阅读更多关于五角星评分

案例分析： 1，鼠标经过每个 li , 当前 li 以及前面当前这个 li 前面所有的 li 都变成实心 2，鼠标离开 ul ,所有的 li 都变成空心 3，如果点击了某个 li , 鼠标离开 ul 的时候，点击的这个 li 以及这个 li 之间的所有 li 都变成实心 4，因此，当点击了某个 li ，要记录这个li , 给这个 li 一个标记 clsss类标记 "current"等。 jQuery代码： var wjx-k="☆"; var wjx-s="★"; $(" ul > li").on("mouseenter" , function(){ $(this).text(wjx-s).prevAll().text(wjx-s); $(this).nextAll().text(wjx-k); }) $("ul").on("mouseleave" , function(){ $(this).children().text(wjx-k); $("ul > li.current").text(wjx-s).prevAll.text(wjx-s); }) $("ul > li").on("click" , function(){ $(this).addClass("current").siblings().removeClass("current"); }) 完整代码： <

JS ul li 任意拖动位置

阅读更多关于 JS ul li 任意拖动位置

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <style> ul { list-style: none; margin: 200px; font-size: 0; } .ele { font-size: 16px; width: 100px; height: 40px; border: 1px solid #999; background: #EA6E59; margin: 2px 0; border-radius: 10px; padding-left: 10px; color: white; cursor: move; } </style> <form id="form1" runat="server"> <div> <ul id="container"> <li class="ele" draggable="true">1</li> <li class="ele" draggable="true">2</li> <li class="ele" draggable

html标签 —— 块级元素

阅读更多关于 html标签 —— 块级元素

阅读目录：标题 h1 h2 h3 h4 h5 h6 列表 ol ul li　 dl dt dd 排版标签 p div hr center pre 表格 table 表单 form 回到顶部 h1-h6 标题使用 <h1> 至 <h6> 标签进行定义。 <h1> 定义最大的标题， <h6> 定义最小的标题。具有align属性，属性值可以是：left、center、right。 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> 效果回到顶部列表列表又分为三种，有序列表ol，无序列表ul和定义列表dl。其中ol和ul必须结合li标签使用，而dl则必须结合dt,dd使用。 ol ordered list 有序列表 li list item，列表项 ul unordered list 无序列表 li list item，列表项 dl definition list 定义列表 <dt> ：definition title 列表的标题，这个标签是必须的 <dd> ：definition description 列表的列表项，如果不需要它，可以不加需要注意的是：　　li不能单独存在，必须包裹在ul或者ol里面；反过来说，ul的“儿子”不能是别的东西，只能有li。　

事件委托

阅读更多关于事件委托

事件委托事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同响应。举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类的所有事件。 <button id="btnAdd">添加</button> <ul id="ulList"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var btnAdd = document.getElementById('btnAdd'); var ulList = document.getElementById('ulList'); var list = document.getElementsByTagName('li'); var num = 3; btnAdd.onclick = function () { num++; var li = document.createElement('li'); li.innerHTML =

订阅 ul