JQ 常用方法

一、

1、length/size

   描述：获取jq对象内元素的数量；

    语法：jq对象.length 【属性】

               jq对象.size()【方法】

    eg：

console.log($('.box').length);
console.log($('p').size());

2、jq提供的伪类

     选择器:first                                 选中指定元素集合中的第一个元素

     选择器:last                                  选中指定元素集合中的最后一个元素

     选择器:eq(n)                               选中指定元素集合中从0开始，第n个元素

     选择器:lt(n)                                 选中指定元素集合中从0开始，第n个元素之前的所有元素

     选择器:gt(n)                                选中指定元素集合中从0开始，第n个元素之后的所有元素

     选择器:odd                                  选中指定元素集合中从0开始，所有奇数序号的元素

     选择器:even                                选中指定元素集合中从0开始，所有偶数序号的元素

    eg：

console.log($('p:first').css('backgroundColor','red'));
console.log($('p:last').css('backgroundColor','red'));
    //注意 选中元素时 下标 从0开始
console.log($('p:eq(3)').css('backgroundColor','red'));
   // 从 0 到 n [0,n)
console.log($('p:lt(4)').css('backgroundColor','red'));
    // (n,最后]
console.log($('p:gt(4)').css('backgroundColor','red'));
    ///三个字母奇数
console.log($('p:odd').css('backgroundColor', 'pink'));
   // 四个字母偶数
console.log($('p:even').css('backgroundColor', 'pink'));

3、$与jQuery 作用是等价的，防止工具包冲突。

     原生js 无法直接使用 jq中的，属性和方法 ；jq对象无法直接使用 jq中的属性和方法 。

     将jq对象中的某个元素 转为 原生js对象 ：

       ①jq对象[下标]

       ②jq.get(下标)

      eg：

$('p').css('background-color','red');
$('p')[0].style.backgroundColor = 'pink';
$('p').get(1).style.backgroundColor = 'pink';


    $('.box').css('backgroundColor','red');
   jQuery('.box').css('backgroundColor','red');

二、css方法

1、设置样式

  （1）设置的样式为行内样式；

  （2）设置样式时，加不加单位都可以；

 $('button:first').click(function () {
     console.log('btn被点击了');
     $('.box').css('height', 700 + 'px');
 });

  （3）设置样式是，可以在原值上直接累加；

 $('button:last').click(function () {
     // left += 100;
     //$('.box')[0].style.left = left + 'px';
     $('.box').css('left','+=100px');
 })

   （4）设置样式可以采用链式设置；

 $('.box').css('left', 200).css('top',10);

    （5）设置多个样式时，可以采用链式设置。

 $('.box').css({'left':100,'top':10});

2、获取样式值：不仅可以获取行内样式，也可以获取内部样式

 $('button').eq(3).click(function () {
     $('.box').css('left', 200);
 });
 $('button:eq(2)').click(function () {
       var result = $('.box').css('left');
       console.log(result);
 });