2019-05-21初探jQuery
2019-05-28 本文已影响0人
啊_6424
简介
学习文档中文：http://jquery.cuishifeng.cn/
jQuery是一个通过原生JS所封装的一个库，我们可以直接使用库里面的函数，方便我们创建标签，获得标签，添加点击事件，添加动画等等操作。
学习目标：看懂它的代码以及API（将注释写进一个文档就称为API）
jQuery作用：适配不同的浏览器
jQuery的引入：
- 1.下载下来，通过script标签引入，这种方式最后会把代码部署到服务器上
- 2.CDN:一些网站如百度，阿里，新浪，google提供一些通用的服务器来存储常用的框架。开发者可以直接使用这些网站提供的公共库里的内容，
以减轻本公司服务器压力。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery介绍与选择器</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container">您好！</div>
</body>
</html>
<script type="text/javascript">
console.log($(".container"))
</script>
输出的为jQuery对象
获得标签：
$("css3的选择器");
$("")会返回一个返回值，就是jQuery对象，对象也是一个数组
数组的第0个元素就是我们的JS原生的标签，
console.log($(".container")[0]);
输出结果
注意在JavaScript中，数组也是一种对象，证明如下：
var arr = ["111"];
arr.name = "xiaoming";
console.log(arr);
输出的arr数组
在jQuery中所有函数和属性，都是通过jQuery对象去调用的，除了ajax相关的部分
选择器的基本使用方式
- 1.通过id
<div id="wrap"></div>
.....
console.log($("#wrap"));
image.png
- 2.通过element
<div class="container">您好！</div>
<div id="wrap"></div>
<div>第一个</div>
<div>第二个</div>
......
console.log($("div"));
image.png
- 3.通过class选择器
<div class="first">第一个</div>
<div class="first">第二个</div>
console.log($(".first"));
image.png
- 4.*
匹配所有元素，多用于结合上下文来搜索
以上这些为简单选择器，在使用过程中可以结合使用
用于获取相似的标签，但他们的class名不同
console.log($("#wrap,div.first"));
image.png
层级选择器
- 空格
<div id="wrap">
<p class="text"></p>
</div>
在style里面，可以通过#wrap .text{}的方式定位到p标签，在jQuery中也类似$("#wrap .text")
输出结果
类似的写法还有：
- 6.>子类选择器
空格 与 > 的区别：空格是后代选择器，包括子级，孙级；而>是子代选择器，不会获取孩子的后代
举个例子
<div id="wrap">
<p class="text">
<span class="text"></span>
</p>
<div class="text"></div>
</div>
.......
console.log($("#wrap .text"));
console.log($("#wrap > .text"));
空格选择器
>选择器
- +选择器
A+B：获取紧跟在A后面的B，A与B必须相邻，即若A后跟了多个B，那么只获取第一个B
- +选择器
<form>
<label>Name:</label>
<input name="name" class="firstinput"/>
<input name="password" class="secondinput"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" class="thirdinput" />
</fieldset>
</form>
<input name="none" class="forthinput"/>
......
console.log($("label + input"));
只获取name和newsletter这两个input
- 8.~选择器
prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素
<form>
<label>Name:</label>
<input name="name" class="firstinput"/>
<input name="password" class="secondinput"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" class="thirdinput" />
</fieldset>
</form>
<input name="none" class="forthinput"/>
<input type="text" class="fifthinput">
<div>
<input type="text" class="sixth">
</div>
<input type="text" class="seven">
......
console.log($("form ~ input"));
找到所有与表单同辈的 input 元素
基本筛选器
- :first选择器
获取匹配的第一个元素
- :first选择器
<li class="first"></li>
<ul>
<li class="second">list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
......
console.log($('li:first'));
image.png
可以跟层级选择器结合使用
改为
console.log($('ul li:first'));
获取的是ul下面的第一个li
-
10 :even选择器
匹配所有索引值为偶数的元素，从 0 开始计数 -
11:odd选择器
匹配所有索引值为奇数的元素，从 0 开始计数
属性选择器
- 12 ：标签[属性名] ,,, 标签[属性名=属性值]
$("div[id]"):选择有id的div标签
$("div[class]"):选择有class的div标签
$("div[class=second]"):选择class为second的div标签
[attribute!=value]]:
匹配所有不含有指定的属性，或者属性不等于特定值的元素。
等价于 [:not([attr=value])]
要匹配含有特定属性但不等于特定值的元素，用[attr]:not([attr=value])
[attribute^=value]]:匹配给定的属性是以某些值开始的元素
[attribute$=value]:匹配给定的属性是以某些值结尾的元素
[attribute*=value]:匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]：同时满足多个条件
子元素选择器
- $("ul li:first-child") ：在每个 ul 中查找第一个 li
在同一层级的标签里匹配第一个符合条件的
<div class="container">
<div class="wrap"></div>
</div>
<div class="containers">
<div class="wrap2"></div>
</div>
......
console.log($("div:first-child"));
输出结果
- [:first-of-type]
- [:last-child]
- [:last-of-type]
- [:nth-child]
- [:nth-last-child()]
- [:nth-last-of-type()]
- [:nth-of-type()]
- [:only-child]
- [:only-of-typ]
