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。
