学习JQuery，这篇文件即可入门

Posted 2021-01-04

JQuery的引用
本地文件引入：
<script src=‘js/jquery.min.js‘></script>

内容分布式网络CDN
//非压缩版
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>; 开发
//压缩版
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>; 正式发布

JQuery源码分析
http://www.cnblogs.com/aaronjs/p/3279314.html

如何判断是否真正的引入了JQuery
输入 $.fn.jquery
输出 "3.2.1"

JQuery的官网https://jquery.com

JQuery的使用
$相当于jQuery，是jquery的别名
$ === jQuery;
JQuery相当于构造函数

$()是jQuery()的简写 类数组带有额外方法

$(string)
$(‘.footer‘); //将类名为footer的元素转为jQuery对象(相当于selector)
$(‘<div></div>‘); //生成一个div的jQuery对象(相当于html text)

$(dom element)
//获取所有段落元素DOM
var paragraphs = document.getElementByTagName(‘p‘);
var $paragraphs = $(paragraphs); //将DOM转换为jQuery对象

//使用eq，get，索引
var $firstParagraph = $paragraphs.eq(0); //jQuery对象
var firstParagraph = $paragraphs[0]; //DOM
var secondParagraph = $paragraphs.get(1); //DOM

JQuery选择器
jQuery选择器 —>CSS选择器
(链接coding.imweb.io/demo/p4/jquery-selector.html)
JQuery选择器分为3大类
1.基本选择器
$(tag) 按标签选择 例:$(‘div‘);//查找div标签
$(.class) 按类名选择 例:$(‘.footer‘);//查找类名为footer的元素
$(#id) 按标签id选择 例:$(‘#cat-tab‘);//查找标签id为cat-tab的元素
$() 匹配所有元素 例$(‘‘);//查找所有元素
2.组合选择器
$(selector1,selector2) 多元素选择器 例：$(‘div.p‘);
$(selector1 selector2) 后代元素选择器 例：$(‘.footer p‘);
$(selector1 > selector2) 子元素选择器 例：$(‘.footer > p‘);
$(selector1 + selector2) 毗邻元素选择器 例：$(‘.footer + p‘);
3.其他选择器
$(selector:first-child) 选取第一个子元素 例：$(‘.footer:first-child‘);
$(selector:last-child) 选取最后一个子元素 例：$(‘.footer:last-child‘);
$(selector:eq(index)) 选取集合中第index个元素 例：$(‘.item:eq(2)‘);
$(attribute=value) 选取属性值为value的元素 例：$(‘[value=2]‘);

遍历DOM

// 获取父元素(一个)
$(‘#me‘).parent();

// 获取所有父元素和祖先元素(多个)
$(‘#me‘).parents();

// 使用.eq()函数获取相应元素
$(‘#me‘).parents().eq(0); //获取爸爸
$(‘#me‘).parents().eq(1); //获取爷爷

//使用.parents(selector)来精确查找
$(‘#me‘),parents(‘.fat‘);
$(‘#me‘).parents(‘.oldest‘);

//获取所有的兄弟元素
$(‘#me‘).siblings(); 多个

//使用.siblings(selector)来精确查找
$(‘#me‘),siblings(‘.tall‘);

目标换为爷爷

//使用.children()获取子元素
$(‘#grandPa‘).children();
// 使用.find(‘‘)获取所有子孙元素
$(‘#grandPa‘).find(‘‘);

//使用.find(selector)精准获取子孙元素(前提是该子孙有,youngest选择器)
$(‘#grandPa‘).find(‘.youngest‘);

最常见的6种选择器
.parent()
.parents()
.eq()
.siblings()
.children()
.find()

(链接coding.imweb.io/demo/p4/query-traversal.html)

添加和移除DOM元素
append/appendTo 在被选元素的结尾插入内容(元素内)
prepend/prependTo 在被选元素的开头插入内容(元素内)
after/inserAfter 在被选元素之后插入内容(元素外)
before/inserBefore 在被选元素之前插入内容(元素外)

想把自己的后代干掉
$(‘#father‘).empty()
想把自己以及后代都干掉
$(‘#father‘).remove()

使用方法
$(document.body).append(‘<div>厉害厉害</div>‘)
$(document.body).prepend(‘<div>厉害厉害</div>‘)
$(‘<div>厉害厉害</div>‘).prependTo(document.body)
$(‘<div>厉害厉害</div>‘).appendTo(document.body)

$(‘h1‘).eq(0).after(‘<h2>呵呵呵</h2>‘)
$(‘h1‘).eq(0).before(‘<h2>呵呵呵</h2>‘)
$(‘<h2>呵呵呵</h2>‘).inserBefore($(‘h1‘).eq(0))
$(‘<h2>呵呵呵</h2>‘).inserAfter($(‘h1‘).eq(0))

增加一个ul来显示操作系统，类似于js的实现
$(document .body).append(‘<h2>OS 列表</h2><ul><li></li>MAC<li>WIN</li><li>Linux</li><ul>‘)

jQuery事件监听
1.触发事件的目标元素
2.触发的事件名称
3.事件触发时的回调
4.事件对象

点击按钮改变背景颜色为×××

$(‘#traget‘).on(‘click‘,function(event) {
console.log(‘target‘); //被点击了
$(‘body‘ ).css(‘background‘,‘#ff0‘);
});
$(‘#target‘)事件目标元素
on 事件监听函数
‘click‘ 监听的事件名称
整个function() 事件触发执行的回调callback
event jQuery事件对象

jQuery事件对象—>封装原生事件对象(并且做了浏览器兼容，增加好用的属性和方法)

例：

$(‘a‘)on(‘click‘,function(event){
console.log(event.target);//获取触发事件的元素
event.preventDefault(); //阻止默认事件
event.stopPropagation(); //阻止事件冒泡
});
和下面的效果是一样的

$(‘a‘).on(‘click‘,function(event){
console.log(event.target); //获取触发事件的元素
return false; //既阻止默认事件，且阻止事件冒泡
});

点击按钮修改背景颜色

$(‘#button‘).on(‘click‘,function(event){
$(‘section‘).css(‘backgroundColor‘,yellow);
});

使用 jQuery 编写一个事件监听器，需要完成以下要求：
触发事件的目标元素为 #target
监听的是一个 click 事件
当事件触发时，需要增加类名 disabled 到目标元素上

$(‘#target‘).on(‘click‘, function() {
$(this).addClass(‘disabled‘);
});

toggleClass(‘classname‘) 对设置或移除被选元素的一个或多个类进行切换

事件的委托
事件委托就是利用时间冒泡，只指定一个时间处理程序，就可以管理某一类型的所有事件。
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
一般来说我们要给某个元素绑定事件，都会直接绑定在该元素上，如下：

// 给 li 元素绑定点击事件
$(‘li‘).click(function() {
console.log(‘你点击我了‘);
})
但是这种直接的处理会有以下问题：
——通过 JS 新添加的 li 元素并没有该事件绑定，所以点击无效
——元素如果比较多的话，比喻有200个 li ，那每个 li 都绑定一个事件，性能是非常低的
那么如何解决这些问题呢？这就是我们要说的事件委托（或叫事件代理）。
事件委托简单来说就是利用事件冒泡，只指定一个事件处理程序，用来管理某一类型的所有事件。
以一个 todo list 为例：

// 要点击的元素是 todo-item// 但是我们把事件绑定在父元素 todo-list 上，实现事件委托// html 结构为：ul#todo-list>li.todo-item*5

$(‘#todo-list‘).on(‘click‘, ‘.todo-item‘, function() {
$(this).toggleClass(‘done‘);
})
以 jQuery 为例，所以我们看不到背后的本质，下面我们以一个原生的实现来说明下：

var todoList = document.getElementById("todo-list");

todoList.addEventListener("click", function (e) {
var target = e.target;
// 检查事件源 target 是否为 todo-item
if (target && target.nodeName.toUpperCase() == ‘LI‘ && target.classList.contains(‘todo-item‘)) {
target.classList.toggle(‘done‘)
} else {
console.log(‘我不是 todo-item ‘);
}
});
注：因为事件委托是依赖于事件冒泡的，所以没有事件冒泡的事件是不能使用事件委托的。
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。