每日分享：
在寒冬的时节学会和过去告别，前尘往事，后会无期。
希望在奔赴未来的路上，我们有着生生不息的热爱，如星璀璨，如风自由。
目录：
- jQuery的介绍
- jQuery的下载
- jQuery的使用
- jQuery选择器
- jQuery选择集过滤
- jQuery选择集转移
- jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大的简化了JavaScript编程
- jQuery和JavaScript的作用一样，都是负责网页行为操作，增加网页和用户的交互效果，简化了JavaScript编程，实现交互效果更简单
- jQuery兼容了现在主流的浏览器，增加了程序员的开发效率
进入网址：https://code.jquery.com/
下载jQuery1.x
点击之后会出现如下图，进入网址：
之后直接右键->另存为：
jQuery就下载完了，之后使用直接把它的路径放进去就可以了
三、jQuery的使用 1. jQuery的引入2. jQuery的入口函数
js获取标签元素需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jQuery提供了ready函数，保证获取标签元素没有问题，它的速度比原生的window.onload更快
入口函数完整代码示例：
// 原生js写法
window.onload = function(){
// 当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
var oDiv = document.getElementById('div1');
alert(oDiv);
};
// $符号就是jquery的象征，其本质就是一个函数，只不过这个函数名叫$
$(document).ready(function(){
// 获取标签和css样式匹配标签的规则一样
// 以后使用jquery，变量名都要以$符号开头
var $div = $('#div1');
alert($div)
});
// ready 等待页面标签加载完成以后就执行ready事件，不会等待资源数据加载完成
// 所以ready比onload快
jQuery简写代码示例：
// 原生js写法
window.onload = function(){
// 当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
var oDiv = document.getElementById('div1');
alert(oDiv);
};
// // $符号就是jquery的象征，其本质就是一个函数，只不过这个函数名叫$
// $(document).ready(function(){
// // 获取标签和css样式匹配标签的规则一样
// // 以后使用jquery，变量名都要以$符号开头
// var $div = $('#div1');
// alert($div)
// });
// ready 等待页面标签加载完成以后就执行ready事件，不会等待资源数据加载完成
// 所以ready比onload快
// jquery的简写方式
$(function(){
var $div = $('#div1');
alert($div);
});
jQuery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样，但它只是选择标签，不设置样式
1. jQuery选择器种类- 标签选择器
- 类选择器
- id选择器
- 层级选择器
- 属性选择器（独有的）
选择器使用代码示例：
Document
$(function(){
// 通过标签名获取标签对象
var $p = $('p');
// 长度大于0就证明获取成功了
alert($p.length);
// 通过jquery设置标签样式
$p.css({'color': 'red'});
// 通过类名获取标签对象
var $div1 = $('.div1');
alert($div1.length);
// 通过id获取标签对象
var $div2 = $('#box1');
alert($div2.length);
// 通过层级获取标签对象
var $h1 = $('div h1');
alert($h1.length);
// 通过属性获取标签对象
var $input1 = $('input[type=text]');
alert($input1.length);
});
哈哈
嘿嘿
加法is
开始工地
吃饭
其中，length属性是用来判断是否选择成功，length大于0代表选择成功
五、选择集过滤选择集过滤就是在选择标签的集合里面过滤出自己想要的标签
1. 选择集过滤的操作- has（选择器名称）方法：表示选取包含指定选择器的标签
- eq（索引）方法：表示选取指定索引的标签
两种方法使用代码示例：
Document
$(function(){
// 通过jquery选择器获取标签
var $div1 = $('div');
// 获取含有指定选择器的父标签
$div1.has('p').css({'background': 'red'});
// 根据下标选择指定的标签的父标签
$div1.eq(1).css({'background': 'blue'});
// 选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
});
哈哈
结果：
选择集转移就是以选择集的标签为参照，然后获取转移后的标签
1. 转移集转移操作var $div = $('#box1');
-
$div.prev();表示选择$div元素的上一个同级元素
-
$div.prevAll();表示选择$div元素的上面所有的同级元素
-
$div.next();表示选择$div元素的下一个同级元素
-
$div.nextAll();表示选择$div元素的下面所有的同级元素
-
$div.parent();表示选择$div元素的父元素
-
$div.children();表示选择$div元素的所有子元素
-
$div.siblings();表示选择$div元素的其他同级元素
-
$div.find(‘.sp1’);表示选择$div元素的class等于sp1的元素
选择集转移代码示例：
Document
$(function(){
// 获取div，并把div作为参照物，获取其他标签
var $div = $('#box1');
// css参数是一个js对象，而js对象和python里面的字典相似
// 属性名和css中的属性名保持一致
// 选择上一个同级标签
$div.prev().css({'color': 'red', 'font-size': '25px'});
// 选择上面所有的同级标签
$div.prevAll().css({'text-indent': '50px'});
// 选择下一个同级标签
$div.next().css({'color': 'green'});
// 选择下面所有的同级标签
$div.nextAll().css({'text-indent': '50px'});
// 选择同级的其他标签
$div.siblings().css({'text-decoration': 'underline'});
// 选择父标签
$div.parent().css({'background': 'gray'});
// 获取所有的子标签
$div.children().css({'color': 'red'});
// 查找指定的子标签
$div.find('.sp1').css({'color': 'green'});
})
三级标题
哈哈
我是一个div标签
三级标题
好好好
结果：
