jquery---选择器

一.jquery

定义：是一个js库，里面封装了js的一些基本方法，简单来说，jq简化了js的对DOM的操作
选择器：简化了获取元素的过程

基本选择器：
        $(选择器)-----参数：选择器，class选择器，id选择器,标签选择器...
        $("btn")-----可获取多个元素，jq中已经直接遍历完成
        $(#btn1)
        $("div")----
        $("*")------，
        $(".div1,.btn")----选择class属性选择器.div1和.btn的元素，是并集选择器
        $("div.span")------交集选择器
        $("div span")------后代选择器，选择div后面的所有的span后代元素
        $("div>span")------子代选择器，选择div后面的所有的子代span元素
        $("div+span")------相邻选择器，选择div后面紧挨着的下一个span元素
        $("div~p")---------兄弟选择器，选择div后面的所有的兄弟p元素，并列同一级的p元素

二.基本过滤选择器：简化数组元素的操作

基本过滤选择器：
            ----$("li:eq(1)")-----选择索引为1的那个li元素
                ----$("div:eq("+index+")")------查找div中索引为index变量的元素
            ----$("li:even")------选择索引为偶数的元素
            ----$("li:odd")-------选择索引为奇数的元素
            ----$("li:first")-----选择匹配到的第一个元素
            ----$("li:last")------选择匹配到的最后一个元素
            ----$("li:gt(3)")-----选择索引大于3的li元素
            ----$("li:It(3)")-----选择索引小于3的li元素

三.筛选选择器：简化节点的操作

筛选选择器：
            ----$("div").children(".dv")-----查找div元素下的直接子元素，亲儿子，class属性为.dv的元素
            ----$("div").siblings(".dv")-----查找div元素下的所有兄弟节点，并不包括本身
            ----$("div").parent("#dv")-----查找div元素的id名为dv的元素的父亲节点
            ----$("div").find("li")--------查找div元素下的所有li元素后代，包括孙子，儿子

四.jq和js的入口函数

  $(document).ready(function(){     //jq的入口函数,文档加载完成后，就执行。
                                          //原生js的入口函数是等所有的资源加载完成，包括图片等
            ...
            $(#btn1).click(function(){
                $("div").show();
            });
        });
        //jq的入口函数简写
        $(function(){
            console.log("jquery的入口函数")
        })
js的入口函数
window.function(){...}

五.js和jq对象

jq和js对象
        js对象：通过DOM方式获取的元素皆为js对象
        jq对象：通过jq方式获取的元素皆为jq对象，$(...)，，，jq对象相当于是js对象的伪数组，里面存放了大量的js对象
        jq对象转变成js对象：
            -----jq对象[索引]，jq对象.get(索引)
            -----只有转化js对象才可调用js对象的属性和方法
            -----$(div).style.backgroundColor="red";

        js对象转换为jq对象：
            -----$(js对象名---不加引号)
            -----var first=document.getelementById("first");
            -----$(first).text("开始");

        jq设置样式
            -----jq对象.css("backgroundColor","red");
            -----$("div").css("color","red");

        jq的方法：
           $("div").hide();------div隐藏
           $("div").show();------div展现
           $("div").fadeIn();----淡入隐藏的元素-----默认是隐藏的，透明度增加
           $("div").fadeOut();------淡出可见元素------默认为可见，改变的为透明度减少