jQuery基础

jQuery与js的不同：

1. 赋值

  $(“#div1”).css(“background”,”red”);

  $(“div”).css(“background”,”red”);

$(“.box”).css(“background”,”red”);

1. 页面加载： $ ( function ( ){ } );
2. 事件调用： $ (“#div1”) . click ( function ( ) { } );
3. this 属性： $( this ) . html ( );

jQuery的选择器：

1. $ ( ‘ li : eq (2) ’). css (‘background’,‘red’);  //第2个li元素（从0开始）
2. $ (‘ li : odd ’). css ( ‘ background ’,‘ red ’ );  //奇数的li元素 

3、$( ' li ' ) . filter ('.box') . css ( ' background ' , ' red ' );  //筛选类名为box的li

4、$( ' li ' ) . filter ( ' [title=hello] ' ) . css( ' background ' , ' red ');  //筛选title为hello的li

原生js与jQuery的转换：

jQuery对象 . get ( i ) / [ i ]    //把jQuery对象转化成原生js对象

jQuery对象 . get ( 0 ) / [ 0 ]    //把第一个jQuery对象转化成原生js对象

$（原生对象）  //把原生js对象转化成jQuery对象

链式操作：

   $(‘#div1’) . html (‘hello’) . css (‘background’,‘red’) . click ( function ( ) { console.log(123); });

属性取值赋值操作：

alert ( $ (‘ div ’) . attr(‘ title ’)) ;  //取元素divtitle的值

$( ' div ' ) . attr( ' title ' , ' 456 ');    //给div的title属性赋456

添加与移除类名：

$( ' div ' ) . addClass( ' box2 box4 ' );   //添加类名

    $( ' div ' ) . removeClass( ' box1 ' );   //移除类名

$( )下的常用方法：

    $(‘ div ’) . width ( )   //width

    $(‘ div ’) . innerWidth( )   //width+padding

    $(‘ div ’) . outerWidth( )   //width+padding+border（可以获取到隐藏元素的值）

    $(‘ div ’) .outerWidth( true )   //width+padding+border+margin

 

元素的删除：

    $ ( ‘ div ’ ) . remove ( )  //删除该节点

    $ ( ‘ div ’ ) . detach( )  //删除该节点，但是会保留该元素的操作

数值和内容：

    $ ( ' input ' ) . val ( )   //获取元素value值

    $ ( ' li ' ) . size ( ) //获取元素个数，length是jQuery和js通用的属性

    $ ( ' div ' ) . text ( )  //获取标签文本内容(不会获取标签)

$ ( ' div ' ) . html ( )  //获取标签文本内容(会获取标签)

位置偏移值：

 $ (‘#div1’) . offset () . left  //获取元素到屏幕的左距离

 $ (‘#div1’) . position () . left  //获取元素到有定位的父级的left值，把当前元素转化成类似定位

 元素 . parent ( )  //获取元素的父级

 元素 . offsetParent ( )  //获取元素最近的被定位的父级

jQuery事件写法：

$( ' div ' ) . click ( function(){alert(123);});         

$( ' div ' ) . on ( ' click ' , function(){alert(123);});  

$( ' div ' ) . on( ' click mouseover ' , function() {alert(123);});  

$( 'div' ) . on({'click' : function ( ) {alert (123) ; } , ' mouseover ' : function(){ alert ( 456) ; } } );  //绑定多个事件，json写法

$( 'div' ) . one( ' click ' , function() { alert(123);});  //事件只执行一次

$( )下的常用方法：

jQuery的遍历：

    $(' li ') . each( function( i , elem ) {

$(elem) . html ( i ) ;

});  // i为下标，elem为每个元素

可以简写成：

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

        $( this ) . html( $(this) . index( ));

    });

页面加载事件：  $( ) ;  //是$(document) . ready( )的简写

元素的创建：

    $( "<div  class=' box '> ") . appendTo ( $ ( " #div1 " ) ) ;  //创建类名为box的div元素并将该元素加入到id为div1的元素中

判断真假的方法：jQuery对象 . is ( );