jQuery优势、jQuery选择器

Javascript库
-为了简化javascript的开发，一些javascript库诞生了。Javascript库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的web2.0特性的客户端页面，并且兼容了各大浏览器。

jQuery优势：
    轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的Ajax、不污染顶级变量、出色的浏览器兼容性、链式操作方式、隐式迭代、行为层与结构层的分离、丰富的插件支持、完善的文档、开源

环境搭建时先引入jquery文件在引入搭建环境的js文件

//环境搭建简写
$(function () {
    console.log(2);
    //用jquery获得id等于h的变量
    $hjq = $("#h");
    //js对象转换成jq，只要在js对象外，加上$()，那么就能直接转换
    $newjq = $($hjq);
})

jquery选择器
//基本选择器
    #id:根据给定的id匹配一个元素（单个元素）
    .class：根据给定的类名匹配元素（集合元素）
    ELement：根据给定的元素名匹配元素（集合元素）
    *：匹配所有元素（集合元素）
    selector1，selector2：将每一个选择器匹配到的元素合并在一起后返回（集合元素）
    
    实例：
    $(function(){
        $( "#h" ).css( "font-size" , " 30px" );//id选择器
        $( ".one" ).css( "border" , "solid 1px #f00");1/类别选择器
        $("p").css( "font-weight" , "bold");//标记选择器
        $("*" ).css( "color" , "#444");//全局
        $( "#h,.one , p" ).css ( "background" , "#eee" );//集体声明方式
    })
    
//基本过滤选择器
    :first：选取第一个元素（单个元素）
    :last：选取最后一个元素（单个元素）
    :not(selector)：取出所有与给定选择器不匹配元素（集合元素）
    :even：选取索引是偶数的所有元素，索引从0开始（集合元素）
    :odd：选取索引是奇数的所有元素，索引从0开始（集合元素）
    :eq(index)：选取索引等于index的元素，index从0开始(单个元素)
    :gt(index):选取索引大于index的元素，index从0开始(集合元素)
    :lt(index):选取索小于index的元素，index从0开始(集合元素)
    :header:选取所有标题元素，如:h1,h2,h3等(集合元素)
    :focus_1.6+:选择获得焦点的元素(单个元素)
    :animated：选取当前正在实行动画的所有元素（集合元素）
    
实例：
$(function(){
    $("p:first").css("background","#0f0");
    $("div:last").css("background","#f00");
    $("p:odd").css("background","#000");
    $("p:not(.pd)").css("color","#00f")//不包函class=pd的p标记
    $(":header").css("color","#00f")
})

//子元素过滤器（同一父级元素）
:nth-child(index/even/odd/equation):选取每个匹配元素下的第index个子元素或者奇偶元素( index从1算)(集合元素)

:first-child:选取每个父元素的第一个子元素(集合元素)

:last-child:选取每个父元素的最后一个子元素(集合元素)

:only-child:如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中还有其他元素，则不匹配(集合元素)

实例：
 $("p:first-child").css("background","#f00")//同一父亲下的第一个
    $("p:nth-child(2)").css("background","#0f0")//同一父亲下的第二个
    $("p:nth-child(odd)").css("bgckground","#00f")//同一父级元素下的奇数p（个数）
    $("p:only-child").css("color","00f")//父级元素只有一个p
    
//内容过滤器
    :contains(text):选取含有文本内容为“text”的元素(集合元素)
    :empty:选取不包含后代元素和文本的空元素(集合元素)
    :has(selector):选取含有后代元素并匹配选择器的元素(集合元素)
    :parent:选取后代元素或文本的非空元素(集合元素)
    
//可见性选择器
    :hidden:选取所有不可见元素(集合元素)
    :visible:选取所有可见的元素(集合元素)