学过了Javascript(姜昊),JQuery和ajax后,又将北风的视频过了一遍,就是一种充实的感觉。就像一个水杯中开始放了一些石块,然后又加入了水,将空隙填补了一样。在BS整个学习的过程中Javascript既是基础也是核心。这篇博客先从一些常用符号说起,不知道大家有没有这种感受,没有系统地学习过之前,看代码中的这些符号比如“$”常常摸不着头脑,从网上查也不容易,现在我总结了我在学的过程中一些疑惑点。
$
在JQuery的使用中常常能看到“$”这个符号。$到底有哪些使用呢?
1.$()的作用就是将传入括号的东西转换为JQuery对象。那么什么东西可以传入呢?各种选择器和过滤器。这里只介绍几种基础选择器。
1.根据标签名进行选择
var input_query=$("input");
2.根据id值选
var text11_query=$("#text11");
3.根据class值进行选
var text11_query=$(".text11");
4.同时选择多个符合条件的JQuery包装集用,号分隔条
var text_query=$("#text11,.text12");
5.选择所有DOM元素
var all_query=$("*");
其他还有层次选择器,基本过滤器等。详细内容可参见链接:JQuery选择过滤器
其实到这里我们自然想到getElementByID()这个方法。这个方法只能通过id选择器选择DOM节点。而JQuery中的这个$作用就不是这样了。它的选择器可以很多种。这也充分体现了JQuery这个框架的便利。还要强调一点就是getElementByID返回的是DOM对象,而$返回的JQuery对象(数组),这个点也有助于帮助理解连缀的写法。这里给连缀举个实例:
$('div')//找到div元素
.find('h3')//选择其中的h3元素
.eq(2)//选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
能够连缀是因为find,eq,html都是JQuery对象的方法,而find和eq的返回值也是JQuery对象。
2.$(funciton(){ }) 这里的$的是什么意思?整个方法是什么意思?
其实$(funciton(){ })是 $(document).ready(function(){ })的缩写形式。$(document)是选择整个文档对象。JQuery中默认参数是“document”。ready方法是表示在文档结构已经加载完毕时所触发的函数。合起来就是表示在整个文档结构已经加载完毕时要执行ready括号里的方法体。有没有觉得很像onload方法。这两个方法还是有区别的,onload方法表示页面包含图片等文件在内的所有元素都加载完成后才执行。
( )
function box() {
var age = 100;
age ++;
return age;
}
alert(box); //这种情况下输出的是 function box(){<span style="font-family: SimSun; font-size: 10.5pt;">var age = 100;</span><span style="font-family: SimSun; font-size: 10.5pt;">age ++; </span><span style="font-family: SimSun; font-size: 10.5pt;">return age;</span>}
alert(box()); //这种情况下输出的是101。
字面量
100 //数字字面量
'jane' //字符串字面量
false //布尔字面量
/js/gi //正则表达式字面量
null //对象字面量
{x:1, y:2} //对象字面量表达式
[1,2,3,4,5] //数组字面量表达式
另外字面量在创建数组时可以和传统方式对比:
1.使用new 关键字创建数组
var box = new Array(); //创建了一个数组
var box = new Array(10); //创建一个包含10 个元素的数组
var box = new Array('dog',4); //创建一个数组并分配好了元素
2 使用字面量方式创建数组
var box = []; //创建一个空的数组
var box = ['dog',4]; //创建包含元素的数组
在创建对象时可以和传统方式对比:
1.使用new 运算符创建Object
var box = new Object(); //new 方式
box.name = 'dog'; //创建属性字段
box.age = 4; //创建属性字段
2.使用字面量方式创建Object
var box = { //字面量方式
name : 'dog', //创建属性字段
age : 4
};
总结:这些都是一些细小的点,下篇博客讲我理解的JS基于原型的面向对象。