jQuery学习：基本选择器

选择器作为参数，调用核心函数也就是$,才有具体作用，$(选择器)：选中文档中匹配的标签，作为对象传入 也就是选出Dom元素

选择器的分类：

基本选择器：#id  element .class * :id选择器 元素选择器 类选中器 通配符选择所有元素.

               selector1, selector2, selectorN:并集选择器

                selector1selector2selectorN:交集选择器

层次选择器：查找子元素 后代元素 兄弟元素的选择器

          selector1 selector2：查找祖先是selector1后代是selector2的选择器 所有后代

         selector1 >selector2：查找父元素selector1子元素selector2的选择器

          selector1 +selector2：查找前面的元素是selector1后面的兄弟是selector2的选择器

          selector1 ~selector2：查找selector1 元素后面的所有兄弟selector2

过滤选择器： 在找到的一堆元素中 选中你想要的:first 等

		<div id="div1" class="box">div1(class=box)</div>
		<div id="div2" class="box">div2(class=box)</div>
		<div id="div3">div3</div>
		<span class="box">span(class="box")</span>
		<br>
		<ul>
			<li>AAAAA</li>
			<li title="hello">BBBBB(title="hello")</li>
			<li class="box">CCCCC(class="box")</li>
			<li title="hello">DDDDD(title="hello")</li>

		</ul>

 

 

基本选择器的使用

	        //选中ID
			$('#div1').css('color', 'red');
			//选中元素
			$('div').css('background-color', 'orange');
			//选中类
			$('.box').css('font-size', '30px');
			//并集选择器 div span
			$('div,span').css('font-weight', 'bold')
			//选中所有class属性为box的div元素
			$('div.box').css('width', '300px')
			//选中所有元素*

---

层次选择器：查找子元素 后代元素 兄弟元素的选择器的使用

		<ul>
			<li>AAAAA</li>
			<li title="hello">BBBBB(title="hello")</li>
			<li class="box">CCCCC(class="box")</li>
			<li title="hello">DDDDD(title="hello")
				<span class="box">GGGG</span>
				<p></p>
			</li>
			<span>EEEEE</span>
			<span>FFFFF</span>
			<p><span>HHHHHH</span></p>

		</ul>

		    //选中后代元素
			$('ul span').css('background', 'orchid');
			//选中子元素
			$('ul>span').css('font-size','20px');
			//选中前面元素是ul 后面元素是span的元素
			$('ul>span').css('font-weight','bold');

 

	//选中ul下class为box的元素后面的所有兄弟元素
			$('ul .box~*').css('background-color','red');

span是没有的