/** * 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'); })
jQuery基础-选择器
最新推荐文章于 2024-03-29 10:26:45 发布