JQuery 样式
引入jQuery库
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<title>环境搭建</title>
</head> 标题
<p id=”imooc”></p>我们要获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。
jQuery的处理：
var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');如何把jQuery对象转成DOM对象？
通过jQuery自带的get()方法
jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性DOM对象转化成jQuery对象
HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>JavaScript代码
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色id选择器
${"#imooc"} //imooc 是ID的属性类选择器
$( ".class" )元素选择器
$("p")选取所有的<p>元素，可通过css方法直接赋予样式。选择器之层级选择器
$( “parent > child” )
子选择器：选择所有指定“parent”元素中指定的”child”的直接子元素。$(“ancestor descendant”)
后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等$(“prev + next”)
相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素$(“prev ~ siblings”)
一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
//子选择器
//$('div > p') 选择所有div元素里面的子元素P,要求直接子元素是div.
$('div > p').css("border", "1px groove red");
//后代选择器
//$('div p') 选择所有div元素里面的p元素
$('div p').css("border", "1px groove red");
//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点
$('div + div').css("border", "3px groove blue");
//一般相邻选择器
//选取prev后面的所有的div兄弟节点
$('prev ~ div').css("border", "3px groove blue");筛选选择器
//找到第一个div
$(".div:first").css("color", "#CD00CD");
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
//:even 选择所引值为偶数的元素，从 0 开始计数
$(".div:even").css("border", "3px groove red");
//:odd 选择所引值为奇数的元素，从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
//:eq
//选择单个,aaron是个class属性
$(".aaron:eq(2)").css("border", "3px groove blue");
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
内容筛选器
//查找所有class='div'中DOM元素中包含"contains"的元素节点
//并且设置颜色
$(".div:contains(':contains')").css("color", "#CD00CD");
//查找所有class='div'中DOM元素中包含"span"的元素节点
//并且设置颜色，has针对元素，contains针对文本；
$(".div:has(span)").css("color", "blue");
//选择所有包含子元素或者文本的a元素
//增加一个蓝色的边框
$("a:parent").css("border", "3px groove blue");
//找到a元素下面的所有空节点(没有子元素)
//增加一段文本与边框
$("a:empty").text(":empty").css("border", "3px groove red"); - 附
<div class="left">
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a></a>
</div>
</div>可见性筛选选择器
$('#div1:visible')//显示id属性为div1的元素
$('#div2:hidden')//隐藏id属性为div2的元素属性筛选选择器
//查找所有div中，属性name=p1的div元素
$('div[name=p1]')
//查找所有div中，有属性p2的div元素
$('div[p2]')
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]')
//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]')
//查找所有div中，属性name的值是用imooc开头的
$('div[name^=imooc]')
//查找所有div中，属性name的值是用imooc结尾的
$('div[name$=imooc]')
//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]')
//查找所有div中，有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]') 子元素筛选器
//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('.first-div a:first-child')
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话，last也是第一个元素
$('.first-div a:last-child')
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child')
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)')
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)')
