jQuery基础-选择器

/**
 * Created by Admin on 2017/4/5.
 */
/**
 选择器
 选择器是jQuery最核心的部分,可以使用选择器直接去改变页面元素样式

 1.元素名称选择器---------一般返回多个元素
 2.#id 选择器--------------一般应用其返回一个固定元素
 3..class选择器------------一般会返回多个元素
 */
$(function(){
     $('#box').css('color','green');
    $('div').css('color','red');//这样是多个元素
    $('.box').css('color','green');
   $('#box>p').css('color','green');
})

/*
选择器
1.获得DOM对象
2.群组选择器
3.子元素选择器
4.通配选择器
 */
$(function(){
    $('.box').css('color','red');
    //获得DOM对象
    $('.box').get(0).css('color','green');//得到原生的DOM对象故不能改变css样式
    $('.box').eq(0).css('color','green');//得到的是jQuery对象,可以改变css样式
    //群组选择器
    $('div,p,strong').css('color','green');//改变多个css样式
    $('.box,.pox,strong').css('color','red');
    //子元素选择器
    $('ul li a').css('color','green');
    //通配选择器
    $('*').css('color','green');
    $('ul li *').css('color','green');
    $('div.box').css('color','red');

})
/*
        选择器
        1.层次选择器

        2.属性选择器
 */
$(function(){
    $('p').css('color','red');
    $('#box p').css('color','red');
    //层次选择器

    //1.找到id为box下的所有的子标签p
    $('#box').find('p').css('color','red');
    $('#box>p').css('color','red');
     $('#box').children('p').css('color','red');

    //2.找到id为box的第一个兄弟节点p
    $('#box+p').css('color','red');
    $('#box').next('p').css('color','red');
    //3.找到id为为box的所有兄弟接单p
    $('#box').nextAll('p').css('color','red');

    // 得到id为#box的上一个兄弟标签p
   $('#box').prev('p').css('color','red');
   //地调id为#box的上的全部兄弟标签p
    $('#box').prevAll('p').css('color','red');

    //同时设置id为box的上下兄弟子标签
    $('#box').siblings('p').css('color','green');

    //分别向上向下找到兄弟p标签结束
    $('#box').nextUntil('p').css('color','green');
    $('#box').prevUntil('p').css('color','green');


})