JavaScript总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_38380173/article/details/81707865

String对象常用方法
indexOf（str，index）查找某个指定的字符串在字符串中首次出现的位置
charAt（index）返回在指定位置的字符
toLowerCase（）把字符串转换为小写
toUpperCase（）把字符串转换为大写
substring（index1，index2）返回位于指定俩数之间的字符串，不包括index2对应的字符
split（str）将字符串分割为字符串数组“，”

数组的常用方法和属性
属性length设置或返回数组中元素的数目
方法join（分隔符）；/“-”把数组的所有元素放入一个字符串，通过一个分隔符进行分隔
sort()排序
push（）向数组末尾添加一个或多个元素，并返回新的长度

window.alert(message) 弹出一个警示窗口，带一个确认按钮
window.confirm(question) 弹出一个确认窗口，带确认和取消两个按钮，选择返true或false
window.prompt(tips, defaultValue) 弹出一个输入窗口，接收用户输入，tips为输入提示文字,defaultValue 为默认值
window.setTimeout(callback, delay) 若干毫秒后调用函数（callback为函数，delay为毫秒）
window.setInterval(callback, delay) 按指定周期（以毫秒计）来调用函数
clearTimeout（setTimeout（）返回的ID值）；和clearInterval（）用来清除上述函数设置的定时器

系统函数
parseInt（）解析一个字符串，并返回整数
parseFloat（）解析一个字符串，并返回一个浮点数
var num=parseFloat（“4567cccc”）；返回值为4567
isNaN(X);x是特殊的非数字值，则返回值是true，否则false

chrome开发者工具或者alert（）方法调试
elements查看和编辑当前页面中HTML和CSS元素
Console显示脚本中所输出的调试信息或运行测试脚本
sources查看和调试当前页面所加载的脚本的源文件f5
network查执行时间http请求的详细信息，
timeline查看脚本执行时间，页面元素渲染时间等信息
profiles查看cpu与内存占用等信息
pesource查看当前页面所请求的资源文件，如html，css样式文件等
audits用于优化前端页面，加速网页加载速度等

常见的事件通常用于处理函数
onload一个页面或一副图像完成加载（注册，登陆时单击时候验证输入内容的合法性）
onlick鼠标单击某个象
onmouseover鼠标指针移到某个元素上
onkeydown某个键盘按键被按下
onchange域的内容被改变

地址对象location.reload();刷新本页， replace();用新的文档替换当前文档
hostname 返回 web 主机的域名
pathname 返回当前页面的路径和文件名
port 返回 web 主机的端口（80 或 443）
protocol 返回所使用的 web 协议（http:// 或 https://）
href 获取或设置当前页面的 URL
reload() 重新加载当前页面
历史对象history.back();前一个=后退，forward后一个=前进，go（n）加载第n个具体URL
screen（）只读属性，包含有关客户端显示屏幕的信息。
alert（）；输出显示一个带有提示信息和确定按钮警告对话框
prompt输入
write 向文档写文本
confirm（）显示带有提示信息，确定和取消按钮的对话框
window.close();关闭浏览器窗口
+window.open(“弹出窗口的url”,”窗口名称”,”窗口特征”);在页面上弹出新的窗口
+height，width，left，top
+toolbar=yes|no|1|0是否显示浏览器的工具栏，默认yes
+scrollbars滚动条/location地址栏/status是否添加状态栏/menubar菜单栏/resizable可调节尺寸
titlebar是否显示标题栏/fullscreen全屏模式显示浏览器默认no

setTimeout（）在指定毫秒后调用函数或计算表达式
setInterval（）按照指定的周期（以毫秒计）来调用函数或表达式
clearTimeout(setTimeout（）返回的ID值)；用来清除由setTimeout函数设置的定时器
clearInterval(setInterval（）返回的ID值)；

随机数：random（）返回随机数包括0，不包括1.且都是小数
1-100中的整数（包含1和100）var iNum=Math.floor(Math.random()*100+1);
2-99中的整数（只有98个数，第一个是2）var iNum=Math.floor(Math.random()*98+2);

JavaScript是一种描述性语言（边执行边解释），也是一种基于对象object和事件驱动Event Driven的，并具有安全性能的脚本语言。它与HTML（超文本标记语言）一起，在一个Web页面中链接多个对象，与Web客户实现交互，无论在客户端还是服务器，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担。

ECMAScript标准描述了JavaScript语言的语法和内置的基本功能对象 bom浏览器对象模型描述与浏览器进行交互的方法和接口
dom文档对象模型`? 描述处理网页内容的方法和接口

? JavaScript五种原始类型`number数值·string字符串·boolean布尔·undefined未定义·null空值

var teacher = {"name":"张三", "age":30, "job":"程序员"}; //定义一个字典
teacher["name"] //访问字典元素的第一种方式
teacher.name //访问字典元素的第二种方式

