JavaScript+JQuery+json+ajax
JavaScript+JQuery+json+ajax
一：JavaScript
一.数据类型
JS中，变量的声明都是 var ，js是弱类型语言，对数据类型没有很严格的要求，底层会自动转换类型，JS的数据类型可以分为：
number类型：包含整数，浮点数
string类型：字符串
boolean类型：ture false
以及null 和 undefind(变量没有赋值时)
二. 运算符
- 普通的数值运算，加减乘除 求模 。需要注意的是，js的运算是自动改变类型的，而java在运算时，如整数会变为int类型，导致使用byte等小于int类型的类型去接的时候，出现报错。
- 比较运算符，也和java类似，有一个不同的是
===, JS中==判断的值，===判断的是类型和值。 - 其他的如短路与 &&，短路或 || ，和java如出一辙
三. 循环结构
-
while循环
-
do```while,基本上没用
-
for循环，也和java近似，区别是高效循环for····in，
for( var i in str ),这里取到的 i 是下标。
四. 分支结构
- if 的分支结构，和java类似，都可以if , else if
五. 数组
-
JS的数组长度可变，数据类型没有约束
-
两种方式：
var a = new Array(); var b = []; var c = new Array(3.14,250,"挨打"，ture); var d = [250,"瓜哇"，7.1]; -
同样可以遍历数组
六. 函数
<!--第一种方式-->
function a(){
}
a();
<!--第二种方式，把函数名的声明提到前面-->
var a = function(){
}
a();
- 调用函数最好都写在函数创建之后。虽然第一种可以将方法调用写在函数创建之前，但是第二种不可以。为了避免出错，都写在后面比较保险
七. 对象
JavaScript 是基于对象和事件的语言。
<script>
//第一种方式
function Car();
var c = new Car();
c.brand = "bwm";
c.prize = 500000;
c.start = function(){
console.log("一键启动")
}
c.start();
//第二种方式
var c = {
"brand":"BYD", // 注意这里是逗号，少一个都不行
name:"byd-汉", // 属性的双引号可写可不写，属性值看类型
run:function(){
console.log("秒速十万八千里");
}
}
c.run();
</script>
八. DOM树
将整个网页面作为一个Document对象，从而获取各个节点的内容信息
获取指定内容时，在css的选择器基础上，还有一些自己的选择方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM树</title>
<script>
//如果不用函数触发，直接在此处进行更改会报错
//因为文档还没有就绪，body里的内容都还没有加载，这里改什么呢
//所以接下来就结合JQeury看一下文档就绪，以及JQ语法的简便
function f(){
var a = window.document.getElementById("y");
//a.innerText="<h3>点我啊傻逼</h3>";
//console.log(a.innerText);
//document.write(a.innerText)
a.innerHTML="<h3>点我啊傻逼</h3>"; // innerHTML还能够解析标签
a.style.color="blue";
console.log(a.innerHTML);
document.write(a.innerHTML);
}
function f1(){
var b = document.getElementsByName("d");
console.log(b);
b[0].innerHTML="二哈";
b[0].style.color="blue";
console.log(b[1].innerHTML);
console.log(b[0].innerHTML);
}
function f2(){
var c = document.getElementsByClassName("a");
console.log(c);
c[0].innerHTML="乱打";
console.log(c[0].innerHTML)
}
function f3(){
var d = document.getElementsByTagName("p");
console.log(d);
d[0].innerHTML = "啥玩意";
console.log(d[0].innerHTML);
}
</script>
</head>
<body>
<div name="d" onclick="f1()">测试1</div>
<div name="d" onclick="f1()">测试2</div>
<div>二点五缺乏热污染</div>
<div class="a" onclick="f2()">测试3</div>
<a class="a" href="#" onclick="f2()">测试4</a>
<a id="y" href="#" onclick="f()">测试5</a>
<p onclick="f3()">测试6</p>
<p onclick="f3()">测试7</p>
</body>
</html>
二：JQeury
JQ是对JS的简便化，使得很多内容变得书写简单，快速
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ</title>
<!-- 导入JQ文件 -->
<script src="jquery-1.8.3.min.js"></script>
<script>
//文档就绪
/*
$(document).ready(function(){
$("p").hide();
$("div.a").click();
})
*/
//JQ的语法其实就是 $("选择器").事件
//文档就绪还有更简便的写法
$(function(){
$("p").hide();
$("div.a").click();
$("#y").click(function(){ $("[href=#]").hide() });
$("[name=d]").mouseenter(function(){ $(".b").show()});
});
</script>
</head>
<body>
<div name="d">测试1</div>
<div name="d">测试2</div>
<div>二点五缺乏热污染</div>
<div class="a">测试3</div>
<a class="a" href="#">测试4</a>
<a id="y" href="#">测试5</a>
<p class="b">测试6</p>
<p>测试7</p>
</body>
</html>
三： json+ajax
1. json
- 客户端与服务器之间的数据传递
- json的语法和JS的对象有点像，其实就是二者之间的转化，使用JSON的parse( )和stringify( )两个函数，将JS对象转成json字符串，将json字符串转成JS对象。区别之一是属性和属性值必须用双引号包含起来，而JS对象里的属性可以写引号，也可以省略不写，且属性值如果是数值也可省略不写
- "key" : "value"
<script>
var a = " 'name':'zhangsan' ";
console.log(a);
var b = "{'name':'zhangsan','age':'26'}";
console.log(b);
console.log(b.concat("法外狂徒"));
/* 通过JSON对象的parse函数，将json字符串改成js对象 */
var c = '[{"name":"zhangsan","age":"26"},{"name":"lisi","age":"20"}]';
console.log(c);
var js = JSON.parse(c); //返回一个数组，可以通过下标点属性，获取需要的信息
console.log(js);
console.log(js[1].name);
console.log(js[0].age);
/* 通过JSON对象的stringify函数,将js对象转成json字符串 */
var str = JSON.stringify(js);
console.log(str);
console.log( str.concat(123) );
console.log(str.length);
console.log(str.substring(2));
console.log(str.substring(2,10));//含头不含尾
</script>
2. ajax
异步加载，局部刷新
这是ajax的鲜明优点
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function){
$.ajax({
type: "POST",
url:,
contentType:,
data:,
dataType: "json",
success: function (data) { //已经转成js对象了，后面直接取信息就可以
},
error: function () {
}
});
}
</script>
浙公网安备 33010602011771号