JavaScript – 艾丽卡 Blog

2023年7月30日

发表 admin at 2023年7月30日

类别

JavaScript

JavaScript: JSONP原理详解

1. 什么是jsonp jsonp全称json with padding，由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象。 2. 那么有哪些标签可以跨域呢 <…

2023年7月28日

发表 admin at 2023年7月28日

类别

JavaScript

JavaScript: js命名规范

ECMAScript 规范中标识符采用驼峰大小写格式，驼峰命名法由小(大)写字母开始，后续每个单词首字母都大写。根据首字母是否大写，分为两种方式： Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo 标识符，则包括变量、函数名、类名、属性名和函数或类的参数，每个命名方法又略有不同，下面详细解释一下： 1.项目命名全部采用小写方式，以下划线分隔。示例：my_project_name 2.目录命名参照项目命名规则；有复数结构时，要采用复数命名法。示例：scripts, styles, images, data_models 3.JS文件命名变量：必须采…

2023年7月28日

发表 admin at 2023年7月28日

类别

JavaScript

JavaScript: jQuery对象和DOM对象的相互转换

一、jQuery对象 1. 用原生 JS 获取来的对象就是 DOM 对象 2. jQuery 方法获取的元素就是 jQuery 对象。 3. jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。二、jQuery对象和DOM对象的相互转换 DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装。要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。 1. DOM 对象转换为 jQuery 对象： $(DOM对象) $('div') 2. jQuery 对象转换为 DOM 对象（两种方式） $('div') [index] // index 是索引号 $('div…

2023年7月27日

发表 admin at 2023年7月27日

类别

JavaScript

JavaScript: js XMLHttpRequest发送Ajax请求

1. 什么XMLHttpRequest XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。 2. 使用xhr发起GET请求步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 xhr.onreadystatechange 事件例子： // 1. 创建 XHR 对象 var xhr = new XMLHttpRequest() // 2. 调用 open 函数，指定请求方式与 URL地址 xhr.open('GET', 'http://www.domain.com/') // 3. 调用 send 函数，发起 Ajax 请求 xhr.send() // 4. 监听 onreadystatechange 事件 xhr.onre…

2023年7月27日

发表 admin at 2023年7月27日

类别

JavaScript

JavaScript: jQuery 多库共存

jQuery版本不断更新，若最初使用的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。解决方法如下： <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery-3.7.0.js"></script> <script> //1.如何查看jQuery的版本? //通过jQuery文件名来查看jQuery的版本是不靠谱的做法. //通过以下四种方式可以查看jQuery的版本. // console.log(jQuery.fn.jquery); // console.log(jQuery…

2023年7月27日

发表 admin at 2023年7月27日

类别

JavaScript

JavaScript: js获取元素尺寸和大小操作总结

一、获取元素的行内样式 var obj = document.getElementById("test"); alert(obj.height + "n" + obj.width); // 200px 200px typeof=string只是将style属性中的值显示出来二、获取计算后的样式 var obj = document.getElementById("test"); var style = null; if (window.getComputedStyle) { style = window.getComputedStyle(obj, null); // 非IE } else { style = obj.currentStyle; // IE } alert("width=" + style.width + "nheight=" + style.height)…

2023年7月26日

发表 admin at 2023年7月26日

类别

JavaScript

JavaScript: js可枚举属性和不可枚举属性

我们一般认为，可以被for in遍历出来的属性就是可枚举属性，否则就是不可枚举属性。对象的属性的可枚举性和不可枚举性是由属性的enumerable值决定的，true为可枚举，false为不可枚举。 js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number,Function,Date等，而自己定义的属性一般可枚举，举例： var fun = new Function() for (var key in fun) { console.log(key); // 什么也没打印出来 } var num = new Number() for(var key in num) { console.log(key) // 什么也没打印出来 } var info = { name: '张三', age: 18 } for(var key in info) { console.log(key) //…

2023年7月26日

发表 admin at 2023年7月26日

类别

JavaScript

JavaScript: js遍历对象的几种方法和区别

for in for in 循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性 // 创建一个对象并指定其原型，bar 为原型上的属性 const obj = Object.create({ bar: 'bar' }) // foo 为对象自身的属性 obj.foo = 'foo' for (let key in obj) { console.log(obj[key]) // foo, bar } 可以看到对象原型上的属性也被循环出来了在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性 for (let key in obj) { if (obj.hasOwnProperty(key)) { console.log(obj[key]) // foo } } 这时候原型上的 bar 属性就被过滤掉了 Object.keys Object.keys() 是 ES5 新增的一个对象方…

2023年7月25日

发表 admin at 2023年7月25日

类别

JavaScript

JavaScript: js选择器

1. 在html5之前，JavaScript中的选择器只有下面四种： .getElementById("id")id选择器; .getElementsByName("name")name选择器; .getElementsByTagName("tagname")tag标签名选择器； .getElementsByClassName(".classname").class名选择器各个选择器返回值类型 .getElementById("id")id选择器-----node单节点型（第一个id【具有唯一性】相同元素） .getElementsByName("name")name选择器----nodelist类数组型 .getElementsByTagName("tagname")tag标签名选择器----nodelist类数组型 .get…

2023年7月25日

发表 admin at 2023年7月25日

类别

JavaScript

JavaScript: js中使用 reset 重置表单

1. 使用reset按钮 reset 类型的input元素显示为按钮，默认 click 事件处理程序将表单所有输入重置为其初始值。这个输入元素只支持两个属性：类型和值。值是可选属性。要确保的一件重要事情是：reset按钮在form元素内；否则，它将无效。 <form id="form" action=""> <input type="text" value="1"/> <input type="reset" value="重置"/> </form> 2. 使用HTMLFormElement.reset()方法 JavaScript 还提供了一个内置的 HTMLFormElement.reset() 方法来重置整个表单。可以通过其 ID 选择表单元素并使用 reset() 重置它。 <form id="form"…