欢迎光临
我们一直在努力

jQuery简介

阅读(2096)

初学jQuery的朋友,基本上都会问同一个问题“什么是jQuery?”等类似的问题,理解这个问题对于后面的学习会起到促进作用。以下是我整理出的大家常问的几个问题:

1、什么是jQuery?
2、什么是类库?
3、jQuery与JavaScript有什么关系?
4、JavaScript与java又有什么关系?
5、JavaScript、jQuery、Ajax、Json等又是什么?区别又是什么?
6、不会JS能不能学jQuery?

我相信,很多人对这些技术有着似懂非懂的感觉,不是很了解,以上问题肯定是初学者都会产生的问题,如果你对它有兴趣或者想去驾驭它。那么请跟我来,向jQuery进军!let’s GO!

Q:什么是jQuery?
A:jQuery是继Prototype之后又一个优秀的JavaScript类库,它由美国人John Resig创建,至今已吸引来自世界各地众多的JavaScript高手加入其团队,其宗旨是:写更少的代码,做更多的事(write less,do more)

Q:什么是类库?
A:这是程序中的一个基本概念。所谓类,可以理解为是一组语句的集合,用来描述一组具有共同属性和功能的对象。字面理解也就是说类库就是类的集合。Java和.net的类库意思类似。但是在jQuery中,只是集合了许多的方法功能集合,使我们可以通过简单的代码就能实现复杂的效果。

Q:jQuery与JavaScript有什么关系?
A:jQuery是使用JavaScript编写的,也就是说JavaScript可以任意调用,其他程序并不能很轻易的调用。就好比JavaScript是鸡,jQuery是鸡蛋,鸡只能生鸡蛋。再说的明白些,jQuery是使用JavaScript编写的,就好比鸡蛋是鸡生的。
如果你还不明白再看看另一个例子:
我们可以把JavaScript比喻成文字,假如使用文字写了两本菜谱 《西餐菜谱大全》 和 《中餐菜谱大全》,前者是prototype(在jQuery之前也是一种类库)后者是jQuery。菜谱里面都集合了很多做菜的方法也可以叫做菜的类库。在程序里面呢就叫做类库,方法库,函数库等。

Q:JavaScript与Java又有什么关系?
A:乍眼一看,它们有关系或者是同一家公司的产品,其实它们俩既不是兄弟姐妹也不是同一家公司所开发的,前者是Netscape网景公司开发,后者是Sun公司开发,2009年04月20日,Oracle(甲骨文)宣布以74亿美元收购Sun。(详细的资料可以到网上搜一下)

Q:JavaScript、jQuery、Ajax、Json等又是什么?区别又是什么?
A:读到这里,我想不用再讲JS和jQuery了吧?如果你还认为需要讲解,那你再读读前面的几个问题,肯定就明白了,直接切入正题。
Ajax:全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),它是由JavaScript+CSS+DOM+ XMLHttpRequest的四种技术的结合,并且JS是Ajax的核心。jQuery将Ajax的实现变得更加轻松容易。Ajax就是咱们常说的局部刷新。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写的同时也易于机器解析和生成。它基于JavaScript的一个子集。 Json采用完全独立于语言的文本格式,可以简单的理解为数据存储的一种格式或交换方式。

Q:不会JS能不能学jQuery?
A:我不知道大家所指的不会JS是什么程度,但我认为如果你一点都不懂JS那是很难学懂的,因为jQuery是JS的类库。另外如果你懂得其他语言,也可以很快的理解的。如果什么都不会我可以给大家一个快速掌握JS基础的方法,先去看JS的数据类型、变量的定义、函数方法的定义、函数方法的调用以及循环和判断,只要知道上面这几种非常容易学会。看着内容挺多其实很简单,最慢一天就能搞懂。

JavaScript运算符

阅读(1624)

常用的运算符,我为大家大致分为5类(算数运算符、赋值运算符、比较运算符,逻辑运算符、其他运算符)

 

算术运算符:+ – * /

取模:%  取余数

负数:只需要在变量或数值前面加上一个-(减号)即可

自增&自减:++  —

 

赋值运算符:

var a = 1; 赋值

a = a – 1; 等同于 a -= 1; //减法赋值

a = a * 1; 等同于 a *= 1; //乘法赋值

a = a / 1; 等同于 a /= 1; //除法赋值

a = a % 1; 等同于 a %= 1; //取模赋值

比较运算符:==  !=  ===  !==  >  <  >=  <=

逻辑运算符:&&  ||  !

三元运算符:条件 ? 语句1 : 语句2 ;

其他运算符:typeof (判断数据类型) new (对象有关的运算符)

 

作用域、JS预解析机制

阅读(2663)

作用域:

域:空间、范围、区域,作用:读、写

“JS解析器”

1)“找一些东西”var  function 参数

  a = … 

    所有的变量,在正式运行代码之前,都提前赋了一个值:未定义(undefined)。

  fn1 = function fn1(){ alert(2); }

    所有的函数,在正式运行代码之前,都是整个函数块。

  这个过程叫 JS的预解析。

  遇到重名的:只留一个。

  变量和函数重名了,就只留下函数。

2)逐行解读代码:

  表达式:= + – * / % ++ — ! 参数……

  表达式可以修改预解析的值!

例:

<script>
var a = 1;
function fn1(a){
  alert(a);    // undefined
  a = 2;
}
fn1();
alert(a);    // 1

var b = 1;
function fn2(b){
  alert(b);    // 1
  b = 2;
}
fn2(b);
alert(b);    // 1
</script>

JavaScript传参实例:商品价格计算

阅读(5230)

我们使用函数传参是为了重用代码,应当遵循以下原则:
1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素;
2、把核心主程序实现,用函数包起来;
3、把每组里不同的值找出来,通过传参实现。

例:商品价格计算
HTML布局

<ul id="list">
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价:<em>16.5元</em>
    小计:<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价:<em>10.5元</em>
    小计:<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>1</strong>
  	<input type="button" value="+" />
    单价:<em>8.5元</em>
    小计:<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价:<em>8元</em>
    小计:<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价:<em>14.5元</em>
    小计:<span>0元</span>
  </li>
</ul>

<p></p>

js实现价格计算

<script>
window.onload = function () {
	var oUl = document.getElementById('list');
	var aLi = oUl.getElementsByTagName('li');
	var aP = document.getElementsByTagName('p');
	var num=0;	//商品总数
	var money=0;	//总价格
	
	//函数传参
	for ( var i=0; i 0 && num >0 ) {
				n--;				
				num--;
				money -= price;
			}
			fun1();	
		};
		aBtn[1].onclick = function () {
			n++;
			num++;
			money += price;
			fun1();
		};
	};	
	
	function fun2(li){
		var oStrong = li.getElementsByTagName ('strong')[0];
		var oEm = li.getElementsByTagName ('em')[0];
		var n = Number(oStrong.innerHTML);  // 数量'0'
		var price = parseFloat(oEm.innerHTML);  // 单价 12.5		
	};		
	
};
</script>

JavaScript函数传参、参数类型

阅读(3379)

函数传递参数,参数=JS的数据类型:数字、字符串、布尔值、函数、对象、未定义

例1:
<script>
fn1(100, ‘px’);
function fn1(a, b){
alert( a+b ); // 100px
}

fn2(‘邦邦的小站’);
function fn2(a){
alert(a.charAt(3)); // 小
}

function fn4(){
alert(4);
}
fn3( fn4 ); // 4
</script>

例2:通过判断传入参数的类型,而执行不同的操作。
<script>
fn1(100);
fn1(‘miaov’);
fn1(function (){ alert(1); });

function fn1(a){
if( typeof a === ‘number’ && a === a ){
alert( a+20 );
} else if ( typeof a === ‘string’ ) {
alert( a.charAt(2) );
} else if ( typeof a === ‘function’ ) {
a();
}
}
</script>

JavaScript函数

阅读(2477)

函数的作用是定义一次但却可以多次调用或执行任意次的代码,换句话说,需要重复执行的东西我们就可以把它写成函数。

函数主要分为这么几种:无参函数,单参函数,多参函数,返回值函数,递归函数,匿名函数和构造函数。

无参函数:

函数的声明必须要用到一个关键字function,格式如下:

function 名称()

{

方法体

}

单参函数:

顾名思义,就是只有一个参数的函数叫做单参函数,如下p1就是一个参数,格式如下:

function 名称(p1)

{

方法体

}

多参函数:

顾名思义,就是参数个数大于等于2个的函数,叫做多参函数,如下p1,p2,p3一共3个参数,参数之间使用逗号隔开,格式如下:

function 名称(p1, p2, p3)

{

方法体

}

返回值函数:

就是带有return关键字的返回值函数,它能够把这个函数中执行的最终结果返回。因为在方法体中定义的任何变量,出了这个方法体, 就无法得到,也就是说在函数中定义的变量等在外界是无法得到或直接使用的。

function 名称(p1, p2, p3)

{

return 结果;

}

递归函数:

如果你没有其他的编程基础,那么这个词对你来说应该比较抽象;

举例说明:咱们之前调用函数怎么调用呢?直接把方法名拿过来直接调用即可,如下所示:

function abc()

{

方法体

}

abc();  //此处调用abc这个方法,就会执行abc方法体中的代码。

而递归函数,格式是这样的,如下所示:

function abc()

{

…..

此处N多行程序代码

…..

abc();  //发现什么了没有?在方法体内调用自己,这种函数就叫做递归函数。

}

匿名函数:

就是没有名字的函数。

function()

{

方法体

}

上面的方式就是匿名方法,那么怎么调用呢?它没有名字!同样也很简单,看下面:

var abc = function()

{

方法体

}

abc(); //此处调用这个匿名方法。

构造函数:

如果现在讲解构造函数,有点早了,因为它牵扯到类和对象的概念,在这里你只需要记住这个名字就行了,不需要了解太多,后面只要一说到“构造函数”,你有这个印象,就OK!

NaN详解及isNaN()方法的应用

阅读(3406)

NaN:not a number 不是个数字的 数字类型

<script>
var a = Number('abc');
// alert( a );    // NaN
// alert( typeof (a) );		// number

// 一旦写程序中出现:NaN  肯定进行了非法的运算操作
// alert( '200px' -  100 );

// NaN 是 false
if( a ){
 // alert( '真' );
}else{
 // alert( '假' );
}

// NaN 与自己都不相等!!
alert( a === a );	// false
</script>

isNaN:Is not a number 是不是不是一个数字(不是数字)

<script>
// isNaN();  判断某些值是不是数字
// 不喜欢数字、讨厌数字

// alert( isNaN( function(){ alert(1) } ) );    // true
// alert( isNaN( [] ) );    // false
alert( isNaN('250') );   // Number()  '250' => 250 => false
</script>

JavaScript的数据类型转换

阅读(2061)

显式类型转换(强制类型转换):

Number()      函数把对象的值转换为数字(如果无法转换为数字,那么返回NaN)。

parseInt()    函数可解析一个字符串,并返回一个整数。

parseFloat()  函数可解析一个字符串,并返回一个浮点数(开头和结尾的空格是允许的,如果字符串的第一个字符不能被转换为数字,则返回NaN)。

隐式类型转换:

+  200 + ‘3’变成字符串

– * / %’200′ – 3   变成数字

++ –变成数字

> < 数字的比较 、字符串的比较

!取反把右边的数据类型转成布尔值

例:显式类型转换

<script>
var a = '+100';
 // alert( Number(a) );			// 100
var a1 = '  ';
 // alert( Number(a1) );    // 0
var a2 = true;
 // alert( Number(a2) );    // true-1  false-0
var a3 = [ 10 ];
 // alert( Number(a3) );    // 10
var a4 = null;
 // alert( Number(a4) );    // 0

var b = ' 200px';
 // alert( parseInt(b) );    //200
var c = '12.34元';
 // alert( parseFloat(c) );    //12.34

var json = {};
 // alert( Number(json) );    // NaN
var u;
 // alert( Number(u) );    // NaN
var fun = function (){ alert(1); };
 // alert( Number(fun) );    // NaN
</script>

例:parseInt()和parseFloat()的应用,判断一个数字是不是小数。

<script>
var num = '200.45';
if( parseInt(num) == parseFloat(num) ){
	//alert( num + '是整数' );
}else{
	//alert( num + '是小数' );
}
</script>

JavaScript数据类型及相关操作

阅读(2353)

ECMAScript:标准、核心

HTML 标签类型:block、inline、inline-block、table……

JS中的数据类型:数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义

typeof 判断数据类型

<script>
var i = 100;
// alert( typeof i );		// number

var s = ' miaov ';
// alert( typeof s );		// string
// alert( s.length );		// 7
// alert( s.charAt(3) );	// 'a'

var b = true;				// 布尔值:true  false
// alert( typeof b );		// boolean
if ( true ) {}
for ( ; false ; ) {  }

var fn = function (){ alert(1); };
// fn();
function fn1(){
	alert(2);
}
// alert( fn1 );
// fn1();

var obj = document;
// alert( typeof obj );		// object  物体、东西、对象
obj.abc = 123;
obj.onOff = true;
obj.fn1 = function (){ alert(1); };
// alert( document.onOff );		// 123
// obj.fn1();

var arr = [ 1,2,3,4 ];
// alert( arr.length );
// arr[2] = 345;
// alert( arr );
// arr.push( 5,6,7 );
// alert( arr );
// alert( typeof arr );		// object

arr.abc = 999;
arr.fn1 = function (){ alert('ok'); };
// alert( arr.abc );
// arr.fn1();

var json = { name:'miaov', age:5  };
// alert( json.name + '今年' + json.age + '岁了' );
// alert( typeof json );

var n = null;
// alert( typeof n );

var u;
// alert( typeof u );		// undefined 未定义
// 表示你写的程序出问题了~~
</script>

JavaScript练习:带缩略图的图片切换效果

阅读(2933)

带缩略图的图片切换效果

