HTML5拖放
一、拖放的步骤
- 对象元素的draggable属性设置为true (draggable=“true”)。还需要注意的是a元素和img元素必须指定href。
- 编写与拖放有关的事件处理代码
| 事件 | 描述 |
|---|---|
| dragstart | （对被拖放的元素）开始拖放操作 |
| drag | （对被拖放的元素）拖放过程中 |
| dragenter | （对拖放过程中鼠标经过的元素）被拖放的元素开始进入本元素的范围之内 |
| dragover | （对拖放过程中鼠标经过的元素）被拖放的元素正在本元素范围内移动 |
| dragleave | （对拖放过程中鼠标经过的元素）被拖放的元素离开本元素的范围 |
| drop | （对拖放的目标元素）其他元素被拖放到了本元素中 |
| dragend | （对拖放的对象元素）拖放操作结束 |
二、DateTransfer对象的属性与方法
| 属性 | 描述 |
|---|---|
| dropEffect属性 | 表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值：none、copy、link、move |
| effectAllowed属性 | 用来指定当元素被拖放时所允许的视觉效果，可以指定的值：copy、link、move、copylink、linkmove、all、none、uninitialized |
| types属性 | 存入数据的种类，字符串的伪数组 |
| void clearData(DOMstring format)方法 | 清除DataTransfer对象中存放的数据，如果省略掉参数format就会清楚全部数据 |
| void setData(DOMString format,DOMString data) | 向DataTransfer对象中存入数据 |
| DOMString getData(DOMString format) | 从DataTransfer对象中读取数据 |
| void setDragImage(Element image,long x,long y) | 用img元素来设置拖放图标 |
注：clearData方法可以用于清除DataTransfer对象中的数据
三、设置拖放时的效果
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定，他的值如下：
| 属性值 | 说明 |
|---|---|
| copy | 允许被拖动的元素被复制到项目中 |
| move | 允许将被拖动的元素移动到被拖动的目标元素中 |
| link | 通过拖放操作，被拖动的元素会连接到拖到的目标元素上 |
| copylink | 被拖动元素被复制或链接到拖到的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作 |
| copyMove | 被拖动元素被复制或移动到拖到的目标元素中，根据被拖动的目标元素来决定执行复制操作还是移动操作 |
| linkmove | 被拖动元素被链接或移动到拖到的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作 |
| all | 允许执行所有拖动操作 |
| none | 不允许执行任何拖动操作 |
| uninyialize | 不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能通过effectAllowed属性值来获取 |
注：dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许的值none、copy、link、move。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function allowDrop(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
ev.dataTransfer.dropEffect = 'link'
}
function drag(ev)
{
// 使用setData(数据类型，携带的数据)
// 方法将要拖放的数据存入dataTransfer对象
// ev.clearData();
ev.effeAllowed = 'all';
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
//使用getData()获取到数据，然后赋值给data
var data=ev.dataTransfer.getData("Text");
//使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#tuo{
background: #e54d26;
width: 540px;
height: 320px;
}
#cun{
width: 540px;
height: 320px;
border: 2px solid #D2D2D2;
box-shadow: 1px 4px 8px #646464;
}
</style>
</head>
<body>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="html5.png" id="tuo" draggable="true" ondragstart="drag(event)" width="500" height="280" / >
</body>
</html>
选择器
使用css对HTML页面中的元素实现一对一、一对多或者多对一的控制，这就需要用到CSS选择器。每一条css样式定义由两部分组成，形式如下：
选择器｛样式｝
在｛｝之前的部分就是”选择器“。”选择器“指明了｛｝中的”样式“的作用对象，也就是”样式“作用于网页中的哪些元素。
一、CSS3中的属性选择器
- [att*=val]属性选择器
如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。 - [att^=val]属性选择器
如果元素用att表示的属性的属性值的开头字符为用val指定的字符，那么该元素使用这个样式。 - [att$=val]属性选择器
如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3中的属性选择器</title>
<style>
[id*=section1]{
background: green;
}
[id*=section2]{
background: red;
}
[id*=section1-1]{
background-color: darkgoldenrod;
}
[id*=section]{
background-color: #000;
}
[id^=s]{
background-color: cornflowerblue;
}
[id^=b]{
background-color: hotpink;
}
[id$=e]{
background-color: #000;
}
[id$=\-1]{/*用连接符“-”,必须是"\"加"-"再加数字才行*/
background-color: #000;
}
[id$=_2]{/*"_"可不加"\"*/
background-color: #000;
}
</style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">sectiona</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_3">section2-2</div>
</body>
</html>
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3属性选择器小案例</title>
<style>
a[href$=html]:after{
content: "网页文件";
color: green;
}
a[href$=jpg]:after{
content: "图片文件";
color: green;
}
</style>
</head>
<body>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="anli.html">网站首页</a><br/>
<a href="1.jpg">网站图片</a><br/>
<a href="1.jpg">网站图片</a>
</body>
</html>
二、伪类选择器以及伪元素
- 类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如：
p.left{text-align:left}
p.right{text-align:right} - 伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随便起名，而伪类选择器是CSS中已经定义好的选择器，不能随意起名。
最常见的伪类选择器：
a:link{color:#f60}——未被访问的链接
a:visited{color:#f60}——已被访问的链接
a:hover{color:#f60}——鼠标指针移动到链接上 - 伪元素选择器
伪元素选择器，针对CSS中已经定义好的伪元素使用的选择器。
使用方法：
选择器：伪元素｛属性：值｝
与类配合使用
选择器.类名：伪元素｛属性：值｝ - 四个伪元素选择器
a.first-line
用于向某个元素中的第一行文字使用样式
b.first-letter
用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或是日文等）使用样式
c.before
用于在某个元素之前插入内容
d.after
用于在某个元素之后插入内容
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪类选择器以及伪元素</title>
<style>
:root{
background: #126fb0;
}
body{
background: #ffffff;
}
p.aaas{
text-align: left;
color: red;
}
p.right{
text-align: right;
color: green;
}
a:link{
color: #000;
}
a:visited{
color: fuchsia;
}
a:hover{
color :green;
}
a:active{
color: #ff6600;
}
p:first-line{
color: #f60;
}
p:first-letter{
color: green;
font-size: 24px;
}
li{
list-style: none;
}
li:before{
content:"...";
color: red;
}
li:after{
content: "__after追加";
color: #ff6600;
}
</style>
</head>
<body>
<h1>类选择器</h1>
<p class="aaas">伪类选择器以及伪元素</p>
<p class="right">伪类选择器以及伪元素</p>
<br/>
<a href="index1.html">伪类选择器</a>
<br/>
<p>
在CSS中，主要有四个伪元素选择器<br/>
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
</ul>
</body>
</html>
-
结构性伪类选择器
a.root
将样式绑定到页面的根元素中
b.not
对某个结构元素使用样式，但是不对这个结构元素下面的子结构元素使用
c.empty
指定当元素中内容为空白时使用的样式
d.target
对页面中某个target元素指定样式。该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用not选择器代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>not选择器</title>
<style>
:root{
background: #126fb0;
}
body *:not(h1){
background: #fff;
}
:empty{
background: #ff6600;
}
</style>
</head>
<body>
<h1>not选择器</h1>
<p>not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器</p>
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td></td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td></td>
</tr>
</table>
</body>
</html>
target选择器代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TARGET</title>
<style>
:target{
background: #000;
color: #fff;
}
</style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="B">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="C">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="D">
<h2>标题</h2>
<p>内容.........</p>
</div>
</body>
</html>
- 选择器first-child、last-child、nth-child、nth-last-child
a.first-child
单独指定第一个子元素的样式
b.last-child
单独指定最后一个子元素的样式
c.nth-child
nth-child(n)选择器匹配正数下来第N个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数子元素
d.nth-last-child
nth-child(n)选择器匹配倒数下来第N个子元素
nth-child(odd)选择器匹配倒数下来第奇数个子元素
nth-child(even)选择器匹配倒数下来第偶数子元素
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器first-child、last-child、nth-child和nth-last-child</title>
<style>
/*li:first-child{*/
/*background: #ff6600;*/
/*}*/
/*li:last-child{*/
/*background: green;*/
/*}*/
/*li:nth-child(odd){*/
/*background: red;*/
/*}*/
/*li:nth-child(even){*/
/*background: #ff6600;*/
/*}*/
/*li:nth-last-child(odd){*/
/*background: green;*/
/*}*/
/*li:nth-last-child(even){*/
/*background:gray;*/
/*}*/
/*h2:nth-child(odd){*/
/*color: #ff6600;*/
/*}*/
/*h2:nth-child(even){*/
/*background: #693ada;*/
/*}*/
/*h2:nth-of-type(odd){*/
/*background: #126fb0;*/
/*}*/
/*h2:nth-last-of-type(even){*/
/*background: #f60;*/
/*}*/
/*li:nth-child(3n+1){*/
/*background: #126fb0;*/
/*}*/
/*li:nth-child(3n+2){*/
/*background: #ff6600;*/
/*}li:nth-child(3n+3){*/
/*background: #ff1b00;*/
/*}*/
/*li:nth-child(4n+3){*/
/*background: #000000;*/
/*}*/
/*li:nth-child(4n+4){*/
/*background: green;*/
/*}*/
li:only-child{
background: #ff1b00;
}
</style>
</head>
<body>
<!--<h1>选择器first-child、last-child、nth-child和nth-last-child</h1>-->
<h1>唯一的</h1>
<ul>
<li>第一个项目</li>
</ul>
<h1>很多的</h1>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
</ul>
<!--<div>-->
<!--<h2>标题</h2>-->
<!--<p>内容</p>-->
<!--<h2>标题</h2>-->
<!--<p>内容</p>-->
<!--<h2>标题</h2>-->
<!--<p>内容</p>-->
<!--<h2>标题</h2>-->
<!--<p>内容</p> <h2>标题</h2>-->
<!--<p>内容</p>-->
<!--<h2>标题</h2>-->
<!--<p>内容</p>-->
<!--<h2>标题</h2>-->
<!--<p>内容</p>-->
<!--<h2>标题</h2>-->
<!--<p>内容</p>-->
<!--</div>-->
</body>
</html>
-
选择器nth-of-type和nth-last-of-type
a、nth-child、nth-last-child存在的问题
指定奇数文章的标题背景为黄色，偶数文章的标题为绿色<div> <h2>标题</h2> <p>内容</p> <h2>标题</h2> <p>内容</p> <h2>标题</h2> <p>内容</p> <h2>标题</h2> <p>内容</p> ... </div>b. 使用nth-of-type（正着数）和nth-last-of-type（倒着数）
统计时只针对同类型的子元素进行计算 -
循环使用样式
nth-child(An+B)
A表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置 -
only-child选择器
只对唯一的子元素起作用
扫一扫
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
