jQuery(三)

jQuery 操作文本内容

        操作元素内的文本和超文本

        注意: 属于 jQuery 的方法 只能 jquery 元素集合调用, 原生 DOM 不能调用

 1. html()

        使用方法:

          1. 元素集合.html()

            获取该元素的超文本内容, 以字符串的形式返回

          获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容

          2. 元素集合.html('内容')

            设置元素集合内元素的超文本内容

            完全覆盖式的写入

            隐式迭代: 元素集合内有多少元素, 就写入多少元素

 //1. html()// 获取  console.log($('div').html())// 设置  $('div').html('<span>我是新来的</span>')

2. text()

        使用方法:

          1. 元素集合.text()

            获取该元素的文本内容, 以字符串的形式返回

            因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容

            以字符串的形式返回

          2. 元素集合.text('内容')

            设置元素集合内元素的文本内容

            完全覆盖式的写入

            隐式迭代: 元素集合内有多少元素, 就写入多少元素

// 2. text()// 获取    console.log($('div').text())// 设置   $('div').text('<span>我是新来的 span 标签</span>')

3. val()

        使用方法:

          1. 元素集合.val()

            获取元素集合内元素的 value 值

          2. 元素集合.val('内容')

            设置元素集合内元素的 value 值

            完全覆盖式的写入

            隐式迭代: 元素集合内有多少元素, 就写入多少元素

// 3. val()// 获取 console.log($('input').val())// 设置  $('input').val('hello world')

 jQuery 操作元素类名

1. addClass()

        添加元素类名

$('div').addClass('box')

      2. removeClass()

        删除元素类名

$('div').removeClass('box')

      3. hasClass()

        判断有没有类名

console.log($('div').hasClass('box'))

      4. toggleClass()

        切换类名

        如果原先有, 就是删除

        如果原先没有, 就是添加

$('div').toggleClass('box')

jQuery 操作元素样式

css()

        1-1. 语法: 元素集合.css('width')

          获取元素的某一个样式的值, 不管是行内还是非行内都能获取到

  console.log($('div').css('width'))

    console.log($('div').css('height'))

    console.log($('div').css('font-size'))

        1-2. 语法: 元素集合.css('样式名', '样式值')

          设置元素的行内样式

          隐式迭代: 元素集合内有多少元素设置多少元素

          设置的时候, 单位是 px 可以不写

$('div').css('margin', 50).css('opacity', 0.5)

        1-3. 语法: 元素集合.css({ 样式名 1: 样式值 1, 样式名 2: 样式值 2, ... })

          批量给元素设置行内样式

          隐式迭代: 元素集合内有多少元素设置多少元素

          设置的时候, 如果你需要设置的单位是 px 可以不写

$('div').css({   margin: 50,    width: 700 })

jQuery 基础绑定事件

1. on()

        使用方法: 元素集合.on(事件类型, 事件处理函数)

      隐式迭代: 元素集合内有多少元素, 就会给多少元素绑定事件

1. on()     $('li').on('mouseover', function () {       console.log('我被点击了')     })

jQuery 书写选项卡

1. 给所有的 ul 里面的 li 绑定事件

      2. 自己有类名, 所有兄弟没有类名

      3. 所有的元素没有类名, 指定索引

 $('ul > li').on('click', function () {      // DOM元素如果象用 jquery 的方式, 使用 $() 包起来      $(this).addClass('active').siblings().removeClass('active')      // 索引 $(this).index()      $('ol > li').removeClass('active').eq($(this).index()).addClass('active')    })