js入门笔记
2017-10-23 16:23
676 查看
函数作用域和声明提前:
在js函数中的任何位置声明的变量,都可以在这个函数的任何位置使用,意味着变量是可以在声明之前使用的,这就是声明提前。
var scope = "global";
function f(){
console.log(scope); //输出"undefined",因为声明提前,所以整个函数中使用的scope都是局部变量,而不是函数前声明的那个全局变量
var scope = "local";
console.log(scope);//输出"local"
}
在文档已经加载完了之后,如果执行document.write,就会覆盖整个html页面。
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.write("糟糕!文档消失了。");
}
</script>
</body>
</html>
var a = 1;
var a;
a的最后结果还是1,重新声明JavaScript变量,该变量的值不会丢失。
JavaScript只有一种数字类型,所以1和1.00是一样的。
数组
var arrays = new Array();
arrays[0] = 1;
arrays[1] = true;
arrays[2] = "hello"
或者 var arrays = [1, true, "hello"];
arrays.join("."); //将数组内的元素组成一个字符串,中间用"."隔开
对象
var people = {firstName : "Ni", secondName : "Hao", id : 1};
var name = people.firstName + people.secondName;
var id = people.id; // 或者是var id = people["id"];
向为声明的JavaScript变量来分配值,例如a = 1,将声明一个全局变量a, 即使这是在函数内执行,也是全局变量。
正则表达式
var regExpVar = new RegExp("a.*bc");
document.write(regExpVar.test("840a01bckd823")); //返回true
document.write(regExpVar.exec("840a01bckd823")); //返回a01bc
window
var w=window.innerWidth //Internet Explorer、Chrome、Firefox、Opera 以及 Safari
|| document.documentElement.clientWidth //Internet Explorer 8、7、6、5
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.assign() 方法加载新的文档。
<html>
<head>
<script>
4000
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
var a = setTimeOut("fucntionName()", timeMile); //在timeMile毫秒后,执行一次function
clearTimeout(a) //清除定时任务
window.location和document.URL的区别是,window.location不会包括URL中的参数,也就是没有?后面的值
jQuery
$("#test") 代表id=“test”的元素
$(".test") 代表class=“test”的元素
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("p").css("background-color","red");
$(this)
当前 HTML 元素
$("p")
所有 <p> 元素
$("p.intro")
所有 class="intro" 的 <p> 元素
$(".intro")
所有 class="intro" 的元素
$("#intro")
id="intro" 的元素
$("ul li:first")每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素
toggle()函数用来切换show()和hide()方法。
show(),hide()和toggle()函数,都可以有两个参数(speed, callback),speed参数代表显示或隐藏的动画时间,也可以简单的取值为"fast"或者"slow",callback代表动作完成后,想要执行的函数。
fadeIn()函数用于淡入已隐藏的元素,fadeOut()函数用于淡出可见元素,fadeToggle()函数你懂得,自己猜,fadeTo()函数允许渐变为给定的不透明度,代表不是全隐藏,只是改变透明度,可以认为fadeOut就是透明度为0的fadeTo(),$(selector).fadeTo(speed,opacity,callback),就是第二个参数,取值范围是0-1。
slideDown(),slideUp()和slideToggle()函数,和上面的函数类似,但是动画效果是滑动,可以自己试一下,就能明白。
animate()方法可以创建自定义动画。
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
}, "fast");
});
改变<div>的css样式,变化过程用动画的方式显示,但是,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
变化的数值也可以使用相对值,比如height属性,可以为height:'+=150px',表示height增加150px。
也可以将动画值设置为"slow","fast"或者"toggle",例如height:'toggle',表示在显示和隐藏之间不断切换。
animate函数具有队列功能,如果使用了多个animate函数,就会去逐一的运行这些animate函数。下面的例子把 <div> 元素移动到右边,然后增加文本的字号:
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
stop()函数可以用来停止动画效果。stop()方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
text() - 设置或返回所选元素的文本内容(如果传了参数,则表示set,如果没有参数,就是get,下面的函数也是这样)
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值 $("p").attr("href")获取链接中href属性的值,$("#w3s").attr("href","http://www.w3school.com.cn/jquery")设置href属性的值。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
可以通过addClass方法给元素添加一个或者多个的class属性,如$("#div1").addClass("important blue");可以使用这样的方法来给某些元素加上css样式,而不用每个都单独写一个css。
同样的,还有removeClass()方法和toggleClass()方法。你懂得。
css() 方法设置或返回被选元素的一个或多个样式属性。
$("p").css("background-color")获取<p>的background-color属性。
$("p").css("background-color","yellow") 设置<p>的background-color属性为yellow
css({"propertyname":"value","propertyname":"value",...}); 可以同时设置多个css属性。
遍历:
parent() 返回一个元素的直接父元素
parents() 返回一个元素的所有祖先,可以添加参数作为过滤条件,如parents("p")就是返回一个元素的所有<p>的祖先
parentsUntil() 有参数,parentsUntil("p")就是返回所有当前元素到<p>之间的所有祖先。
children()函数返回当前元素的所有直接子元素,也就是下一级的所有子元素。同样的可以加参数进行过滤,如children("p.class1"),就是返回所有这个元素的类名是class1的<p>子元素。
fins()函数返回房钱元素的所有子元素,同样可以通过添加参数进行过滤。
slibings()函数返回当前元素的所有同级元素,可以加参数。
netx()函数放回当前元素的下一个同级元素。
nextAll()函数返回当前元素的所有接下来的同级元素。
nextUntil()函数通过添加参数,返回当前元素到参数代表的那个元素之间的所有同级元素。
prev(),prevAll()和prevUntil()函数和上述的方法类似,不过方向相反,通过名字应该就能看的出来。
first()方法返回被选元素组的第一个元素。$("div p").first()返回的是<div>中的第一个<p>元素。
last()方法类似,自己悟,不写了。
eq(n)方法,带有数字参数,代表下标,返回第n个元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。$("p").filter(".intro")返回带有类名 "intro" 的所有 <p> 元素。
not()方法和filter()相反。
AJAX:
jQuery load() 方法,jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback)
$.get(URL,callback) 方法使用get的方式获取数据。
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。使用方法为$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
下面是一组实例,是用来请求restApi项目的
$(document).ready(function () {
$("#btn").click(function () {
var jsonData = {
"name":"hello"
}
$.ajax({
type : "POST",
url : "http://localhost:8080/rest/data/v2/objects/account",
dataType : "json",
contentType : "application/json; charset=utf-8",
data : JSON.stringify(jsonData),
headers : {
"Authorization" : "Bearer f3337d66a627cd8e400b4c675616c7ee1da310ab224ff0bca081f988105db6b3",
"Content-Type" : "application/json"
},
success : function (data, status) {
alert(JSON.toString(date));
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + textStatus + errorThrown);
}
});
})
})
在js函数中的任何位置声明的变量,都可以在这个函数的任何位置使用,意味着变量是可以在声明之前使用的,这就是声明提前。
var scope = "global";
function f(){
console.log(scope); //输出"undefined",因为声明提前,所以整个函数中使用的scope都是局部变量,而不是函数前声明的那个全局变量
var scope = "local";
console.log(scope);//输出"local"
}
在文档已经加载完了之后,如果执行document.write,就会覆盖整个html页面。
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.write("糟糕!文档消失了。");
}
</script>
</body>
</html>
var a = 1;
var a;
a的最后结果还是1,重新声明JavaScript变量,该变量的值不会丢失。
JavaScript只有一种数字类型,所以1和1.00是一样的。
数组
var arrays = new Array();
arrays[0] = 1;
arrays[1] = true;
arrays[2] = "hello"
或者 var arrays = [1, true, "hello"];
arrays.join("."); //将数组内的元素组成一个字符串,中间用"."隔开
对象
var people = {firstName : "Ni", secondName : "Hao", id : 1};
var name = people.firstName + people.secondName;
var id = people.id; // 或者是var id = people["id"];
向为声明的JavaScript变量来分配值,例如a = 1,将声明一个全局变量a, 即使这是在函数内执行,也是全局变量。
正则表达式
var regExpVar = new RegExp("a.*bc");
document.write(regExpVar.test("840a01bckd823")); //返回true
document.write(regExpVar.exec("840a01bckd823")); //返回a01bc
window
var w=window.innerWidth //Internet Explorer、Chrome、Firefox、Opera 以及 Safari
|| document.documentElement.clientWidth //Internet Explorer 8、7、6、5
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.assign() 方法加载新的文档。
<html>
<head>
<script>
4000
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
var a = setTimeOut("fucntionName()", timeMile); //在timeMile毫秒后,执行一次function
clearTimeout(a) //清除定时任务
window.location和document.URL的区别是,window.location不会包括URL中的参数,也就是没有?后面的值
jQuery
$("#test") 代表id=“test”的元素
$(".test") 代表class=“test”的元素
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("p").css("background-color","red");
$(this)
当前 HTML 元素
$("p")
所有 <p> 元素
$("p.intro")
所有 class="intro" 的 <p> 元素
$(".intro")
所有 class="intro" 的元素
$("#intro")
id="intro" 的元素
$("ul li:first")每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素
toggle()函数用来切换show()和hide()方法。
show(),hide()和toggle()函数,都可以有两个参数(speed, callback),speed参数代表显示或隐藏的动画时间,也可以简单的取值为"fast"或者"slow",callback代表动作完成后,想要执行的函数。
fadeIn()函数用于淡入已隐藏的元素,fadeOut()函数用于淡出可见元素,fadeToggle()函数你懂得,自己猜,fadeTo()函数允许渐变为给定的不透明度,代表不是全隐藏,只是改变透明度,可以认为fadeOut就是透明度为0的fadeTo(),$(selector).fadeTo(speed,opacity,callback),就是第二个参数,取值范围是0-1。
slideDown(),slideUp()和slideToggle()函数,和上面的函数类似,但是动画效果是滑动,可以自己试一下,就能明白。
animate()方法可以创建自定义动画。
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
}, "fast");
});
改变<div>的css样式,变化过程用动画的方式显示,但是,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
变化的数值也可以使用相对值,比如height属性,可以为height:'+=150px',表示height增加150px。
也可以将动画值设置为"slow","fast"或者"toggle",例如height:'toggle',表示在显示和隐藏之间不断切换。
animate函数具有队列功能,如果使用了多个animate函数,就会去逐一的运行这些animate函数。下面的例子把 <div> 元素移动到右边,然后增加文本的字号:
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
stop()函数可以用来停止动画效果。stop()方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
text() - 设置或返回所选元素的文本内容(如果传了参数,则表示set,如果没有参数,就是get,下面的函数也是这样)
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值 $("p").attr("href")获取链接中href属性的值,$("#w3s").attr("href","http://www.w3school.com.cn/jquery")设置href属性的值。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
可以通过addClass方法给元素添加一个或者多个的class属性,如$("#div1").addClass("important blue");可以使用这样的方法来给某些元素加上css样式,而不用每个都单独写一个css。
同样的,还有removeClass()方法和toggleClass()方法。你懂得。
css() 方法设置或返回被选元素的一个或多个样式属性。
$("p").css("background-color")获取<p>的background-color属性。
$("p").css("background-color","yellow") 设置<p>的background-color属性为yellow
css({"propertyname":"value","propertyname":"value",...}); 可以同时设置多个css属性。
遍历:
parent() 返回一个元素的直接父元素
parents() 返回一个元素的所有祖先,可以添加参数作为过滤条件,如parents("p")就是返回一个元素的所有<p>的祖先
parentsUntil() 有参数,parentsUntil("p")就是返回所有当前元素到<p>之间的所有祖先。
children()函数返回当前元素的所有直接子元素,也就是下一级的所有子元素。同样的可以加参数进行过滤,如children("p.class1"),就是返回所有这个元素的类名是class1的<p>子元素。
fins()函数返回房钱元素的所有子元素,同样可以通过添加参数进行过滤。
slibings()函数返回当前元素的所有同级元素,可以加参数。
netx()函数放回当前元素的下一个同级元素。
nextAll()函数返回当前元素的所有接下来的同级元素。
nextUntil()函数通过添加参数,返回当前元素到参数代表的那个元素之间的所有同级元素。
prev(),prevAll()和prevUntil()函数和上述的方法类似,不过方向相反,通过名字应该就能看的出来。
first()方法返回被选元素组的第一个元素。$("div p").first()返回的是<div>中的第一个<p>元素。
last()方法类似,自己悟,不写了。
eq(n)方法,带有数字参数,代表下标,返回第n个元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。$("p").filter(".intro")返回带有类名 "intro" 的所有 <p> 元素。
not()方法和filter()相反。
AJAX:
jQuery load() 方法,jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback)
$.get(URL,callback) 方法使用get的方式获取数据。
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。使用方法为$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
下面是一组实例,是用来请求restApi项目的
$(document).ready(function () {
$("#btn").click(function () {
var jsonData = {
"name":"hello"
}
$.ajax({
type : "POST",
url : "http://localhost:8080/rest/data/v2/objects/account",
dataType : "json",
contentType : "application/json; charset=utf-8",
data : JSON.stringify(jsonData),
headers : {
"Authorization" : "Bearer f3337d66a627cd8e400b4c675616c7ee1da310ab224ff0bca081f988105db6b3",
"Content-Type" : "application/json"
},
success : function (data, status) {
alert(JSON.toString(date));
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + textStatus + errorThrown);
}
});
})
})
相关文章推荐
- Node.js入门笔记(4):文件系统(fs)
- (ASP.NET MVC4 入门学习笔记)学习自己建项目2----引入css和JS的配置、DBHelper及其他
- js学习入门教程笔记:css+html+js用户注册代码实现
- Egg.js 笔记一 快速入门
- 【js 笔记】读阮一峰老师 es6 入门笔记 —— 第二章
- JS笔记 入门第二
- Node.js入门学习笔记(一)
- 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记
- JS入门经典笔记
- Backbone.js入门教程第二版笔记(2)
- Node.js 入门笔记(5) - child_process
- 创业笔记-Node.js入门之阻塞与非阻塞
- Cocos2d-js入门学习笔记
- Node.js 入门笔记(6) - mysql
- Backbone.js入门学习笔记目录
- Backbone.js入门教程第二版笔记(1)
- Node.js入门笔记(5):案例两则
- Node.js 入门笔记(4) - session
- Node.js学习笔记之一:入门
- JS入门学习笔记——函数入门