html5与css3的特性、jq的选择器、ajax运用场景、跨域、json、vue组件

1、html5和css3的特性

html5：

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

 

css3:

• CSS3实现圆角（border-radius），阴影（box-shadow），
• 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
• 增加了更多的CSS选择器  多背景 rgba 
•  在CSS3中唯一引入的伪元素是 ::selection.
• 媒体查询，多栏布局
• border-image

2.jq的选择器

https://blog.youkuaiyun.com/qq_37212162/article/details/78514418

• 基本选择器

选择器	描 述	返回	示例
#id	根据给定id匹配一个元素	单个元素	$("#test") 选取id为test的元素
.class	根据给定类名匹配一个元素	集合元素	$(".test") 选取class为test的元素
element	根据给定元素名匹配一个元素	集合元素	$("p") 选取p元素
selector1,selector2...selectorN	将每一个选择器匹配到元素合成后一起返回	集合元素	$("div , span ,p , myClass")选取所在div span 和拥有class为myClass的标签的一组元素
*	匹配所有元素	集合元素	$("*") 选取所在的元素

• 层次选择器

选择器	描 述	返回	示例
$("ancestor descendant")	选取ancestor元素里的所有descendant（后代）元素	集合元素	$("div span")选取div里面的所有span元素
$("parent > child")	选取parent元素下的child（子）元素。	集合元素	$("div > span")选取div元素下的元素名是span的子元素
$("prev + next")	选取紧接在prev元素后的next元素	集合元素	$(.one + div)选取class为one的下一个div元素
$("prev~siblings")	选取 prev 元素之后的所有siblings元素	集合元素	$("#one~div")选取id为two的元素后面的所有div兄弟元素

可以用next()方法来代替$("prev + next")

$(".one+div") <==> $(".one").next("div");

可用nextAll()代替$("prev~siblings")

$("#prev~div") <==> $("#prev").nextAll("div");

siblings()方法与前后位置无关，只要是同辈节点就能匹配。

• 过滤选择器

基本过滤选择器

选择器	描 述	返回	示例
:first	选取第1个元素	单个元素	$("div:first")
:last	选取最后一个元素	单个元素	$("div:last")
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$("input:not(.myClass)")
:even	选取索引是偶数的所有元素，索引从0开始	集合元素	$("ul li:even")
:odd	选取索引是奇数的所有元素，索引从1开始	集合元素	$("ul li:odd")
:eq(index)	选取索引等于index的元素，index从0开始	单个元素	$("ul:eq(3)")
:gt(index)	选取索引大于index的元素，index从0开始,不包括index	集合元素	$("ul li:gt(3)")
:lt(index)	选取索引小于index的元素，index从0开始,不包括index	集合元素	$("ul li:lt(3)")
:header	选取所有标题元素，如：h1 h2 h3...	集合元素	$(":header")
:animated	选取当前正在执行动画的所有元素	集合元素	$("div:animated")

2、内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容text的元素	集合元素	$("div:contains('我')")
:empty	选取不包含子元素或文本的空元素	集合元素	$("div:empty")
:has(selector)	选取含有选择器所匹配元素的元素	集合元素	$("div:has(p)")
:parent	选取含有子元素或文本的元素	集合元素	$("div:parent")

3、可见性过滤选择器

选择器	描述	返回	示例
:hidden	选取所有不可见元素	集合元素	$(":hidden")
:visible	选取所有可见元素	集合元素	$("div:visible")

$(":hidden")==》选取所有不可见元素。包括：<input type="hidden"/>  、 <div style="display:none;">  、<div style="visibility=hidden">等元素。

4、属性过滤选择器

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")
[attribute = value]	选取属性值为value的元素	集合元素	$("div[title=test]")
[attribute != value]	选取属性值不等于value的元素	集合元素	$("div[titil!=test]")
[attribute ^= value]	选取属性值以value开始的元素	集合元素	$("div[titil^=test]")
[attribute $= value]	选取属性值以value结束的元素	集合元素	$("div[titil$=test]")
[attribute *= value]	选取属性值含有value值的元素	集合元素	$("div[titil*=test]")
[selector][selector2][selectorN]	用属性选择器合并成一个复合属性选择器，满足多个条件。	集合元素	$("div[id][title=test]") 选取拥有属性id ， 并且属性title 等于test的div元素

5、子元素过滤选择器

选择器	描述	返回	示例
:nth-child(index/even/odd)	选取每个父元素下的第index个子元素或奇偶元素    index从1开始	集合元素	$("ul li:nth-child(3)")
:first-child	选取每个父元素的第1个子元素	集合元素	$("ul li:first-child")
:last-child	选取第个父元素下的最后一个子元素	集合元素	$("ul li:last-child")
:only-child	如果某个元素是它父元素中惟一的子元素，那么将会 被匹配。如果父元素中含有其它元素，刚不会匹配	集合元素	$("div:only-child")

:nth-child(even) =>选取每个父元素下的偶子元素

:nth-child(odd) =>选取每个父元素下的奇子元素

:nth-child(3n) =>选取每个父元素下的索引值是3倍数的元素(n从0开始)

6、表单对象属性过滤选择器

选择器	描述	返回值	示例
:enabled	选取所有可用元素	集合元素	$("#form1:enabled")
:disabled	选取所有不可用元素	集合元素	$("#form1:disabled")
:checked	选取所有被选中的元素 （单选框、复选框）	集合元素	$("input:checked")
:selected	选取所有被选中的选项元素 （下拉列表）	集合元素	$("select:selected")

• 表单选择器

选择器	描述	返回	示例
:input	选取所有input 、textarea 、select 、button元素	集合元素	$(":input")
:text	选取所有的单行文本框	集合元素	$(":text")
:password	选取所有的密码框	集合元素	$(":password")
:radio	选取所有的单选框	集合元素	$(":radio")
:checkbox	选取所有的多选框	集合元素	$(":checkbox")
:submit	选取所有的提交按钮	集合元素	$(":submit")
:image	选取所有的图像按钮	集合元素	$(":image")
:reset	选取所有的重置按钮	集合元素	$(":reset")
:button	选取所有的按钮	集合元素	$(":button")
:file	选取所有的上传域	集合元素	$(":file")
:hidden	选取所有的不可见元素	集合元素	$(":hidden")

ajax运用场景 

跨域问题（https://www.cnblogs.com/2050/p/3191744.html）

通过jsonp跨域：在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

通过修改document.domain来跨子域

使用window.name来进行跨域：window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

使用HTML5中新引进的window.postMessage方法来跨域传送数据

json（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499490767fe5a0e31e17e44b69dcd1196f7ec6fc6000）

在JSON中，一共就这么几种数据类型：

• number：和JavaScript的number完全一致；
• boolean：就是JavaScript的true或false；
• string：就是JavaScript的string；
• null：就是JavaScript的null；
• array：就是JavaScript的Array表示方式——[]；
• object：就是JavaScript的{ ... }表示方式。

vue常用组件（https://blog.youkuaiyun.com/zr15829039341/article/details/80097611?utm_source=blogxgwz3）