基础概念
介绍
jQuery 针对 DOM 的封装的本质，能够基于 jQuery 完成节点查找、事件监听、样式处理等基础操作。-----jQuery是一个专注于DOM操作的类库
jQuery 是基于 Javascript 构造函数的原型对象实现的，通过为原型对象添加属性或方法的方式实现对DOM 操作的封装
下载
jQuery 从形式上来看只是一个独立的 .js 文件，可以在其官网免费下载使用，在其官网上提供了多个不同的版本供开发者下载，一般推荐下载最新版本，值得注意的是 jQuery 自 v2.0 开始不再兼容 IE6/7/8
需知：
1.网页中引入 jQuery 后会得到一个全局的函数 jQuery 或 $
2.$ 是 jQuery 函数的别名，使用 $ 比使用 jQuery 更方便
3.每次调用 jQuery 或 $ 函数都会得到一个新的实例
4. 原型对象中存在许多的方法，调用这些方法实现 DOM 的各种操作
选择器
jQuery 中的选择器是用来获取 DOM 节点的，其功能类似于原生的 querySelectorAll 方法，jQuery 中所支持的选择器与 CSS 的选择器几乎一致
选择器：jQuery通过元素的选择器获取元素，注意jQuery获取的是伪数组形式的，称为jQuery的对象
① 标签选择器
②类选择器
③id 选择器
④后代选择器
特别注意，要想使用jQuery必须先引入
1.实例对象
$等同于jQuery
2.、选择器
// 类名是box的盒子里的第二个孩子并且是p标签，参数如果是even就是偶数，odd是奇数
$('#box p:nth-child(2)').css('background', 'red');
//先看第几个孩子
//类名是box的盒子，类型为p并且是第二个p的标签
$('#box p:nth-of-type(2)').css('background', 'red');
//先看是什么类型的标签
3.对象
注意：DOM的只能使用DOM的方法、jQuery只能使用jQuery的方法
区分：
1. DOM：用document.xxx获取的对象，都是DOM对象
2. jQuery：用$获取的对象，都是jQuery对象
4.入口函数
页面加载完成之后触发的函数，例如：
第一种： $(function () { $('div').css('background', 'red'); });
第二种： $(document).ready(function () { $('div').css('background', 'blue'); })
5.jQuery添加事件
①快捷添加
$('input').click(function () {
console.log('很多代码');
});
②on注册事件
$('input').on('事件类型', '后代元素', 函数);（后代元素可省略，常用于事件委托）
$('input').on('click', function () {
console.log('内容');
});
on绑定事件的优势：
①同时绑定多个事件，中间用逗号隔开
同时绑定多个
②如果多个事件函数相同，那么可以简写
$('input').on('click mouseenter mouseleave', function () {
console.log('同事件函数');
});
③可以实现事件委托，事件委托的话，动态创建的元素也可以有事件
可以进行事件委托
5.绑定事件
$('input').bind('click', function () {
console.log('内容');
});
6.移除事件
$('input').unbind('click'); // 移除点击事件
$('input').unbind(); // 移除所有事件
7.one事件
$('input').one('click', function () {
console.log('一次性事件');
})；
8.this
this的指向----指向事件对象e.target
this
9.自定义事件
自定义事件，只能通过trigger触发事件------trigger：自动触发事件，其他内置事件也可以选择使用trigger()触发
定义自定义事件
$('input').trigger('myEvent'); //触发自定义事件
$('input').trigger('click')； //触发点击事件
10.样式操作
①修改
$('div').css('属性名', '属性值');
$('div').css('background', 'blue');
$('div').css('width', '600');
$('div').css('height', 300);
$('div').css('font-size', 66);
$('div').css('color', 'red');
$('div').css('transform', 'translateX(600px)');
$('div').css('transition', '2s');
②传对象
传对象
③获取样式
例： $('div').css('width')
11.类操作
示例： <div class="c1">哇哈哈</div>
①添加：addClass
$('div').addClass('c2');
②删除：removeClass
$('div').removeClass('c2');
③切换：toggleClass
$('div').toggleClass('c2');
④检测类名：hasClass
$('div').hasClass('c2')
12.隐式迭代
在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代
以li标签为例：$('li') 选中的是全部的<li>标签,所以添加样式也会一并一起添加上去，如下
已知结构
样式是一并给的所以都有，而事件是选择给的，所以只有被选择的才会触发事件，如果不选择，那么点击任意一个<li>都会触发事件
样式及输出
13.链式编程
写法如下
14.排他
排他--链式编程
原理：给全部的按钮加蓝色背景，并将点击按钮外的其他按钮背景样式清空，这样一来只有被点击的按钮背景颜色留下来了
方法：siblings：用于获取兄弟元素，
如果做以下更改（给兄弟元素从清空改为加红色背景）
给兄弟元素加红色背景
或者： $(this).siblings().css('background', 'red');
会出现如下结果：
结果展示
15.索引值
点击哪个按钮就会打印出相对应按钮在数组中的索引值
点击打印索引值
16.jQuery方法------eq()
方法返回带有被选元素的指定索引号的元素
参数为索引值，数据类型是Number
eq方法的使用
解释：找到由类名为item组成的jQuery对象，通过索引值找到对应的item,并且让它显示，让它的兄弟元素隐藏。
17.关系查找
① children：子级
② find：后代
③ parent：父级
④ parents：上级元素
⑤ siblings：获取兄弟元素
⑥ prevAll：前面兄弟
⑦ nextAll：后面兄弟
18.筛选方法
① first：查找第一个
② last：查找最后一个
③ eq：根据索引值筛选某个元素，jQuery
19.属性操作
① prop：操作固有属性
prop
② attr：操作自定义属性
data-type第一次打印结果是原始值，第二次打印是修改后的值------"aaa"
attr
③ data：data-属性
data
20.文本操作
结构
①innerText：text()
打印结果为div标签中间的文字----哇哈哈
text
② innerHTML：html()----可以解析标签
打印结果为解析后的标签和标签中间的文字----
红框内为结果
html
③ value : val( )
input绑定的value值----点击
val
总结：
1. jQuery：JavaScript库
DOM对象和jQuery对象
① DOM==>JQ：$(DOM)
② JQ==>DOM：$(JQ)[索引值]、$(JQ).get(索引值)
2. 入口函数：
① 第一种：$(function () {});
② 第二种：$(document).ready(function () {})
3. 选择器：
语法：$('选择器');
4. 事件：
① 快捷：$(元素).click(function () {})
② 基础：$(元素).on('click', '后代', function () {})
③ 自定义事件：$(元素).on('自定义事件', function () {});
④ trigger：自动触发事件
5. 样式操作：css
① 类操作：addClass、removeClass、toggleClass、hasClass
② jQuery优势：链式编程， 隐式迭代、排他思想、索引值
6. 查找：
① 父子关系：children、find、parent、parents
② 兄弟关系：siblings、prev、next
7. 筛选：first、last、eq、
8. 属性操作：prop、attr、data(获取data-xxx)
9. 文本操作：text、html、val
网友评论