Jqury笔记

1.  ---------------

-var aa = new Array();

            aa.push(1);

            alert(aa[0]);

var aa=[];也表示一个数组；

--------------------------

  var a = "sdfsfs";

            if (typeof (a) == "string")

                alert("shfidfodsf");

            else if (typeof (a) == "undefined")

                alert("未定义");

-----------------通过构造函数属性来判断类型；分割字符串

  var gg = "gu,oze,ng";

            var aa = gg.split(",");

            if(aa.constructor==Array)

                alert(aa[2]);

-------------------归并字符串；

 var aa = new Array(1, 2, 3, 4);

            var b = aa.join("-");

            alert(b);

--------------------------

  $(document.body).css("background-color","Red");

---------------------：切记没有分号，px后面，否则无效果；

  $("li").each(function () {

                $(this).css("background-color", "green");

                $(this).css("font-size","20px");

            });

--------------

 $("li:eq(3)").css("background-color", "red");匹配第四个li;

------------

 $("li:contains('b')").css("background-color", "red");内容含有b的标签；

---------------

 //$("ul").css("background-color","red");

            //$("ul").attr("style", "background-color:red; font-size:20px;");

            //$("ul").attr({ style: "background-color:red;",style: "background-color:red;"});

            $("ul").attr("class", "lii");

            $("ul").removeAttr("class");

-------------------------

$("p").addClass("selected highlight");

------------------获得索引：

.index();从0开始，返回一个数字；

-----------有的话，删除，没有的话添加；

  $("ul").click(function () {

                $(this).toggleClass("lii");

            });

--------------not:除此之外的；

  $("li").not($("li:last")).css("background-color", "red");

-------------2,3只选择第三个，2,4只选择第三和第四个，索引从0开始；当slice(2),表示从第三个到最后一个；

  $("li").slice(2，3).css("background-color", "red");

---------------------lt:前四个；

      $("li:gt(4)").css("background-color", "red");

-------所有的li;

   $("ul").children().css("background-color", "red");

--------class为dd的类；

  $("ul").children(".dd").css("background-color", "red");

-------------所有的同级元素；

 $("#f").nextAll().css("background-color", "red");

-----------挨着的第一个同级元素；

 $("#f").next().css("background-color", "red");

-----------同级直到table标记之间的同级标记，不包括table;

 $("#f").nextUntil("table").css("background-color", "red");

-------------找到所有父级的标记；

   $("#nei").parents().css("background-color","red");

-------------应该只有上一级；

  $("#nei").parent().css("background-color","red");

-------------

siblings:除此之外的所同级元素；

---------相当于累加；

 $("#nei").add("table").add("#f").css("background-color","red");

-----------并把自己也加上；

$("div").find("p").andSelf().addClass("border");

--------------将所有元素添加到b标签中；

   $("#nei").contents().wrap("<b/>");

-------------在p标签的前面添加标记；append是后面；

$("p").prepend("<b>Hello</b>");

--------------.after,.before,insertafter,insertbefore;

------------将元素包含到另一元素中；

$("p").wrap(document.getElementById('content'));

------------

将所有匹配的元素用单个元素包裹起来时使用wrapall();

---------------------------:在p的内部添加b;(将p的内容用b抱起来)

$("p").wrapInner("<b></b>");

-----------变换标记；

  $("p").click(function () {

                $(this).replaceWith("<img src='../img/_8-1.png'></img>");

-----------

            });

---------------------复制一份添加到标记中

$("b").clone().prependTo("p");

---------------------

将所有段落的字体颜色设为红色并且背景为蓝色。

 

jQuery 代码:

$("p").css({ color: "#ff0011", background: "blue" });描述:

如果属性名包含 "-"的话，必须使用引号:

jQuery 代码:

$("p").css({ "margin-left": "10px", "background-color": "blue" });

-----------------------不管怎么样：键值都加双引号；

$("#f").css({"color":"red","background":"blue"});

----------------------------------------------------------offset相对document的位置；

-----------设定移量；

  $("#xuan").offset({top:200,left:400});

-------------得到相对位置

   var a = $("#xuan").offset();

            alert(a.left+"----"+a.top);

--------------------------------------------------------------position(),相对于父元素的偏移量；用法和offset一样；

------blur():失去焦点触发的事件；

-----change()事件:当内容改变且失去焦点时触发；

-------------滚动条滚动

  $(window).scroll(function () {

                setTimeout();

                $("#xuan").offset({ top: $(window).scrollTop() + 200 });

            });

-----------序列化操作：

   var a = $.parseJSON('{ "name": "guozeng" }');

            alert(a.name);

---------------------

------------------------textbox下拉框案例

  $(function () {

            $("#Text1").focus(function () {

                //$("#gg").attr("display","block");

                $("#gg").css("display", "block");

                $("#gg").offset({ top: $("#Text1").offset().top + $("#Text1").height() + 5, left: $("#Text1").offset().left });

            });

            $("li").click(function () {

                $("#Text1").val($(this).text());

                $("#gg").css("display", "none");

            });

        })

-------------------pannel案例：

 $(function () {

            $("img[alt='a']").click(function () {

                if ($(this).attr("src") == "../img/_8-1.png") {

                    $(this).attr("src", "../img/_8-2.png")

                    $("#gg").slideUp(500);

                }

                else {

                    $(this).attr("src", "../img/_8-1.png")

                    $("#gg").slideDown(500);

                }

            });

        })

---------------------------