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');})