达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
学习JQuery，这篇文件即可入门-创新互联
JQuery的引用
本地文件引入：
内容分布式网络CDN
//非压缩版
开发
//压缩版
正式发布
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)
$('
$(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('
厉害厉害
')$(document.body).prepend('
厉害厉害
')$('
厉害厉害
').prependTo(document.body)$('
厉害厉害
').appendTo(document.body)$('h2').eq(0).after('
呵呵呵
')$('h2').eq(0).before('
呵呵呵
')$('
呵呵呵
').inserBefore($('h2').eq(0))$('
呵呵呵
').inserAfter($('h2').eq(0))增加一个ul来显示操作系统，类似于js的实现
$(document .body).append('
OS 列表
- MAC
- WIN
- Linux
- ')
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。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：学习JQuery，这篇文件即可入门-创新互联
URL分享：http://dzwzjz.com/article/dcoiji.html