一、简单选择器
// $(function () {
// $("#box").css("color","red")
// })
// 这个是id选择器，id默认要保证唯一，如果出现有多个id相同的场景，那么jquery
// 只会渲染第一个
// $(function () {
// $("p").css("color","red")
// })
// 这个是标签选择器，会把所有的标签为a的全部渲染
// $(function () {
// $(".box").css("color","blue")
// })
// 这个是class选择器，如果某个标签的class为box，则会被该jquery渲染
// $(function () {
// alert($(".box").length)
// })
//length都是统计jquery搜索到的标签的数量
$(function () {
$("div > p").css("color","red")
alert($("div > p").get(0))
// 显示选择到的的第一个元素
alert($("div > p")[0].nodeName)
// 显示选择到的第一个元素,nodeName查看节点的标签的名称
})
//$("div > p")只选择div标签的子标签，孙标签不会被选择到
二、进阶选择器
$(function () {
$("div,a,.cc").css("color","blue")
})
//比如上面的例子，可以把div标签，a标签，class为cc的标签都使用同一种css样式,
//选择符可以是id，也可以是标签，也可以是class，不同的选择符之间用逗号隔开
$(function () {
$("ul a").css("color","red")
})
//这个实现的效果是把ul的后代的所有a标签选择出来，包括子子孙孙,同样选择符可以
//使用id class 和标签
$(function () {
$("div.box").css("color","red")
})
//这个选择器可以在id和类中执行元素的前缀，比如上面的例子，在clase中指明标签的前缀
//为div
$(function () {
$(".box.pox").css("color","red")
})
//这个选择器的意思是 只选择同时使用box和pox两种class的标签
三、高级选择器
// $("#box").find("p").css("color","red")
// $("#box p").css("color","red")
// 上面这两种写法的效果是一致的
// $("#box").children("p").css("color","red")
// $("#box > p").css("color","red")
// 上面这两种写法的效果是一致的
$(function () {
$("span").next().css("color","red")
})
$(function () {
$("span").nextAll().css("color","red")
})
//上面这2个例子，next是选择span标签的下一个标签，且是兄弟标签，nextAll是选择span标签
//下的所有标签，且是兄弟标签，next和nextAll中可以带选择符
$(function () {
$("span").prev().css("color","green")
})
$(function () {
$("span").prevAll().css("color","green")
})
//prev和prevAll方法和next方法正好相反，他是获取某个标签的上一个兄弟标签，和上面的所有的
//兄弟标签,prev和怕热vALL中可以带选择符
$(function () {
$("#box").siblings().css("color","red")
})
//这个是统计id为box的上下同一级别的元素，同样，都是统计兄弟标签，同样siblings也可以加参数
//选择指定的选择符
$(function () {
$("#box").nextAll().nextUntil("p").css("color","red")
})
//这个是选择id为box的下面的所有兄弟标签，然后遇到“p”标签则终止，然后对这中间的所有
//d的兄弟元素做渲染，但是不包括遇到的p标签
$(function () {
$("#box").prevAll().nextUntil("p").css("color","red")
})
// 这个效果和上面的一样
四、属性选择器
// $(function () {
// $("a[ttt]").css("color","red")
// })
//
//匹配有ttt这个属性的a标签
// $(function () {
// $("*[ttt]").css("color","red")
// })
//匹配所有的标签，且属性有ttt的标签
// $(function () {
// $("a[ttt=cui1]").css("color","red")
// })
//匹配所有的ttt属性等于cui1的a标签
// $(function () {
// $("a[ttt!=cui1]").css("color","red")
// })
//匹配所有ttt属性不等于cui1的a标签
// $(function () {
// $("a[ttt^=cui]").css("color","red")
// })
//匹配所有的ttt的属性以cui开头的a标签
$(function () {
$("*[ttt$=4]").css("color","red")
})
//匹配所有的ttt的属性以4结尾的所有标签
