不管你是资深网页设计师,还是刚刚摸透JavaScript概念,刚好开始会用alert();的毛头小子。jQuery对你来说无疑都是另外一个神奇的世界。简洁的代码书写方式、更强更方便的Ajax交互、功能强大的插件必将为你的web2.0开发带来新的体验。本文整理网上较好教程,结合自身学习以通俗的方式介绍jQuery,同时通过改写几个传统js应用来初步认识jQuery的选择器及其代码书写方式。

What&why:

    简单的说,jQuery是一个简洁快速的JavaScript库。它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。

为什么要选择jQuery? 一句话:最近他很流行。流行自然有其道理,“写的更少,做得更多是笔者在学习jQuery时听得最多的一句话。jQuery是被设计用来改变你写JavaScript的方法的。你写了10jQuery代码,相当于你写了20行乏味的DOM JavaScript。当你写完之后,一切只需要23行的代码而已,并且它不可能变得更短除非它看破了你的心思。众说云云,总结下,jQuery有以下7个特点。

1.  代码简练、语义易懂、学习快速、文档丰富。

2.  jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。

3.  jQuery支持CSS1-CSS3,以及基本的xPath

4.  jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+

5.  可以很容易的为jQuery扩展其他功能。

6.  能将JS代码和HTML代码完全分离,便于代码和维护和修改。

7.  插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。

How

说了那么多,让我们先来个简单的Helloworld!吧。

Step1

下载jQuery,可以到官方http://jquery.com/下载,需要说明的是,jQuery分两个版本,未压缩版(77kb)用于测试和学习,压缩版用于产品开发。建议两个版本都下载。

Step2

像使用其他的js脚本一样,我们将其链到页面中。如:

<script language="javascript" src="js/jquery.js"></script>

Step3

编写代码:

<script language="javascript">

$(document).ready(function () {

alert(“helloworld!”);

    }

)

</script>

预览页面,你会发现弹出一个提示框——“helloworld”,恭喜你已经来到一个神奇的jQuery世界。

jQuery有初步的了解之后,我们来具体的讲jQuery到底能帮我们做什么呢?它又是怎样使我们写得更少做的更多呢。

1.精准简单的选择对象:

$('#element');// 相当于document.getElementById("element")

$('.element');//Class

$('p');//html标签

$("form > input");//子对象

$("div,span,p.myClass");//同时选择多种对象

$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景

$(":input");//表单对象

$("input[name='newsletter']");//特定的表单对象

其他还有N多的东西,详细请查看《jquery选择器的使用》这篇文章

2.对象函数的应用简单和不限制:

element.function(par)

$(”p.surprise”).addClass(”ohmy”).show(”slow”)

3.对已选择对象的操作(包括样式):

$("#element").addClass("selected");//给对象添加样式

$('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改变对象样式

$("p").text("Some new text.");//改变对象文本

$("img").attr({ src: "test.jpg", alt: "Test Image" });//改变对象文本

$("p").add("span");//给对象增加标签

$("p").find("span");//查找对象内部的对应元素

$("p").parent();//对象的父级元素

$("p").append("<b>Hello</b>");//给对象添加内容

注意,有些对象我们选择后,不能像那样操作。比如:

在网页中有个<select name="QuesAry_Class"></select>

var select_obj=document.getElementById("QuesAry_Class");

var select_obj2=$("input[@name= QuesAry_Class]")都能选择到那个select对象,但有些操作,比如options.add,则只有select_obj这个对象(采用document.getElementById方式选择的对象)可以,而用jQuery方式得到的对象(select_obj2)却不能进行options.add操作。

4.支持ajax,支持文件格式:xml/html/script/json/jsonp

$("#feeds").load("feeds.html");//相应区域导入静态页内容

$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});//导入动态内容

//-------------------------------------------------

$.ajax({

url:"Seller.asp",

type:"get",          

dataType:"html",

data: "flag=2",

/*jQueryajax可以指定多个参数,此处url 指定ajax的目标页面;type 指定了方法可以是getpostdata指定了url的参数。也就是说这里的一段参数,通俗地讲就是以get的方式到Seller.asp? flag=2获取html数据。

其他参数还有

timeout:超时时间,例如:timeout: 1000,

error:出错的操作,例如:error: function(){
        alert('页面出错');

    },*/

success:function(msg){//数据成功返回后的操作

                $("#SuveyAdmin").html(msg);//ajax返回的html替换idSuveyAdmin

              }

});

//-------------------------------------------------

5对事件的支持:

$("p").hover(function () {

      $(this).addClass("hilite");//鼠标放上去时

    }, function () {

      $(this).removeClass("hilite");//移开鼠标

    });//鼠标放上去和移开的不同效果(自动循环所有p对象)

6.动画:

$("p").show("slow");//隐藏对象(慢速渐变)

