jQuery自学（四）——获取网页信息、HTML5新标签、CSS结构性伪类选择器、颜色渐变

空城机
155 阅读5分钟

目录

获取网页信息

HTML5新标签

新的语义和结构元素

拖放事件

CSS结构性伪类选择器

颜色渐变

径向渐变

重复渐变

获取网页信息

$.get( )方法使用GET方式进行异步请求

      $.get(ur1[, data][，callBack][，type] )

  • url:请求的HTML页而的URL地址
  • data:可选参数、发送到服务器的数据
  • callback: 可选参数。规定当请求成功时运行的雨
  • type：可选参数。预计的服务器响应的数据类型默认地，jQuery将 智能判断

      注意: 与load() 方法不同，回调函数只 有当数据成功返回时才能被调用

$.post() 方法使用POST方式获取异步请求

$.post(ur1[, data][，callBack][，type] )

 

HTML5新标签

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能

结构性标签：

<аrtісlе> , <аѕіdе>, <fооtеr>, <hеаdеr>,<nav>, <section>

非结构性标签：

<аudіо>, <vіdео>, <саnvаѕ>,<command>, <datalist>, <details>, <figure>, <mark>,<progress>, <source>, <time>

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签描述
定义页面独立的内容区域。
定义页面的侧边栏内容。
允许您设置一段文本，使其脱离其父元素的文本方向设置。
定义命令按钮，比如单选按钮、复选框或按钮
用于描述文档或文档某个部分的细节
定义对话框，比如提示框
标签包含 details 元素的标题
规定独立的流内容（图像、图表、照片、代码等等）。
定义
元素的标题
定义 section 或 document 的页脚。
定义了文档的头部区域
定义带有记号的文本。
定义度量衡。仅用于已知最大和最小值的度量。
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释（中文注音或字符）。
定义字符（中文注音或字符）的解释或发音。
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
定义文档中的节（section、区段）。
定义日期或时间。
规定在文本中的何处适合添加换行符。

 

拖放事件

拖放事件:

  • dragstart: 网页元素开始拖动时触发。
  • drag:被拖动的元素在拖动过程中持续触发。
  • dragenter:被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
  • dragleave: 被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
  • dragover:被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
  • drop:被拖动元素或从文件系统选中的文件，拖放落下时触发。
  • drogend:网页元素拖动结束时触发。

实现拖放的步骤：

1.将想要拖放的对象元素的draggable属性设置为true  （draggable=“true”）。这样才能将元素进行拖放

2.拖动什么 - ondragstart 和 setData()

3. 放到何处 - ondragover

4. 进行放置 - ondrop和getData()

 

例子：

<style type="text/css">
		div{
			border: 1px solid black;
			width: 600px;
			height: 400px;
		}
	</style>
<body style="position: relative;">
	
	<div id="box1">
		<img src="img/t.jpg" id="img" draggable="true"/>
	</div>
	<div id="box2"></div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			window.onload = function(){
//				var box1 = document.getElementsByClassName("box1");
//				var box2 = document.getElementsByClassName("box2");
				var box1 = document.getElementById("box1")
				var box2 = document.getElementById("box2")
				var img = document.getElementById("img");
				
				img.ondragstart = function(e){
					var data = e.dataTransfer
					data.setData("text/plain",this.id)		
//					console.log("****1*****")
				}
				
				box2.ondragover = function(e){
					e.preventDefault()
//					console.log("****2*****")
				}
				box2.ondrop = function(e){
					//松手
					var data = e.dataTransfer
					var text = data.getData("text/plain")
					//插入
					e.target.appendChild(document.getElementById(text))
//					console.log("****3*****")
				}
				
				box1.ondragover = function(e){
					e.preventDefault()
				}
				box1.ondrop = function(e){
					//松手
					var data = e.dataTransfer
					var text = data.getData("text/plain")
					//插入
					e.target.appendChild(document.getElementById(text))
				}
			}
		})
	</script>
</body>

运行结果：

参考例子： www.runoob.com/try/try.php…

 

例子：使用CSS样式设置前后格式

<style type="text/css">
		div:before{
			content: "***";
		}
		div:after{
			content: "!!!";
			color: red;
		}
	</style>
<body style="position: relative;">
	
	<div>asfashfahfka</div>
	<div>lkdofhpod.dkdopb</div>
	<div>sdgdiodfioibod</div>
	
