chaixiangdong-CSDN博客

原创事件委托

事件委托将子元素的事件通过冒泡的形式交由父元素来执行<ul id="parentUl"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>JavaScri...

2019-12-24 15:39:36 87

原创 03Jquery 中 offset() 方法

一、语法 1、返回偏移坐标 $(selector).offset(); top:$(selector).offset().top; left:$(selector).offset().left; 2、设置偏移坐标： $(selector).offset({top:value,left:v...

2019-12-24 15:38:39 188

原创 02jquery获取各种鼠标位置

jquery获取各种鼠标位置获取当前鼠标相对img元素的坐标$('img').mousemove(function(e) {var positionX=e.pageX-$(this).offset().left; //获取当前鼠标相对img的X坐标var positionY=e.pageY-$(this).offset().top; //获取当...

2019-12-24 15:36:58 220

原创 02jQuery事件绑定

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前一：bind(type,[data],function(eventObject)) bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义...

2019-12-24 15:34:52 117

原创 01JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合//获取浏览器显示区域的高度$(window).height();//获取浏览器显示区域的宽度$(window).width();//获取页面的文档高度$(document.body).height();//获取页面的文档宽度$(document.body).width();...

2019-12-24 15:31:13 100

转载 JavaScript数组方法

常见数组方法join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5...

2018-11-12 10:01:50 83

原创 02JavaScript——AJAX、JSON

ajax是指一种在无需重新加载整个网页的情况下，能够更新页面局部内容，是于服务器交换数据并更新部分网页的技术/艺术,是异步的JavaScript和XML,不是新的编程语言，是一种使用现有标准的新方法XMLHttpRequest对象是ajax的核心与基础，所有的主流浏览器均支持，（但是在IE5、6支持ActiveXObject对象）过程 btn.onclick=function...

2018-09-11 20:29:39 133

原创 01JavaScript正则

正则表达式规则表达式(英语：Regular Expression,简写为regex、regexp或RE)，它是计算机科学的一个概念，正则表通常被用来检索、替换那些符合某个模式（规则）的文本，常应用于表单上，一种字符串的匹配规则，但它不是字符串，是字符串的匹配模式/规则正则表达式的创建 1、字面量创建:正则由两个/包裹var reg1=/a/; 模式：匹配指定字符串中的"a...

2018-09-11 20:22:22 91

原创 04JavaScript事件——BOM、window对象、navigator对象、screen对象、location对象

BOM：浏览器对象模型，包含多个对象有不同的功能window对象是BOM的顶层对象，其他都是该对象的子对象window对象：浏览器窗口对象，所有的JavaScript全局对象、函数以及变量均会自动成为window的属性和方法（对象成员），可以通过window去访问，默认情况下window可以省略 var a=10; console.log(a); console.log(window...

2018-09-10 21:21:58 231

原创 03JavaScript事件——放大镜、碰撞检测、滚轮事件、本地存储

JS原生放大镜js代码：<script> var img=document.querySelector("img") left.onmouseover=function(){ console.log("移入") mask.style.display="block"; right.style.display="block"; left.onmousemove...

2018-09-10 21:08:41 202

原创 02JavaScript事件——事件流、事件绑定类型、跨浏览器事件处理程序、阻止事件冒泡/默认事件

事件流事件流就是页面中的事件的触发顺序，IE提出了事件冒泡，网景提出了事件捕获事件冒泡：即事件由子元素向祖先元素传播，在所有的浏览器中，几乎所有都支持事件冒泡，事件的触发由最确定的元素向父级逐级传播，一直传到html事件捕获：和冒泡完全相反，由祖先向子元素传播，IE浏览器中不存在事件捕获，事件的触发由html开始向子级逐级传播DOM0级事件处理程序，默认都支持事件冒泡例：...

2018-09-10 20:33:11 141

原创 01JavaScript事件——事件对象、鼠标事件、键盘事件、表单事件

事件对象event事件对象：包含着所有的与事件有关的操作，所有浏览器都支持event对象，event对象会转入DOM0级、DOM2级、HTML指定定事件内置对象，可在事件处理函数内直接使用，event,在事件处理程序中有效，事件执行完成自动销毁兼容问题：在所有支持DOM2级事件处理程序的浏览器中，event是内置对象，可以直接拿来使用，IE8及其以前的版本不兼容DOM2级，event并不是...

2018-09-10 20:22:03 217

原创 03JavaScript动画DOM——滚动偏移、瀑布流、Image对象、图片预加载、懒加载、获取计算后样式

浏览器页面获取滚动偏移兼容写法：注意顺序不能乱var scroll=document.body.scrollTop||window.pageYOffset||document.documentElement.scrollTop测试各个浏览器滚动偏移属性window.onscroll=function(){ // 对各个浏览器获取页面滚动偏移的兼容测试 console.log...

2018-09-10 20:10:40 282

原创 02JavaScript动画DOM——获取节点、动态创建、添加、修改、删除、克隆元素

DOM对象文档对象模型（Document Object Model，简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。HTML DOM 定义了所有HTML 元素的对象和属性，以及访问它们的方法,也就是说HTML DOM 是一套标准规则:关于如何获取、修改、添加或删除HTML 元的,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,DOM独立于具...

2018-09-07 20:39:30 413

原创 01JavaScript动画DOM——js轮播图、动画、tween库、swipe库、offsetTop/Left/Width/Height、clientWidth/clientHeight

JS动画本质上就是通过JS的方式让元素的属性发生连续变化的过程JS动画核心： 1、获取元素属性，改变后重新赋值 2、改变过程是连续的->setInterval() 注：通过element.style.attr只能获取行间样式的值，并且得到的是一个字符串，通过层叠样式表设置的样式，用这样的方法只能得到"" 即空字符串。通过JS为元素设置样式，只有唯一的一种方式，就...

2018-09-07 19:59:02 202

原创 JavaScript获取元素与绑定事件onclick事件

获取元素的方法： 1、window.document.getElementById(id字符串)通过id名称获取，window可以不写，只能得到页面中带有指定ID的第一个元素2、document.getElementsByClassName(class名)通过class名称获取指定元素，获得的是一个元素集合并非一个元素，因此不能直接操作，需要将元素重集合中取出来在操作,取元素需要索...

2018-09-06 21:09:49 4654

原创 06JavaScript基础——data对象、闭包、类型转换

Data对象JS提供了Date对象，我们可以通过它得到当前设备的系统时间创建时间对象var date=new Date();console.log(date);// 通过date获取确切的时间 1、获得四位数的年份,number var year=date.getFullYear(); console.log(year); // 2、获得月份,得到的月份会比...

2018-09-06 20:48:10 123

原创 05JavaScript基础——函数、作用域、计时器

函数一对可以重复的代码块，但是代码块不会自动执行，需要触发机制，比如事件触发或人为调用语法： function 函数名（参数名）{ 函数体，是真正可以重复执行的代码部分 return 返回值； }function系统关键字，用来声明函数，功能类似于var函数名；类似于变量名，需要符合变量命名规则，可有可无...

2018-09-06 20:33:34 120

原创 04JavaScript基础——字符串、字符串常用方法

字符串的创建属性:length表示字符串包含字符的数量，又叫字符串长度,得到的是一个number1、字面量创建var str1="hello world";2、通过构造函数创建var str2=new String("hello world");字符串常用方法1、charAt():需要一个number作为参数,能得到指定字符串中number下标位置上的字符2、i...

2018-09-06 20:12:39 293

原创 03JavaScript基础——数组、二维数组、数组方法

数组：可以理解为一个大容器，像变量一样可以存储值或其他变量的值，数组的数据类型是Object，但是数组可以存储多个值或变量，并且他们在数组中是有顺序的。数组所存储的值或变量称为数组的元素.元素与元素之间需要用”,“号隔开数组属性：length，返回数组当前数组的长度，也就是数组中有多少个元素数组的创建：1、通过系统的构造函数Array（）来创建数组对象var arr =n...

2018-09-06 19:48:55 135

原创 02JavaScript基础——分支/循环结构、循环控制语句

一、分支结构if语句：if（条件） { 条件语句；//如果条件成立就执行大括号内的代码，否则跳过大括号，继续向下执行 } 条件可以是具体的值、变量、关系表达式、逻辑表达式 if(条件){ 如果条件成立就执行if大括号内的代码 }else{ ...

2018-09-06 19:22:26 158

原创 01JavaScript基础——引入/输出方式、变量、数据类型、运算符

一、js代码常见的的引入方式、输出方式、JS注释：引入方式：1、内部引入：将js代码通过script标签引入HTML文档内部，引入位置：理论上来说可以出现在文档的任意位置，甚至出现于HTML标签外部，但是通常来说，一般写在head标签或body标签内，以及body标签下边，当写在head标签里面时，注意将JS代码放在window.onload()中，也即当页面加载完成时，在执行JS代码...

2018-09-04 20:54:05 185

原创 HTML标签结构

1、单标签：由一个标签组成。例如<a> A不能放内容 B多是功能性标签2、双标签:由“开始标签”和“结束标签”两部分构成。例如<p></p> A可以放内容 B超文本、其他标签 C多是一些结构性标HTML常用术语Hyper Text ...

2018-06-27 20:25:14 445

chaixiangdong的博客