前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,“2可以是你想要的数字” .demo01 li:nth-child(2){background:#090} :nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同 点此查看实例展示 .

$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; ; i < len; i++){ $("input[type='file']").eq(i).click(function(){ $(this).next().val(""); $(this).next().hide(); $(this).css("width&q

上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么今天就是来实战一下,写一个所有平台都能跑的页面出来. 首先我们要准备了解的基本知识如下,在H5开发中,我们的页面布局方式有 1. 默认布局(块状元素和内联元素) 2. 浮动布局(Float) 3. 定位布局(position: relative, absolute, top, left, right

一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐心的直接看最后解答. 1. 我的第一反应: <div style="width:500px;"> <div id="px1" style="float:left; height:100px; width:150px; background-c

//获取element上一个兄弟元素 function getPreviousElementSibling(element){ //能力检测 判断是否支持PreviousElementSibling if(element.previousElementSibling){ return element.previousElementSibling; }else{ //获取上一个兄弟节点 var node = element.previousSibling; //如果没有上一个节点,此时null w

//获取element下一个兄弟元素 function getNextElementSibling(element){ //能力检测 判断是否支持nextElementSibling if(element.nextElementSibling){ return element.nextElementSibling; }else{ //获取下一个兄弟节点 var node = element.nextSibling; //如果没有下一个节点,此时null while(node && node

需要用到的两个属性:previousSbiling和previousElementSibling previousSibling:获取元素的上一个兄弟节点:(既包含元素节点.文本节点.注释节点) previousElementSibling:获取上一个兄弟元素节点:(只包含元素节点): 这个两个方法的区别,直接在控制台打印一下就知道了. 所以一般我们会用previousElementSibling

CSS drop down的一个很好的示例: http://www.runoob.com/css/css-dropdowns.html

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings(),返回兄弟姐妹节点,不分前后

最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到的新知识:如何用 CSS Grid 布局制作一个普通的响应式柱状图.先上效果图: 这篇文章的示例只是一个试验,用来学习 CSS Grid 布局,加上本人也是现学现卖,所以本文出现的代码不具有太多的参照意义. 第一个简单版本 第一眼看上去可能会有点不知道怎么开始,因此我们先来关注如何创建一个简单的版本

要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } 获得上一个兄弟元素节点: function getPrevElement(element) { var el

前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局]   从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li

① $(this).next():        获取的是当前元素的下一个兄弟元素 ②$(this).nextAll();       获取的是当前元素的后面的所有的兄弟元素 ③$(this).prev();           获取的是当前元素的前一个兄弟元素 ④$(this).prevAll();       获取的是当前元素的前面的所有的兄弟元素 ⑤$(this).siblings();      获取的是当前元素的所有的兄弟元素(自己除外) 案例练习: 需求分析:鼠标进入文字,当前文字背

jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents()            //查找下面的所有内容,包括节点和文本. jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点 jQue

最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx_x_x("dom"); var b = a.childNodes;      获取a的全部子节点      var c = a.parentNode;     获取a的父节点      var d = a.nextSbiling;     获取a的下一个兄弟节点      var e =

转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素   原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 这样是没有问题的 此时a.length=2: 但是如果我们换另一

样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @media screen and (orientation: portrait) {     html{         width : 100vmin;         height : 100vmax;     }     body{         width : 100vmin;         height : 1

一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则返回空数组 $(selector).parents(selector):获取祖先元素 二.jQuery的兄弟节点查找方法 $(selector).prev()   /   $(selector).previousSibling():获取上一个兄弟节点 $(selector).prevAll():获取

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents

Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏布局自适应: 代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位法</title> <style>  .pa

个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAuto">margin,text-align;水平居中</div> /* margin:0 auto; 设置块元素(或与之类似的元素)的水平居中 text-align:center;设置文本或img标签等一些内联对象(或与之类似的元素)的水平居中 line-height:;高度设置为