jQuery对象就是通过包装DOM对象后产生的对象

/*打印一个直角三角形*/ for(var i=1; i

描述：获取水平滚动条的位置

-页面加载事件:
ready (function)
描述：当DOM载入就绪时绑定一个要执行的函数，等同于
window.onload事件，但允许注册多个事件处理函数。
参数：function - 要在DOM就绪时执行的函数.
-通用的事件绑定函数:
bind ( eventType, [data], function)
描述：在jQuery所有匹配元素上绑定事件处理程序。
参数：eventType-将要注册的事件类型名称（例如click）。
data-额外提供的参数对象，附加到Event对象中，供事件处理函数使用，可忽略
function－（函数）作为为事件处理程序的函数
$(‘button1’).bind(‘click’, function(){ alert(‘click the button’)；}）；
-安全的事件参数Event
安全属性描述
target 引发事件的具体DOM元素
type 事件名或类型 (如click / mouseover)
shiftKey 触发事件时，若按下了Shift键，则为True。
ctrlKey 触发事件时，若按下了ctrl键，则为True。
altKey 触发事件时，若按下了alt键，则为True。
metaKey 触发事件时，若Meta键被按下，则为true。Meta键在PC上指Ctrl键，Mac（苹果）机器上指的是Command键
keyCode keyup、keydown中，返回按下键的编码。只返回大写版本编码：如a和A都返回65。可以使用shiftKey来确定是大写还是小写。对于keypress事件，请使用which属性。
which 对于键盘事件 keypress ，指定触发事件的按键编码。对于鼠标事件，指鼠标键（1(左)、2(中)、3(右)）。
| pageX 鼠标事件中，鼠标相对于页面原点的水平坐标。
| pageY 鼠标事件中，鼠标相对于页面原点的垂直坐标。
| screenX 鼠标事件中，鼠标相对于计算机屏幕的x坐标。

| screenY 鼠标事件中，鼠标相对于计算机屏幕的y坐标

-jQuery事件参数
-阻止事件的传播：
(1) stopPropagation() 防止事件沿着DOM树向上传播。
(2) preventDefault()
用于取消该事件的所有后续操作，例如：键盘事件调用preventDefault()
可以防止按键上屏；中的click事件可以放置超连接被打开；submit事件则用于阻止表单提交等
(3) 如果想在停止事件传播的同时，也取消事件的默认行为，则可以让事件处理函数返回一个false值
-事件移除
unbind ( [eventType], [function] )
描述：从jQuery匹配元素中删除已经绑定的事件处理函数。
参数：eventType－(字符串)事件类型名，可选。
function－(函数)事件处理函数，可选。
返回：jQuery对象
注意：若不带参数表示清除所有事件绑定。
-快捷事件绑定
(function)
描述：除了bind外，jQuery还提供了20个快捷函数来绑定特定的事件处理程序
参数：function－（函数）作为事件处理程序的函数
blur focus mousedown resize
change keydown mousemove scroll
click keypress mouseout select
dblclick keyup mouseover submit
error load mouseup unload
mouseover鼠标指针移过时
· mouseenter鼠标指针进入时
注意：利用这些快捷函数绑定件事，无法在event.data中存储额外信息。
-鼠标悬浮处理
hover ( overFunction, outFunction )JavaScript的标准事件中并没有hover事件。
描述：同时绑定两个事件函数
相当于同时绑定mouseover和mouseout两个事件

-浏览器事件 $(selector).resize();
-复合事件hover（enter，leave）；/toggle（1，2）点一次触发1，点2次触发事件2
toggleClass（）对样式进行切换，实现事件触发时某元素在加载某个样式和移除某个样式之间切换+

-主动触发事件
(1) trigger ( eventType )
描述：在每一个匹配的元素上触发某类事件。
参数：eventType－（字符串）指定要触发的事件类型名。
注意：A. trigger() 会导致浏览器某些同名的默认行为的执行。
比如，如果用trigger()触发一个’submit’，则同样会导致浏览器提交表单
B. trigger() 也会导致DOM层次结构的事件传播（冒泡、捕捉）
(2) triggerHandler ( eventType, [array] )
描述：触发指定的事件类型上所有绑定的处理函数。不会执行浏览器默认动作

参数：eventType－（字符串）指定要触发的事件类型名

-动感的显示与隐藏
? show(speed, [callback])
? hide(speed, [callback])
描述: 以优雅的动画隐藏 / 显示所有匹配的元素，并在显示完成后可选地触发一个回调函数.
参数: speed – 显示或隐藏的动画效果持续时间.
callback – 显示或隐藏后的回调函数.
如: $(‘selector’).show(‘normal’);$ (‘selector’).hide(200);
-向上向下伸展滑动：
slideDown ( speed, [callback] )
slideUp ( speed, [callback] )
描述:通过高度变化来动态地显示/隐藏所有匹配的元素，在显示完成后可选地触发一个回调函数.
参数: speed – 显示或隐藏的动画效果持续时间.
callback – 显示或隐藏后的回调函数.
该函数只修改元素的高度, 对宽度和透明度不做任何改变.
-切换显示和滑动
切换显示
toggle()
描述: 若匹配元素在hide的状态下则调用show(), 反之调用hide()
toggle(bool)
描述: 若参数为true则调用show(), 若为false则调用hide()
toggle(speed, [callback])
描述: show(speed)和hide(speed)的切换调用
切换滑动
slideToggle(speed,[callback])
描述: slideUp(speed)和slideDown(speed)的切换调用
-淡入淡出效果
fadeIn ( speed, [callback] )
fadeOut ( speed, [callback] )
描述: 通过不透明度的变化来实现所有匹配元素的淡入或淡出
效果，并在动画完成后可选地触发一个回调函数.
参数: speed – 显示或隐藏的动画效果持续时间.
callback – 显示或隐藏后的回调函数
*该动画只调整元素的不透明度，匹配元素的高和宽不会发生变化.类似于设置css(‘opacity’, 0~1)
-淡入淡出效果
fadeTo(speed, opacity, [callback])
描述: 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度.
参数: opacity – 指定需要调整的最终不透明度.
*fadeIn() 和fadeOut() 是将不透明度在0和1之间切换, fadeTo()允许指定具体不透明度
-自定义动画
? animate (params, [duration], [callback])
描述: 创建自定义动画. 指定动画形式及结果样式属性对象,对象中每个属性都表示一个可以变化的样式属性
参数: params – 对象字面量(字典), 描述动画结束时元素的最终样式
duration – 动画的时间间隔(“slow”等常量 / 整数)
callback – 动画执行完时的回调函数
-停止动画
stop ([clearQueue], [gotoEnd])
描述: 停止动画的执行.
参数: clearQueue–是否清空当前动画队列(即停止当前动画同时, 是否清除其他未执行的动画)
gotoEnd–停止动画时是否让元素直接变化到最终态(仅取消渐变过程)
-//判断元素是否正处于动画状态
选择器”:animated”可以用于表达正在执行动画的元素.
if(! $(element).is(‘:animated’) ) {
//当前没有进行中的动画,则添加新动画
}

-尺寸函数
A. width(value) / height(value)
描述: 对jQuery包装集的所有元素设置指定的宽度 / 高度.
参数: value – (数值) 要设置的值, 以象素为单位
注意: width(500)等效于 css(‘width’,’500px’);
B. width() / height()
描述: 对jQuery包装集的所有元素设置指定的宽度 / 高度.
返回: (数值)已计算的宽度/高度, 以数字类型返回.
C. innerWidth() / innerHeight()
描述: 内部宽度/高度, 包括padding、不包括border.
D. outerWidth(bool) / outerHeight(bool)
描述: 外部宽度, 包含border. bool参数表示是否还包括margin.

id 标签类选择器
$（“#userName”）获取DOM中id为userName的元素$ （“div”）获取DOM中所有的div元素
$（“.content”）获取DOM中class为content的元素

$(function(){$ (“button”).click(function(){
var sum=0;
$(“li”).each(function(){ sum+=parseFloat($ (this).text());
alert(sum);
});

       }) ;
    });
</script>

6.使用style属性设置元素的显示和隐藏

? Document对象的常用方法
getElementById()用于访问唯一的元素对象的id唯一

getElementsByName()用于访问相同的name属性的一组元素相同name属性
?：document.getElementById(“book”).innerHTML=”现象级全球畅销书”;

getElementsByTagName()用于访问相同标签的一组元素相同的元素
：var aInput=document.getElementsByTagName(“input”);
write()向文档写文本、 HTML表达式或JavaScript代码

innerHTML是几乎所有的html元素都有的属性，他是一个字符串，用来设置或获取当前的开始标签和结束标签之间的html

parent父 child子 sibling同胞
添加删除DOM元素
? 替换元素
replaceWith(jquery)－将所有匹配的元素替换成指定的元素
replaceAll([exp])－用匹配的元素替换掉所有 selector匹配到的元素。
? 复制元素
clone( [containEvents] )
克隆匹配的元素并且选中这些克隆的副本, 参数表示是否连带事件一并克隆
? 删除元素
remove([exp]) 删除所当前匹配元素，exp为选择器，用于筛选局部元素
detach([exp]) 删除所当前匹配元素，但事件、附加的数据会保留下来

empty() 删除匹配的元素集合中所有的子节点

添加删除DOM元素
? 元素外部插入同辈元素
语法功能
after(content) $(A).after (B)表示将B插入到A之后如：$ ("ul").after( $newNode1); insertAfter(content)$ (A). insertAfter (B)表示将A插入到B之后
如： $newNode1.insertAfter(“ul”); before(content)$ (A). before (B)表示将B插入至A之前
如： $("ul").before($ newNode1);
insertBefore(content) $(A). insertBefore (B)表示将A插入到B之
前

如：$newNode1.insertBefore(“ul”);

添加删除DOM元素
? 在元素内部插入子元素
语法功能
append(content) $(A).append(B)表示将B追加到A中如：$ ("ul").append( $newNode1); appendTo(content)$ (A).appendTo(B)表示把A追加到B中
如： $newNode1.appendTo(“ul”); prepend(content)$ (A). prepend (B)表示将B前置插入到A中
如： $("ul"). prepend ($ newNode1);
prependTo(content) $(A). prependTo (B)表示将A前置插入到B中

如：$newNode1. prependTo (“ul”);

操作节点的属性
getAttribute（“属性名”）用来获取属性的值
setAttribute（“属性名”，“属性值”）用来设置属性的值

传统JavaScript的DOM操作函数接口非常繁琐
? jQuery重写了大量易用的函数，并且屏蔽了浏览器的差异
创建修改DOM结构（JavaScript原生的方法）
document.createElement(tagName) 创建标记为tagName的元素
document.createTextNode(tagName) 创建一个包含静态文本的节点
.appendChild(childNode) 添加子节点
.insertBefore(newNode,targetNode) 在targetNode前面添加节点newNode
.removeAttribute(name) 移除属性
.removeChild(childNode) 移除子节点
.replaceChild(newNode,oldNode) 将oldNode子节点替换为newNode子节点
.hasChildNodes() 是否有子节点
读写DOM元素属性（JavaScript原生的方法）
.getAttribute(name) 获取属性值
.setAttribute(name,value) 设置属性值

基础选择器
选择器含义示例
* 通用元素选择器，匹配任何元素 $(‘*’); E 标签选择器，匹配所有使用E标签的元素$ ('div'); $(‘li’); class class选择器，匹配所有class属性中包含info的元素$ (‘.myList’);
#id id选择器，匹配所有id属性等于footer的元素 $(‘#languages’); E,F 同时匹配所有E元素或F元素$ (‘img, li’);
E F 匹配所有属于E元素后代的F元素 $(‘.myList li’); E>F 匹配所有E元素的子元素F$ (‘.myList>li’);
E+F 匹配所有紧随E元素之后的同级元素F $('#cozmo+img');$ (‘li+li’);
E~F 类似于E＋F，同属一个父元素，E后的同级元素F $(‘#cozmo~img’); :contains(text) 匹配包含给定文本的元素$ (“li:contains(‘select’)”)
:empty 匹配所有不包含子元素或者文本的空元素 Eg: $(“td:empty”) :has(selector) 匹配含有选择器所匹配的元素的元素$ (“li:has(ul)”)
:parent 匹配含有子元素或者文本的元素 Eg: $(“td:parent”) :hidden 匹配所有的不可见元素$ (“tr:hidden”
:visible 匹配所有的可见元素查找所有可见的 tr 元素: $(“tr:visible”) [attr] 匹配包含给定属性的元素$ (‘[title]’);
[attr=value] 匹配给定的属性是某个特定值的元素 $(“input[name=’checkboxes’]”); [attr!=value] 匹配给定的属性是不包含某个特定值的元素$ (“input[name!=’checkboxes’]”);
[attr^=value] 匹配给定的属性是以某些值开始的元素 $(“img[id^=’co’]”) [attr$ =value] 匹配给定的属性是以某些值结尾的元素 $(“input[name$ =’Group’]”)
[attr*=value] 匹配给定的属性是包含某些值的元素 $(“img[id*=’er’]”) [attrCon1] | [attrCon1] |复合属性选择器，需要同时满足多个条件时使用。 [attrConN] |$ (“input[name][id^=’check’]”)
表单选择器
:input 匹配所有 input, textarea, select 和 button 元素 $(“:input”) :text 匹配所有的文本框$ (“:text”)
:password 匹配所有密码框 $(“:password”) :radio 匹配所有单选按钮 :checkbox 匹配所有复选框$ (“:checkbox”)
:submit 匹配所有提交按钮 $(“:submit”) :image 匹配所有图像域，等价于input[type=image]，并非img元素 :reset 匹配所有重置按钮$ (“:reset”)
:button 匹配所有按钮 $(“:button”) :file 匹配所有文件域$ (“:file”)
表单属性选择器
:enabled 匹配所有可用元素 $(“input:enabled”) :disabled 匹配所有不可用元素$ (“input:disabled”)
:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) $(“input:checked”) :selected 匹配所有选中的option元素$ (“select option:selected”)