jquery

一、jquery选择器

1、jquery用法思想一  :

选择某个网页元素，然后对它进行某种操作

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

       $('myId')//选择id为myId地网页元素
       $('.maClass')//选择class为myClass的元素
       $('li')//选择所有的li元素
       $('#ul1 li span')//选择id为ul1元素下地所有li下的span元素
       $('input[name=first]')//选择name属性等于first的input元素

对选择集进行过滤

$('div').has('p');//选择包含p元素的div元素
$('div').not('.myClass');//选择clas不等于myClass的div元素
$('div').eq(5);//选择第6个div元素

选择集转移

$('#box').prev();//选择id是box的元素前面紧挨的同辈元素
          $('#box').prevAll(); //选择id是box的元素前面所有的同辈元素
          $('#box').next();//选择id是box的元素后面紧挨的同辈元素
          $('#box').nextAll();//选择id是box的元素后面所有的同辈元素
          $('#box').parent();//选择id是box的元素父元素
          $('#box').children();//选择id是box的元素所有子元素
          $('#box').siblings();//选择id是box的元素同级元素，就是反选，除了它自身，其他都选中
          $('#box').find('.myClass');//选择id是box的元素内的class等于mwclass的元素
    

判断是否选择到了元素

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width"),获取的是第一个div的width。

jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0，就是没有找到元素，length大于0，就是找到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length);//弹出1
alert($div2.length);//弹出0
......
<div  id= "div1">这是一个div</div>

二、jquery 样式操作

2、jquery用法思想二  ：

同一个函数完成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width"),获取的是第一个div的width。

操作样式类名

$('#div1').addclass("divClass2") //给id为div1的对象追加divClass2
$('#div1').removeClass("divclass") //移除id为div1的对象的class名为divClass的样式
$('#div1').removeClass("divclass divClass2")//移除多个样式
$('#div1').toggleClass("anotherClass")//重复切换anotherClass样式

三、绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){
 
    //内部的this指的是原生对象

   //使用jquery对象用$(this) 

})

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index() 方法获取

var $li  =$('.list li').eq(1);
         alert($li.index()); //弹出1
          .....
          <ul class = "list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
         </ul>

四、jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或者多个属性值，动画执行完成后会执行一个函数。

   
                /* animate的参数
                   参数一：要做动画的样式属性，写成字典形式
                   参数二：动画持续的时间，默认是400毫秒，设置时不写单位
                   参数三：动画曲线，默认是'swing',缓冲运动，还有'linear' 匀速运动
                   参数四：动画的回调函数，它是一个匿名函数，在动画结束时会自动调用
                */

             $('#div1').animate({
                 width :300,
                 heigt :300
             },1000,'swing',function(){
                 alert('done')
             })