行为层JavaScript+jQuery
JavaScript + jQuery【不完整】
一、JavaScript 行为层
- JavaScript简介
- JavaScript历史: 1995年,网景公司 凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。
- ECMAScript: 一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准,被称为ECMAScript标准。
- JavaScript版本
- 一个完整的JavaScript包括:ECMAScript【语法 变量和数据类型 运算符 逻辑控制语句 关键字保留字 对象】+BOM【浏览器对象模型】+DOM【文档对象模型】
- 特点
- JavaScript主要用来在HTML页面中添加交互行为
- JavaScript是一种脚本语言,语法和java类似
- JavaScript一般用来编写客户端的脚本
- JavaScript是一种解释性语言,边执行边解释
- 基本语法
- JavaScript严格区分大小写,如果弄错了大小写,程序将报错或者运行不正常。
- 声明:var 合法的变量名;
- 由于JavaScript属于弱类型语言,因此允许不声明变量而直接使用,系统将会自动声明该变量 如:x=88;
- 对象
- 通过new Object()方式创建对象
- 字面量赋值方式创建对象
- 数据类型和变量
- Number(JavaScript不区分整数和浮点数,统一用Number表示)
- 123; // 整数123
- 0.456; // 浮点数0.456
- 1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5
- -99; // 负数
- 0xlf; // 十进制的31
- NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
- Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
字符串
- 以单引号'或双引号"括起来的任意文本,比如'abc',"xyz"等等。请注意,''或""本身只是一种表示方式,不是字符串的一部分,因此,字符串'abc'只有a,b,c这3个字符。
- 常用方法1:indexOf(str,index):返回指定字符首次出现的位置
- 常用方法2:charAt(index):通过索引值查找,返回指定字符
- 常用方法3: toLowerCase():字符串小写
- 常用方法4: toUpperCase():字符串大写
- 常用方法5: substring(from,to):传入两个索引值,截取两个值之间的字符串,不包括to值。返回新字符串,若start为负数,默认start为0
- 常用方法6: split(spearator,limit):分割字符串,以数组形式返回。spearator指定切割的地方,limit设置返回字符串的最大长度
布尔值:经常用在条件判断中,可以直接用true、false表示布尔值,也可以通过布尔运算计算出来 。
- true; // 这是一个true值
- false; // 这是一个false值
- 2 > 1; // 这是一个true值
- 2 >= 3; // 这是一个false值
null和undefined
- null表示一个“空”的值,它和0以及空字符串''不同,0是一个数值,''表示长度为0的字符串,而null表示“空”
- 当声明的变量未初始化时,该变量的默认值是undefined,它表示“未定义”
- 在其他语言中,也有类似JavaScript的null的表示,例如Java也用null,Swift用nil,Python用None表示。
- JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义。事实证明,这并没有什么用,区分两者的意义不大。大多数情况下,我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
- undefined表示表明了变量但未对该变量赋值,null便是对该变量赋予了一个空值
- 数组: 是一组按顺序排列的集合,集合的每个值称为元素。
- JavaScript的数组可以包括任意数据类型。例如: [1, 2, 3.14, 'Hello', null, true];
- 另一种创建数组的方法是通过Array()函数实现: new Array(1, 2, 3); // 创建了数组[1, 2, 3]
- 出于代码的可读性考虑,强烈建议直接使用[]
- 数组的元素可以通过索引来访问。请注意,索引的起始值为0
- slice()
- slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array
- * slice()的起止参数包括开始索引,不包括结束索引。
- 如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array
- push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉
- 如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉
- sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序;
- reverse()把整个Array的元素给掉个个,也就是反转
splice()
- splice()方法是修改Array的“万能方法”它从指定的索引开始删除若干元素,然后再从该位置添加若干元素
- 如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉
concat()
- concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array
- 注意,concat()方法并没有修改当前Array,而是返回了一个新的Array。
- 实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里
join()
- 把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串
- join(分隔符);
- 运算符号
- 算数运算符:+ - * / % ++ --
- 比较运算符:> < >= <= == != === !==
- 逻辑运算符:&& || !
- 赋值运算符:= += -=
- 常用系统函数
- parseInt()与parseFloat()
- 这两个方法的参数数据类型都是字符串
- parseInt() 是将数字开头的整数部分取出来
- parseFloat()是将数字开头的整数或浮点数取出来
isNaN()函数: 用于检查一个变量是否为数值,如果是,则返回false,如果不是,则返回true。 eval()函数: 用于计算并返回字符串表达式的值
- JavaScript操作BOM对象(一)
- 常用属性
- history 有关客户访问过的URL的信息
- back()加载history对象列表中的前一个URL
- forward()加载history 对象列表中的下一个URL
- go()加载history 对象列表中的某个具体URL
- location 有关当前URL的信息
- host:设置或返回主机名和当前URL的端口号
- hostname:设置或返回当前URL的主机名
- href:设置或返回完整的URL
- reload()重新加载当前文档
- reolace()用新的文档替换当前文档
- screen只读属性,包含有关客户端显示屏的信息
常用方法
- prompt()显示可提示用户输入的对话框
- alert()显示一个带有提示信息和一个“确定”按钮的警示对话框
- confirm()显示一个带有提示信息、“确定”和“取消”按钮的对话框
- close()关闭浏览器窗口
- open()打开一个新的浏览器窗口,加载给定URL所指定的文档
- setTimeout()在指定的毫秒数后调用函数或计算表达式
- setInterval()按照指定的周期(以毫秒计)来调用函数或表达式
document对象
- 属性1: referrer:返回载入当前文档的URL
- 属性2: URL:返回当前文档的URL
- 方法1: getElementById()返回对拥有指定id的第一个对象的引用
- 方法2: getElementByName()返回带有指定名称的对象的集合
- 方法3: getElementsByTagName()返回带有指定标签名的对象的集合
- 方法4: write()向文档写文本、HTML表达式或JavaScript代码
- JavaScript操作BOM对象(二 内置对象)https://www.cnblogs.com/liuluteresa/p/6413988.html
- Date
- getDay()返回一周中的第几天(0-6)
- getYear()返回年份.2000年以前为2位,2000(包含)以后为4位
- getFullYear()返回完整的4位年份数
- getMonth()返回月份数(0-11)
- getDate()返回日(1-31)
- getHours()返回小时数(0-23)
- getMinutes()返回分钟(0-59)
- getTime()返回从1970年1月1号0:0:0到现在一共花去的毫秒数
- ceil(x) 对数进行上舍入
- floor(x)对数进行下舍入
- round(x)四舍五入
- random() 返回0~1之间的随机数
- JavaScript操作DOM对象 https://www.cnblogs.com/Chenghao-He/p/7056394.html
- 操作节点属性
- attributes // 获取所有标签属性
- setAttribute("属性名","属性值") // 设置标签属性
- getAttribute("属性名") // 获取指定标签属性
创建和插入节点
- createElement(tagName)创建一个标签名为tagName的新元素节点
- A.appendChild(B)把B节点追加至A节点的末尾
- insertBefore(A,B)把A节点插入至B节点前
- cloneNode(deep)复制某个指定的节点
删除和替换节点
- removeChild(node)删除指定的子节点
- replaceChild(newnode,oldnode)用其他的节点替换指定的节点
style属性 https://www.cnblogs.com/zhuhuibiao/p/9825334.html 获取元素位置
- 面向对象编程
- 构造函数 和 原型对象
- 原型继承 和 class继承
- strict模式
- Map https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
- Set https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set
二、jQuery http://www.w3school.com.cn/jquery/index.asp
- jQuery的优势
- 轻量级
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 隐式迭代
- 丰富的插件支持
- 选择器 http://phpstudy.php.cn/e/jquery/jquery_ref_selectors.html
- 基本过滤选择器
- :first 获取数组中第一个元素
- :last 获取数组中最后一个
- :eq(selector) 获取指定索引
- :gt(index) 大于指定索引
- :lt(index) 小于指定索引
- :even 偶数,从0开始计数(0、2、4即1/3/5行)
- :odd 奇数
- :not(selector) 去除所有与指定选择器匹配的元素
- :header 获得所有标题元素
- :animated 获得所有动画
- :focus 获得焦点
- 可见性过滤选择器
- :Hidden:匹配所有不可见元素,或者type为hidden的元素
- :Visible:匹配所有的可见元素
- :Val():获得匹配元素的当前值。Vallue的值
- :Show();显示隐藏的匹配元素。
- :Hide();隐藏所有的元素
- 事件 http://phpstudy.php.cn/e/jquery/jquery_ref_events.html
转载于:https://www.cnblogs.com/guisenbin/p/10454451.html
行为层JavaScript+jQuery相关推荐
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- Java项目:饰品商城系统(java+SSM+JSP+javascript+jQuery+Mysql)
源码获取:俺的博客首页 "资源" 里下载! 项目介绍 本项目分为前台与后台,有普通用户与管理员两种角色: 管理员角色包含以下功能: 管理员登录,用户管理,一级分类管理,二级分类管理 ...
- Java项目:演唱会售票管理系统(java+SSM+JSP+JavaScript+jQuery+mysql)
源码获取:俺的博客首页 "资源" 里下载! 项目介绍 本项目分为前后台,前台为普通用户登录,后台为管理员登录: 管理员角色包含以下功能: 管理员登录,管理员信息管理,网站用户信息管 ...
- 基于javaweb的演唱会售票管理系统(java+ssm+jsp+javascript+jquery+mysql)
基于javaweb的演唱会售票管理系统(java+ssm+jsp+javascript+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclips ...
- 如何在JavaScript / jQuery中查找数组是否包含特定字符串? [重复]
本文翻译自:How to find if an array contains a specific string in JavaScript/jQuery? [duplicate] This ques ...
- 生日祝福(HTML+CSS+JavaScript+jQuery)
生日倒计时 下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]
- javascript:jquery.history.js使用方法
javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...
- Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新)...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
- 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
最新文章
- java拷贝压缩文件_Android java, 快速文件拷贝,文件压缩,获得系统时间 | 学步园...
- 解决Caused by: java.lang.NoSuchMethodException: com.mchange.v2.c3p0.cfg.C3P0Config.init()的总结...
- websocket采用tomcat方式,IOC类对象无法注入的解决方案
- 哪一类功率放大电路效率最高_电路分析基础(8)-最大功率传输与阻抗匹配分析...
- leetcode 6 Z 字形变换 c代码
- 开发类似vs的黑色风格_传闻:2020年《使命召唤》将是《黑色行动》重启作品
- 说干就干的p2psearcher2013
- python是动态语言
- Tips--windows系统下gcc编译C文件为so共享库
- Scala 隐式转换
- 记录一下目前thinksoar portal的进度和计划!
- 【Qt串口调试助手】1.6 - QTimer定时自动发送
- jquery双击修改_jQuery双击
- Linux常用远程连接工具介绍,总有一款适合你
- 详解Python中列表切片及浅拷贝的关系(上)
- 如何通过反向代理实现伪装IP?
- Praat脚本-004 | 替换标注内容
- 洛谷 P1359 租用游艇
- 2022年软件设计师考试复习资料(1)
- 二极管专题:二极管钳位电路