jquery Jquery 遍历 获取设置 效果

speed:  slow
        fast
        毫秒

隐藏 显示
    $(selector).hide(speed,callback)             隐藏、
    $(selector).show(speed,callback)             显示
    $(selector).toggle(speed,callback)              切换之间的状态
                                                 callback 可选： 可以添加额外 执行 代码
                                                 可选的 callback 参数，具有以下三点说明：
                                                    $(selector)选中的元素的个数为n个，则callback函数会执行n次
                                                    callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行
                                                    callback既可以是函数名，也可以是匿名函数

    $('#hide').click(function(){
        $('p').hide();
    });

    $('#show').click(function(){
        $('p').show();
    });

    $('button').click(function(){
        $('p').hide(1000);
    });

    $('button').click(fuction(){
        $('p').toggle();
    });

淡入淡出
    $(selector).fadeIn(speed,callback)             用于淡入已隐藏的元素
    $(selector).fadeOut(speed,callback)         用于淡出可见元素
    $(selecort).fadeToggle(speed,callback)        用户切换淡入淡出效果
    $(selector).fadeTo(speed,opacity,callback)  方法允许渐变为给定的不透明度

    $('button').click(function(){
        $('#div1').fadeIn();
        $('#div2')/fadeIn('slow');
        $('#div3').fadeInt('300')
    })；

    //用来淡出可见元素
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });

    $("button").click(function(){
          $("#div1").fadeToggle();
          $("#div2").fadeToggle("slow");
          $("#div3").fadeToggle(3000);
        });

    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });

滑动
    $(selector).slideDown(speed,callback)        用于向下滑动元素
    $(selector).slideUp()                        用于向上滑动元素
    $(selector).slideToggle()                    用于切换向下和向上滑动的效果

        Sample:
            $("#p1").css("color","red")
                    .slideUp(2000)
                    .slideDown(2000);

动画
    $(selector).animate({params},speed,callback);
    必须的params 参数定义形成动画的css 属性,多个属性之间可以用 ,(逗号) 隔开
    $('div').animate({left:'250px',top:'50px'}) 这里的属性必须用小驼峰命名法书写
        多个动画
                $("button").click(function(){
                  var div=$("div");
                  div.animate({height:'300px',opacity:'0.4'},"slow");
                  div.animate({width:'300px',opacity:'0.8'},"slow");
                  div.animate({height:'100px',opacity:'0.4'},"slow");
                  div.animate({width:'100px',opacity:'0.8'},"slow");

                  或者这样写：
                  $('div').animate({height:'200px',opacity:'0.4'})
                }); 

            $(selector).animate({params},speed,callback).stop();停止队列动画

停止动画或效果，在他们完成之前

$(selecctor).stop(stopAll,goToEnd);
    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
    因此，默认地，stop() 会清除在被选元素上指定的当前动画。

DOM  是 Document  Objectt Model 文档对象模型

获取内容 -text() html()     val()
        text([value])                    设置或返回所选元素的文本内容
        html([value])                    设置或返回所选元素的内容(包含html标记)
        val([value])                    设置或返回表单字段的值  一般是文本框内的内容

        $(document).ready(function(){
            $('#btn1').click(function(){
                alert($('#test').text());//获取p 元素内的文本
            });
            $('#btn2').click(function(){
                alert($('#test').html());//获取p元素内容所有节点 内容和标签
            });
        })；
        <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
        <button id="btn1">显示文本</button>
        <button id="btn2">显示 HTML</button>

获取输入的内容
        val([value])                    设置或返回表单字段的值  一般是文本框内的内容

        $(document).ready(function(){
          $("button").click(function(){
            alert("值为: " + $("#test").val());
          });
        });

        $('selector').attr("href") 获得属性值,attr 里面的参数 是你需要获得属性的名称

添加元素
添加新的 HTML内容

    append()        在被选元素内部的结尾插入指定内容
    prepend()        在被选元素内部的开头插入指定内容
    after()            在被选元素之后插入内容
    before()        在被选元素之前插入内容

    $('p').append('<h1>这是插入的内容而且还有标签呢</h1>') 方法在被选元素的结尾插入内容
    $('ul').append('<li>这也是一种动态插入的方法啊</li>')

    function afterText()
    {
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
    }

