五、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);} 变量 禁止意 ...
22this关键字
概述 this是什么 this文键字是Javascript中最复杂的机制之ー。它是一个很特别的关键字，被自动定义在所有函数的作用域中。但是即使是非常有经验的 Javascript开发者也很难说清它到底指向什么。 实际上， Javascript中this的机制井没有那么先进，但是开发者往往会把理解过程复杂化。亳不夸张地说，不理解它的含义，大部分开发任务都无法完成。 this都有一个共同点，它总是返回一个对象。简单说，this就是属性或方法“当前”所在的对象。 为什么使用this this提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁井且易于复用。 随着使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用this则不会这样。 调用位置 想要了解this的绑定过程，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置） 通常来说，寻找调用位置就是寻找“函数被调用的位置”。最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数 函数调用 12345678910var v = 100;// this 经常 ...
21错误与异常
错误与异常是什么 错误，指程序中的非正常运行状态，在其它编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象，其中包含错误的描述信息。 通过使用Javascript提供的异常处理语句，可以用结构化的方式来捕捉发生的错误，让异常处理代码与核心业务代码实现分离。 错误与异常处理在应用中的重要性是毋庸置疑的。任何有影响力的Web应用都需要一套完善的错误处理机制。 try…catch语句 try表示标记一块待尝试的语句，如果语句出现错误，则通过catch语句进行捕捉。 1234567891011// 用于捕获指定语句块中的错误或异常try { console.log(v); //调用未定义的变量 -> 报错} catch (error) { // 用于处理try语句中的错误 // error 表示try语句中出现错误的信息 console.log("改变量未定义");} finally { // catch语句无法处理try语句中的错误或异常时，执行finally语句中的内 ...
