jQuery原理（事件操作相关方法）
on方法 12345678910111213141516171819202122232425// 事件操作相关方法kjQuery.prototype.extend({ on: function (name, callBack) { this.each(function (key, ele) { // 2. 判断当前元素中是否有保存所有事件的对象 if (!ele.eventsCache) { ele.eventsCache = {}; } // 3. 判断对象中有没有对应类型的数组 if (!ele.eventsCache[name]) { ele.eventsCache[name] = []; // 4. 将回调函数添加到数组中 ele.eventsCach ...
jQuery原理（属性操作相关方法）
attr方法 设置或者获取元素的属性节点值 123456789101112131415161718192021222324252627//属性操作相关的方法kjQuery.prototype.extend({ attr: function (attr, value) { // 1. 判断是否是字符串 if (kjQuery.isString(attr)) { if (arguments.length == 1) { return this[0].getAttribute(attr); } else { this.each(function (key, ele) { ele.setAttribute(attr, value); }); } } ...
jQuery原理（DOM操作相关方法）
empty方法 清空指定元素中的所有内容。也就是遍历内容，然后将其innerHTML清空。 12345678910kjQuery.prototype.extend({ empty: function () { // 遍历所有找到的元素 this.each(function (k, v) { v.innerHTML = ''; }); // 返回this对象为了方便链式编程 return this; },}) remove方法 删除所有的元素或指定元素。判断是否传入参数，如果传入参数，则删除指定元素，否则删除全部。 JavaScript元素不能自己删除自己，只能通过上级元素删除。 12345678910111213141516171819202122232425262728remove: function (sele) { if (arguments.length === 0) &# ...
jQuery原理（原型上的属性、方法）
jQuery原型上的属性 12345678910111213141516kjQuery.prototype = { constructor: kjQuery, init: function (selector) {}, // 版本号 jquery: "1.1.0", // 实例默认的选择器取值 selector: "", // 实例默认的长度 length: 0, // 给实例添加新元素 push: [].push, // 对实例中的元素进行排序 sort: [].sort, // 按照指定下标指定数量删除元素，也可以替换删除的元素 splice: [].splice,}; 关于三个方法（push,sort,splice）以push为例： 通过[].push找到数组的push方法 但是对象的push方法由对象调用，那么this就指向了对象（jQuery） 所以也就相当于[].push.apply(this)将元素添加到对 ...
jQuery原理（入口函数）
基本结构 jQuery的基本结构如下： 12345678910111213141516171819202122232425(function (window, undefiend) { var jQuery = function () { return new jQuery.fn.init() } jQuery.prototype = { constructor: jQuery } jQuery.fn.init.prototype = jQuery.prototype window.jQuery = window.$ = jQuery})(window);/* 其中fn指代的是原型，因此以上结构可以转换成以下结构 */(function (window, undefiend) { var jQuery = function () { return new kjQuery.prototype.init(); } ...
八、jQuery的QQ音乐播放器
项目资料 查看源码 在线Demo 基本框架及顶部布局 12345678910111213<div class="header"> <h1 class="logo"><a href="#"></a></h1> <ul class="register"> <li>注册</li> <li>登陆</li> </ul></div><div class="content"> <div class="content_in"></div></div><div class="footer"> <div class="footer_in"></ ...
七、jQuery狂拍大灰狼案例
在线案例显示：狂拍灰太狼 首页布局 基本布局 完成首页的布局，背景使用了一张图片。其余元素，图中已经标出。 123456<div class="container"> <h1>0</h1> <div class="progress"></div> <button class="start">开始游戏</button> <div class="rules">游戏规则</div></div> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354* { margin: 0; height: 0;}.container { width: 320px; height: 48 ...
六、jQuery节点操作
添加节点相关方法 内部插入 插入到节点最前面 1234// 方法1$li.prependTo('ul')// 方法2（常用）$('ul').prepend($li) 添加到节点最后边 1234// 方法1$li.appendTo('ul')// 方法2（常用）$('ul').append($li) 外部插入 将元素添加到指定元素外部的后面 1234// 方法1$li.insertAfter('ul')// 方法2（常用）$('ul').after($li) 会将元素添加到指定元素外部的前面 1234// 方法1$li.insertBefore('ul')// 方法2（常用）$('ul').before($li) 删除节点相关方法 remove()或detach() 删除指定元素，可传入参数。例如$('li').detach('.item')表示删除li下的.item元素 12$(&#x ...
五、jQuery动效
显示隐藏动画 显示show()动画，隐藏动画hide()，切换动画toggle() 这三个方法都可以传入参数： 一个参数 代表动画完成的时间 两个参数 第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数 123456789101112131415161718$(function () { $('button').eq(0).click(function () { $('div').show(1000, function () { alert('显示动画执行完毕') }) }) $('button').eq(1).click(function () { $('div').hide(1000, function () { alert('隐藏动画执行完毕') & ...
四、jQuery事件相关
事件绑定 绑定方式有两种： 直接通过.eventName(fn)方式绑定。 123$('button').click(function () { alert('hello tzk')}) 编码效率高 部分事件jQuery没有实现 通过on(eventName,function)方式绑定 123$('button').on('click', function () { alert('hello tzk')}) 编码效率略低 所有JavaScript事件都可以添加 注意：以上两种绑定方式均不会被覆盖，并且可以添加多个事件。 123456789$('button').click(function () { alert('hello tzk')})$('button').click(function () { alert( ...