</body>

运行结果：

 

例子：旋转动画，小圆围绕大圆旋转

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: yellow;
			margin: 100px auto;
			position: relative;
			/*设置动画*/
			animation: run 3s infinite;
		}
		#box:before{
			content: "";
			display: block;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			left: 50%;
			margin-left: -5px;
			top: -5px;
		}
		
		/*动画效果*/
		@keyframes run{
			from{
                    /*
				 webkit:谷歌的前缀
				 moz：火狐前缀
				 ms:IE前缀
				 * */
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				/*-o-transform:rotate(0deg);*/
				transform: rotate(0deg);
			}
			to{
				-webkit-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
				/*-o-transform:rotate(360deg);*/
				transform: rotate(360deg);
			}
		}
	</style>
<body style="position: relative;">	
	<div id="box">
		
	</div>
</body>
</html>

运行结果：

 

 

CSS结构性伪类选择器

 CSS中有如下四种伪元素选择器：

       1）first-line:为某个元素的第一行文字使用样式；

       2）first-letter:为某个元素中的文字的首字母或第一个字使用样式；

       3）before:在某个元素之前插入一些内容；

       4）after: 在某个元素之后插入一些内容；

      使用方法：选择器：伪元素{样式}

      nth-child、nth-last-child、nth-of-type、nth-last-of-type、first-child 、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。

1、nth-child和nth-last-child

   E:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。比如：

      p:nth-child(n){background:red}  表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}/*其中n是从0开始计算*/

例子：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		div:target{
			background-color: red;
		}
	</style>
<body style="position: relative;">
	<p>
		<a href="#box1">first</a>
		<a href="#box2">second</a>
		<a href="#box3">third</a>
	</p>
	<div id="box1">
		first		
	</div>
	<div id="box2">
		second		
	</div>
	<div id="box3">
		third	
	</div>
</body>
</html>

运行结果：

 

颜色渐变

从一个颜色过渡到另一个颜色

例子：从红色到蓝色

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		#box1{
			width: 200px;
			height: 200px;
			/*颜色渐变，三个属性分别设置：渐变方向，第一种颜色，第二种颜色*/
			background: linear-gradient(red,blue);
		}
	</style>
<body style="position: relative;">
	<div id="box1"></div>
</body>
</html>

运行结果：

 

例子：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			margin-bottom: 10px;
		}
		#box1{
			/*颜色渐变，三个属性分别设置：渐变方向，第一种颜色，第二种颜色*/
			background: linear-gradient(red,blue);
		}
		#box2{
			/*从右到左*/
			background: linear-gradient(to left,red,blue,yellow);
		}
		#box3{
			/*右上角到左下角*/
			background: linear-gradient(to left bottom,green,yellow);
		}
		#box4{
			/*deg:角度*/
			background: linear-gradient(70deg,green,red);
		}
	</style>
<body style="position: relative;">
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
	<div id="box4"></div>
</body>
</html>

运行结果：

例子：文字颜色渐变

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 400px;
			height: 200px;
			margin-bottom: 10px;
		}
		#box1{	
			font-size: 50px;	
			font-weight: 1000;
			background: linear-gradient(red,pink,blue);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
	</style>
<body style="position: relative;">
	<div id="box1">发生了什么</div>
</body>
</html>

运行结果：

 

径向渐变

在参数中指定渐变形状：circle（圆形）、  ellipse（椭圆形）

例子：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			margin-bottom: 10px;
		}
		#box1{	
			font-size: 50px;	
			font-weight: 1000;
			background: radial-gradient(circle,red,green);
		}
		#box2{	
			font-size: 50px;	
			font-weight: 1000;
			background: radial-gradient(circle 50px,red,green);
		}
	</style>
<body style="position: relative;">
	<div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

运行结果：

 

重复渐变

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			margin-bottom: 10px;
		}
		#box1{	
			/*后面的参数必须比前面的百分比大*/
			background: repeating-radial-gradient(blue 10%,yellow 20%);
		}
		#box2{	
			background: repeating-radial-gradient(red 20%,black 40%);
		}
	</style>
<body style="position: relative;">
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>

运行结果：

 

 

 

 

一起学习，一起进步 -.- ，如有错误，可以发评论 

avatar
文章
阅读
粉丝