前端
关注
分享
扫一扫
gxgalaxy
这个作者很懒，什么都没留下…
展开
-
前端学习－－查找
目录顺序查找二分查找插值查找顺序查找普通的遍历，穷举法。/** * 查找一个数组中目标值是否存在（顺序查找） * @param {*} arr * @param {*} target */var num = 0;function inOrderSearch(arr, target){ for ( var i = 0; i < arr.length; i++){...原创 2019-11-26 21:11:01 · 126 阅读 · 0 评论 -
前端必备算法－－排序
目录排序算法选择排序冒泡排序插入排序快速排序测试数据排序算法不同的场景中，不同的排序算法执行效率不同。/** * 交换数组中指定的位置 * @param {*} arr * @param {*} i1 * @param {*} i2 */function swap(arr,i1,i2){ var temp = arr[i1]; arr[i1] = arr[...原创 2019-11-26 19:46:01 · 155 阅读 · 0 评论 -
jQuery-省市联动插件的使用
常用的jQuery插件网站推荐jq22进入网站搜索distpicker插件选择下载自己喜欢的样式使用插件的方法 １．引入jq文件 ２．引入插件文件 ３．调用插件方法<!DOCTYPE html><html lang="en"><head> &l...原创 2019-11-19 15:10:21 · 354 阅读 · 0 评论 -
jQuery-五角星评分案例
文章目录效果图需求源代码效果图需求 //需求１：鼠标移入到li标签上，当前li标签和他之前的li标签显示实心五角星，后面的li显示空心五角星 //需求２：鼠标离开li，所有的li都变成空心 //需求３：点击li，鼠标离开后，刚才点击的那个li和之前的li都变成实心五角星，后面的空心五角星源代码<!DOCTYPE html><h...原创 2019-11-19 14:59:30 · 441 阅读 · 0 评论 -
jQuery-固定导航栏
文章目录思路知识点源代码思路 思路：给页面设置一个滚动事件，时刻监视页面的scrollTop的值 如果这个值大于第一部分的高度，就设置第二部分为固定定位 如果这个值小于第一部分的高度，就设置第二部分的定位还原知识点 //scrollLeft() 表示获取或者设置元素内容被卷曲出去的宽度. //scrollTop() 表示获取或者设置元素内容...原创 2019-11-19 14:54:46 · 240 阅读 · 0 评论 -
jQuery-按键变色案例
效果：当在键盘上按下r 时变成red按下g时变成green按下b时变成blue按下p是显示purple按下y时显示yellow其余显示pink文章目录效果图源代码效果图按下ｂ时：效果：当在键盘上按下r 时变成红色 按下g时变成green 按下b时变成blue 按下p是显示purple 按下y时显示yellow源代码<!DOCTYPE html><ht...原创 2019-11-19 14:45:53 · 1459 阅读 · 0 评论 -
jQuery-实现表格的全选反选
这里写自定义目录标题效果图需求源代码效果图需求需求１：上面的多选框选中，下面的多选框跟着选中，上面的多选框没有选中，下面的多选框跟着不选中需求２：下面的多选框都有单击事件需求３：如果下面的多选框们都选中了，那么上面的那个多选框跟着选中，如果下面多选框有一个没有选中，那么上面的多选框也就不选中：源代码<!DOCTYPE html><html lang="en"...原创 2019-11-18 23:59:32 · 662 阅读 · 0 评论 -
jQuery-使用on委托注册实现动态数据的添加和删除
这里写自定义目录标题必会知识点效果图需求源代码必会知识点on方法注册简单事件与委托事件 1.on简单注册事件(不支持动态注册) 两个参数： (1)事件名称 (2)事件处理程序 ``` $('div').on('click',function(){ // console.log('我是单击事件'); }); ``` ...原创 2019-11-18 23:45:59 · 408 阅读 · 0 评论 -
HTMLDocument的变化和插入标记
HTMLDocument的变化HTML５扩展了HTMLDocument，新增了一些新的功能。readyState属性使用document.readyState最恰当的方式，就是通过他来实现一个指示文档已经加载完成的指示器。有四个返回值，以下两个返回值比较常见：loading,正在加载文档complete，已经加载完文档if (document.readyState == "comp...原创 2019-10-11 23:38:43 · 546 阅读 · 0 评论 -
CSS实现毛玻璃效果实例
这里写自定义目录标题CSS实现毛玻璃效果效果图整体实现思路源代码CSS实现毛玻璃效果我们经常会在页面中看到使用毛玻璃效果来美化页面的实例。整个实现过程比较简单，需要用到css中filter属性中的blur函数以及伪元素。效果图整个效果如下：整体实现思路对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉所以我们通过伪元素来解决这个问题。模糊效果并不会应用到其背后的...原创 2019-08-21 20:32:50 · 452 阅读 · 0 评论 -
DOM之习题练习
1、封装函数，返回元素e的第n层祖先元素节点重点代码：<div> <strong> <span> <i></i> </span> </strong></div> <script type="text/javascript"> function retPar...原创 2019-05-18 17:04:03 · 1685 阅读 · 0 评论 -
JS之脚本化CSS
1、读写元素css属性dom.style.prop //只有这个可以写入可以读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应该加css。eg：float->cssFloat 复合属性必须拆解，组合单词变成小驼峰式写法 background-color ->backgroundColor 写入的值必须是字符串格式2、查询计算样式window....原创 2019-05-23 09:16:17 · 157 阅读 · 0 评论 -
JS之获取窗口属性
查看页面滚动条的滚动距离1、window.pageXOffset/pageYOffset(IE8及以下不兼容)2、IE8及以下的浏览器 document.body.scrollLeft/Top document.documentElement.scrollLeft/Top 这两个互相冲突，一个有值，另一个一定为0document.body.scroll...原创 2019-05-23 08:34:04 · 655 阅读 · 0 评论 -
JS之事件
如何绑定事件1、.onclick = function(){}；兼容性很好，但是一个元素的同一事件上只能绑定一个处理，基本等同于写在HTML行间上var div = document.getElementsByTagName('div')[0];div.onclick = function(){ console.log(this); }2、obj.addEventList...原创 2019-05-23 08:22:48 · 223 阅读 · 0 评论 -
JS之事件处理模型——事件冒泡、事件捕获
1、事件冒泡 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）<div class="wrapper"> <div class="content"> <div class="box"> </div> </div&...原创 2019-05-23 00:32:21 · 345 阅读 · 0 评论 -
原生JS事件绑定练习题
1、<ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li></ul>使用原生JS ，addEventListener，给每个li绑定一个click事件，输出他们的顺序<ul> ...原创 2019-05-22 20:04:29 · 469 阅读 · 0 评论 -
JavaScript之DOM操作实现一个鼠标滑动颜色变化实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="./src/demo.css"> <style> *{...原创 2019-05-16 21:48:09 · 678 阅读 · 0 评论 -
DOM基本操作之习题二
1、封装兼容性方法，求滚动条滚动离getScrollOffset()<script type="text/javascript">function getScrollOffset(){ if(window.pageXOffset){ return{ x : window.pageXOffset, y : window.pageYOffset ...原创 2019-05-22 00:23:37 · 326 阅读 · 0 评论 -
JavaScript 之作用域和作用域链
1、[[scope]]：每个JavaScript函数都是一个对象，对象的有些属性我们可以访问，有些不可以，这些属性仅供引擎存取，其中[[scope]]就是其中一个。[[scope]]值得是我们所说的作用域，存储了运行期上下文集合（执行期上下文（AO GO）见https://blog.csdn.net/gxgalaxy/article/details/88729727）。2、作用域链：[[sco...原创 2019-03-25 18:59:47 · 124 阅读 · 0 评论 -
前端学习——css3
1.圆角边框：border-radius2.阴影：box-shadow:25px 25px 5px #999;(四个值--左上角，右上角，左下角，右下角；三个值：左上角，右上角和左下角，右下角；两个值：左上角和右上角，右上角和左下角)3.定位：background-origin 属性规定 background-position属性相对什么位置来定位。 三个值 padding-b...原创 2019-04-11 18:33:23 · 91 阅读 · 0 评论 -
css3 2D变换之transform
transform属性的属性值 值/函数 说明 translate（length，length） 根据X轴和Y轴给定的...原创 2019-04-11 19:26:33 · 192 阅读 · 0 评论 -
css3动画Animation之完成一个心跳动画
1.@keyframes规则：要想创建CSS3动画，必须了解@keyframes规则。@keyframes规则是创建动画，在这个规则内指定一个CSS样式和动画，然后逐步从目前样式更改为新的样式。2.注意：当在@keyframes创建动画的时候，必须将它绑定到一个选择器，否则动画将不会有任何效果。其中包括动画的名称，还有动画的时常。3.@keyframes 规定动画 a...原创 2019-04-11 20:47:52 · 1935 阅读 · 0 评论 -
CSS3之缩略图作为连接
在CSS3中我们利用border来创建缩略图，并且在图片外层加一个超连接代码如下：<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <htm...原创 2019-04-11 23:59:27 · 237 阅读 · 0 评论 -
CSS3之定位图片文本
代码：<!DOCTYPE html><html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>d...原创 2019-04-12 08:33:46 · 617 阅读 · 0 评论 -
JavaScript之call、apply
在学习call和apply之前，我们先来简单的了解一下JavaScript中this指针：*简单来说：如果不用new操作符而直接调用，那么构造函数的执行对象就 是window，即this指向了window。现在用new操作符后，this就指向了新生成的对象。1、 call和apply都是改变this指向。2、区别在于传参列表不同call 需要把实参按照形参的个数传进去apply需要传一个...原创 2019-04-26 23:34:10 · 125 阅读 · 0 评论 -
JavaScript之继承的发展史
1.传统形式–原型链缺点：过多的继承了很多没有用的属性Grand.prototype.lastname = "ji"; function Gand(){ } var grand = new Grand(); Father.prototype = grand; function Father(){ this.name = "hehe"; } var fat...原创 2019-04-27 13:29:56 · 193 阅读 · 0 评论 -
JavaScript之原型
原型1、定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。Person.prototype //--原型function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; }v...原创 2019-04-24 21:10:19 · 259 阅读 · 0 评论 -
JavaScript 之原型的动态性
因为通过原型查找值是一次搜索过程，因此我们对原型所做的任何修改都能够立即从实例上反映出来。即使是先创建了实例在修改了原型也是一样的。直接在控制台进行操作，便于结果展现。var person = new Person();Person.prototype.name = "sunny";function Person(){}其原因是因为实例和原型之间松散的连接关系，首先会在实...原创 2019-04-24 21:54:19 · 357 阅读 · 0 评论 -
JavaScript之深度拷贝（递归方法）
步骤：判断是不是原始值 （typeof() 如果不是obj基本上就是原始值） 判断是数组还是对象 （使用instanceof toString constructor推荐使用toString） 建立相应的数组或者对象例子：将obj拷贝到obj1中去var obj = { name : "abc", age : 123, card : ["hahoa", "m...原创 2019-04-30 00:02:36 · 324 阅读 · 0 评论 -
JavaScript之DOM的基本操作
查document 代表整个文档 document.getElementById() 通过id标识选择这个元素，一个id对应一个元素 .getElementsByTagName() 通过标签名来选中 .getElementsByName() 只有部分标签name可生效（表单，表单元素，img，iframe） .getElementsByClassNam...原创 2019-05-18 23:55:41 · 164 阅读 · 0 评论 -
JS之Date对象，写一个计时器
写一个计时器，到三分钟停止<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="./src/demo.css"> &l...原创 2019-05-19 16:19:52 · 437 阅读 · 0 评论 -
Javascript之DOM实现选项卡功能
定义：DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和Xml功能的一类对象的集合，也有人称DOM是对HTML以及XML的标准编程接口。下面我们实现一个简单的选项卡功能：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...原创 2019-05-16 00:02:13 · 694 阅读 · 0 评论 -
主流浏览器
主流浏览器 内核 IE trident Firefox Gecko Google chrome Webkit/blink Safari Webkit Opera presto原创 2018-10-08 21:15:14 · 373 阅读 · 1 评论