jQuery - 详解

 jquery介绍
    jquery最大的价值就是兼容性好
    主要使用于pc端

查看网站是否使用jquery
    window.$

获取网站所使用的jquery的版本
    window.$.fn.jquery

jquery的入口函数
    $( function () {} )  等同于 js的window.onload = function () {}

jquery的事件类型
    $("div").click(  function (){} )  点击
    $("div").hide(1000)  隐藏 参数 - 隐藏的时间
    $("div").show( 1000 ) 显示
    $("div").mouseover() 鼠标移入
    $("div").mouseout() 鼠标移出
    $("div").hover(function(){} , function (){})  代表着移入与移出 - 第一个函数代表移入 第二个代表移出

jquery选择器
    1 $("div") 属性选择器
    2 $(".div") 类选择器
    3 $("#div") id选择器
    4 $("div:eq(0)") 伪类选择器 - 索引
    4.1 $("li:even") 伪类选择器 - 偶数
    5 $('[type="button"]') 
    6 $(":disabled") 获取到被禁用的元素
    7 $(".father .son") 获取到子元素.son
    7.1 $(".father").children(".son") 取到子元素.son
    8 $(".btn1,.btn2")  并集选择器 同时获取到两个元素

jquery的属性方法
    控制(修改)css的样式  -  以传入一个{}大括号对象的形式作为参数 里面的属性值为 键值对 就可修改多个属性值
        $("div").css( { width:200, height: 200, backgroundColor: "pink" } )

    获取目标元素的某一个值 并且弹出 - 如果只传入一个属性值 就是获取该属性的值
         var width =  $("div").css( "width" );
         alert( width );

     添加css类 - 添加的css类 不需要添加. 或者# 并且可以添加多个类 只要空格隔开就行
        $("div").addClass("box");

     移除css类
        $("div").removeClass("box");

    检测是否添加了css类 - 有则返回true 没有则返回false
        $("div").hasClass("box");

    切换css类 - 原理：添加类 / 移除类 - 可同时添加多个类或移除多个类
        $("div").toggleClass("box");

    .eq(索引值) 索引 - 获取到索引为几的元素
        $("div").eq(0).addClass("box");  当有两个div时 只给第一个div添加box样式

    $(this)代表当前

    .siblings()选中兄弟元素 使用siblings实现jq排他效果

       
            (button{$})*5   添加5个button元素
       

        jq入口函数
        $(function () {
            注册事件
            $("button").click(function (){
            $(this) 代表当前
            $(this).css( {backgroundColor: "pink"} );
            .siblings() 只会选中兄弟元素
            $(this).siblings().css( {backgroundColor: ""} )
        })
      })

    .parent() 父级关系 通过函数形式查找父级
        $(this).parent().parent() - 找到当前元素的父级的父级

    .parents( "body/html" ) 祖先 - 通过函数的形式查找到祖先 - 需要写入查找的祖先值

    .children() 子级 - 通过函数的形式获取子级元素
        $("div").children(".son")  当有两个子元素时 可直接输入需要获取的子元素

    .index() 索引 - 通过函数的形式获取到索引值
        $(this).index(); - 获取当前元素的索引值