jquery基础

1、jquery是什么
jquery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jquery has changed the way that millions of people write JavaScript
2、jQuery使用入门
版本区别：使用1.x的版本
引入jquery

这个src后面可以写本地jquery路径，也可以写网上的jquery路径
【注】使用jquery一定要标注版本号
选择器
id选择器、类选择器、组合选择器、层级选择器、标签选择器
基本：
:first :last :even :odd :not :eq()
:gt :lt 大于小于某个下标
eq: 下标从0开始
内容：
contains 内容包含某某的
has 子标签里面包含这个选择器的
属性：
input[name]
input[name=user]
input[name!=user]
子元素
:first-child
:last-child
:nth-child 子元素下标从1开始
样式添加、属性获取
css({})
attr(‘class’) 获取属性
attr(‘class’, ‘lala’) 设置属性
removeAttr(‘class’) 删除属性

    prop('checked', true)
        多选、单选：checked
        下拉框：selected
        主要用来默认选中  checked   selected 这种，设置为true代表选中，设置为false代表不选中

    和类名相关
    addClass     添加类名
    removeClass  删除类名
    toggleClass  有这个类名，删除之，没有这个类名，添加之

    和内容相关
    html()   没有参数代表获取内容，有参数代表设置内容
        和innerHTML是一样的
    text()   和innerText是一样的
    val()    没有参数代表获取文本框内容，有参数代表设置文本框内容

    获取宽高\左右边距
    width()   宽度，不带px
    height()  高度，不带px
    offset()  
        两个属性   left、top
js对象和jQuery对象转化
    这两个对象不能调用对方的方法
    var odiv =   js对象
    $(odiv)   将js对象转化为jquery对象
    $('div')   这是jquery对象
    $('div')[0]  将jquery对象转化为js对象
文档处理
    【注】jquery中创建对象
    var $obj = $('<li>段誉</li>')
    这个$obj就是新创建的一个jquery对象
    append
        父节点调用添加子节点
        添加的时候还是使用字符串添加即可
    appendTo
        子节点调用，添加到哪个父节点
    prepend
        和append使用方式一样，往父对象第一个添加
    prependTo
        和appendTo使用方式一样，往第一个添加
    after
        a.after(b)
        a的后面是b
    before
        a.before(b)
        a的前面是b
    insertAfter
        和after正好相反
    insertBefore
        和before正好相反

    删除
    empty
        通过父对象调用，将里面的子节点全部删除
    remove
        通过对象调用，删除符合选择器要求的节点
    clone
        克隆节点
筛选
    eq
        下标从0开始，选中第几个
    first
        选中选择器符合要求的第一个
    last
        选中选择器符合要求的最后一个
    hasClass
        判断当前对象有没有这个类名，返回true和false
    filter
        参数写一个选择器，只要这个选择器的
    slice
        start, end  左闭右开，选中这个区间内所有标签
查找
    children
        直接子节点
        () 参数可以选择器，可以获取指定的子节点
    find
        () 参数是选择器，在父节点下面找指定的子节点，儿子孙子都可以
    next
        指定节点的下一个同胞节点
    nextAll
        指定节点的下面所有同胞节点
    prev
    prevAll
        和上面一样，同胞节点上一个
    parent
        $('li').parent('ul').css('fontSize', '30px')
            li的父亲（必须是ul），修改颜色
        $('li').parent().css('fontSize', '30px')
            只要是li的父亲，修改颜色
    parents
        去找li的父亲（class是erye的父亲）
        $('li').parent('.erye').css('fontSize', '30px')
        去找li的父亲、爷爷、太爷爷。。。(class是erye的祖先)
        $('li').parents('.erye').css('fontSize', '30px')
    siblings
        兄弟、同胞
        没有参数就是所有兄弟节点
        有参数，参数是选择器，筛选指定兄弟节点
事件
    添加事件
        所有的事件将on给去掉
        $('div').click(fn)
    事件绑定
        对应的是js中 addEventListener  removeEventListener
        $('div').on('click', fn1)
        $('div').on('click', fn2)
        $('div').off('click', fn2)
        $('div').one('click', fn)
        如果通过one添加的，那么fn仅会执行一次

        $('div').hover(fn1, fn2)
        意思就是onmouseover触发fn1，onmouseout触发fn2
    取消冒泡
        eve.stopPropagation()
    阻止默认行为发生
        eve.preventDefault()
    获取鼠标的坐标
        eve.pageX
        eve.pageY
动画
    show(second, fn)  显示起来
        second之内显示div
        动画完毕之后，执行fn函数
    hide  隐藏起来
    slidedown  显示出来，下拉
    slideup    隐藏起来，上滑
    slideToggler  是显示，隐藏起来，是隐藏，显示出来
    fadeIn     显示出来
    fadeOut    隐藏起来
    fadeTo     到指定的透明度
    fadeToggle  显示和隐藏之间切换
    animate    自定义动画
        animate({}, second, fn)
        {}  属性的改变
        second 在哪些时间之内改变
        fn  动画完毕之后执行的函数
    stop       停止动画
        $obj.stop()