jQuery

jquery:就是对JS的封装
先前在JS中要获取元素：document.getElementById("id值")；代码还是很多
当我们把他封装后:
function getEle(id值){
return    document.getElementById("id值")；
}
就可以使用为：
但是获取元素的方法不止这一个，这样的话代码还是很麻烦
jquery做的事情：
$("选择器")======>就可以获取元素
///
jquery:就是一个JS类库
对常用的JS方法和对象进行封装

jquery:

1.jQuery 和html 的整合：
    jquery 是单独的JS文件（将JS的库导入你的代码）
        通过<script></scrip>标签中的src属性导入
使用：    获取元素，使用$("选择器")或者是jQuery("选择器")就可以获取元素对象
                    选择器就是CSS中学习过的选择器
2.dom 对象和jquery 的转换：
        dom>>>>>>>jquery:  $(dom 对象)
            注意：jQuery和dom 的方法不能混用，改什么对象就用什么方法
        jquery>>>>>dom:
            jquery对象[index]
            jquery对象.get(index)

3.在之前的代码中页面加载：
JS:
    οnlοad=function(){....}//在代码中只能出现一次
jquery://在代码中可以出现多次
    $(function(){....})
    $(document).ready(function(){...})    
4.事件和函数的绑定
    源生JS中：
        dom 对象.οnclick="function(){...}";
    在Jquery 中更多是使用派发事件的方式来实现事件和函数的绑定，这样就不用去更改html 的代码
        $("选择器").click(function(){....});
                jquery 中的事件就是将Js中的事件去掉on    
    在jquery 中的常见事件：
                1.页面加载事件，已经被$(function(){...}):代替
                2.submit
                3.click
                4.change
                5.focus
                6.blur
5.往标签体中写入内容：
    源生JS：dom 对象.innerHTML="";
    jquery:$("选择器").html="";    
6.Jquery 中的效果:之前写页面的广告时使用对的是页面加载事件，用的是display 效果
    1.隐藏或者展示：show(毫秒值)   hide(毫秒值)
        显示或者隐藏的切换（显示就隐藏，隐藏的就显示）    toggle(毫秒值);
    2.滑入滑出：slideDown(毫秒值)  slideUp(毫秒值)
        滑入滑出的自动切换 :  sildeToggle(毫秒值)
    3.淡入淡出：fadeIn(int)  fadeOut(int)
        淡入淡出的自动切换：  fadeToggle(毫秒值)    
jquery 的使用宗旨：用的更多写的更少                    
案例一：弹出广告
技术：1.定时器
     2.使用jquery 来操作
1.页面加载后设置定时器：
        $(function(){setTimeOut()})//执行一次
2.编写显示函数：
        获取元素，调用方法效果     
        再设置一个定时器，用于隐藏
3.编写隐藏函数的方法     

jQuery中的选择器总结：

1.基本选择器：
        $("#id的值")    $(".class的值")    $("标签名") $("*")选择所有元素
        了解：获取多个选择器，用逗号隔开
            $("#id值，.class值，标签名")
2.层次选择器：
        $("a b"):a 标签的所有b 后代
        $("a>b"):a 下面的b 标签
        $("a+b"):a 的下一个弟弟（和a同级的下一个标签）
        $("a~b"):a 的所有弟弟（与a同级的在a 之后的所有标签）
3.选择过滤器：            
   1. 基本过滤选择器：
        :first:第一个
        :last:最后一个
      ：odd 奇数（索引）
        :even:偶数（索引）
        :eq(index):指定索引
        :gt(index):大于
        :lt(index):      小于
    2.内容过滤器：
        ：has("选择器")：包含指定选择器的元素
                例如：选取含有class为mini元素 的div元素
                $("div:has('.mini')").css("background-color","red");
    3.可见选择器：
        :visible:可见
        :hidden:  隐藏（在页面上不显示的）一般指的 input typey="hidden"  或者 display="none "
4.属性过滤器：
        [属性名]
        [属性名="指定值"]
5.表单选择器：
        :input ：特别的讲一下过滤器，:input 表示form 中的所有子标签
                和单独的input 表示的就只有表单下的<input></input>
        :text 
        :password 
        :radio 
        :checkbox 
        :submit 
        :image 
        :reset 
        :button 
        :file 
        :hidden 
//
案例：隔行换色：
技术分析：1.页面加载
        2.获取所有的奇数行，添加css
          获取偶数行  添加css

//

jQuery对css 属性操作：

    attr():对属性的设置或者是获取
        attr("属性名称");获取
        attr("属性名称"，"值")：设置
        设置多个属性值：
            attr({"属性1"："值"，
                "属性2"："值"
            })
    removeAttr("属性名称"):删除属性
    addClass("指定的样式值")
    removeClass("指定的样式值")    
    因为attr 存在bug 所以1.6版本之后基本就用prop
///
    
对css 的操作：操作元素的style 属性
        css("属性名"):获取
        设置：
        css("属性名"，"值")
        css({
            "属性1"："值",
            "属性2"："值"
        })
        获取元素的尺寸：
                width();
                heigth();
///
案例：省市联动：
步骤分析:
        1.确定事件，省份下拉选择变化时，change
        2.编写函数：
            1.获取当前省市的value
            2.通过遍历数组获取该省下的所有市，返回一个数组
            3.遍历数组，拼装成option 元素，追加到市的下拉选项中
            在每次选择一个省后要注意    初始化值
    遍历数组：
            数组.each(function(){对数组的操作})；
            $.each(数组,function(){});
    设置或者获取value 的属性：
            jquery 对象.val():获取
            jQuery 对象.val(".."):设置他的内容
    设置或者获取标签体的内容：
            html();获取的市html 的源码
            text();获取的是页面上显示的内容
            两者的区别：
                设置：
                    $div.html("<a href=#>我是一个超链接</a>");
                    $div.text("<a href=#>我是一个超链接</a>");
                获取：
创建元素：
$(<><>):直接写