jQuery原理（事件操作相关方法）
on方法 // 事件操作相关方法 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.eventsCache[name].push(callBack); ...
jQuery原理（属性操作相关方法）
attr方法 设置或者获取元素的属性节点值 //属性操作相关的方法 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); }); } } // 2. 判断是否是对象 ...
jQuery原理（DOM操作相关方法）
empty方法 清空指定元素中的所有内容。也就是遍历内容，然后将其innerHTML清空。 kjQuery.prototype.extend({ empty: function () { // 遍历所有找到的元素 this.each(function (k, v) { v.innerHTML = ''; }); // 返回this对象为了方便链式编程 return this; }, }) remove方法 删除所有的元素或指定元素。判断是否传入参数，如果传入参数，则删除指定元素，否则删除全部。 JavaScript元素不能自己删除自己，只能通过上级元素删除。 remove: function (sele) { if (arguments.length === 0) { // 遍历指定的元素 this.each(function (k, v) ...
jQuery原理（原型上的属性、方法）
jQuery原型上的属性 kjQuery.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原型上的方法 toArray ...
jQuery原理（入口函数）
基本结构 jQuery的基本结构如下： (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.prototype = ...
八、jQuery的QQ音乐播放器
项目资料 查看源码 在线Demo 基本框架及顶部布局 <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"></div> </div> * { margin: 0; padding: 0; } .header { width: 100%; height: 45px; background: red; } .header .l ...
七、jQuery狂拍大灰狼案例
在线案例显示：狂拍灰太狼 首页布局 基本布局 完成首页的布局，背景使用了一张图片。其余元素，图中已经标出。 <div class="container"> <h1>0</h1> <div class="progress"></div> <button class="start">开始游戏</button> <div class="rules">游戏规则</div> </div> * { margin: 0; height: 0; } .container { width: 320px; height: 480px; background: url("https://tva1.sinaimg.cn/large/005B3XPgly1gfw7dh267lj308w0dc759.jpg") no-repeat 0 0; margin: 50px auto; position: relative; } ...
六、jQuery节点操作
添加节点相关方法 内部插入 插入到节点最前面 // 方法1 $li.prependTo('ul') // 方法2（常用） $('ul').prepend($li) 添加到节点最后边 // 方法1 $li.appendTo('ul') // 方法2（常用） $('ul').append($li) 外部插入 将元素添加到指定元素外部的后面 // 方法1 $li.insertAfter('ul') // 方法2（常用） $('ul').after($li) 会将元素添加到指定元素外部的前面 // 方法1 $li.insertBefore('ul') // 方法2（常用） $('ul').before($li) 删除节点相关方法 remove()或detach() 删除指定元素，可传入参数。例如$('li').detach('.item')表示删除li下的.item元素 $('div').remove() $('li').detach('.item') 两个方法一样，都可以接收参数。 empty() 删除指定元素的内容和子元素,指定元素自身不会 ...
五、jQuery动效
显示隐藏动画 显示show()动画，隐藏动画hide()，切换动画toggle() 这三个方法都可以传入参数： 一个参数 代表动画完成的时间 两个参数 第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数 $(function () { $('button').eq(0).click(function () { $('div').show(1000, function () { alert('显示动画执行完毕') }) }) $('button').eq(1).click(function () { $('div').hide(1000, function () { alert('隐藏动画执行完毕') }) }) $('button').eq(2).click(function () { $('d ...
四、jQuery事件相关
事件绑定 绑定方式有两种： 直接通过.eventName(fn)方式绑定。 $('button').click(function () { alert('hello tzk') }) 编码效率高 部分事件jQuery没有实现 通过on(eventName,function)方式绑定 $('button').on('click', function () { alert('hello tzk') }) 编码效率略低 所有JavaScript事件都可以添加 注意：以上两种绑定方式均不会被覆盖，并且可以添加多个事件。 $('button').click(function () { alert('hello tzk') }) $('button').click(function () { alert(123) }) $('button').mouseleave(function () { alert(mouseleave) }) ...
