jQuery简单示例 一

 

jQuery选择器主要分为四类：
　　1、基本选择器
　　2、层次选择器
　　3、过滤选择器
　　4、表单选择器

  <script type="text/javascript">

           //这是一种窗体首次加载给给某个控件绑定事件
            $("#Button2").bind("click", function () { $("#Button1").show(); }); //给按钮Button2绑定点击事件，让Button1显示
            $("#Button3").bind("click", function (event) { $("body div").css("background","#bbffaa"); });//给按钮Button3绑定点击事件，让body中的所有div标签的背景颜色为#bbffaa
            $("#Button4").bind("click", function (event) { $("#Label1").text("abc"); })//给按钮Button4绑定点击事件,改变Label1的值

            $("#Button1").bind("click", function () { $("<div style=\"border:solid 1px #FF0000\">这是动态加载的DIV</div>").appendTo(addDiv); });// //给按钮Button1绑定点击事件，在DIV(addDiv)标签中添加一个div标签
            $(function () { addDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">这个是窗体首次加载的DIV</div>"; });//窗体首次加载添加一个Div标签

            //这也是一种窗体首次加载给控件绑定事件的方法

            $(document).ready(function () {
                //                $("tr:first").css("background", "#bbffaa");//改变第一个tr标签的背景颜色
                //                $("tr:last").css("background", "#bbffaa");//改变最后一个tr标签的背景颜色
                //                $("tr:even").css("background", "red");//改变偶数的tr标签的背景颜色
                //                $("tr:eq(1)").css("background", "blue");//改变i第2个tr标签的背景颜色，这里eq(i)，i从0开始
                //                $("tr:odd").css("background", "#bbffaa");//改变奇数的tr标签的背景颜色
                $("#Button6").click(function () { $("a").text("这是a标签") });//给Button6添加事件，改变所有a标签的值
                $("#Button7").click(function () { $("#a1,#Labeli").text("测试中...."); });//给Button7添加事件，改变ID为a1,Labeli的控件的值
                $("#Button8").click(function () { $("#Label2+label").text("测试后标签"); });//给Button8添加事件，改变ID为Label2后面label标签的值
                $("tr:gt(3)").css("background", "blue");//设置tr标签前三行的背景样式
                $("tr:lt(4)").css("background", "red");//设置tr标签后四行的背景样式
                $("div[id]").css("background", "blue")//设置所有DIV标签有ID的背景样式
                $("ul li:nth-child(2)").text("这个是第二个");//设置ul中第二个li的值
                $("ul li:first-child").text("这个是第一个");//设置ul中第一个li的值
                $("ul li:last-child").text("这个是最后一个");//设置ul中最后一个li的值
                $("input:checked").attr("checked",false);//设置所有选中复选框的checked=false

            });
        </script>     

--------------有错误的地方请多多点评，谢谢-----------------

========待续 ethan========