JQuery的引用
本地文件引入:
<script src='js/jquery.min.js'></script>css
内容分布式网络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>; 正式发布html
JQuery源码分析
http://www.cnblogs.com/aaronjs/p/3279314.htmlnode
如何判断是否真正的引入了JQuery
输入 $.fn.jquery
输出 "3.2.1"jquery
JQuery的官网https://jquery.comweb
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对象app
//使用eq,get,索引
var $firstParagraph = $paragraphs.eq(0); //jQuery对象
var firstParagraph = $paragraphs[0]; //DOM
var secondParagraph = $paragraphs.get(1); //DOMdom
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-itemif (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。