Learning JQuery第一个例子

文章中关键字如果有“First” 特殊显示

HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <title>First Daytitle>

       <style type="text/css">

           .poem {

             margin: 0 2em;

           }

           .emphasized {

             font-style: italic;

             border: 1px solid #888;

             padding: 0.5em;

             margin: 0.5em 0;

             background-color: #ffc;

           }

       style>

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

       <script language="JavaScript">

           $(document).ready(function() {

             $('span:contains(First)').addClass('emphasized');    /**/

           });

       script>

    head>

    <body>

       Learning JQuery <span> First Day!span> <a onclick="ready">Enjoya>

    body>

html>

JQuery的一些特性和用法、

1.        精准简单的选择对象(dom)

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

    $('.element');//Class

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

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

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

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

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

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

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>Hellob>");//给对象添加内容

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");});//导入动态内容

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");