JQuery第二天总结

1.    JQuery选择器
    用于选取页面上的元素对象。JQuery选择器完全继承了css选择器的方式
    JQuery选择器是学习JQuery的基础
    Dom中如何获取页面中的元素对象？        --三种方式    
    
    如何直接通过JQuery方式获取页面上的元素？（获取后直接就是一个JQuery对象）
    id选择器                  $('#id')                
    标签选择器                $('span')                    
    类选择器                  $('.cls')            
    标签 加 类 选择器          $('div.cls')    
    多条件选择器            $('h1,p,span')
    层选择器                $('div span')        --div中的所有span元素
                            $('div>span')        --div中的所有直接的span元素
                            $('div+span')        --div后面的第一个元素span
                            $('div~span')        --div后面的所有的span标签                                                        
    
2.    获取兄弟元素的几个方法
    next()        当前元素之后的紧邻着的第一个兄弟元素
    nextAll()    当前元素之后的所有兄弟元素
    prev()        当前元素之前的紧邻着的上一个兄弟元素
    prevAll()    当前元素之前所有兄弟元素
    siblings()    除了本身，其他的所有兄弟元素
    
3.    JQuery的迭代（包装集）
    如何判断对象是否存在，JQuery选择器返回的是一个对象数组，
    调用text() html() click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，
    因此即便通过id选择的元素不存在也不会报错
    
    如果需要判断指定的id是否存在，应该写
    if($('#btn').length<=0){
        alert('id为btn1的元素不存在！');
    }
    
    $('#id').length>0 用途：可以判断某个页面上的某个元素是否存在，如果存在则不用
    重新创建；如果不存在则创建一个新的并显示（动态创建元素的时候用）
    
4.    链式编程的时候一定要注意在什么时候破坏了链
    比如当前对象的传递，如使用nextAll()，则当前对象的传递被破坏了，
    可以调用end()方法返回链被破坏前的对象
    
5.    addClass('class')    添加样式      removeClass('class')移除样式
    toggleClass('class')切换样式    hasClass('class')    判断是否应用了某种样式
    
6.    基本过滤选择器
        获取第一个元素
            $('p:first').css('backgroundColor','green');
            $('p').first().css('backgroundColor', 'green');
        获取最后的元素
            $('p:last').css('backgroundColor', 'green');
            $('p').last().css('backgroundColor', 'green')        
        偶数
            $('p:even').css('backgroundColor', 'green');
        奇数
            $('p:odd').css('backgroundColor', 'green');
        索引获取元素            
            $('p:eq(3)')        --索引等于3的p        
            $('p:lt(3)')        --索引小于3的所有p
            $('p:gt(3)')        --索引大于3的所有p    
            $('p:gt(2):lt(2)')    --索引大于2 又小于2 （即原3，4）
        Not
            $('p:not(.class)')
        设置header                        
            $('h1,h2,h3,h4,h5,h6').css('backgroundColor', 'green');
            //简单的写法
            $(':header').css('backgroundColor', 'green');
        
7.    相对定位        
        不仅可以使用选择器进行绝对定位，还可以进行相对定位
        只要在$()指定第二个参数，第二个参数为相对的元素
        $(selector,context)
        //取到表中每行的偶数列
        $('td:even', $(this)).css('backgroundColor', 'red');