七、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() ...
JavaScript下的算法基础
前言声明 此篇文章的学习内容来自博主whitsats的算法基础课程。 Hash-两数之和 题目 给定一个整数数组nums和一个目标值target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。 示例: 123给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1] 接替思路 第一种方式：暴力破解 这种方式很简单，挨个遍历寻找合适的即可。这种方式的时间复杂度为O(n2)O(n^2)O(n2)。 123456789101112131415function twoSum(arr, tar) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length; j++) { if (arr[i] + arr[j] === t ...
23严格模式
概述 严格模式是什么 严格模式是Javascript中的一种限制性更强的変种方式。严格模式不是一个子集：它在语义上与正常代码有着明显的差异。 不支持严格模式的刘览器与支持严格模式的浏览器行为上也不一样，所以不要在未经严格模式特性测试情况下使用严格模式。 严格模式可以与非严格模式共存，所以脚本可以逐渐的选择性加入严格模式。 严格模式的目的 首先，严格模式会将Javascript陷阱直接变成明显的错误。 其次，严格模式修正了一些引擎难以优化的错误：同样的代码有些时候严格模式会比非严格模式下更快 第三，严格模式禁用了一些有可能在未来版本中定义的语法。 开启严格模式 全局开启严格模式 只需要在全局写以下字符串即可。作用于全局作用域 123"use strict";a = 100;console.log(a); 函数开启严格模式 在函数内写以下字符串即可。只作用于函数作用域。例如： 12345function fn() { "use strict"; v = 200; console.log(v);} 变量 禁止意 ...
