学习jquery的各种方法

attr给元素设置属性：

$("#a_a").attr({ src: "images/19.png", alt: "jquery增加alt属性" });    //批量为元素设置src  和   alt属性
$("#a_a").attr("src","5.png");                                       //   单独给元素设置属性
$("#a_a").attr("title", function() { return this.src });             //把src属性的值设置为title属性的值。

jquery往元素里面添加节点元素：

$("<div><p>Hello</p></div>").appendTo(".a_c");　　　　　　

jquery取第四个元素：

<div class="a_a">1111111</div>
<div class="a_a">22222</div>
<div class="a_a">3333333</div>
<div class="a_a">444444444444</div>
        
<script>
     var a =  $(".a_a").get(3);            //取到<div>4444444444444</div>
     console.log(a);
</script>

jquery不传递参数，返回这个元素在同辈中的索引位置。

　　　　　<ul>
          <li id="foo">foo</li>
          <li id="bar">bar</li>
          <li id="baz">baz</li>
        </ul>

        <script>
            var a = $('#baz').index();                //1，不传递参数，返回这个元素在同辈中的索引位置。
            console.log(a);

　　　　　　　　$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
　　　　　　　　$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

</script>

jquery给定的父级元素来寻找它下面的所有子集元素

　　　　　<form>
          <label>Name:</label>
          <input name="name" />
          <fieldset>
              <label>Newsletter:</label>
              <input name="newsletter" />
         </fieldset>
        </form>
        <input name="none" />
        
        <script>
            var a = $("form input")
      
            $("form input").val("111111111");        //选择form 下的所有input元素
        </script>

jquery选择class名为.a_b后面紧挨的input元素

(".a_b + input").val("111111111");    //jquery选择class名为.a_b后面紧挨的input元素

$("form ~ input").val("111111111");    //找到 form 元素的所有同辈 input 元素

jquery获取第一个元素：

　　　　　<ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>

        <script>
            $('li:first').html("66666");
        </script>

jquery选中所有奇偶数的节点

　　　　　<ul>
            <li class="a_a">list item 1</li>
            <li class="a_a">list item 2</li>
            <li class="a_a">list item 3</li>
            <li class="a_a">list item 4</li>
            <li class="a_a">list item 5</li>
            <li class="a_a">list item 6</li>
            <li class="a_a">list item 7</li>
            <li class="a_a">list item 8</li>
            <li class="a_a">list item 9</li>
            <li class="a_a">list item 10</li>
        </ul>

        <script>
            $(".a_a:even").html("66666");     //选中class名为a_a的所有奇数节点
            
            $(".a_a:odd").html("66666");     //选中class名为a_a的所有偶数数节点

　　　　　　　$(".a_a:eq(1)").html("9999")；      //jquery选择出一个已给定索引值的节点

　　　　　　　$(".a_a:gt(1)").html("9999")      //jquery选择出一个大于已给定索引值的所有节点

　　　　　　　$(".a_a:lt(2)").html("9999")      //jquery选择出所有小于已给定的索引值的所有节点

　　　　　　　$(".a_a:last").html("9999")      //jquery选择最后一个节点

　　　　　　　

        </script>

jquery给class名为a_b的节点外面的div增加class名为test

　　　　 <div class="a_a">
            <p class="a_b">1111</p>
        </div>
        <div class="a_c">222222</div>

        <script>
            $("div:has(.a_b)").addClass("test");      //jquery给class名为a_b的节点外面的div增加class名为test
        </script>

jquery选择出所有 name 属性是 666 的input元素

　　　　 <input type="checkbox" name="666" value="Hot Fuzz" />
        <input type="checkbox" name="666" value="Cold Fusion" />
        <input type="checkbox" name="777" value="Evil Plans" />


        <script>
            $("input[name='666']").attr("checked", true);         //jquery选择出所有 name 属性是 666 的input元素

　　　　　　　$("input[name!='666']").attr("checked", true);        //jquery选择出所有 name 属性不是 666 的input元素
        </script>  

jquery选择最后一个节点

