您的位置:首页 > Web前端 > JavaScript

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);

}

});

})

})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: