欢迎光临
我们一直在努力

jQuery设计思想之写法——方法函数化

阅读(2213)

原生

window.onload = function(){
  ...
};

JQ改为

$(function(){
  ...
});

原生

innerHTML = 123;

JQ改为

html(123);

原生点击事件

oDIV.onclick = function(){};

JQ改为

$('#div1').click(function(){})

小例子:

邦邦的小站_分享Web前端技术和PHP技术的学习心得!

原生

window.onload = function(){
	var oDiv = document.getElementById('div1');	
	oDiv.onclick = function(){
		alert( this.innerHTML );
	};	
};

JQ改为

$(function(){	
	$('#div1').click(function(){		
		alert( $(this).html() );		
	});	
});

jQuery选择器

阅读(1794)

jQuery选择器允许对HTML元素组或单个元素进行操作。
jQuery选择器基于元素的id、标签名、类、属性等”查找”(或选择)HTML元素。它基于已经存在的CSS选择器,除此之外,它还有一些独有选择器。
jQuery中所有选择器都以美元符号开头:$()

id选择器
jQuery #id选择器通过HTML元素的id属性选取指定的元素。
页面中元素的id应该是唯一的,所以您要在页面中选取唯一的元素需要通过#id选择器。
通过id选取元素语法如:$(“#div1”)

类选择器
jQuery类选择器可以通过指定的class查找元素。
语法如:$(“.box”)

标签选择器
jQuery标签选择器基于标签名选取元素。
选取所有<p>标签语法如: $(“p”)
实例:所有p标签的背景颜色更改为红色

$("p").css("background-color","red");

更多实例

选择器 实例 选取
* $(“*”) 所有元素
#id $(“#lastname”) id=”lastname” 的元素
.class $(“.intro”) 所有 class=”intro” 的元素
element $(“p”) 所有 <p> 元素
.class.class $(“.intro.demo”) 所有 class=”intro” 且 class=”demo” 的元素
:first $(“p:first”) 第一个 <p> 元素
:last $(“p:last”) 最后一个 <p> 元素
:even $(“tr:even”) 所有偶数 <tr> 元素
:odd $(“tr:odd”) 所有奇数 <tr> 元素
:eq(index) $(“ul li:eq(3)”) 列表中的第四个元素(index 从 0 开始)
:gt(no) $(“ul li:gt(3)”) 列出 index 大于 3 的元素
:lt(no) $(“ul li:lt(3)”) 列出 index 小于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不为空的 input 元素
:header $(“:header”) 所有标题元素 <h1> – <h6>
:animated 所有动画元素
:contains(text) $(“:contains(‘W3School’)”) 包含指定字符串的所有元素
:empty $(“:empty”) 无子(元素)节点的所有元素
:hidden $(“p:hidden”) 所有隐藏的 <p> 元素
:visible $(“table:visible”) 所有可见的表格
s1,s2,s3 $(“th,td,.intro”) 所有带有匹配选择的元素
[attribute] $(“[href]”) 所有带有 href 属性的元素
[attribute=value] $(“[href=’#’]”) 所有 href 属性的值等于 “#” 的元素
[attribute!=value] $(“[href!=’#’]”) 所有 href 属性的值不等于 “#” 的元素
[attribute$=value] $(“[href$=’.jpg’]”) 所有 href 属性的值包含以 “.jpg” 结尾的元素
:input $(“:input”) 所有 <input> 元素
:text $(“:text”) 所有 type=”text” 的 <input> 元素
:password $(“:password”) 所有 type=”password” 的 <input> 元素
:radio $(“:radio”) 所有 type=”radio” 的 <input> 元素
:checkbox $(“:checkbox”) 所有 type=”checkbox” 的 <input> 元素
:submit $(“:submit”) 所有 type=”submit” 的 <input> 元素
:reset $(“:reset”) 所有 type=”reset” 的 <input> 元素
:button $(“:button”) 所有 type=”button” 的 <input> 元素
:image $(“:image”) 所有 type=”image” 的 <input> 元素
:file $(“:file”) 所有 type=”file” 的 <input> 元素
:enabled $(“:enabled”) 所有激活的 input 元素
:disabled $(“:disabled”) 所有禁用的 input 元素
:selected $(“:selected”) 所有被选取的 input 元素
:checked $(“:checked”) 所有被选中的 input 元素

jQuery简介

阅读(2221)

初学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运算符

阅读(1729)

常用的运算符,我为大家大致分为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预解析机制

阅读(2793)

作用域:

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

“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传参实例:商品价格计算

阅读(5425)

我们使用函数传参是为了重用代码,应当遵循以下原则:
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函数传参、参数类型

阅读(3593)

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

例1:

fn1(100, 'px');

function fn1(a, b) {
  alert(a + b); // 100px
}

fn2('邦邦的小站');

function fn2(a) {
  alert(a.charAt(3)); // 小
}

例2:通过判断传入参数的类型,而执行不同的操作。

fn1(100);
fn1('邦邦的小站');
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();
  }
}

JavaScript函数

阅读(2619)

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

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

无参函数:

函数的声明必须要用到一个关键字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()方法的应用

阅读(3550)

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的数据类型转换

阅读(2194)

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

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>