ul | 易学教程

Emmet-前端开发神器

阅读更多关于 Emmet-前端开发神器

Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。下载地址 http://emmet.io/download/ 缩写 Emmet使用特殊的表达式Abbreviations，也就是缩写：这种特殊的表达式会被Emmet解析并转义成结构化的代码块。Emmet使用类似CSS选择器的语法来描述元素在DOM树节点的位置和属性。例如 #page>div.logo+ul#navigation>li*5>a{Item $} 会被转义成 <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div> HTML元素在Emmet中可以使用元素名例如 div 或 p 生成HTML标签。Emmet没有预设任何标签名，所以可以使用任何可用名称来生成HTML标签：div → <div></div> 或 foo →

jQuery——jQuery控制css和HTML

阅读更多关于 jQuery——jQuery控制css和HTML

jQuery控制CSS <head> <script type="text/javascript" src="./js/jquery-3.3.1.js"><script> <script type="text/javascript"> $(function(){ //给按钮添加点击事件 $('#btn').click(function(){ //前面设置div样式的简便写法 $('#div1').css('width':200,'height':200,'background-color':red); }); }); </script> </head> <body> <div id="div1"></div> <button id='btn'>点击</button> </body> jQuery控制HTML 添加标签 append()：在被选元素的结尾插入内容 prepend()：在被选元素的开头插入内容 after()：在被选元素之后插入 before()：在被选元素之前插入内容案例： <head> <script type="text/javascript" src="./js/jquery-3.3.1.js"><script> <script type="text/javascript"> $(function(){ //给按钮添加点击事件 $('#btn').click

BeautifulSoup解析（CSS选择器）

阅读更多关于 BeautifulSoup解析（CSS选择器）

CSS选择器通过select()直接传入CSS选择器即可完成选择实例代码如下： html=''' <div class="panel"> <div class="panel-heading"> <h4>Hello</h4> </div> <div class="panel-body"> <ul class="list" id="list-1"> <li class="element">Foo</li> <li class="element">Bar</li> <li class="element">Jay</li> </ul> <ul class="list list-small" id="list-2"> <li class="element">Foo</li> <li class="element">Bar</li> </ul> </div> </div> ''' 1.基本语法 from bs4 import BeautifulSoup soup = BeautifulSoup(html, 'lxml') print(soup.select('.panel .panel-heading'))#选择class的类型 print(soup.select('ul li'))#直接选择标签 print(soup.select('#list-2 .element'))#选择id的类型

展开菜单栏

阅读更多关于展开菜单栏

展开菜单栏教程地址：原文地址（YouTube） B站教程：原文转载（bilibili）两个视频的内容相同，第二个为转载效果图代码区 html < div class = " menu-container " >  < div class = " button " > < p > Menu </ p > < span class = " fas " > </ span >  </ div >  < ul > < li > < a href = " # " > Home </ a > </ li > < li > < a href = " # " > About </ a > </ li > < li > < a href = " # " > Blogs </ a > </ li > < li > < a href = " # " > Contact </ a > </ li > < li > < a href = " # " > Feedback </ a > </ li > </ ul > </ div > CSS @charset "utf-8" ; * { margin : 0 ; /* 外边距 */ padding : 0 ; /* 内边距 */ box-sizing : border-box

jquery之筛选

阅读更多关于 jquery之筛选

1.过滤 eq(index|-index) eq与nth-child eq索引从0开始，若为负数，代表倒序从最后一个开始 nth-child找的也是同级的某个元素，但是索引从1开始 console. log ( $ ( "ul>li" ) . eq ( 1 ) ) ; console. log ( $ ( "ul>li" ) . eq ( -1 ) ) ; console. log ( $ ( "ul>li:nth-child(1)" ) ) ; first() 获取第一个元素 last() console. log ( $ ( "ul>li" ) . first ( ) ) ; console. log ( $ ( "ul>li" ) . last ( ) ) ; hasClass(class) 返回值是布尔类型 console. log ( $ ( "ul>li" ) . hasClass ( "myli" ) ) ; //返回true false filter(expr|obj|ele|fn) 参数写名称时要加 .或者 # console. log ( $ ( "ul>li" ) . filter ( ".myli" ) ) ; //相当于遍历 console.log($("ul>li").filter(function (index, html) { console.

jQuery实现二级菜单显示隐藏动画效果

阅读更多关于 jQuery实现二级菜单显示隐藏动画效果

< ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document < / title > < script src = "./node_modules/jquery/dist/jquery.js" > < / script > < / head > < body > < ul class = "ul0" > < li > 胡歌 < ul > < li > 电影 < / li > < li > 电视剧 < ul > < li > 琅琊榜 < / li > < li > 伪装者 < / li > < li > 猎场 < / li > < li > 仙剑奇侠传 < / li > < / ul > < / li > < li > 话剧 < / li > < li > 音乐 < / li > < / ul > < / li > < li > 朱一龙 < / li > < li > 肖战 < / li > < li > 毛不易 < / li > < / ul > < script > // .ul0最外层ul，事件委托

Jquery使用（三）〜jquery方法

阅读更多关于 Jquery使用（三）〜jquery方法

**html()😗*设置或返回所选元素的内容(等同于js中的innerHTML) **text()😗*设置或返回所选元素的文本内容(等同于js中的innerText) **val()😗*设置或返回表单字段的值(等同于js中的value) css() :获取或设置元素的样式，注意： (属性可以写成如：fontSize，‘font-size’，‘fontSize’) css(参数1)方法，只有一个参数时，返回指定属性名的值 $(’#p1’).css(‘backgroundColor’); css(参数1，参数2)方法，两个参数时，会修改指定属性名的值 $(’#p1’).css(‘backgroundColor’,‘yellow’); css()方法同时设置多个样式属性(链式编程) $(".box").css(“color”,“red”).css(“fontSize”,“30px”); //使用对象的链式写法语法： css({ ‘属性名1’:‘属性值1’， ‘属性名2’:‘属性值2’, ‘属性n’:‘属性值n’ }) 注意：（1）使用对象的链式写法，属性名与属性值之间用冒号（冒号赋值），不同属性之间用逗号间隔（2）最后一个属性结尾，不需要写任何符号 **each(参数1,参数2);**用于循环遍历成员/数据，它常用于多元素或对任意数组和对象属性的循环访问两种写法：写法一目标

[vue]插槽

阅读更多关于 [vue]插槽

插槽 <div id="app"> <todo>  <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script> Vue.component("todo", { template: '<div>' + '<slot name="todo-title"></slot>' + '<ul>' + '<slot name="todo-items"></slot>' + '</ul>' + '</div>' }) Vue.component("todo-title", { props: ['title'], template: '<div>{{title}}</div>' }) Vue.component("todo-items", { props: ['item'], template: '<div>{{item}}</div>'

jQuery实现多级列表（树形菜单）

阅读更多关于 jQuery实现多级列表（树形菜单）

一篇文章掌握boostrap导航菜单

阅读更多关于一篇文章掌握boostrap导航菜单

导航元素使用以无序列表带class .nav开始 class添加 nav-tabs 表示这个是一个标签上导航菜单 nav-pills 表示这个一个胶囊式导航菜单例： <ul class= "nav" > //此时仅仅声明了一个导航元素 <li><a href= "#" >java</a></li> <li><a href= "#" >c语言</a></li> <li><a href= "#" >javascript</a></li> </ul> 标签式导航菜单 < ul class = "nav nav-tabs" > < li > < a href = "#" > java < / a > < / li > < li > < a href = "#" > c语言 < / a > < / li > < li > < a href = "#" > javascript < / a > < / li > < / ul > 胶囊式菜单 < ul class = "nav nav-pills" > < li > < a href = "#" > java < / a > < / li > < li > < a href = "#" > c语言 < / a > < / li > < li > < a href = "#" > javascript < / a > < / li > <

订阅 ul