JavaScript基础
Andone_hsx
本应该努力的时候,为何选择安逸
展开
-
Javascript数组中的按值传递
var a = [1,2,3,4,5,6]; var b = a; a = [“你”,”我”,”他”]; alert(b); //[1,2,3,4,5,6] 当被朋友问到b显示的值是什么时?这样一个问题,当时直接的理解,数组是引用类型,应该是传递的是引用值,so b也是[“你”,”我”,”他”],于是错了。js数组传递是跟基本类型一样创建副本吗?于是,我又做了如下测试:var a = [原创 2017-02-03 23:20:39 · 902 阅读 · 0 评论 -
用Swiper实现轮播图
任务描述本关任务:用Swiper实现一个轮播图。效果如下:相关知识为了完成本关任务,你需要掌握:1.swiper基本的HTMl结构,2.基本功能的实现。搭建swiper环境1.下载插件进入swiper官网 http://www.swiper.com.cn/download/index.html,只需要下载swiper-4.2.2.min.js和swiper-4.2....原创 2018-12-17 11:11:26 · 1802 阅读 · 0 评论 -
jQuery之添加元素
任务描述本关任务:用jQuery添加元素。效果如下:相关知识为了完成本关任务,你需要掌握:1.append(),prepend(),2.before(),after()。基本的html结构如下:<button class="btn1">添加内容 </button> <button class="btn2">添加内容 </bu...原创 2018-12-10 21:44:07 · 929 阅读 · 0 评论 -
jQuery之删除元素
任务描述本关任务:用jQuery删除元素。效果如下:相关知识为了完成本关任务,你需要掌握:1.remove(),2.empty()。基本的html结构如下: <button class="btn">删除内容</button> <div class="box"> <p class="com first">我原创 2018-12-10 21:39:23 · 922 阅读 · 0 评论 -
jQuery遍历——过滤
任务描述本关任务:jQuery 遍历 DOM 元素的过滤方法。效果如下:相关知识为了完成本关任务,你需要掌握:1.first(),2. last() 3. eq(),4. filter(),5.not()。基本的html结构如下(CSS已省略):<div class="container"> <p>我是第一个元素</p> <p ...原创 2018-12-12 20:49:37 · 1557 阅读 · 0 评论 -
jQuery——遍历DOM元素的兄弟元素
任务描述本关任务:用 jQuery 遍历 DOM 元素的兄弟元素。效果如下:相关知识为了完成本关任务,你需要掌握:1.siblings(),2. next() , nextAll() 3. prev() ,prevAll()。基本的html结构如下(CSS已省略): <div class="container"> <p>p元素</p&...原创 2018-12-12 20:45:04 · 2299 阅读 · 0 评论 -
jQuery——遍历DOM元素的后代元素
任务描述本关任务:用 jQuery 向下遍历 DOM 节点。效果如下:相关知识为了完成本关任务,你需要掌握:1.children(),2. find()。向下遍历DOM节点基本的html结构如下(CSS已省略):<div>div (当前元素) <p>p (儿子元素) <span>span(孙子元素)</span> ...原创 2018-12-12 20:11:20 · 4156 阅读 · 0 评论 -
jQuery——遍历DOM元素的祖先元素
任务描述本关任务:用 jQuery 遍历 DOM 的祖先元素。效果如下:相关知识为了完成本关任务,你需要掌握:1.节点树,2.parent(),3.parents()。节点树基本的html结构如下:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8...原创 2018-12-12 20:01:25 · 3290 阅读 · 0 评论 -
jQuery动画效果——点赞动画效果
任务描述本关任务:掌握jQuery常见的动画效果——自定义动画。实现的效果如下:相关知识为了完成本关任务,你需要掌握:1.平移动画,2.相对值,3.stop()函数 。基本的结构如下:<button class="stop">动画开始</button> <div class="item">Hello</div> ...原创 2018-12-12 19:11:44 · 1703 阅读 · 0 评论 -
jQuery动画效果——淡入淡出
任务描述本关任务:掌握jQuery常见的动画效果——淡入淡出。效果图如下:相关知识为了完成本关任务,你需要掌握:1.fadeIn(),2.fadeOut(), 3.fadeToggle(), 4.fadeTo() 5.delay()。fadeIn(),fadeOut() 和 fadeToggle()前面已经总结过:jQuery的动画语法都是一样的,只是动画名称不一样。f...原创 2018-12-12 17:22:07 · 2999 阅读 · 0 评论 -
基于jQuery实现tab选项卡【js实现页签切换】
任务描述本关任务:用jquery实现一个tab切换的功能。效果图如下:相关知识为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法。层次选择器<div class="container"> <p> <span>第一个p标签下的span</span> <span>...原创 2018-12-04 14:35:12 · 6180 阅读 · 0 评论 -
DOM事件流之事件冒泡&事件捕获
今天因为要用原生js实现轮播效果,所以温故了下DOM事件,说句实话,现在无论什么框架,都离不开DOM操作,毕竟这是我们展示的最基本元素,就像人的细胞。源自曾经对于DOM事件流原理的“知其然而,不知其所以而然”——只知道click mouseover等实用。基于真正意义上的前端来说是:“理论与实践并行”。当然,DOM事件涵盖的内容较为庞杂,今天主要分享下DOM事件流。流 借用小北哥哥一句话:流是具有原创 2017-03-06 23:09:26 · 441 阅读 · 0 评论 -
Javascript基础(五)之循环结构
2、循环结构-1 1、问题 1、控制台中输出一句Hello World 2、控制台中输出10句Hello World 3、控制台中输出1000句Hello World 4、将 1000 句 Hello World 改成 “你好世界!” 5、在 1000 句你好世界基础上 增加原创 2017-02-03 22:07:33 · 627 阅读 · 0 评论 -
JavaScript基础(四) 之分支结构
分支结构-11、程序的流程 程序 = 数据结构 + 算法 任何复杂的算法都可以通过 "顺序","分支","循环" 三种结构来表示2、什么是分支结构 在不同的情况下,可以选择不同的语句来执行 当 条件 满足时,执行某些语句 - if结构 当 条件 满足时,执行某些语句 当条件 不满足时,执行另外一些语句原创 2017-02-03 21:57:00 · 730 阅读 · 0 评论 -
Javascript基础(三)之运算符、函数
1、运算符 1、位运算符 作用: 针对数字操作 将数字先转换为二进制再进行运算操作 二进制: 由0,1组成,逢二进一 十进制 二进制 0 0 1原创 2017-01-22 22:37:46 · 430 阅读 · 0 评论 -
JavaScript基础(二)之数据类型转换 、运算符 &表达式
1、数据类型转换 弱类型语言:由数据决定数据类型 var stuName = “张三丰”;//string stuName = 35; //number stuName = true;//boolean 函数:var 变量=typeof(变量);1、隐式转换 不同数据类型之间的数据在计算过程中会自动进行转换 1、数字 + 字符串 :将数原创 2017-01-21 21:14:03 · 542 阅读 · 1 评论 -
Javascript基础(一)之JavaScript(JS) 概述、JS 基础语法 、变量 和 常量(重点) 、数据类型
1、JS 概述 1、什么是JS JS:Javascript,是一种运行于JS解释器/引擎中的解释型脚本语言 JS解释器/引擎: JS的运行环境,有以下两种 1、独立安装的JS解释器(NodeJS) 2、嵌入在浏览器内核中的JS解释器 解释型: 编译型:运行程序前,会先将其编译,并且能够检查语法错原创 2017-01-19 23:35:19 · 639 阅读 · 0 评论 -
关于去除JS数组中的重复元素问题
例如:数组 arr=[1,2,3,1,2,4,5,6];要去除arr[]数组中相同元素(即arr[]数组元素具有单一性)。这里主要讲述两种实现方式:一种是遍历方式实现,另一种是关联数组方式实现。 较为好理解也是较为普遍的一种方式遍历方式;代码如下:var arr=[1,2,3,1,2,4,5,6];function repeat1(arr){ //遍历arr中每个原创 2017-02-06 23:34:40 · 1179 阅读 · 0 评论 -
如何利用Bootstrap-validator实现表单验证
任务描述本关任务:用Bootstrap-validator来验证表单。效果图如下:相关知识为了完成本关任务,你需要掌握:1.Bootstrap-validator的引用,2.基本的页面结构,3.Js的初始化。Bootstrap-validator的引用Bootstrap-validator是依赖 Bootstrap 和 jQuery 的,所以要保证有这样的环境...原创 2018-12-17 11:55:18 · 1637 阅读 · 0 评论