使用jQuery进行便捷web开发

2008-03-15 23:18:55 发表评论»

咳咳～这个题目～不废话吗～谁写JS框架是为了进行“笨重”开发？嗯～这个～囧～OK，不废话了…接触jQuery有一段时间了，关于jQuery本身我就不再多做介绍，大家可以随意google或者baidu，也可访问jQuery的官方网站~…个人认为只要稍有编程基础，jQuery的学习还是比较轻松的。当然如果你掌握一点DOM，CSS的知识就更好了～这不是一篇教程，而是一点个人学习的总结，所以谈及比较重要的一些知识点。

使用jQuery进行开发时需要改变一些惯有的编程习惯，或者说是编程风格。其中最重要的一点便是DOM对象和jQuery对象之间的类型转换。因为单纯的jQuery对象是无法使用DOM定义的方法和属性的，jQuery对象和DOM对象之间的方法是不能混用的。比如有$(“.myClass”)这样一个jQuery对象，可以通过以下方法来进行类型的转换：

$(“.myClass”)[0]，直接获取该jQuery对象中的第一个元素。当然如果你是$(“#myId”)[0]那么实际上返回的就是id值为“myId”的DOM对象。
$(“.myClass”).get(0)，其等价于$(“.myClass”)[0]，没什么区别

$(document).ready(function(){})，$(function(){})和jQuery(function(){})这三种写法有什么区别吗？我现在也没弄清楚。在传统的javascript中，window.onload似乎是用来装载JS的唯一方法，但是这个方法却有明显的弊端。因为onload事件本身就是在整个页面内容下载完成后才触发，包括图片。但实际上在很多时候这是不需要的，JS很多时候用来操纵DOM，那么只需要DOM树下载完成就可以了，那么这个时候你就可以用$(document).ready()来，DOM树装载完成即可触发。

jQuery支持方法的连写，什么意思？在传统JS中一个链接的简单hover效果你需要分别为onmouseover和onmouseout事件定义事件函数。但是在jQuery中可以这样写

$(“#myLink”).mouseover(function(){}).mouseout(function())
怎么样？很简单吧～当然你如果愿意你可以继续在后面添加事件函数，比如：

$(“#myLink”).mouseover(function(){}).mouseout(function()).click(function(){}).addClass(“myClass”)

同一函数实现set和get。比如html()：

alert($(“#myId”).html()) //get
$(“#myId”).html(

文本段落

) //set

这类函数即可以用来获取值，同时也能设置值。这样的函数还有：text()，height()，weidth()，val()，其实css()，click()也可以算是这类函数～···，这样一来其实整个jQuery里面的函数很多都是既可以set也可以get的～

jQuery中的事件触发皆省略掉传统javascript中的on，本文前面已有例子。比如传统方法你得这样写：

myElement.onclick=function(){}

而在jQuery中你可以简单地写成这样：

myElement.click(function(){})

除此之外jQuery中还有一些自定义的事件：hover()，ready()，toggle()，triggle()，bind()，unbind()，这些事件函数具体定义请参考jQuery的API，在此不作赘述。

浏览器的判断$.browser，可用值：safari，opera，msie，mozilla。该属性在DOM装载完成之前就是有效的，故可以通过此属性先判断浏览器类型，再为特定浏览器编写程序。

if($.browser.msie){alert(“this is ie”)}
利用noConflict()实现多库共存。我们知道这个地球上不止jQuery这样一个JS框架，还有大名鼎鼎的prototype，YUI，Dojo等～有时难免会同时使用多个框架，难免发生命名冲突。就比如“$”在prototype和jQuery中都有定义，如不做处理必然导致命名冲突。那么这时候我们就可以使用noConflict()函数将变量$的控制权让渡出来。

jQuery.noConflict(); //转让控制权
jQuery(“div p”).hide(); // 使用 jQuery
$(“content”).style.display = ‘none’; //使用其他库的 $()
…….

除此之外，jQuery强大的选择器，是学习jQuery必须牢固掌握的，关于jQuery选择器，将单独撰文介绍～

严格来说jQuery只是一个封装了一些函数的JS类库，如果你熟悉javascript，那么掌握jQuery应该来说是没有任何难度的，所以jQuery很多精髓的东西可能还是其一些功能强大的函数，函数的具体使用介绍可参考jQuery的API。同时互联网上也有很多jQuery的学习资料，稍花时间便可掌握。

附：一些jQuery学习资源

class和className

2008-01-25 21:55:25 2条评论»

不管是对象class属性的获取还是设置在IE和FF中皆是有所区别的。
IE中不管是使用HTML-DOM还是DOM-CORE，class属性的获取只能通过对象的className属性来完成。即只能通过obj.className，obj.setAttribute(className)，obj.getAttribute(className)的方式完成。

FF中class属性的设置严格来说其实都是能够通过class和className来完成的，但是class属性并不能真正意义上的class属性的相关操作，即你通过class为对象设置class属性赋予样式，但这个样式并不会应用成功，同时你却又可以通过obj.class获取该class属性，所以此class非彼class。而要成功的完成对象class属性的设置FF中HTML-DOM和DOM-CORE是不尽相同的。FF中使用HTML-DOM方法时，只能通过className完成，与IE一致，但是使用DOM-CORE方式是却只能由class来完成。

一些有用的JavaScript函数（1）

2008-01-25 21:25:37 1条评论»

这两天写了几行JS代码，感觉重用性比较高的几个发过来，以后用的时候也不用到处找了，以后会不断地发一些平时写的一些有用的代码，所以这是一，以后可能还有二，三～····

1，改变对象透明度

function setOpacity(obj,step,f,t){
　　var intervarId;
　　function addOpacity(){
　　　　if(!isIE){
　　　　　　if(obj.style.opacity &gt;= 1){
　　　　　　　　obj.style.opacity = 1;
　　　　　　　　clearInterval(intervalId);
　　　　　　}
　　　　　　else{
　　　　　　　　obj.style.opacity = parseFloat(obj.style.opacity) + step;
　　　　　　}
　　　　}
　　　　else{
　　　　　　if(obj.filters.alpha.opacity &gt;= 100){
　　　　　　　　obj.filters.alpha.opacity = 100;
　　　　　　　　clearInterval(intervalId);
　　　　　　}
　　　　　　else{
　　　　　　　　obj.filters.alpha.opacity = obj.filters.alpha.opacity + 200*step;
　　　　　　}
　　　　}
　　}
　　function minuOpacity(){
　　　　if(!isIE){
　　　　　　if(obj.style.opacity &lt;= 0){
　　　　　　　　obj.style.opacity = 0;
　　　　　　　　clearInterval(intervalId);
　　　　　　　　obj.parentNode.removeChild(obj);
　　　　　　}
　　　　　　else{
　　　　　　　　obj.style.opacity = parseFloat(obj.style.opacity) - step;
　　　　　　}
　　　　}
　　　　else{
　　　　　　if(obj.filters.alpha.opacity &lt;= 0){
　　　　　　　　obj.filters.alpha.opacity = 0;
　　　　　　　　clearInterval(intervalId);
　　　　　　　　obj.parentNode.removeChild(obj);
　　　　　　}
　　　　　　else{
　　　　　　　　obj.filters.alpha.opacity = obj.filters.alpha.opacity - 200*step;
　　　　　　}
　　　　}
　　}
　　if(f){
　　　　try{
　　　　　　clearInterval(intervalId);
　　　　}catch(e){}
　　　　intervalId = setInterval(addOpacity,t);
　　}
　　else{
　　　　intervalId = setInterval(minuOpacity,t);
　　}
　　　　return false;
　　}

参数介绍:

obj:要改变透明度的对象的id，暂时只支持通过id获取对象；

step:步长，及每次透明度的变化量，IE和FF稍有不同。IE中透明度的取值是0-100，FF中是0-1；

f:设置透明度是递增还是递减。非0为递增，0为递减；

t:透明度变化的时间间隔，单位毫秒；

但在对透明度进行递减，及f参数值为0时，当透明度低降至0是，对象将从dom删除。这个函数最先只考虑到FF中的效果，最后做IE兼容性的时候纯属打补丁，所以代码并不见得很好，能用就行。

注：使用该函数前，需先初始化对象的透明度。

2，通过class获取对象

function getObjectByClass(oWrapper,tagName,sName){	//根据class获取对象
　　var oClass = [];
　　var oTag = oWrapper.getElementsByTagName(tagName);
　　for(var i=0; i<oTag.length; i++){
　　　　var sClass = oTag[i].classNaa\me;
　　　　if(sClass == sName){
　　　　　　oClass.push(oTag[i]);
　　　　}
　　}
　　return oClass;
}

该函数用于获取某一对象在其同一级别具有相同class的元素中的索引值。

参数说明；

oWrapper:要获取对象的父级元素；

tagName；及tagName，元素标签名称；

sName；class属性值；

3，获取任意对象在其向同级对象中的索引

function getIndex(obj){
　　var tagName = obj.nodeName;
　　var oParent = obj.parentNode;
　　var tags = oParent.getElementsByTagName(tagName);
　　obj.setAttribute("id","crtTag");
　　for(var i=0; i<tags.length; i++){
　　　　if(tags[i].getAttribute("id") == "crtTag"){
　　　　　　tags[i].setAttribute("id","");
　　　　　　return i;
　　　　}
　　}
}

该函数用于获取某一对象在其同一级别对象相同元素中的索引值，这个函数在制作tab切换以及JS的图片轮换广告时尤其有用。

参数说明：

obj：要获取其索引的对象。

4，insertAfter函数

function insertAfter(newObj,obj){
　　if(obj == obj.parentNode.lastChild){
　　　　obj.parentNode.appendChild(newObj);
　　}
　　else{
　　　　obj.parentNode.insertBefore(newObj,obj.nextSibling);
　　}
}

JS中原本已有appendChild函数和insertBefore函数，但是有时使用起来还不够方便，再写个insertAfter函数，使用起来就得心应手了。

此函数用于在某一对象前插入一个新的对象。

参数说明：

newObj：要插入的新对象；

Obj：新对象插入何对象前。

暂写这四个，以后不断补充～···

JS获取浏览器窗口显示区域尺寸

2008-01-10 11:02:25 1条评论»

这里所说的浏览器窗口显示区域尺寸，既非指整个窗口大小，也非指页面尺寸，只是浏览器可显示页面的可视区域的大小，你也可以理解成能看见的网页的大小。前面发个一篇隐藏浏览器滚动条的文章。但是如果本来文档区域就超出了浏览器显示窗口大小，那么多出的部分将被隐藏，这显然不可取。较好的办法就是通过JS控制页面文档的大小，使其始终小于浏览器显示窗口大小，那么永远不会产生滚动条。这里就涉及到一个获取浏览器显示窗口大小的问题，而且不同浏览器皆有各自的处理方式。在此搜集一些资料，介绍一下。

（1）在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能用document.body.offsetWidth/offsetHeight 获取；

（2）在声明了DOCTYPE的浏览器中，可以用document.documentElement.clientWidth/clientHeight获取浏览器显示窗口大小，IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；

（3）同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用window.innerWidth/innerHeight 获取。

JS中变量的作用域

2008-01-09 19:38:39 发表评论»

昨天看到一个有关JS中变量作用域的讨论，其实很久没有这么关注这类细节基础的问题了。现在学东西都直接到应用层面，可能以前刚开始学什么C,C++的时候还去钻过些牛角尖，现在基本上没有了~“`不过这个问题，我出错了。看看这个问题吧，以下是JS源码。

var a = "http://www.wondger.com";
function myFunction(){
　　alert(a);      //①
　　var a = "a in function";
　　alert(a);      //②
}
myFunction();

你觉得执行结果应该是什么？

正确结果是依次弹出警告框：“undefined”，“a in function”。

我一直以为应该是：“http://www.wondger.com”，“a in function”，因为①处，按照我的理解，应该还是引用的全局变量a，但是事实上却输出了“undefined”，为什么呢？原来函数内的局部变量会在所有代码执行前先完成对变量的声明。即以上代码可以这样理解：

var a = "http://www.wondger.com";
function myFunction(){
　　var a;
　　alert(a);      //①
　　a = "a in function";
　　alert(a);      //②
}
myFunction();

这样一来疑问就解决了，哎，诡异呀～···

omiga

简单就好

使用jQuery进行便捷web开发

class和className

一些有用的JavaScript函数（1）

JS获取浏览器窗口显示区域尺寸

JS中变量的作用域