删除元素
    $('#div1').remove();        删除被选中元素(及其子元素)
    $(#div1).empty();            被选元素中删除子元素

    $('#div1').remove('.class_name'); 删除指定子元素

操作CSS

    addClass()        向被选元素添加一个或多个类  不会删除原来已经有的classname
    removeClass()    从被选元素删除一个或多个类  不会删除未指定的classname
    toggleClass()    对被选元素进行添加、删除类的切换操作
    css()            设置或返回样式属性

    .important
     {
     font-weight:bold;
     font-size:xx-large;
     }

     .blue
     {
     color:blue;
     }

     $('button').click(function(){
         $('h1,h2,p').addClass('blue');
         $('div').addClass('important');
     });

     $('button').click(functio(){
         $('#div1').addClass('important blue')
     });

返回css属性
    css('propertyname')
    $('p').css('background-color');返回的是rgb(x,x,x)

设置css属性
    css('propertyname','value')
    css({"propertyname":"value","propertyname":"value",...});
    $("p").css({"background-color":"yellow","font-size":"200%"});

尺寸
    width()                方法设置或返回元素的宽度(不包括内边距，边框或外边距)
    height()            方法设置或返回元素的高度(包括内边距，边框或外边距)
    innerWidth()        方法返回元素的宽度  包括内边距
    innerHeight()        方法返回元素的高度  包括内边距
    outerWidth()        方法返回元素的宽度  包括内边距 和边框
    outerHeight()        方法返回元素的高度  包括内边距 和边框

    outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）；
    outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）

    <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    $("button").click(function(){
      var txt="";
      txt+="Width: " + $("#div1").width() + "</br>";
      txt+="Height: " + $("#div1").height();
      $("#div1").html(txt);
    });

    <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    $("button").click(function(){
      var txt="";
      txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
      txt+="Inner height: " + $("#div1").innerHeight();
      $("#div1").html(txt);
    });

    <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>

    $("button").click(function(){
      var txt="";
      txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
      txt+="Outer height: " + $("#div1").outerHeight();
      $("#div1").html(txt);
    });

遍历
    遍历 祖先        用于向上遍历DOM树
        parent()                方法返回被选元素的直接父元素 该方法只会向上一级对DOM树进行遍历
        parents([filter])        方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素<html> [filter] 可选参数 可以添加 过滤条件
        parentsUntil()            方法返回介于两个给定元素之间的所有祖先元素

        $(document).ready(function(){
          $("span").parent().css({"color":"red","border":"2px solid red"});
        });
        <div class="ancestors">
          <div style="width:500px;">div (曾祖父元素)
            <ul>ul (祖父元素)
              <li>li (父元素)
                <span>span</span>
              </li>
            </ul>
          </div>

          <div style="width:500px;">div (祖父元素)
            <p>p (父元素)
                <span>span</span>
              </p>
          </div>
        </div>

        $(document).ready(function(){
              $("span").parents().css({"color":"red","border":"2px solid red"});
        });

        添加过滤
        $(document).ready(function(){
            $('span').parents('ul').css({'style'});
        });

        //返回介于span 和 div 之间的 元素
        $(document).ready(function(){
          $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
        });

    遍历后代

        children([filter])        方法返回被选元素的所有直接子元素 该方法只会对下一级对DOM 树进行遍历  [filter] 添加过滤条件
        find([filter])            方法返回被选元素的后代元素，一路向下到最后一个后代  [filter]过滤条件

        $(document).ready(function(){
            $('div').children.css({'style 给选中元素添加的样式'});
        });

        $(document).ready(function(){
            $('div').children('p.className').css({'样式','color':'red'});
        });

        $(document).ready(function(){
            $('div').find('span');
        });

        $(document).ready(function(){
            $("div").find('*');
        });

    遍历 同胞(siblings)
        同胞拥有相同的父元素

        siblings([filter])            方法返回被选元素的所有同胞(兄弟)元素    filter 过滤条件
        next()                        方法返回被选元素的下一个同胞元素          不包括自己
        nextAll()                    方法返回被选元素的所有跟随的同胞元素   不包括自己
        nextUntil()                    方法放回介于给定参数之间的所有跟随的同胞元素   and  h2  和  h6 之间的同胞元素  但是不包含自己
        prev()
        prevAll()
        prevUntil()

        prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

        //返回h2 所有的兄弟元素
        $(document).ready(function(){
            $('h2').siblings();
        });

        //返回h2 所有兄弟元素 并且 类型是p标签
        $(documnet).ready(function(){
            $("h2").siblings('p');
        });

        //返回h2 的下一个兄弟元素，就是平级的下一个元素
        $(document).ready(function(){
            $('h2').next().css({'name':'value'});
        });

        //放回所有 同胞元素  不包含自己
        $(document).ready(function(){
            $('h2').nextAll().css('style');
        });

        // 方法放回介于给定参数之间的所有跟随的同胞元素   and  h2  和  h6 之间的同胞元素  但是不包含自己
        $(document).ready(function(){
            $('h2').nextUntil('h6');
        });

    遍历 过滤

        它们允许您基于其在一组元素中的位置来选择一个特定的元素。
        first()            方法返回被选元素的首个元素
        last()            方法返回备选元素的最后一个元素
        eq()            方法返回被选元素中带有指定索引号的元素 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

        允许您选取匹配或不匹配某项指定标准的元素。
        filter()        方法允许您规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
        not()            方法返回不匹配标准的所有元素  相当于filter 取反操作

        $(document).ready(function(){
          $("div p").first().css("background-color","yellow");
        });
        </script>
        </head>
        <body>
        <h1>欢迎访问我的主页</h1>
        <div>
            <p>这是 div 中的一个段落。</p>
        </div>
        <div>
            <p>这是另外一个 div 中的一个段落。</p>
        </div>
        <p>这是一个段落。</p>
        </body>

        // last()
        $(documnet).ready(function(){
            $('div p').last();
        });

        // 方法返回被选中元素中带有指定索引号的元素
        //注意 索引号 开始值为 0
        $(document).ready(function(){
            $('p').eq(1).css('backgrond-color':'yellow');
        });

        // 规定一个标准，凡是不符合标的的元素 会被集合中删除掉
        $(document).ready(function(){
            $('p').filter('.className 或其他').css('background-color':'orange');
        })；

        //not() 此方法 相当于 filter() 方法的取反操作
        $(document).ready(function(){
            $('p').not('.className');
        });

Jquery 遍历 获取设置 效果