总结一下自己学习javaScript过程中掌握的知识点和代码片段。
随时更新
什么是javaScript
| 特点 |
说明 |
| lightweight |
占内存小，易实现 |
| interpreted |
没有编译，指令直接执行 |
| object-oriented |
面向对象模型 |
| first-class function |
函数可以作为值操作，参数，返回值，赋值给变量，存储在数据结构中等.和其他类型一样。 |
可以做什么
- 客户端的Web开发
- 服务端的应用开发
- 浏览器扩展开发
- 桌面应用开发
- 移动应用
- IoT开发
绑定事件
<button type="submit" id="btn_submit"> submit </button>
$('#btn_submit').click(function(){
});
|
获取页面radio状态
获取readio值
param.gender=document.forms["fm"]["gender"].value;
|
基本语法
function 函数名()
{
函数代码;
}
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女士吗？");
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
|
prompt 消息对话框
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
|
JavaScript-打开新窗口（window.open）
window.open([URL], [窗口名称], [参数字符串])
隐藏/显示
mychar.style.display = ‘none’;//block
className 属性设置或返回元素的class 属性。
object.className = classname
var myarr=new Array(); //定义数组
myarr[0]=80;
myarr[1]=60;
myarr[2]=99;
|
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
==和===的区别
== equality 等同，=== identity 恒等。
==， 两边值类型不同的时候，要先进行类型转换，再比较。
===，不做类型转换，类型不同的一定不等。
var a = 3;
var b = "3";
a==b 返回 true
a===b 返回 false
因为a,b的类型不一样
===用来进行严格的比较判断
|
AJAX
XMLHttpRequst来实现和服务端的异步通信
var request=new XMLHttpRequest();
open(method,url,async)
send(string)
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=用户名&gender=男");
responseText 获取字符串形式
responseXML 获取XML形式
status, statusText
getAllResponseHeader()获取所有响应报头
getResponseHeader()查询某个字段的值
readyState属性，获取响应通知
0：请求未初始化，open还没调用
1：连接已建立，open已经调用了
2：请求已接收到头信息
3：请求处理中，接收到响应主体
4：请求已完成，且响应已就绪。
request.onreadystatechange=function(){
if(request.readyState===4 && request.status===200)
{
JSON.parse(...)
}
}
jQuery.ajax([settings])
type:类型 GET,POST等
url:
data:对象，发送的数据
dataType:预期返回的数据类型json
success：是一个方法，成功的回调函数
error：是一个方法，请求失败回调函数，传入XMLHttpRequest对象
<script>
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type:"POST",
url:"www.sss",
dataType:"json",
data:{
name:$("#name").val(),
pwd:$("#pwd").val()
}
if(data.success){
$("#searchResult").html(data.msg);
}else{
},
error:function(jqXHR){
alert("failed" + jqXHT.status);
}
})
})
});
</script>
|
jQuery
语法
$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
|
$(document).ready(function(){
--- jQuery functions go here ----
});
|
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
跨域
处理方法JSONP（json padding）解决GET请求跨域访问问题
HTML5提供的XMLHttpRequest level2提供的跨域解决方法IE10以下不支持
服务端修改
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
|
判断元素是否存在
$(document).ready(function () {
obj = document.getElementById("ShowLoginModal");
if (obj)
{
openLoginModal();
}
})
|
点击链接地址栏不显示#号
href="javascript:void(0)"
|