jQuery自学（四）——获取网页信息、HTML5新标签、CSS结构性伪类选择器、颜色渐变-白红宇的个人博客

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

发布日期：2021-06-30 16:35:34 浏览次数：2 分类：技术文章

本文共 2664 字，大约阅读时间需要 8 分钟。

获取网页信息

$.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中已经被删除或重新定义。

结构性标签：

<а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 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义 <figure> 元素的标题
	定义 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()

例子：

运行结果：

参考例子：

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

		
   
    asfashfahfka
   
	
   
    lkdofhpod.dkdopb
   
	
   
    sdgdiodfioibod

运行结果：

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

运行结果：

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开始计算*/

例子：

first second third

first

second

third

运行结果：