div标签 | 易学教程

07 前端--JQuery

阅读更多关于 07 前端--JQuery

目录一、JQuery介绍二、JQuery的优势三、JQuery 内容四、JQuery对象五、JQuery创建对象六、JQuery的基础语法 6.1 基本元素选择器 6.2 基本元素筛选器七、属性选择器八、筛选器方法 8.1 查找(find) 8.2 筛选(filter) 九、表单元素选择器十、表单对象属性十一、操作标签 11.1 样式操作(CSS) 11.2 位置操作 11.3 尺寸操作 11.4 文本操作 11.5 属性操作 11.6 porp和attr的区别 11.7 文档处理十二、事件 12.1 常用事件 12.2 事件绑定 12.3 移出事件 12.4 阻止后续事件执行 12.5 组织事件冒泡 12.6 页面加载 12.7 JQ页面加载DOM页面加载的区别 12.8 事件委托十三、动画效果十四、each 一、JQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 二、JQuery的优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器

006 前端基础之Jquery

阅读更多关于 006 前端基础之Jquery

前端之CSS

阅读更多关于前端之CSS

一 CSS介绍　　CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素，给HTML设置样式，让它更加美观。　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二 CSS语法 2.1CSS实例　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。　　　　　　 2.2CSS注释 1 /*这是注释*/ 三 CSS的几种引入方式 3.1行内样式　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 1 <p style="color: red">Hello world.</p> 3.2内部样式　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： 1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 p{ 6 background-color: #2b99ff; 7 } 8 </style> 9 </head> 3.3外部样式　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 1 <link href="mystyle.css" rel="stylesheet"

div相对定位于绝对定位

阅读更多关于 div相对定位于绝对定位

一、CSS中的块模型在CSS的定义中，有的html标签被浏览器当成一个块来显示，比如div、table、p、ul等等，我们称之为块元素；有的html标签被浏览器显示在文本行之间，如a、span、font等等，我们称之为行内元素。行内元素我这里就不讲了，只讲讲块元素的模型。每一个块元素都可以分为context、padding、boder和margin几个部分，我们常说的宽和高，通常指的是context的宽和高(也有可能是context+padding,具体跟浏览器有关)，padding代表内容和边框之间的填充，margin代表边框之外的空白，如上图：这几个部分都是可以通过CSS进行指定的，当然，CSS还可以控制背景，因此，我们可以通过CSS来灵活控制我们页面的外观。二、CSS中的文档流模型所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的（当然，嵌套不在此列），每一个块都会另起一行。如下图他们对应的html如下： <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> 为了定义他们的宽度、高度还有边框，我们定义如下的CSS： #div1 { border: 1px solid #000099; height: 60px; width: 200px;

div拖拽的问题

阅读更多关于 div拖拽的问题

今天看到一篇写的很好的文章，摘抄如下：思路父盒子相对定位，子元素，也就是被拖拽的元素绝对定位当鼠标在子元素中按下时，绑定鼠标移动事件，根据鼠标位置改变元素位置设置鼠标当前位置（offsetX,offsetY,这时和父的相对位置）为元素的中心位置移动时改变位置css中的left为offsetX...的位置当鼠标离开时，解绑鼠标移动事件实现过程（一） css 部分 .decision-box{ position: relative; width: 1500px; height: 600px; border: 1px solid #000; border-radius: 6px; /*margin-left: -40px;*/ } .item{ position: absolute; width: 50px; height: 30px; background: green; border-radius: 6px; text-align: center; line-height: 30px; cursor: pointer; left: 50px } html 部分 <div class="decision-box decision_box"> <div class="item">1</div> <div class="item">2</div> <div class=

关于div的几个问题

阅读更多关于关于div的几个问题

1.div默认位置是？　　div是块级标签，会独占一行。可以理解为一个容器，如果里面嵌套元素，或者文字可以根据里面的内容自适应宽高。如果不设置宽度，那么宽度将默认变为父级的100%。这里的父级就是body.body是默认有内边距的，内边距是用padding设置的。一般浏览器中都对body标签进行默认的margin设置为 8px ，设置body{margin:0px;padding:0px;} // 清除默认样式为什么给body设置padding:0px不能消除内边距，而设置margin:0px却能够消除内边距？关于这个问题： 1. 每种浏览器都有一套默认的样式表，在网页制作过程，没有指定相应的样式时，就会按照浏览器内置的样式表来渲染。 2. 举例说，IE6、IE7的body标签，默认的样式应该是：display:block;margin:15px 10px;zoom:1;（不是很确定），而没有预设padding值，chrome/firefox也只是设置了margin:8px;没有预设padding，从此可见，设置margin:0;即可消除边距了，这点可以通过简单的试验得出结果了。 3. 注意不同的浏览器甚至同个浏览器不同版本的默认样式是不同的。body标签分别将margin和padding都重置为0这是网络上广为流传的重置方法，应该是比较可靠的了。 4.

前端之jQuery基础

阅读更多关于前端之jQuery基础

COPY自强仔找到div标签并给div标签设置为红色 // 原生js操作 var d1Ele = document.getElementById('d1'); d1Ele.style.color = 'red'; // jQuery操作 $('#d1').css('color','blue'); 基础语法 $(selector).action() // 样式演变，原本应该 jQuery(); // 为了简化 $(); 基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class选择器： $(".className") 配合使用： $("div.c1") // 找到有c1 class类的div标签所有元素选择器： $("*") 组合选择器： $("#id, .className, tagName") 层级选择器： x和y可以为任意选择器 $("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y 基本筛选器： :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd //

div水平垂直居中方法及优缺点

阅读更多关于 div水平垂直居中方法及优缺点

代码： <div class="father"> <div class="son"> </div> </div> 方案一： div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持　　　　.father{ 　　　　　　　　width：400px; 　　　　　　　　height:400px; background: red; 　　　　　　　　position:relative; /* 或者 position:absolute;*/ 　　　　} 　　　　.son{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 优点：简单缺点： IE(IE8 beta)中无效无足够空间时， .son 被截断，但是不会有滚动条出现方案二： div绝对定位水平垂直居中【margin 负间距】这或许是当前最流行的使用方法。　　　　.father{ 　　　　　　　　width：400px; 　　　　　　　　height:400px; background: red; 　　　　　　　　position:relative; /* 或者 position

认识div在排版中的作用

阅读更多关于认识div在排版中的作用

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个 <div> 标签中，这个<div>标签的作用就相当于一个容器。语法： <div>…</div> 确定逻辑部分：什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用 <div> 标签作为容器。实例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div标签</title> </head> <body> <div> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </div> <div> <h2>最新课程排行</h2> <ol> <li>版本管理工具介绍—Git篇 </li> <li>Canvas绘图详解</li> <li>QQ5.0侧滑菜单</li> </ol> </div> </body> </html> 浏览器输出：热门课程排行榜前端开发面试心法零基础学习html javascript全攻略最新课程排行

<div>标签

阅读更多关于标签

<div> </div> 实际没有什么意义放在没有任何作用，把他看成一个盒子或者是塑料袋，用来装东西。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, maiores, ipsa. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, maiores, ipsa. </p> </div> </body> </html> 现在在外面放入了一个<div><./div>他并没有影响里面内容的布局。来源： https://www.cnblogs.com/qf928/p/11396710.html

订阅 div标签