八、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( ...
三、jQuery属性操作
jQuery内容选择器 为了方便测试，先将DOM元素写为以下格式： 12345<div></div><div>我是div</div><div>我是div123</div><div><span></span></div><div><p></p></div> :empty找到既没有文本内容也没有子元素的指定元素。 这个选择器对于以上内容只能找到第一个div。 12var $div = $('div:empty')console.log($div) :parent 找到有文本内容或有子元素的指定元素 可以找到除第一个意外的四个元素 12var $div = $('div:parent')console.log($div) :contains(text)找到包含指定文本内容的指定元素 视内容找到包含内容的div 12var $div = $('div:conta ...
二、jQuery核心函数和工具方法
jQuery核心函数 jQuery的核心函数就是$();，圆括号内可以传递函数、字符串选择器、字符串代码片段、DOM元素等。 传递函数 123$(function () { alert(1)}) 字符串选择器 返回一个jQuery对象，对象中保存了找到的DOM元素 123456$(function () { var $box1 = $(".box1") var $box2 = $("#box2") console.log($box1) console.log($box2)}) 字符串代码片段 返回一个jQuery对象，对象中保存了创建的DOM元素 1234$(function () { var $p = $('<p>我是段落</p>') console.log($p)}) 接收一个DOM元素 DOM元素会被包装成一个jQuery对象返回。 123456$(function () & ...
一、初识jQuery
版本选择 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4 (2016年5月20日). 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本。 jQuery的使用 下载jQuery或者使用cdn 引入jQuery的文件 编写代码 1234567891011121314151617181920<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < ...
JavaScript中的继承链
继承链 类别 备注 constructor prototype __poroto__ （构造）函数 函数即对象 指向Function 指向一个constructor为自身的空对象 对象 指向创建该对象的构造函数 源于创建该对象的构造函数的显式原型 Function 是所有构造器的源头 指向自身 对象的constructor指向自身 Object Object.prototype是所有原型的源头 指向Function 是一个constructor指向自身的空对象 参考于： 面向对象的继承 基于对象的原型实现 1object.__proto__ = obj 指向一个对象 基于构造函数的原型实现 1Object.prototype 指向一个空对象 继承常见的几种方式 原型链继承: 原型与对象继承; 只继承于原型 问题: 实际上并不是真正的继承, 其实是多个构造函数之间共享一个对象(属性和方法) 创建子类的对象时, 不能向父级的构造函数传递任何参数。 原型式继承 借助构造函数: apply() ...