　　　　 <ul class="a_a">
          <li class="a_b">John</li>
          <li class="a_b">Karl</li>
          <li class="a_b">Brandon</li>
        </ul>


        <script>            
            $(".a_a .a_b:last-child").html("888");    //jquery选择a_a下面的a_b的最后一个节点

　　　　　　  $(".a_a .a_b:nth-last-child(2)").html("000");     //选择a_a下面的所有的a_b的倒数第二个节点

        </script>

如果某个元素是父元素中唯一的子元素，那将会被jquery选中   如果父元素中含有其他元素，那将不会被选中。

$("ul li:only-child")      //如果某个元素是父元素中唯一的子元素，那将会被jquery选中   如果父元素中含有其他元素，那将不会被选中。

 jquery获取img的src属性值

<script>
　　var a = $("img").attr("src");       //获取img的src属性值
　　console.log(a);
</script>

jquery移除掉元素属性

<img src="images/1.png"/>

        
<script>            
    $("img").removeAttr("src");         //jquery移除掉元素属性
</script>

//jquery给元素添加类名

<img src="images/1.png"/>

        

<script>            
    $("img").addClass("selected");         //jquery给元素添加类名

　　$("img").removeClass("selected");       //jquery给元素添加类名

</script>

jquery如果存在（不存在）就删除（添加）一个类。

　　 　　 <img class="a selected" src="images/1.png"/>


        <script>                
            $(function(){
                $(".a").click(function(){
                    $(this).toggleClass("selected");       //jquery如果存在（不存在）就删除（添加）一个类。
                })
            })
        </script>

$('p').html();                                        //获取p元素里面的内容

$("p").html("Hello <b>world</b>!");                   //设置p元素的内容值

$("p").text();　　　　　　　　　　　　　　　　　　　　　　　　//获取p元素的文本内容

$("input").val();         　　　　　　　　　　　　　　　　 //获取input的value值

$("input").val("hello world!");         　　　　　　　  //设定input的value值

jquery选中最后一个节点元素

$('li').last().html("666");                           //jquery选中最后一个节点元素.

如果该元素有 protected 这个类名 就执行

<div class="protected"></div>
<div></div>

        <script>
            $("div").click(function() {
                if($(this).hasClass("protected"))                    //如果该元素有 protected  这个类名  就执行
                    $(this)
                    .animate({
                        left: -10
                    })
                    .animate({
                        left: 10
                    })
                    .animate({
                        left: -10
                    })
                    .animate({
                        left: 10
                    })
                    .animate({
                        left: 0
                    });
            });
        </script>

js面向对象：

　　　　　　  function creatPerson (name,qq)        //构造函数
            {
　　　　　　　　　 //原料
                var obj = new Object();   //定义一个对象 obj
            
　　　　　　　　　 //工厂
                obj.name = name;          //给这个对象添加属性name为blue
                obj.qq = qq;      //给这个对象添加属性qq为707129772
                
                obj.showName = function()    
                {
                    alert("我的名字叫：" + this.name);   //这个方法属于谁  this就代表谁
                }
                obj.showQQ = function()
                {
                    alert("我的QQ是：" + this.qq);      
                }
                
　　　　　　　　　　//出厂
                return obj;
            }
            
            var obj1 = creatPerson("张三","707129772");
            obj1.showName();
            obj1.showQQ();

            var obj2 = creatPerson("李四","727198474");
            obj2.showName();
            obj2.showQQ();

 js计算输出一个div最终的样式值：

　　　　　　<script>
            window.onload=function()
            {
                var div1 = document.getElementById("div1");
                
                alert(div1.currentStyle.width);               //在ie下可以输出非行间样式
                alert(getComputedStyle(div1,null).width);   //在谷歌和火狐浏览器下可以输出非行间样式
                
                if(div1.currentStyle)
                {
                    alert(div1.currentStyle.width);
                }
                else
                {
                    alert(getComputedStyle(div1,null).width);
                }
            }
        </script>

 div 下第几个添加一个class名：

　　　　　　　　　　　　　　　　　　　　$(document).ready(function(){
                                  
                                   $(".aa1>.chd:first").addClass("active");
                                   $(".abo2>.point:first").addClass("active");
                                 
                                });

1