Posted by & filed under Uncategorized.

About Aslent

Weili Guan has written 43 post in this blog.

En...Yh....

查找节点
[javascript] view plaincopy
var $para = $(“p”); // 获取

节点
var $li = $(“ul li:eq(1)”); // 获取第二个

  • 元素节点

    var p_txt = $para.attr(“title”); // 输出

    元素节点属性title
    var ul_txt = $li.attr(“title”); // 获取

      里的第二个
    • 元素节点的属性title
      var li_txt = $li.text(); // 输出第二个
    • 元素节点的text

      alert(ul_txt);
      alert(li_txt);
      alert(p_txt);

      创建节点
      [javascript] view plaincopy
      var $li_1 = $(“

    • “); // 创建第一个

    • 元素
      var $li_2 = $(“
    • “); // 创建第二个

    • 元素

      var $parent = $(“ul”); // 获取

        节点。
      • 的父节点

        $parent.append($li_1); // 添加到

          节点中,使之能在网页中显示
          $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
          var $li_1 = $(“
        • 香蕉
        • “); // 创建一个

        • 元素,包括元素节点和文本节点
          //“香蕉”就是创建的文本节点。
          var $li_2 = $(“
        • 雪梨
        • “); // 创建一个

        • 元素,包括元素节点和文本节点
          //“雪梨”就是创建的文本节点。

          var $parent = $(“ul”); // 获取

            节点。
          • 的父节点

            $(“ul”).append($li_1); // 添加到

              节点中,使之能在网页中显示
              $(“ul”).append($li_2); // 添加到
                节点中,使之能在网页中显示
                var $li_1 = $(“
              • 香蕉
              • “); //创建一个

              • 元素
                //包括元素节点,文本节点和属性节点
                //其中title=’香蕉’ 就是创建的属性节点
                var $li_2 = $(“
              • 雪梨
              • “); //创建一个

              • 元素
                //包括元素节点,文本节点和属性节点
                //其中title=’雪梨’ 就是创建的属性节点

                var $parent = $(“ul”); // 获取

                  节点。
                • 的父节点

                  $parent.append($li_1); // 添加到

                    节点中,使之能在网页中显示
                    $parent.append($li_2); // 等价于:$parent.append($li_1).append($li_2);

                    插入节点
                    [javascript] view plaincopy
                    var $li_1 = $(“

                  • 香蕉
                  • “); // 创建第一个

                  • 元素
                    var $li_2 = $(“
                  • 雪梨
                  • “); // 创建第二个

                  • 元素
                    var $li_3 = $(“
                  • 其它
                  • “); // 创建第三个

                  • 元素

                    var $parent = $(“ul”); // 获取

                      节点,即
                    • 的父节点
                      var $two_li = $(“ul li:eq(1)”); // 获取
                        节点中第二个
                      • 元素节点

                        $parent.append($li_1); // append方法将创建的第一个

                      • 元素添加到父元素的最后面
                        $parent.prepend($li_2); // prepend方法将创建的第二个
                      • 元素添加到父元素里的最前面
                        $li_3.insertAfter($two_li); // insertAfter方法将创建的第三个
                      • 元素元素插入到获取的
                      • 之后
                        移动节点
                        [javascript] view plaincopy
                        var $one_li = $(“ul li:eq(1)”); // 获取
                          节点中第二个
                        • 元素节点
                          var $two_li = $(“ul li:eq(2)”); // 获取
                            节点中第三个
                          • 元素节点
                            $two_li.insertBefore($one_li); //移动节点
                            删除节点
                            [javascript] view plaincopy
                            $(“ul li:eq(1)”).remove(); // 获取第二个
                          • 元素节点后,将它从网页中删除。

                            var $li = $(“ul li:eq(1)”).remove(); // 获取第二个

                          • 元素节点后,将它从网页中删除。
                            $li.appendTo(“ul”); // 把刚才删除的又重新添加到
                              元素里
                              //所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它

                              $(“ul li”).remove(“li[title!=菠萝]”); //把

                            • 元素中属性title不等于”菠萝”的
                            • 元素删除

                              $(“ul li”).click(function(){
                              alert( $(this).html() );
                              })
                              var $li = $(“ul li:eq(1)”).remove(); // 获取第二个

                            • 元素节点后,将它从网页中删除。
                              $li.appendTo(“ul”);

                              $(“ul li”).click(function(){
                              alert( $(this).html() );
                              })
                              var $li = $(“ul li:eq(1)”).detach(); // 获取第二个

                            • 元素节点后,将它从网页中删除。
                              $li.appendTo(“ul”);

                              $(“ul li:eq(1)”).empty(); // 找到第二个

                            • 元素节点后,清空此元素里的内容
                              复制节点
                              [javascript] view plaincopy
                              $(“ul li”).click(function(){
                              $(this).clone().appendTo(“ul”); // 复制当前点击的节点,并将它追加到
                                元素
                                })

                                $(“ul li”).click(function(){
                                $(this).clone(true).appendTo(“ul”); // 注意参数true
                                //可以复制自己,并且他的副本也有同样功能。
                                })
                                替换节点
                                [javascript] view plaincopy
                                $(“p”).replaceWith(“你最不喜欢的水果是?“);
                                // 同样的实现: $(“你最不喜欢的水果是?“).replaceAll(“p”);
                                包裹节点
                                [javascript] view plaincopy
                                $(“strong”).wrap(““);//用元素把元素包裹起来
                                $(“strong”).wrap(““);
                                $(“strong”).wrapAll(““);
                                $(“strong”).wrapAll(““);
                                $(“strong”).wrapInner(““);
                                属性操作
                                [javascript] view plaincopy
                                //设置

                                元素的属性’title’
                                $(“input:eq(0)”).click(function(){
                                $(“p”).attr(“title”,”选择你最喜欢的水果.”);
                                });
                                //获取

                                元素的属性’title’
                                $(“input:eq(1)”).click(function(){
                                alert( $(“p”).attr(“title”) );
                                });
                                //删除

                                元素的属性’title’
                                $(“input:eq(2)”).click(function(){
                                $(“p”).removeAttr(“title”);
                                });
                                样式操作
                                [javascript] view plaincopy
                                //获取样式
                                $(“input:eq(0)”).click(function(){
                                alert( $(“p”).attr(“class”) );
                                });
                                //设置样式
                                $(“input:eq(1)”).click(function(){
                                $(“p”).attr(“class”,”high”);
                                });
                                //追加样式
                                $(“input:eq(2)”).click(function(){
                                $(“p”).addClass(“another”);
                                });
                                //删除全部样式
                                $(“input:eq(3)”).click(function(){
                                $(“p”).removeClass();
                                });
                                //删除指定样式
                                $(“input:eq(4)”).click(function(){
                                $(“p”).removeClass(“high”);
                                });
                                //重复切换样式
                                $(“input:eq(5)”).click(function(){
                                $(“p”).toggleClass(“another”);
                                });
                                //判断元素是否含有某样式
                                $(“input:eq(6)”).click(function(){
                                alert( $(“p”).hasClass(“another”) )
                                alert( $(“p”).is(“.another”) )
                                });
                                设置和获取HTML,文本和值
                                [javascript] view plaincopy
                                //获取

                                元素的HTML代码
                                $(“input:eq(0)”).click(function(){
                                alert( $(“p”).html() );
                                });
                                //获取

                                元素的文本
                                $(“input:eq(1)”).click(function(){
                                alert( $(“p”).text() );
                                });
                                //设置

                                元素的HTML代码
                                $(“input:eq(2)”).click(function(){
                                $(“p”).html(“你最喜欢的水果是?“);
                                });
                                //设置

                                元素的文本
                                $(“input:eq(3)”).click(function(){
                                $(“p”).text(“你最喜欢的水果是?”);
                                });
                                //设置

                                元素的文本
                                $(“input:eq(4)”).click(function(){
                                $(“p”).text(“你最喜欢的水果是?“);
                                });
                                //获取按钮的value值
                                $(“input:eq(5)”).click(function(){
                                alert( $(this).val() );
                                });
                                //设置按钮的value值
                                $(“input:eq(6)”).click(function(){
                                $(this).val(“我被点击了!”);
                                });
                                $(“#address”).focus(function(){ // 地址框获得鼠标焦点
                                var txt_value = $(this).val(); // 得到当前文本框的值
                                if(txt_value==”请输入邮箱地址”){
                                $(this).val(“”); // 如果符合条件,则清空文本框内容
                                }
                                });
                                $(“#address”).blur(function(){ // 地址框失去鼠标焦点
                                var txt_value = $(this).val(); // 得到当前文本框的值
                                if(txt_value==””){
                                $(this).val(“请输入邮箱地址”);// 如果符合条件,则设置内容
                                }
                                })

                                $(“#password”).focus(function(){
                                var txt_value = $(this).val();
                                if(txt_value==”请输入邮箱密码”){
                                $(this).val(“”);
                                }
                                });
                                $(“#password”).blur(function(){
                                var txt_value = $(this).val();
                                if(txt_value==””){
                                $(this).val(“请输入邮箱密码”);
                                }
                                })
                                $(“#address”).focus(function(){ // 地址框获得鼠标焦点
                                var txt_value = $(this).val(); // 得到当前文本框的值
                                if(txt_value==this.defaultValue){
                                $(this).val(“”); // 如果符合条件,则清空文本框内容
                                }
                                });
                                $(“#address”).blur(function(){ // 地址框失去鼠标焦点
                                var txt_value = $(this).val(); // 得到当前文本框的值
                                if(txt_value==””){
                                $(this).val(this.defaultValue);// 如果符合条件,则设置内容
                                }
                                })

                                $(“#password”).focus(function(){
                                var txt_value = $(this).val();
                                if(txt_value==this.defaultValue){
                                $(this).val(“”);
                                }
                                });
                                $(“#password”).blur(function(){
                                var txt_value = $(this).val();
                                if(txt_value==””){
                                $(this).val(this.defaultValue);
                                }
                                })
                                //设置单选下拉框选中
                                $(“input:eq(0)”).click(function(){
                                $(“#single”).val(“选择2号”);
                                });
                                //设置多选下拉框选中
                                $(“input:eq(1)”).click(function(){
                                $(“#multiple”).val([“选择2号”, “选择3号”]);
                                });
                                //设置单选框和多选框选中
                                $(“input:eq(2)”).click(function(){
                                $(“:checkbox”).val([“check2″,”check3”]);
                                $(“:radio”).val([“radio2”]);
                                });
                                //设置单选下拉框选中
                                $(“input:eq(0)”).click(function(){
                                $(“#single option”).removeAttr(“selected”); //移除属性selected
                                $(“#single option:eq(1)”).attr(“selected”,true); //设置属性selected
                                });
                                //设置多选下拉框选中
                                $(“input:eq(1)”).click(function(){
                                $(“#multiple option”).removeAttr(“selected”); //移除属性selected
                                $(“#multiple option:eq(2)”).attr(“selected”,true);//设置属性selected
                                $(“#multiple option:eq(3)”).attr(“selected”,true);//设置属性selected
                                });
                                //设置单选框和多选框选中
                                $(“input:eq(2)”).click(function(){
                                $(“:checkbox”).removeAttr(“checked”); //移除属性checked
                                $(“:radio”).removeAttr(“checked”); //移除属性checked
                                $(“[value=check2]:checkbox”).attr(“checked”,true);//设置属性checked
                                $(“[value=check3]:checkbox”).attr(“checked”,true);//设置属性checked
                                $(“[value=radio2]:radio”).attr(“checked”,true);//设置属性checked
                                });
                                遍历节点树
                                [javascript] view plaincopy
                                var $body = $(“body”).children();
                                var $p = $(“p”).children();
                                var $ul = $(“ul”).children();
                                alert( $body.length ); // 元素下有2个子元素
                                alert( $p.length ); //

                                元素下有0个子元素
                                alert( $ul.length ); //

                                元素下有3个子元素
                                for(var i=0;i< $ul.length;i++){
                                alert( $ul[i].innerHTML );
                                }
                                var $p1 = $("p").next();
                                alert( $p1.html() ); // 紧邻

                                元素后的同辈元素
                                var $ul = $(“ul”).prev();
                                alert( $ul.html() ); // 紧邻

                                  元素前的同辈元素
                                  var $p2 = $(“p”).siblings();
                                  alert( $p2.html() ); // 紧邻

                                  元素的唯一同辈元素
                                  $(document).bind(“click”, function (e) {
                                  $(e.target).closest(“li”).css(“color”,”red”);
                                  })
                                  //parent
                                  $(“input:eq(0)”).click(function(){
                                  resetStyle();
                                  $(‘.item-1’).parent().css(‘background-color’, ‘red’);
                                  });
                                  //parents
                                  $(“input:eq(1)”).click(function(){
                                  resetStyle();
                                  $(‘.item-1’).parents(‘ul’).css(‘background-color’, ‘red’);
                                  });
                                  //closest
                                  $(“input:eq(2)”).click(function(){
                                  resetStyle();
                                  $(‘.item-1’).closest(‘ul’).css(‘background-color’, ‘red’);
                                  });

                                  function resetStyle(){
                                  $(“*”).removeAttr(“style”);
                                  }
                                  CSS-DOM
                                  [javascript] view plaincopy
                                  //获取

                                  元素的color
                                  $(“input:eq(0)”).click(function(){
                                  alert( $(“p”).css(“color”) );
                                  });
                                  //设置

                                  元素的color
                                  $(“input:eq(1)”).click(function(){
                                  $(“p”).css(“color”,”red”)
                                  });
                                  //设置

                                  元素的fontSize和backgroundColor
                                  $(“input:eq(2)”).click(function(){
                                  $(“p”).css({“fontSize”:”30px” ,”backgroundColor”:”#888888″})
                                  });
                                  //获取

                                  元素的高度
                                  $(“input:eq(3)”).click(function(){
                                  alert( $(“p”).height() );
                                  });
                                  //获取

                                  元素的宽度
                                  $(“input:eq(4)”).click(function(){
                                  alert( $(“p”).width() );
                                  });

                                  //获取

                                  元素的高度
                                  $(“input:eq(5)”).click(function(){
                                  $(“p”).height(“100px”);
                                  });
                                  //获取

                                  元素的宽度
                                  $(“input:eq(6)”).click(function(){
                                  $(“p”).width(“400px”);
                                  });
                                  //获取

                                  元素的的左边距和上边距
                                  $(“input:eq(7)”).click(function(){
                                  var offset = $(“p”).offset();
                                  var left = offset.left;
                                  var top = offset.top;
                                  alert(“left:”+left+”;top:”+top);
                                  });

  • Leave a Reply

    • (will not be published)