3.JavaScript入门
4.jQuery和Ajax学习
3.JavaScript入门
两个方面的内容：javascript入门和javascript的DOM操作
基本数据类型：
Number
Boolean
String
Array
Object(在ruby中是hash数据类型)
//对象的定义方法
var user = {
name: "jayzen",
age: 18
}
//对象值的获取方式
console.log(user.name);
console.log(user['age']);
变量声明
//使用var声明变量
var a;
//也可以不采用var声明变量，但是前提这个变量是引用了外部作用域（也是全局作用域）的变量
//用例子进行说明
var x=1;
function counter(seq){
var x = seq * seq; #定义一个局部变量x,不会改变上面变量x的值
return x;
}
function counter2(seq){
x = seq * seq; #x是最上面的var x的值，这条语句会改变最上面全局变量x的值
return x;
}
Function
//一般的定义方式
function hello(name){
console.log(name);
}
hello('343'); //调用方式,如果没有带参数，也是需要()这个括号
//定义匿名函数
var showAlert = function(name){
console.log(name);
}
showAlert('343');
//闭包（保留了作用域的变量值）
var showAlert = function(name){
name = name + "" + "world";
return function(index){
console.log(index + "" + name); //能获取上层作用域的变量
}
}
var error = showAlert('hello');
error(1);
//闭包的另外一种表现形式，好处是避免变量之间互相影响
(function(){
var a = 1;
console.log(a);
})(); //相当于执行了一个匿名函数 => 匿名函数.()
function返回值
//function的返回值必须使用return关键词，不像ruby中可以使用代码中的最后一句话作为返回值
function counter(x){
return x**x
}
counter(2);
什么是false
null
undefined
false
变量命名
//驼峰式命名,第一个词全部小写，第二个词首字母大写，其他小写
var helloWorld = "hello world";
function showAlert(){.....};
条件控制
if (true){
...
}else{
...
}
循环和遍历
//初始值，变化值，以及判断条件
for(var x=0; x++; x<10){
...
}
条件控制
//使用while
var x=10;
while(x>=0){
console.log(x);
x--;
}
//使用switch
switch(a){
case 1:
...
break;
default:
...
}
javascript的DOM操作
DOM操作
//dom节点查询
//dom节点标签属性增加、删除、修改
//dom节点增加、删除、修改
//浏览器事件的操作
document.getElementByTags('a');
document.getElementByClassName('row');
Event事件
click
mouseover
mousemove
focus
blur
touch
4.jQuery和Ajax学习
jquery是对js的DOM操作的一些封装，同时对不同浏览器的兼容性做了处理。jquery是基于DOM实现的。
jquery的dom节点选择
//$符号是jquery提供的全局变量
$('p'); //获取所有的p标签
$('.row'); //获取所有class为row的节点
$('#wrapper'); //获得id为wrapper的节点
$('.row:last')；//获得class为row的节点中的最后一个节点
$('input[name="username"]'); //获得标签为input，同时name为username的节点
//dom节点的维护
$('p').hide();
$('p').show();
$('p').remove();
//jquery对象!=DOM对象
var wrapper = $('#wrapper');
var wrapper2 = document.getElementById('wrapper');
wrapper == wrapper2 //false
wrapper.get(0) == wrapper2 //true, wrapper是一个数组
//DOM属性操作
$('#wrapper').addClass('theme');
$('#wrapper').removeClass('theme');
$('#wrapper').attr('class');//返回当前给定属性节点的值
$('#wrapper').attr('custom-attr', 'attr_value');//当前属性的值设置为value
..
$('a').attr('href');
//jQuery的事件绑定
$('#wrapper').click(function(){
console.log("wrapper clicked");
})
//same as above
$('#wrapper').on('click', function(){
console.log("wrapper clicked");
})
//自定义事件
$('#wrapper').on('custom-event-name', function(e){
console.log("custom event triggered");
})
$('#wrapper').trigger('custom-event-name');
//自定义事件-动态元素的绑定,针对本来页面上不存在的元素
$(document).on('click', '#wrapper', function(e){
console.log("custom event triggered")
})
//animate动画
$('#wrapper').animate({
height: 300,
opacity: 0.2
})
ajax介绍
asynchronous javascript and xmlhttprequest
//直接使用jquery的ajax
$.ajax({
url: '/sessions',
type: 'post',
data: {username: 'username', password: 'password'},
dataType: 'json',
beforeSend: function(e){
...
},
success: function(data){
...
},
...
})
JSON
javascript object
{
total_entries: 30
rows: [
{id: 1, username: "343"},
...
]
}
网友评论