Jquery VS JS

Posted 2022-06-20 dsymoon

JS添加html内容
document.getElementById("id值").innerHTML="改变的值"

JS改变HTML的属性
document.getElementById("ID值").src=‘图片路径‘

JS改变HTML的样式
document.getElementById("ID值").style.属性=‘值‘

javascript 代码必须位于 <script> 与 </script> 标签之间。

外部脚本<script src="文件名.js"></script>

JS函数:通过 function 关键词进行定义，其后是函数名和括号 ()。

HTML事件:
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载

JS字符串:
内建属性length返回字符串长度
indexOf方法返回字符串中制定文本首次出现的索引
search()方法搜索特定值的字符串,并返回匹配的位置
slice(起始索引（开始位置），终止索引（结束位置）) 提取字符串的某个部分并在新字符串中返回被提取的部分。
replace() 方法用另一个值替换在字符串中指定的值
toUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
concat() 连接两个或多个字符串
trim() 方法删除字符串两端的空白符
charAt() 方法返回字符串中指定下标（位置）的字符串
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
split() 将字符串转换为数组
toString() 以字符串返回数值
valueOf() 以数值返回数值
Number() 返回数字，由其参数转换而来。
parseFloat() 解析其参数并返回浮点数。
parseInt() 解析其参数并返回整数

JS数组
创建数组:
var array-name = [item1, item2, ...];
var cars = new Array("Saab", "Volvo", "BMW");
数组的属性和方法
length 属性返回数组的长度（数组元素的数目）
sort() 方法对数组进行排序(字母顺序对数组进行排序)

数组的遍历
遍历数组的最安全方法是使用 "for" 循环
使用 Array.foreach() 函数：

向数组添加新元素使用 push() 方法
pop() 方法从数组中删除最后一个元素
join() 方法也可将所有数组元素结合为一个字符串与tostring相比可以使用分隔符
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：
concat() 方法通过合并（连接）现有数组来创建一个新数组：
reverse() 方法反转数组中的元素
map(函数名) 方法通过对每个数组元素执行函数来创建新数组。
filter(函数名) 方法创建一个包含通过测试的数组元素的新数组。
every() 方法检查所有数组值是否通过测试。

JS日期
new Date() 用当前日期和时间创建新的日期对象
getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数：
getFullYear() 方法以四位数字形式返回日期年份
getMonth() 以数字（0-11）返回日期的月份
getDate() 方法以数字（1-31）返回日期的日
getHours() 方法以数字（0-23）返回日期的小时数
getMinutes() 方法以数字（0-59）返回日期的分钟数
getSeconds() 方法以数字（0-59）返回日期的秒数
getMilliseconds() 方法以数字（0-999）返回日期的毫秒数
getDay() 方法以数字（0-6）返回日期的星期名

数学:
Math.round(x) 的返回值是 x 四舍五入为最接近的整数
Math.pow(x, y) 的返回值是 x 的 y 次幂
Math.sqrt(x) 返回 x 的平方根
Math.abs(x) 返回 x 的绝对（正）值
Math.ceil(x) 的返回值是 x 上舍入最接近的整数
Math.floor(x) 的返回值是 x 下舍入最接近的整数
Math.sin(x) 返回角 x（以弧度计）的正弦
Math.cos(x) 返回角 x（以弧度计）的余弦
Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值
Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数

JS中的this
在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。

JS表单
约束验证DOM方法
checkValidity() 返回 true，如果 input 元素包含有效数据
setCustomValidity() 设置 input 元素的 validationMessage 属性。
validity 包含与 input 元素的合法性相关的布尔属性。
validationMessage 包含当 validity 为 false 时浏览器显示的消息。
willValidate 指示是否验证 input 元素。
input 元素的 validity 属性包含了与数据合法性相关的一系列属性
customError 设置为 true，如果设置自定义的合法性消息。
patternMismatch 设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow 设置为 true，如果元素值大约其 max 属性。
rangeUnderflow 设置为 true，如果元素值小于其 min 属性。
stepMismatch 当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong 设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch 当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing 设置为 true，如果元素（包含 required）没有值。
valid 设置为 true，如果元素值是有效的。

JS变量问题:
使用 var 关键字重新声明变量会带来问题。
在块中重新声明变量也将重新声明块外的变量
使用 let 关键字重新声明变量可以解决这个问题。在块中重新声明变量不会重新声明块外的变量：

闭包:闭包指的是有权访问父作用域的函数，即使在父函数关闭之后

HTML DOM 方法:
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素
改变 HTML 元素
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式
添加和删除元素
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
添加事件处理程序
document.getElementById(id).onclick = function()code 向 onclick 事件添加事件处理程序

HTML 事件的例子：
当用户点击鼠标时:onclick
当用户进入:onload
当用户离开:onunload
当鼠标移至元素上时onmouseover
当鼠标移出元素上时onmouseout
当输入字段被改变时:onchange
addEventListener() 方法为指定元素指定事件处理程序。为元素附加事件处理程序而不会覆盖已有的事件处理程序。

窗口方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

window.history 对象包含浏览器历史。
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。
alert("我是一个警告框！");
window.confirm("sometext");确认框
window.prompt();提示框
折行:反斜杠后面加一个字符 n。

定时事件
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
等同于 setTimeout()，但持续重复执行该函数。
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
window.setInterval(function, milliseconds);方法在每个给定的时间间隔重复给定的函数。
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

 

使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等

测试:
console.log()控制台写出
alert() 窗口警告
debugger 关键词

JS类型运算符
typeof() 返回变量的类型
instanceof 返回true,对象类型的实例

JSON
JSON.parse() 把文本转换为 JavaScript 对象：
JSON 中不允许日期对象通过new Date()转换成日期
JSON 中不允许函数。包含函数，把它写作字符串使用 eval() 把它们转换回函数
JSON.stringify() 把 JavaScript 对象转换为字符串。
JSON为对象时
通过使用点号（.）来访问对象值可以使用方括号（[]）来访问对象值
遍历对象通过使用 for-in 遍历对象属性：
delete 关键词来删除 JSON 对象的属性

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法