jquery是什么？

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

jquery 引入

1
2
3

// CDN 引入

	<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>

jquery作用

html 元素选取
html 元素操作
css 操作
html 事件函数
JavaScript 特效和动画
html dom 遍历和修改
ajax
Utilities

jquery 优势

不污染顶级变量
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层和结构层的分离
丰富的插件支持

jquery选择器

基本选择器

ID选择器

1	$("#box"); // 根据给定的id匹配一个元素

Elemnt选择器

1	$("div"); // 根据给定的元素标签名匹配所有元素

class选择器

1	$(".box"); // 根据给定的class类名匹配元素。

* 选择器

1	$("*"); // 匹配所有元素

多项选择器

$(“selector1,selector2,selectorN”);

将每一个选择器匹配到的元素合并后一起返回。

可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

1	$("#box, .item, div");

层级选择器

祖先后代选择器

$(“ancestor descendant”);

给定的祖先元素下, 匹配所有的后代元素

1	$("ul li"); // ul 父元素，下的 li 后代元素

直接后代选择器

$(“parent > child”);

给定的父元素下匹配所有的子元素

1	$("ul > li"); // 获取父元素下的 li，抛开了其他孙子元素

下一个兄弟选择器

$(‘prev + next’)

匹配所有紧接在 prev 元素后的 next 元素

1	$(" div + p") ; // p 元素的上个元素必须div 才会被选中

兄弟选择器

$(‘prev ~ sibling’);

匹配 prev 元素之后的所有 siringa 元素

1	$('div ～ ul'); //匹配 div 元素之后的所有 ul 元素

属性名选择器

[attribute]

1
2
3

var all = $('[calss]'); // 会获取到 所有带有calss 的标签
var all = $('[id]'); // 会获取到 所有带有id 的标签
var all = $('[lang]'); // 会获取到 所有带有lang 的标签

属性值选择器

[attrbute = value]

1	var all = $('[id = box]'); // 找到这个id 名为 box 的标签

非属性值选择器

[attribute != value]

1	var all = $('[id != box]'); // 取反值，除开这个 id 为 box 的元素

[attribute ^= value]

1	var all = $('[id ^= box_]'); // 以某个属性开头为box都选择器,如：box_item

[attrbute $= value]

1	var all = $('[id $= item]'); // 以某个属性结尾为item，选择器,如：box_item

包含属性值选择器

[attrbute *= value]

1
2
3

var all = $('[id *= vs]'); 
// 获取 id 名称当中包含了 vs 的标签
// 如：tool_vscode ，tool_vs ，vscode_tt

多个属性选择器

[selector1] [selector1] [selectorN]

1 2	var jq = $("[calss][calss*= lang][class $= y]"); // 三个条件都满足，才会返回值