jQuery笔记

// 文档遍历和操作

    // 1）获取页面标签

    // 2）设置标签的样式

    // 3）设置标签的文本

    // 4）设置标签的属性

    // 5）删除标签、添加标签

    // 1) 获取页面标签

    // 选择器函数 $()

    // $('.box')

    // $('#time')

    // $('ul li')   //jquery对象(存放了所有的li)

    // 1.获取目标元素的所有子元素

    $('ul').children()

    // 2.获取目标元素的父元素

    $('li').eq(0).parent()

    // 3.获取目标元素的兄弟元素

    $('li').eq(0).siblings()

    // 4.获取目标元素相邻的下一个元素

    $('li').eq(0).next()

    // 5.获取目标元素相邻的上一个元素

    $('li').eq(1).prev()

    // 6.找到ul标签下的.aaa标签

    $('ul').find('.aaa')

 

    // 2)设置标签样式

    // 在css方法中封装了循环，叫做内部循环、隐式迭代

    // 1.写法一

    $('ul li').css('color', 'red')

    // 2.写法二

    $('.box').css({ width: 100, height: 100, backgroundColor: 'red' })

 

    // 3)设置标签的文本

    // 1.纯文本 text()

    $('.box').text('111111111122222')

    // 2.超文本 html()

    $('#item').html('<i>abc</i>')

    // 3.获取输入框的值

    console.log($('input').val())

 

    // 4)设置标签属性

    // class id src title href

    // 1.设置属性attr()

    $('img').attr('src', './作业/image/one1.jpg')

    $('img').attr('class', 'imgs')

    // 2.删除属性removeAttr()

    $('img').removeAttr('class')

 

    // 5)删除标签、添加标签

    // 1.往目标元素的尾部追加渲染字符串 append()

    $('.box').append('<h3>8</h3>')

    // 2.往目标元素的首位添加渲染字符串 prepend()

    $('.box').prepend('<h3>7</h3>')

    // 3.删除标签 remove()

    $('h3').remove()

    $('.box').html('')

    $('.box').empty()

 

    // 事件处理

    // 1.写法1

    $('.box').click(function () {

      console.log(1)

      console.log(this) //dom对象 ，事件的调用者

      console.log($(this)) //jQuery对象

    })

    // 2.写法2

    $('.box').bind('click mousemove', function () {

      console.log(1)

    })

    // 3.写法3(可以事件委托)

    $('ul').delegate('li', 'click', function () {

      console.log(1)

    })

    // 4.写法4(推荐)

    $('ul').on('click', function () {

      console.log(1)

    })

    // 事件委托

    $('ul').on('li', 'click', function () {

      console.log(1)

    })