l         JQuery选择器

  JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件id”)来根据控件id获得控件的JQuery对象，相当于getElementById;

 如: $(“#div1”).html(“<font color=”red”>ab</font>cd”);

l         $(“TagName”)来获取所有指定标签名的JQuery对象。相当于getElementByTagName;

 $(function(){$(“p”).click(function(){$(“p”).html(“我们都是p”)})})

l         CSS选择器，同时选择拥有样式的多个元素

 <style type=”text/css”>

 .warming{background:yellow;color:red}

</style>

<script type=”text/javascript”>

 $(“.warming”).click(function(){alert(“对不起你不能点击此事件!”);});

</script>

<p class=”warming”>简介</p>

<p class=”warming”>请带上你的身份证</p>

<input type=”button” class=”warming” />

l         JQuery隐式迭代

问题：JQuery使用id选择器时即使id写错了也不会报错这给开发人员带来了很大的麻烦。所以需要判断对象是否存在。

原因：jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类的方法时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错。所以如果需要判断指定的id是否存在，应该如下写：

 if($(“#btn1”).length<=0){

 alert(“此id元素不存在”);

}

l         节点遍历

  1. next()方法用于获取节点之后的第一个同辈元素，$(“.menuitem”).next(“div”)  next里面为选择器选择节点之后是div元素类型
  2. nextAll()方法用于获取节点之后的所有同辈元素，$(“.menuitem”).nextAll(“div”)

        $("div").click(function () { $(this).nextAll("div").css("background","red"); });//自动隐式迭代

  1. siblings()方法用于获取所有同辈元素，
  2. $(“.menuitem”).siblings(“li”)

             $("div").click(function () { $(this).css("background", "red"); $(this).siblings("div").css("background","white"); }); //给点击的设置为红色，没有点击的设置为白色

l         基本过滤选择器

l         :first 选取第一个元素。$(“div:first”)选取第一个<div>

l         :last 选取最后一个元素，$(“div:last”)选取最后一个<div>

l         :not(选择器) 选取不满足“选择器”条件的元素 $(“input:not(.myClass)”)选取样式名不是myClass的<input>

l         :even、:odd 选取索引是奇数、偶数的元素; $(“input:even”)选取索引为偶数的<input>

l         :eq(索引序号)、:gt（索引序号）、:lt(索引序号) 选取索引等于、索引大于、索引小于序号的元素，比如: $(“input:lt(2)”) 选取索引值小于2的<input>

l         $(“:header”) 选取所有的h1…….h6元素

l         $(“div:animated”) 选取正在执行动画的<div>元素

 案例:

   $(function () {

            $("#table1 tr:first").css("fontSize", "40px");

            $("#table1 tr:last").css("background", "red");

            $("#table1 tr:gt(1) :lt(4)").css("fontSize", "30");

            $("#table1 tr:even").css("background","red");

        });

l         相对定位：只要在$()指定第二个参数，第二个参数为相对的元素。$(“ul”,$(this)).css(“background”,”red”)

l         属性过滤器：

 $(“div[id]”)选取有id属性的<div>

 $(“div[title=test]”)选取 title属性值为”test”的<div> 因为jQuery没有getElementByName的方法封装。只能使用上述方法选取.如：$(“div[name=abcd]”) 表示选取name属性值为abcd的<div>

 $(“div[title!=title]”)选取title属性值不为”title”的<div>

l         表单对象选择器 注意#form1与:enabled之间没有空格

 $(“#form1:enabled”)选取id为form1的表单内所有启动的元素

 $(“#form1:disabled”)选取id为form1的表单内所有禁止的元素

 $(“input:checked”)选取所有选中的元素（Radio，CheckBox）

 $(“select:selected”)选取所有选中的选项元素(下拉列表)

$(function () {

            $("input[value=选?中D城?市ºD]").click(function () {

                $("input:checked").css("background","red");

            });

        });

l         元素的each jQuery元素也可以调用each方法，只是对$.each的简化调用。

 案例：显示选中的复选框信息

  <head>

    <title></title>

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

    <script type="text/javascript">

        $(function () {

            $("input[name=names]").click(function () {

                var arr = new Array();

                $("input[name=names]:checked").each(function (key, value) { arr[key] = $(value).val(); });

                $("#show").text("共选中"+arr.length+"项"+arr.join(","));

            });

        });

    </script>

</head>

<body>

<input type="checkbox" name="names" value="小罗" />小罗<br />

<input type="checkbox" name="names" value="小周" />小周¨<br />

<input type="checkbox" name="names" value="小王" />小王<br />

<p id="show"></p>

l         表单选择器

 $(“:input”) 选取所有<input>、<textarea>、<select>、<button>元素，和$(“input”)区别,$(“input”)只能获得<input>

$(“:text”)选取所有单行文本框，等价于$(“input[type=text]”)

$(“:password”)选取所有的密码框,同理的还有：:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden

l         jQuery的DOM操作

  1. 使用html()可以读取或设置元素的innerHTML 如 alert($(“a:first”).html()); $(“a:first”).html(“hello”);
  2. 使用text()可以读取或设置元素的innerText 如alert($(“a:first”).text());  $(“a:first”).text(“hello”);
  3. 使用 attr()方法读取或设置元素的属性，对于jQuery没有封装的属性用attr进行操作

     如: $(“a:first”).attr(“href”)  $(“a:first”).attr(“href”,“http://www.baidu.com”)

  1. 使用reMove删除属性。删除属性和清空属性的区别：删除属性在源代码是没有看不到的，而清空属性在源代码中属性是存在的只是值为空

l         动态创建Dom节点

  1. 使用 $(html字符串)来创建Dom节点，返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom对象中
  2. var link=$(“<a href=”http://www.baidu.com”>百度</a>”);
  3. $(“div:first”).append(link);
  4. prepend 在元素开始添加元素 （添加儿子是在元素里面添加元素）
  5. after 在元素之后添加元素 (添加兄弟)
  6. before 在元素之前添加元素 (添加兄弟)

l         jQuery的Dom操作

  1. 使用html()方法读取或者设置元素的innerHTML  alert($(“a:first”).html()) //读取元素的innrtHTML $(“a:first”).html(“hello”) //设置元素的html
  2. 使用text()方法读取或者设置元素的innerText  alert($(“a:first”).text()) //读取元素的innerText  $(“a:first”).text(“hello”); //设置元素的innerText
  3. 使用attr()方法读取或者设置元素的属性。对于jQuery对象没有封装的属性可以使用attr（）方法进行操作。

 如：alert($(“a:first”).attr(“href”))   //添加了a的href属性

     $(“a:first”).attr(“href”,”http://www.baidu.com”)  //设置了a的href属性为 http://www.baidu.com

  1. 使用remove方法删除属性，删除的属性在源代码中看不到，而清空属性的值在代码中是存在的只是值为空。这是删除与清空的区别。

   $(function () {

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

                $("ul li[class=testli]").remove();

            });

        });

  1. remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下：

<head>

    <title></title>

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

    <script type="text/javascript">

        $(function () {

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

                var items = $("#select1 option:selected").remove();

                $("#select2").append(items);

            });

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

                var items = $("#select2 option:selected").remove();

                $("#select1").append(items);

            });

        });

    </script>

</head>

<body>

<select id="select1" style="float:left;height:100px;width:15%" multiple="multiple">

<option>北À¡À京?</option>

<option>天¬¨¬津¨°</option>

<option>长¡è沙¦3</option>

<option>上¦?海¡ê</option>

</select>

<div style="float:left;width:15%">

<input type="button" value=">" style="float:left;width:100%"/ id="btnright">

<input type="button" value="<" style="float:left;width:100%" id="btnleft"/>

</div>

<select id="select2" style="float:left;width:15%" multiple="multiple">

 

</select>

</body>

  1. 案例加法计算器  需求解释：输入加数和被加数等到结果

 <head>

    <title></title>

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

    <script type="text/javascript">

        $(function () {

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

                var txt1 = $("#text1").val();

                var txt2 = $("#text2").val();

                var txt3 = parseInt(txt1, 10) + parseInt(txt2, 10);

                $("#text3").val(txt3);

            });

        });

    </script>

</head>

<body>

<input type="text" id="text1" />+<input type="text" id="text2" /><input type="button" id="btn" value="=" /><input type="text" id="text3" />

</body>

7. 案例登陆界面  需求解释：倒计时实现登陆提醒

 <head>

    <title></title>

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

    <script type="text/javascript">

        $(function () {

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

                var txt1 = $("#text1").val();

                var txt2 = $("#text2").val();

                var txt3 = parseInt(txt1, 10) + parseInt(txt2, 10);

                $("#text3").val(txt3);

            });

        });

    </script>

</head>

<body>

<input type="text" id="text1" />+<input type="text" id="text2" /><input type="button" id="btn" value="=" /><input type="text" id="text3" />

</body>