jQuery学习一

1.在使用javascript之前保证页面已经载入：$(document).ready(function(){});   $(function(){});

    <script type="text/javascript" language="javascript">
       $(document).ready(function () {
            alert("this is a test");
                });

//另外一种简短的写法
//        $(function () {
//            alert("this is a another test");
//        });
    </script>

2.选择器（selecting）：如果我们想选中某个元素可以使用：jQuery(<selectors go here>)或者$(<selectors go here>)。例如：$(‘tr’);$(‘div’)等等。我们可以根据元素的id来选择，例如：$(‘#id’)，id前加’#’号。还可以根据CSS class选择器来选择，例如：$(‘.data’);

缩小我们的选择范围：假如有一个table，id为”celebs”，我们要选择这个table下的tr元素，可以使用：$(‘#celebs tr’);假如我们要选择class=fancy的div元素下所有p元素下的span元素可以使用：$(‘div.fancy p span’) ；

过滤选择器：过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都是以一个冒号（：）开头。按照不同的过来规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1.基本过滤选择器
:first ：选取第一个元素 实例：$(“div:first”) 选取所有<div>元素中第一个<div>元素
:last:选取最后一个元素 实例：$(“div:last”) 选取所有<div>元素中最后一个<div>元素
:not(selector) 取出所有与给定选择器匹配的元素。例如：$(“input:not(.myClass)”) 选取class不是myClass的<input>元素
:even 选取索引是偶数的所有元素，索引从0开始 例如：$(“input:even”) 选取索引是偶数的<input>元素
:odd 选取索引是奇数的所有元素，索引从0开始 例如：$(“input:odd”) 选取索引是奇数的<input>元素
:eq(index) 选取索引等于index的元素(index从0开始) 例如：$(“input:eq(1)”) 选取索引等于1的<input>元素
:gt(index) 选取索引大于index的元素(index从0开始) 例如$(“input:get(1)”) 选取索引大于1的<input>元素（注：大于1，而不包括1）
:lt(index) 选取索引小于index的元素(index从0开始) 例如：$(“input:lt(1)”) 选取索引小于1的<input>元素。
:header 选取所有的标题元素，例如h1,h2,h3等等 例如$(“:header”) 选取所有网页中的<h1>,<h2><h3>…..
:animated 选取当前正在执行动画的所有元素 例如：$(“div:animated”) 选取正在执行动画的<div>元素

一次选择多个元素：$(“p,div,h1”)。

读取CSS属性：

<script type="text/javascript" language="javascript">
     $(document).ready(function () {
         var t = $("table tr:first").css("font-size");
         alert(t);
     });
</script>

设置CSS属性：$(“table tr:first”).css(“font-size”,”18px”);也可以同时设置多个属性 ：$("table tr:last").css({"font-size":"12px","font-style":"italic"});

添加和移除Classes：$(“div”).addClass(“class_name”);     $(“div”).addClass(“class_name1 class_name2 class_name3”);假如你有CSS文件中：.zebra{background-color:#dddddd;color:#666666;}；可以使用：$(“#celebs tr:even”).addClass(“zebra”); $(“#celebs tr.zebra”).removeClass(“zebra”);

隐藏和显示元素：

<input id="btn" type="button" value="Hide"/>
  <div id="test">hello this is will hide.</div>

$(document).ready(function () {
            $("#btn").click(function () {
               $("#test").hide(); //隐藏    $(“test”).show(); //显示 //$(this).hide();  //button将会隐藏；
            });
        });

使用toggle()：

$(document).ready(function () {
            $("#btn").click(function () {             

if ($("#test").is(":visible")) {
                   $("#test").hide();
               } else {
                   $("#test").show();
               }

实现上面的效果我们可以直接使用：$(“#test”).toggle();

           });
        });

添加新元素：我们在上面列子中的id=”test”的div元素后增加<p>a new </p>；$(“<p> a new </p>”).insertAfter(“#test”);或者： $(“<p> a new </p>”).insertBefore(“#test”);如果你想添加到元素作为现有元素的子元素，你可以使用prependTo或者appendTo。$(“strong>start"</strong>”).prependTo(“#test”);    $(“<strong>end</strong>”).appendTo(“#test”);

移除现有元素：       $(“#test”).remove();

改变内容：使用htm和text；$(“#test”).html(“this is a test”);     $(“#test”).text(“this is a test too”);   alert($(“#test”).text());

基础的动画效果：淡入和淡出效果;   $(“#test”).fadeIn();   $(“test”).fadeOut();     我们也可以改变淡入淡出的时间，例如：fadeIn(“fast”);fadeIn(1000);

Toggling效果和动画:  $(“#test”).toggle(“slow”); 

通过调整高度显示隐藏： $(“#test”).slideDown(“slow”);  $(“#test”).slideUp();   $(“#test”).slideToggle(“slow”);

回调函数：很多效果接受一个回调函数作为特殊参数，来执行效果完成后的代码。

$("#test").slideUp("slow", function () {
                    alert($("#test").text());
                } );

创建自定义动画：animate(params, [duration], [easing], [callback])；具体使用方法参见jQuery API参考。