JQuery的基本使用

// 1. $() 拿到jquery对象
            //2.拿到对应的标签 CSS的选择器的写法
            
            console.log($('#main .word'))
            console.log($('p'))
            // 3. 查看拿到的标签中的属性值
            console.log($('#main .word').attr('class'))
             // 4. 改变拿到的标签中的属性值
             $('#main .pic img').attr('src', 'image/img_01.jpg')
             
             $('#main .pic img').attr({
                 'src': 'image/img_01.jpg', 
                 'width': '50px',
                 })
            // 5.查看标签中的内容
            console.log($('#main .word p').text())
            //6. 改变里面的内容
            $('#main .word p').text('我是改变的文字')
            // 7.事件
            $('button').eq(0).on('click',function(){
                $('p').show()
                $('img').show()
            })
            // 隐藏 
            $('button').eq(1).on('click',function(){
                $('p').hide()
                $('img').hide()
            })
            //自动开关
            $('button').eq(2).on('click',function(){
                $('p').toggle()
                $('img').toggle()
            })
            
            //8. 遍历
            var numbers = [12, 22, 45, 23, 455, 479]
            $.each(numbers, function(index,data){
                // 也可以用this来代表当前的额元素
                console.log(data + '-'+index)
            })
            //9 取元素对应的下标
            console.log($.inArray(23,numbers))
            
            //10 写 css
            
            $('#main .word').css({
                background : 'red',
                border : '1px black solid'
            });