jquery

选择器:和css一样   返回的是一个伪数组对象
        $('p')
        $('input[name="username"]')
        $('li').first() //选中第一个li
        $('li').last() //选中最后一个li
        $('ul li:nth-child(2)')
        $('.li1').parent() //选中li的第一个父节点
        $('.li1').parents()//选中li的所有父节点
        $('ul').children()  //选中所有ul下面的子元素
        $('ul').find('.li1')//找ul下面所有class为li1的元素
        $('ul').prev() //向前找兄弟
        $('ul').prevAll()//前面全部兄弟
        $('ul').next()//向后找兄弟
        $('ul').nextAll()
        $('ul').siblings()//找所有兄弟
        $('li').eq(2) //通过下标找元素
        $('.li1').index() //获取元素在父元素中下标

设置内容
        $('h2').text('hello')
        $('h2').html('<h1>标题</h1>')
        $('input').val('你好')
        let s = $('h2').html() //获取内容

操作属性
        $('h2').prop('class', 'box') //添加属性,不能添加自定义属性
        $('h2').attr('index-s', 6)   //添加自定义属性
        let k = $('h2').prop('class') //获取属性
        let l = $('h2').attr('index-s')
        //获取选中状态时,prop返回布尔值,attr返回的是checked或undefind
        $('h2').removeAttr('index-s') //移除属性

 操作样式
        $('h2').css('color', 'red') //添加行内样式
        $('h2').css({'width': '500px','height': '200px'})
        $('h2').addClass('box4') //添加class名
        $('h2').removeClass('box4') //移除class名
        $('h2').toggleClass('box4') //如果有就移除,没有就是添加

事件
        $('button').on('click', function () { })
        $('button').click(function () {  })
            // 鼠标移入移除
        $('button').hover(function () {
            console.log('鼠标移入触发');
        }, function () {
            console.log('鼠标移除触发');
        })
            //绑定事件且传参
        $('button').on('click', { name: 'jack'}, function (e) {
            console.log(e.data); //data关键字 {name:'jack'}
        })
            //button事件委托给div
        $('div').on('click', 'button', {name: 'rose'}, function (e) {
            console.log(e.data);
        })

        $('button').off('click') // 移除点击事件
        $('button').off()    //移除所有事件
        $('button').one('click', function () {
            //只执行一次的事件
        })
        //自动触发事件
        $('button').trigger('click')
        //解除之前的绑定事件,然后重新绑定事件,使其覆盖
        $('button').unbind('click').click(function () {
            console.log(6);
        })

        $(document).ready(function () {
            //浏览器加载完成触发事件
        })
        $(function () {
            //浏览器加载完成触发事件简写
        }) 

        jq遍历获取伪数组,方法同数组的遍历,但是第一个参数是索引,第二个是值
        $('li').each(function (index, itme) {
            if (index == 0) {
                return false
            } //false为结束遍历,true为结束本次遍历,继续下次遍历
        })

        动态节点操作
        //创建一个p标签内容为hello添加在父元素div里最后面
        $('div').append($('<p>').text('hello'))
        //创建一个p标签内容为jq1添加在父元素div里最前面
        $('div').prepend($('<p>').text('jq1'))
        //给p标签后面添加节点  (同级)
        $('p').after($('<p>').text('hello'))
        //给P标签前面添加节点  (同级)
        $('p').before($('<p>').text('jq1'))

        //移除所有子节点包含当前节点
        $('div').remove()
        //移除所有子节点
        $('p').empty()
        //创建一个h2节点替换替换所有的p节点
        $('h2').replaceAll($('p'))
        //复制一个p节点
        $('p').clone()
        //有两个参数,true代表事件一起复制false代表不复制事件,默认false

        获取及设置元素宽高
        console.log($('div').width());
        //设置 
        $('div').width(200)
        //获取宽高+内边距
        console.log($('div').innerWidth());
        //获取宽高+内边距+边框
        console.log($('div').outerWidth());

        //获取位置 没有单位 相对页面
        console.log($('div').offset());
        console.log($('div').offset().top);
        //设置位置 不加单位
        $('#box div').offset({
            top: 50,
            left: 50
        })
        //设置相对于父元素,行内样式
        $('#box div').css({
            top: 50,
            left: 50
        })
        //获取相对于父元素的位置
        console.log($('#box div').position())

        转换
        console.log($(divEle));
        //DOM转jq
        const divEle2 = $('div').get(0)
        //jq转DOM,只能转第一个