jQuery小复习-----（选择器、筛选器、标签对象的转化、属性操作、class操作、隐式迭代、循环遍历、选项卡demo、内容操作、事件绑定、节点操作）

jQuery
一,基本介绍
    jQuery是JavaScript的函数方法库
    jQuery中定义的都是函数方法,没有声明变量等基本操作

    使用是,通过加载外部文件,通过 $() 和 jQuery() 来进行操作

    优点:
        1,选择器
        2,链式编程
        3,隐式迭代

二,选择器  --- 获取到的都是伪数组
    $('')   可以写任意js,css,等支持的语法形式

    $('#id属性值')
    $('.class属性值')
    $('标签名称')
    $('[属性="属性值"]')
    $('标签结构')
    $('ul>li')
    $('ul li')
    $('div+p')
    $('div~p')
    $('标签结构:伪类选择器')
    按照标签顺序,与css语法相同
    $('ul>li:first-child')       $('ul>li:first-of-type')
    $('ul>li:last-child')        $('ul>li:last-of-type')
    $('ul>li:nth-child()')       $('ul>li:nth-of-type()')
    $('ul>li:nth-child(odd)')    $('ul>li:nth-of-type(odd)')
    $('ul>li:nth-child(even)')   $('ul>li:nth-of-type(even)')
    按照标签的索引,jQuery语法
    $('ul>li:first')
    $('ul>li:last')
    $('ul>li:eq()')
    $('ul>li:odd')
    $('ul>li:even')

三,筛选器   在选择器基础上,做筛选
    $().first        第一个
    $().last         最后一个
    $().eq()         按照索引查找
    $().perv()       上一个兄弟
    $().next()       下一个兄弟
    $().prevAll()    上所有的兄弟
    $().nextAll()    下所有的兄弟
    $().siblings()   所有兄弟
    $().parent()     直接父级
    $().parents()    所有父级
    $().children()   所有子级
    $().find()       在子级标签中,按照条件查找
    $().index()      获取当前标签在父级中的索引

四,标签对象的转化
    1,JavaScript标签对象,不能用jQuery语法操作
    2,jQuery对象也不能用,JavaScript语法操作
    3,相互转化
        $(js标签)  --- 转化为 jQuery标签对象
        $()[索引]  --- jQuery标签对象转化为 js标签对象

五,属性操作
    1, $().prop() 操作 布尔属性
    2, $().attr() 操作 其他所有属性
    3, 使用 $().removeProp() 只能删除 $().prop() 添加的
    4, 使用 $().removeAttr() 删除一切
    
六,class的操作
    1,$().addClass()       新增class属性值
    2,$().removeClass()    删除class属性值
    3,$().toggleClass()    切换class属性值,有就删除,没有就添加
    4,$().hasClass()       查询是否有这个class属性值

七,隐式迭代
    1,jQuery会默认对标签对象伪数组中所有的单元进行操作
    2,如果是设定,会给所有的标签对象,都进行设定
    3,如果是获取,只会获取第一个标签的数据信息

八,循环遍历
    1, $().each(function(key,item){})
    2, 只有两个参数,第一个参数是索引,第二个参数是数据,这里是标签对象

九,选项卡demo
    思路与之前的思路相同,只是使用jQuery语法来操作

十,内容的操作
    1, $().html()    类比 innerHTML
    2, $().text()    类比 innerText
    3, $().val()     累不 标签对象.value

十一,css样式操作
    1, $().css('属性')                       获取css属性的属性值
    2, $().css('属性','属性值')              设定css属性的属性值
    3, $().css({属性:属性值,属性:属性值})     设定css属性的属性值
    说明: 不同考虑兼容问题,可以直接获取标签的执行样式
            带有 -减号 的属性 可以直接写成 font-size 或者 fontSize 都可以

十二,事件绑定
    1, 简单语法
        jQuery支持的事件类型,可以直接绑定给标签
        $().click(function(){})

    2, on语法
        $().on('事件类型' , 事件处理函数(){} );            直接绑定
        $().on('事件类型' , '条件' , 事件处理函数(){} );    事件委托
            条件可以是 jQuery选择器支持的任意语法形式

        $().on('事件类型' , {  } ,事件处理函数(e){} );      传递数据
            传递的数据,jQuery存储在 e.data中
        
        $().on('事件类型' , '条件' , {  } ,事件处理函数(e){} );  事件委托+传递数据

    3, 特殊的事件绑定
        $().one('事件类型' , 事件处理函数(){})              只执行一次
        $().hover(事件处理函数(){} , 事件处理函数(){})      hover
            参数1: 鼠标移入事件  --- 类比 mouseenter   子级不会触发
            参数2: 鼠标移出事件  --- 累不 mouseleave
        $().trigger('事件类型')     直接执行指定事件类型已经绑定的事件处理函数
        $(window).ready      页面标签都加载完毕,就认为页面加载完毕

十三,节点操作
    1, 创建节点: 直接以字符串形式定义一个标签,存储在js声明的变量中
        const 变量 = $('标签内容');

    2,写入标签节点
        父子
            在结束
                $('父级标签').append(写入标签)
                写入标签.appendTo( $('父级标签') )
            在起始
                $('父级标签').prepend(写入标签)
                写入标签.prependTO( $('父级标签') )

        兄弟
            在之前
                $(已有标签).before(写入标签)
                写入标签.insertBefore( $(已有标签) )

            在之后
                $(已有标签).after(写入标签)
                写入标签.insertAfter( $(已有标签) )