StarterKit

 

1. $(document).ready(function() {
2.     // 页面加载时执行
4.     //***取得标签的方法$("a")
5.     //取得所有标签,并且循环给每个标签添加事件.
6.     $("a").click(function() {
7.         alert("Hello world!");
8.     });
9.     
10.     //***在ID前加#,$("#id")
11.     //***addClass("red");
12.     //通过ID取得元素,JS方法是document.getElementById("orderedlist")
13.     //JQuery方法是$("#id"),添加css类的方法addClass("")
14.     $("#orderedlist").addClass("red");
15.     
16.     //***取得子节点#id > li 或#id > #childID
17.     //取得子节点的方法 > 
18.     $("#orderedlist > li").addClass("blue");
19.     
20.     //***removeClass("");删除样式参数是css类,如果removeClass()代表删除全部
21.     //***hover(fun1,fun2)第一个是鼠标经过,第二个是鼠标移开.???
22.     //***$(this)引用当前对象.
23.     //***li:last取得最后一个.
24.     //***每个onXXX()方法都对应有xxx()方法.
25.     //添加鼠标经过离开的样式.last表示最后一个.
26.     //通过$(this)引用当前对象.
27.     //删除样式的方法removeClass("");
28.     $("#orderedlist li:last").hover(function() {
29.         $(this).addClass("green");
30.     }, function() {
31.         $(this).removeClass("green");//删除所有removeClass()
32.     });
33.     
34.     //***html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。
35.     //***.html('xxx')是设置'xxx'为对象的html代码
36.     $("#orderedlist").find("li").each(function(i) {
37.         $(this).html( $(this).html() + " BAM! " + i );
38.     });
40.     //***find()方法同$("#test1 li")一样,找到所有的标签.
41.     //***each()类似foreach(),迭代所有项,(i)直接用.
42.     $("#test1").find("li").each(function(i) {
43.         $(this).html( $(this).html() + " BAM! " + i );
44.     });
45.    
46. });

 

1. /***
2.     $("#reset").click(function(){
3.         $("#form")[0].reset();//选择所有id为form的元素，[0]表示第一个。reset()是form的方法。
4.     });***/
5.     //***为所有form执行reset
6.     $("#reset").click(function() {
7.         $("form").each(function() {
8.             this.reset();
9.         });
10.     });
11.     //***fiter,not过滤,css("样式名","样式值");
12.     /*
13.     你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 
14.     filter()以过滤表达式来减少不符合的被选择项, 
15.     not()则用来取消所有符合过滤表达式的被选择项. 
16.     考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。
17.     */
18.     $("li").not("[ul]").css("border", "1px solid black").css("color","red");//css也可以链式操作
19.     /*
20.     这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。
21.     刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。
22.     */
23.     //选择所有的带有name属性的链接:
24.     $("a[@name]").background("red");

1. //081106
2.     /**<a id="hrefTest" href="gv/hello/lll">特定href</a>
3.       注意这里的方式是a[@href *= ]这里是部分匹配。
4.     */
5.     $("a[@href*=gv/hello]").click(function() {
6.         alert('特定href');
7.     });
8.     /*hide()隐藏匹配对象。
9.       end()结束对 “dd” 的引用而返回到 “#faq ”
10.       next()寻找同辈元素，紧邻的。可是这里明显是子辈不是同辈，奇怪。
11.       slideUp()/Down()向上滑动隐藏或向下滑动展开。
12.     */
13.     $('#faq').find('dd').hide().end().find('dt').click(function() {
14.          var answer = $(this).next();
15.          if (answer.is(':visible')) {
16.              answer.slideUp();
17.          } else {
18.              answer.slideDown();
19.          }
20.      });

081112

1.      /*用 $(this).next() 来找到dt下面紧接的一个dd元素
2.        answer.is(':visible')
3.        这里的highlight类，即给这个段落加个边框。
4.      */
5.      $("a").hover(function() {
6.         $(this).parents("p").addClass("highlight");
7.     }, function() {
8.         $(this).parents("p").removeClass("highlight");
9.     });

开始学习Ajax