<!doctype html><html><head>
<meta charset="utf-8">
<title>带缩略图的图片切换效果</title>
<style>
body,div,h2,a,ul,li,p{ margin:0; padding:0;}
li{ list-style:none;}
#banner{ width:720px; height:500px; margin:0 auto;padding:20px 30px; background: #666 url(loader_ico.gif) no-repeat center; position:relative;}
h2{ height:36px; margin-bottom:15px; line-height:36px; font-size:24px; color:#fff;}
.pic,.pic img{ width:720px; height:420px;} 
#banner a{ width:36px; height:36px;font-size:24px; line-height:36px;color:#fff;text-decoration:none; text-align:center; background:rgba(0,0,0,.5);position:absolute;top:273px;}
#banner a:hover{background:rgba(0,0,0,.8)}
#prev{ left:50px; }
#next{ right:50px;}
#banner p{ width:720px;height:24px; font-size:14px; line-height:24px; color:#fff; text-align:center;background:rgba(0,0,0,.5); position:absolute;top:71px;}
.nav{ width:130px;height:20px; margin:10px auto;}
.nav li{ width:16px; height:16px; float:left;margin:0 5px; background:#09F; border-radius:50%; position:relative;}
.nav li.on,.nav li:hover{ background:#fff;}
.nav li img{ display:none;width:80px; height:80px; padding:3px; background:#FFF; position:absolute; top:-100px; left:-40px;z-index:100;}
.nav li:hover img{display:block}
</style>
<script>
window.onload = function(){
	var oBan= document.getElementById('banner');
	var oImg= document.getElementById('img1');
	var aBtn= oBan.getElementsByTagName('a');
	var oUl= oBan.getElementsByTagName('ul')[0];
	var aLi= oBan.getElementsByTagName('li');
	var oP=  oBan.getElementsByTagName('p')[0];
	var num=0;
	
	var arrImg = ['http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70kwib3vj20k00bp43e.jpg','http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70l70n9yj20rq0ih11y.jpg','http://ww2.sinaimg.cn/mw1024/88b110f7gw1el70lsdgjfj20xc0e7wmo.jpg','http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70lc81caj20k00dbahg.jpg','http://ww4.sinaimg.cn/mw1024/88b110f7gw1el70kt987xj20k00bjtcu.jpg','http://ww2.sinaimg.cn/mw1024/88b110f7gw1el70krl9h4j20k00dcwmj.jpg'];
	var arrImgs = ['http://ww3.sinaimg.cn/square/88b110f7gw1el70kwib3vj20k00bp43e.jpg','http://ww3.sinaimg.cn/square/88b110f7gw1el70l70n9yj20rq0ih11y.jpg','http://ww2.sinaimg.cn/square/88b110f7gw1el70lsdgjfj20xc0e7wmo.jpg','http://ww3.sinaimg.cn/square/88b110f7gw1el70lc81caj20k00dbahg.jpg','http://ww4.sinaimg.cn/square/88b110f7gw1el70kt987xj20k00bjtcu.jpg','http://ww2.sinaimg.cn/square/88b110f7gw1el70krl9h4j20k00dcwmj.jpg'];

	//初始化
	for(var i=0;i<arrImg.length;i++){
		oUl.innerHTML +='<li></li>';		
	}
	oUl.style.width=arrImg.length*26+'px';
	oImg.src= arrImg[num];
	oP.innerHTML='图片'+num;
	aLi[num].className='on';
	
	aBtn[1].onclick= function(){
		aLi[num].className='';
		if(num<arrImg.length-1){
			num++			
		}else{num=0}
		oImg.src= arrImg[num];
		oP.innerHTML='图片'+num;
		aLi[num].className='on';
	};
	
	aBtn[0].onclick= function(){
		aLi[num].className='';
		if(num==0){
			num=arrImg.length-1;
		}else{
			num--
		}
		oImg.src= arrImg[num];
		oP.innerHTML='图片'+num;		
		aLi[num].className='on';
	};	

	for(var i=0;i<aLi.length;i++){
		aLi[i].index= i;
		//aLi控制图片切换
		aLi[i].onclick= function(){
			oImg.src= arrImg[this.index];
			oP.innerHTML='图片'+this.index;
			aLi[num].className='';
			aLi[this.index].className= 'on';
			num=this.index;			//将num的值改为当前点击的元素
		};
		//移入aLi看小图
		aLi[i].onmousemove = function(){
			aLi[this.index].innerHTML= '<img src="' + arrImgs[this.index] + '">';	
		}
	}

};
</script>
</head>
<body>
<div id="banner">
	<h2>带缩略图的幻灯片</h2>
	<div class="pic"><img id="img1"></div>
  <p></p>
	<a id="prev" href="javascript:;"> < </a>
	<a id="next" href="javascript:;"> > </a>  
  <ul class="nav"></ul>
</div>
</body>
</html>