world_kun的博客

let startX,startY;document.addEventListener("touchstart",function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY;});document.addEventListener("touchmove",function(e){ var moveX = e.touches[0].pageX; var moveY = e.to...

1 val方法val方法用于设置和获取表单元素的值，例如input、textarea的值//设置值$("#name").val(“张三”);//获取值$("#name").val();【案例：京东搜索.html】2 html方法与text方法html方法相当于innerHTMLtext方法相当于innerText//设置内容$(“div”).html(“<sp...

1 常用插件插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。1.1 jquery.color.jsanimate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。使用插件的步骤1. 引入jQuery文件2. 引入插件（如果有用到css的话，需...

1 链式编程通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。【案例：五角星评分案例.html】2 each方法jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同...

1 jQuery事件机制JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。2 jQuery事件发展历程(了解)简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)2.1 简单事件...

1 什么是jQuery选择器jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有...

1什么是jQuery?jQuery的官网[http://jquery.com/](http://jquery.com/)jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）jQuery其实就是一个js文件，里面封装了一...

AJAX 1. 概述Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： A 地址栏输入地址，回车，刷新 B 特定元素的 href 或 src 属性 C 表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受...

1伪数组和数组在JavaScript中，除了5种原始数据类型之外，其他所有的都是对象，包括函数（Function）。2对象与数组的关系在说区别之前，需要先提到另外一个知识，就是 JavaScript 的原型继承。所有 JavaScript 的内置构造函数都是继承自 `Object.prototype` 。在这个前提下，可以理解为使用 `new Array()` 或 `[]` 创...

1 什么是正则表达式正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。2正则表达式的...

1递归执行模型function fn1 () {console.log(111)fn2()console.log('fn1')}function fn2 () {console.log(222)fn3()console.log('fn2')}function fn3 () {console.log(333)fn4()console....

1高阶函数-函数可以作为参数-函数可以作为返回值1.1 作为参数function eat (callback) {setTimeout(function () {console.log('吃完了')callback()}, 1000)}eat(function () {console.log('去唱歌')})1.2作为返回值functi...

1 函数的定义方式方式1：函数声明方式2：函数表达式方式3：`new Function`1.1 函数声明function foo () {}1.2 函数表达式var foo = function () {}1.3 函数声明与函数表达式的区别函数声明必须有名字函数声明会函数提升，在预解析阶段就已创建，声明前后都可以调用函数表达式类似于变量赋值函数表达式可以没有名字，例如匿...

1 什么是继承现实生活中的继承；程序中的继承。2 构造函数的属性继承：借用构造函数function Person (name, age) {this.type = 'human'this.name = namethis.age = age}function Student (name, age) {// 借用构造函数继承属性成员Person.call(this...

原型内容引导：1使用 prototype 原型对象解决构造函数的问题2分析 构造函数、prototype 原型对象、实例对象 三者之间的关系3属性成员搜索原则：原型链4实例对象读写原型对象中的成员5原型对象的简写形式6原生对象的原型+Object+Array+String+...7原型对象的问题8构造的函数和原型对象使用建议1 更好的解决方案： `...

1偏移量offsetParent用于获取定位的父级元素offsetParent和parentNode的区别var box = document.getElementById('box');console.log(box.offsetParent);console.log(box.offsetLeft);console.log(box.offsetTop);consol...

1节点操作var body = document.body;var div = document.createElement('div');body.appendChild(div);var firstEle = body.children[0];body.insertBefore(div,firstEle);body.removeChild(firstEle);var tex...

创建元素的三种方式1document.write()document.write('新设置的内容<p>标签也可以生成</p>');2innerHTMLvar box = document.getElementById('box');box.innerHTML = '新内容<p>新标签</p>';3document.cr...

1非表单元素的属性href、title、id、src、classNamevar link = document.getElementById('link');console.log(link.href);console.log(link.title);var pic = document.getElementById('pic');console.log(pic.src);...

事件：触发-响应机制Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。1事件三要素事件源:触发(被)事件的元素事件类型:事件的触发方式(例如鼠标点击或键盘点击)事件处理程序:事件触发后要执行的代码(函数形式)2事件的基本使用var box = document.getElementById('box');bo...

1DOM的概念文档对象模型（Document Object Model，简称DOM），是[W3C](http://baike.baidu.com/item/W3C)组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与[Ne...

1BOM的概念BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等2BO...

1API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())2Web API的概念浏...

1 对象1.1 为什么要有对象function printPerson(name, age, sex....) {}// 函数的参数如果特别多的话，可以使用对象简化function printPerson(person) {console.log(person.name);……}1.2 什么是对象现实生活中：万物皆对象，对象是一个具体的事物，一个具体的...

1数组1.1为什么要学习数组之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？1.2数组的概念所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。1.3数组的定义数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。通...

过去调试JavaScript的方式alert()console.log()断点调试：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。调试步骤javascript浏览器中按F12-->sources-->找到需要调试的文件-->在程序...

1操作符运算符 operator5 + 6 表达式 组成 操作数和操作符，会有一个结果1.1算术运算符+ - * / % 1.2一元运算符一元运算符：只有一个操作数的运算符5 + 6 两个操作数的运算符 二元运算符++ 自身加1-- 自身减1前置++var num1 = 5;++ num1;var num2 = 6;c...

1变量1.1什么是变量什么是变量：变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。为什么要使用变量：使用变量可以方便的获取或者修改内存中的数据。1.2如何使用变量var声明变量var age;变量的赋值var age;age = 18;同时声明多个变量var age, name, sex;age = 10;nam...

1 浏览器说明浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。通俗的讲:可以显示页面的一个软件,国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等，...

1过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(...

1结构(位置)伪类选择器（CSS3)- :first-child :选取属于其父元素的首个子元素的指定选择器- :last-child :选取属于其父元素的最后一个子元素的指定选择器- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从...

HTML5新标签与特性1文档类型设定document HTML sublime 输入 html:4s XHTML sublime 输入 html:xt HTML5 sublime 输入 html:5 <!DOCTYPE html> 2字符设定<meta http-equiv="cha...

1电商项目介绍学习目标:1掌握电商中间部分制作2理解BFC使用3了解优雅降级和渐进增强4了解CSS压缩和验证工具typora-copy-images-to: media项目名称：电商网项目描述：电商首页公共部分的头部和尾部制作，电商首页中间部分。2项目背景现阶段电商类网站很流行，电商类网站需要的技术也是较为复杂的，这里用电商网站练习布局技...

1元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！1.1display 显示display 设置或检索对象是否及如何显示。...

定位(position)如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。1为什么要用定位？那么定位，最长运用的场景再那里呢？ 来看几幅图片，你一定会有感悟！第一幅图， 小黄色块可以再图片上移动：第二幅图， 左右箭头压住图片：第三幅图, hot 再盒子外面多出一块，更加突出：以上三个小地方，如果...

1 PS界面组成ctrl + r显示隐藏标尺右击 标尺 --- 把里面的单位一律改为像素ctrl+ d取消选区菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、绘图窗口窗口菜单，可显示隐藏所有面板工作区：（新建）调整浮动面板2 图层操作图层面板快捷键F7其实图层就是一张张透明的纸可以实现叠加问题。图层选择： 使用移动工具V1、图层缩览图...

1浮动(float)1.1普通流(normal flow)前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS的定位机制有3种：普通流（标准流）、浮动和定位。html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内...

其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。1看透网页布局的本质看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页...

1 CSS背景(background) CSS 可以添加背景颜色和背景图片，以及来进行图片设置。background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动...

1 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。就近原则一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。1.样...