大家好,又见面了,我是你们的朋友全栈君。 html中偶尔会使用到列表,记录一下。 1 9 10 11 12 列表使用test: 13 ul...class = "level_1"> 14 li> 15 亚洲 16 ul class = "level_2"> 17 li>中国li> 18 li>日本li> 19 ul> 20...li> 21 li> 22 欧洲 23 ul class = "level_2"> 24 li>德国li> 25 li>意大利li> 26 ul> 27 li> 28 ul> 29 30 1.
在HTML中,有序列表(ol)和无序列表(ul)元素通常会默认有一定的内边距(padding)和外边距(margin),这是由浏览器默认样式表所定义的。...这些内边距和外边距可能导致列表向左偏移,从而出现左边超出的情况。...具体来说,ol和ul元素的默认样式表通常会定义: padding-left:列表项左侧的内边距,默认为 40px(不同浏览器可能略有不同)。...margin-left:列表元素左侧的外边距,默认为 0。 因此,当你在HTML中使用ol或ul元素时,它们的左边可能会默认超出。...解决 /* 去掉有序列表和无序列表的默认样式 */ ol, ul { margin: 0; padding: 0; list-style-type: none; } /* 为有序列表添加数字编号
]中的值,会有未定义的错误出现tapLi[j].className="" ; /这里的tapLi[j]==tapLi[i]的值吗?...分别是0, 1, 2.对应到html中,就是第一个li、第二个li、第三个li的className都成了0.这样先全部清除掉,到了下边j循环外,this.className处,再把点击的对应的li加上className...具体原理明白就是说不出来,反正就是死记硬背知道这种方式,是用来对一个获取到的数组进行重新从零开始编号就对了,以方便下边获取他的下标索引对齐进行对应的操作 // alert(tapLi[i].index...分别是0,1,2.对应到html中,就是第一个li、第二个li、第三个li的className都成了0.这样先全部清除掉,到了下边j循环外,this.className处,再把点击的对应的li加上className...,使用的tagname获取的三个div // alert('yes'); arr = divs[j]; // alert(divs[j]); } } */ */
一般情况下对文章列表的调用,通常使用ul循环li标签。受页面模块宽度的的限制,一般需要对li进行文本内容溢出隐藏处理,实现更加合理的排版。...尝试通过对li追加display:inline-block;或者display:block;变成块级元素后,li标签的list-sytle属性又失效了,成了一种顾此失彼的状态。...解决方法二 雅兮网同学给了一个曲线救国的办法。通过对li标签内的a标签追加display:inline-block;属性。...Chrome下还需要补充vertical-align: top;或者vertical-align: middle;来达到li标签和a标签在同一行内问题。...根据现实效果需要,还可能需要对li定义行高问题。
【01-让div显示与设置内容.html】 使用javascript开发过程中,有许多的缺点: 1. 查找元素的方法太少,麻烦。 2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。 3....3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678) 关于压缩版和未压缩版 jquery-1.12.4.min.js:压缩版本,适用于生产环境...DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。...2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...>我是第6个lili> li>我是第7个lili> li>我是第8个lili> li>我是第9个lili> li>我是第10个lili> ul> <script
所以,在事件处理函数中声明1个形参用来接收事件对象。 ? 事件对象的兼容性处理 事件对象本身的获取存在兼容问题: 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。...和this ul> li>abcli> li>abcli> li>abcli> ul> ...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: 咱们班有100个学生,快递员有100个快递, 如果一个个的送花费时间较长。...事件委托的作用 我们只操作了一次 DOM ,提高了程序的性能。 动态新创建的子元素,也拥有事件。 ul> li>知否知否,点我应有弹框在手!...li> ul> // 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点 var ul = document.querySelector
) 小案例 ———- 开光灯 方法 text() 获取和设置文本内容 text() 方法不写参数获取文本 text() 方法写参数设置文本 如果设置的文本中包含标签,是不会把这个标签给解析出来的$...’) 并集选择器 $(‘.hf, .wsy’) 交集选择器 $(‘li.nj’) li标签下的类名为nj的选择器 层级选择器 子代选择器 $(‘ul>li’) 后代选择器 $(‘ul...li元素中,选择所要为奇数的元素 :even $(li:even) 获取到的li元素中,选择所要为偶数的元素 名称 用法 描述 :eq(index) $(“li:eq(2)”) 获取到的li元素中,...选择索引号为2的元素,索引号index从0开始 :odd $(li:odd) 获取到的li元素中,选择所要为奇数的元素 :even $(li:even) 获取到的li元素中,选择所要为偶数的元素 ###...(‘li’) 相当于$(‘ul>li’),子类选择器 find(selector) $(‘ul’).find(‘li’) 相当于$(‘ul li’) 后代选择器 siblings(selector)
和this ul> li>abcli> li>abcli> li>abcli> ul> ...js事件中的代理: ul> li>知否知否,应该有弹框在手li> li>知否知否,应该有弹框在手li> li>知否知否,应该有弹框在手li>...li>知否知否,应该有弹框在手li> li>知否知否,应该有弹框在手li> ul> 点击每个 li 都会弹出对话框,以前需要给每个 li 注册事件,是非常辛苦的...动态新创建的子元素,也拥有事件。 ul> li>知否知否,点我应有弹框在手!li> li>知否知否,点我应有弹框在手!...li> ul> // 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点 var ul = document.querySelector
和this ul> li>abcli> li>abcli> li>abcli> ul> ...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: ? js事件中的代理: ?...以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul上, ul有注册事件,就会触发事件监听器。...事件委托的作用 我们只操作了一次 DOM ,提高了程序的性能。 动态新创建的子元素,也拥有事件。 ul> li>知否知否,点我应有弹框在手!...li> ul> // 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点 var ul = document.querySelector
删除 ul> li>熊大li> li>熊二li> li>光头强li> ul> // 1.获取元素 var...ul.insertBefore(li, ul.children[0]); // (3) 删除元素 删除的是当前链接的li 它的父亲 var as = document.querySelectorAll...所以,在事件处理函数中声明1个形参用来接收事件对象。 事件对象的兼容性处理 事件对象本身的获取存在兼容问题: 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。...>abcli> li>abcli> li>abcli> ul> var ul = document.querySelector('ul'); ul.addEventListener...生活中的代理 js事件中的代理 事件委托的原理 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。
删除 ul> li>熊大li> li>熊二li> li>光头强li> ul>...; ul.insertBefore(li, ul.children[0]); // (3) 删除元素 删除的是当前链接的li 它的父亲...ul> li>1111li> li>2li> li>3li> ul> var ul...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: ? js事件中的代理: ?...动态新创建的子元素,也拥有事件。 ul> li>知否知否,点我应有弹框在手!li> li>知否知否,点我应有弹框在手!
✍️ 作者简介: 前端新手学习中。...,但是set类型中的值不能重复。...数组中的值可以重复 let arr = [1, 2, 2, 1] console.log(arr);//[ 1, 2, 2, 1 ] let set = new Set() set.add(1)...(function (value) { ul.innerHTML += `li>${value}li>` })...li> li>坚毅的小解同志删除li> ul> class Todo
{ divs[i].style.display = "block"; } }; btn2.onclick = function(){ for(var i=0; idivs.length...jquery api 文档 开发环境,测试环境,生产环境 git svn $(function(){ // 写jquery入口函数的第二种方法 }); jq对象和Dom对象 ul> li>...,用来方便我们找页面中的元素,jquery选择器返回的是jquery对象。...:first 获取第一个元素 示例: 获取匹配的第一个元素 ul> li>1li> li>2li> ul> $('li:first'); 基本选择器: ul> li>1二级菜单li> li>二级菜单li> ul> li> ul> </div
ul> li>l1li> li>l2li> li>l3li> ul> <script...= d3.selectAll("div"); alerts = d3.selectAll(".alert"); lis = d3.selectAll("ul li") //-----...selection.property(name,value) name:属性名value:属性值 value为空时,返回当前属性值Value非空是,设置name属性改为value值 selection.text() 文本内容,不包含其他元素标签...(func) func:函数 根据func函数规则来排序 attr() 不能应用到文本框,复选框等一部分组件中,需要用property来获取值和设置值 设置文本空的值 d3.select("#email...dataset, accessor ) 标准差 Accessor:数据访问器 min = d3.min( dataset, function(d) { return d*3 }); 在所有的统计函数中,
去掉了 JS 中的 .on 语法。 代码实现 <!...; }); 解绑事件 如果不指定事件名称,则会把该对象绑定的所有事件都解绑 //jQuery 对象.off(事件名称); //通过btn2解绑btn1的单击事件 $("#btn2").on("click...事件 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。 on(事件名称,执行的功能):绑定事件。 off(事件名称):解绑事件。 遍历 传统方式。...li id="sz">深圳li> ul> ul id="desc"> li id="jy">加油li> li id="xq">雄起li> ul>
大概是这样子: html: ul> li>0li> li>1li> li>2li> ul> 复制代码 js: var li = document.querySelectorAll...场景还原: html: ul> li>0li> li>1li> li>2li> ul> add 复制代码...从1000到5000中取出全部每一位数字的和为5的数 问题少年:rt,求一个快一点的方法 路人甲: Array(4000).fill(1001).map((v,i)=>v+i).filter(n=>(n...后端不帮我分页,前端分页怎么容易一点 问题少年:是个人中心来的,数据不多,而且用户一般都会一页页去浏览全部数据的,因为这些消费数据必须全部看一遍才能了解到情况 路人甲:拿到全部数据后,根据每页数据和第几页...我也是学了半年的菜鸟,很多应用场景的经验不足。但是有的人,工作了几年还写出一些无脑的代码,代码中又暴露了各种细节没怎么处理。
大概是这样子: html: ul> li>0li> li>1li> li>2li> ul> js: var li = document.querySelectorAll('...场景还原: html: ul> li>0li> li>1li> li>2li> ul> add js:...从1000到5000中取出全部每一位数字的和为5的数 问题少年:rt,求一个快一点的方法 路人甲: Array(4000).fill(1001).map((v,i)=>v+i).filter(n=>(n...后端不帮我分页,前端分页怎么容易一点 问题少年:是个人中心来的,数据不多,而且用户一般都会一页页去浏览全部数据的,因为这些消费数据必须全部看一遍才能了解到情况 路人甲:拿到全部数据后,根据每页数据和第几页...我也是学了半年的菜鸟,很多应用场景的经验不足。但是有的人,工作了几年还写出一些无脑的代码,代码中又暴露了各种细节没怎么处理。
用python实现的抓取腾讯视频所有电影的爬虫 ##完整代码 # -*- coding: utf-8 -*- import re import urllib2 from bs4 import BeautifulSoup...time import pymongo NUM = 0 #全局变量,电影数量 m_type = u'' #全局变量,电影类型 m_site = u'qq' #全局变量,电影网站 #根据指定的URL...class="mod_list_pic_130"> divs = soup.find_all('ul', {'class' : 'mod_list_pic_130'}) #print divs...) def getmovie(html): global NUM global m_type global m_site re_movie = r'li>li>' p = re.compile(re_movie, re.DOTALL) movies = p.findall(html) if movies: conn = pymongo.Connection
用python实现的抓取腾讯视频所有电影的爬虫 # -*- coding: utf-8 -*- import re import urllib2 from bs4 import BeautifulSoup...class="mod_list_pic_130"> divs = soup.find_all('ul', {'class' : 'mod_list_pic_130'}) #print...divs for div_html in divs: div_html = str(div_html).replace('\n', '') #print div_html...div_html) def getmovie(html): global NUM global m_type global m_site re_movie = r'li...li>' p = re.compile(re_movie, re.DOTALL) movies = p.findall(html) if movies: conn
li>5li> //这里是整个body中的li,返回的是元素对象集合 var lis = document.getElementsByTagName...console.log(iterator); } //当li为空,仍旧返回数组,但为空数组(伪数组) //我们可以单独获得ol中的li...('li'); // 添加节点 var ul = document.querySelector('ul'); ul.appendChild(li);...指向的永远是ul console.log(this); // 这里target,当你点击的是li时,返回的对象是li console.log...值(具有兼容性,推荐) 注意: keyup和keydown事件中不区分大小写,均为大写输出 keypress事件区分大小写,A:65,a:97 案例展示: <!
领取专属 10元无门槛券
手把手带您无忧上云