$("#go").click(function(){

$("#block").animate({

    width: "90%",

    height: "100%",

    fontSize: "10em"

}, 1000 );

});//鼠标点击后宽、高、字体的动态变化

7.扩展:

$.fn.background = function(bg){

    return this.css('background', bg);

};

$(#element).background("red");

  

下面我们来通过改造传统js的几个实例来进一步应用和学习jQuery

一、同样一个表格变色

1、  原始手法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>表格变色</title>

<style>

.table{

border:1px #B3CDE8 solid;border-collapse:collapse;

width:100%;background:#EEF7FD;

}

.highlight{background:#ffffff;}

</style>

</head>

<body>

<table align="center" cellpadding="4" cellspacing="1" class="table" border="1">

  <tr onMouseOver="this.className='highlight'" onMouseOut="this.className=''">

    <td align="center" height="25">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

    <td align="center">&nbsp;</td>

  </tr>

  <tr onMouseOver="this.className='highlight'" onMouseOut="this.className=''">

    <td align="center" height="25">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

    <td align="center">&nbsp;</td>

  </tr>

</table>

</body>

</html>

2、  改进手法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>表格变色</title>

<script type="text/javascript">

function tableFix(){

var v = document.getElementsByTagName("tr");

for (var i = 0; i < v.length; i++) {

v[i].onmouseover = ClassNames;

v[i].onmouseout = ClassNames;

v[i].altClassName = v[i].className + "highlight";

}

}

function ClassNames() {

var n = this.className;

this.className = this.altClassName;

this.altClassName = n;

}

window.onload=tableFix;

</script>

<style>

.table{

border:1px #B3CDE8 solid;border-collapse:collapse;

width:100%;background:#EEF7FD;

}

.highlight{background:#ffffff;}

</style>

</head>

<body>

<table align="center" cellpadding="4" cellspacing="1" class="table" border="1">

  <tr>

    <td align="center" height="25">&nbsp;</td>

          <td align="center">&nbsp;</td>

          <td align="center">&nbsp;</td>

          <td align="center">&nbsp;</td>

    <td align="center">&nbsp;</td>

  </tr>

  <tr>

    <td align="center" height="25">&nbsp;</td>

          <td align="center">&nbsp;</td>

          <td align="center">&nbsp;</td>

          <td align="center">&nbsp;</td>

    <td align="center">&nbsp;</td>

  </tr>

</table>

</body>

</html>

3、  jQueryjs改造

由于传统是手法将js脚本(onMouseOver="this.className='highlight'")直接写在表格中,因此使用非常不方便,而改进版中,写成js方法,并且分离,并且加上window.onload=tableFix;

在网页加载中执行tableFix,达到表格表色的效果。现在我们将这段代码改造jQuery看看,将下面的代码,替换改进手法中的js代码。

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

        $(".table tr").mouseover(function(){  

                //如果鼠标移到classtable的表格的tr上时,执行函数

                $(this).addClass("highlight");})

                    .mouseout(function(){

                                //给这行添加class值为over,并且当鼠标一出该行时执行函数

                $(this).removeClass("highlight");})  //移除该行的class

        $(".table tr:even").addClass("");

                //classtable的表格的偶数行添加class值为空

});

</script>

二、同样的一个DOM操作

1、  原始手法,没有使用 jQuery DOM 脚本

var external_links = document.getElementById('external_links');           
var links = external_links.getElementsByTagName('a');         
for (var i=0;i < links.length;i++) {       
    var link = links.item(i);      
    link.onclick = function() {      
        return confirm('You are going to visit: ' + this.href);  
    };           
}           

2、  改进手法,使用了 jQuery DOM 脚本

$('#external_links a').click(function() {        
    return confirm('You are going to visit: ' + this.href);         
});       

是不是很神奇? 使用 jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。无需对元素进行循环,click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。

理解这一代码的工作原理可能会有一点复杂。首先,我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常,我们都是使用这个函数从文档中选择元素。在本例中,一个包含有一些层叠样式表(Cascading Style SheetCSS)语法的字符串被传递给函数,然后 jQuery 尽可能高效地把这些元素找出来。

如果您具备 CSS 选择器的基本知识,那么应该很熟悉这些语法。在 清单 2 中,#external_links 用于检索 id external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素。用英语说起来非常绕口,甚至在 DOM 脚本中也是这样,但是在 CSS 中这再简单不过了

推荐结果学习jQuery的好地方:

官方站点:http://jquery.com/  

中文站点:http://jquery.org.cn/

jQuery15天教程 http://15daysofjquery.com/








View My Portfolio View My Portfolio


立刻注册istockphoto,只需上传图片,即可获得丰厚美元回报,让网络赚钱变得更轻松!


对《[文摘] jQuery学习笔记——jQuery入门》有 0 条评论
发表评论
昵称

网址

电邮
打开HTML 打开UBB 表情 打开表情 隐藏 记住我 [注册]