jQuery---操作类名

操作类名

假设我们有如下HTML标签，接下来的几个方法都会用到这些标签：

  <h1>Hello jQuery</h1>
  <h1>Hello jQuery</h1>
  <h1>Hello jQuery</h1>

addClass( ) 为集合中的每个元素添加类名。

  // 使用 addClass() 为 jQ 集合中的所有元素添加类名 heading
  $('h1').addClass('heading')
  // 也可以一次添加多个类名，类名之间以空格分隔
  $('h1').addClass('heading greeting hello')

removeClass( ) 删除集合中元素的类名。

  // 3. 使用 removeClass() 删除 jQuery 集合中所有元素的类名
  $('h1').removeClass('heading')
  // 也可以一次删除多个类名，类名之间以空格分隔
  $('h1').removeClass('heading greeting')
  // 如果不指定要删除的类名，则删除所有类名
  $('h1').removeClass()

hasClass( ) 判断集合中的元素是包含指定的类名。

使用hasClass()判断集合中是否具有包含某个类名的元素，包含返回 true，否则返回false

  console.log($('h1').hasClass('heading'))

toggleClass( ) 切换集合中元素的类名。

  // 4. 使用 toggleClass() 切换 jQ 集合中所有元素的类名
  $('h1').toggleClass('greeting')

操作样式 css(name)

//获取或设置元素的行内样式。
    // 1. 使用 css() 方法设置行内样式
    $('#heading1').css('color', '#ff00ff')
    $('#heading1').css('background-color', function() {return '#dbdbdb'})  // 不常用
    $('#heading1').css({
      margin: '80px auto',
      padding: '20px',
      border: '5px solid #666',
      color: '#ff00ff',
      backgroundColor: '#dbdbdb'
    })
    // 2. 使用 css() 方法获取行内样式属性的值
console.log($('#heading1').css('color'))
    console.log($('#heading1').css(['color', 'padding']))

height()

获取jQuery集合中第一个元素的宽度，或者设置jQuery集合中所有元素的宽度。

width()

获取jQuery集合中第一个元素的高度，或者设置jQuery集合中所有元素的高度。

innerHeight()

获取jQuery集合中第一个元素的内部高度，包括padding，但是不包括border，或者设置jQuery集合中所有元素的内部高度。

innerWidth()

获取jQuery集合中第一个元素的内部宽度，包括padding，但是不包括border，或者设置jQuery集合中所有元素的内部宽度。

outerHeight()

获取元素的外部高度，包括padding和border，但是margin是可选的，默认不包括margin

outerWidth()

获取元素的外部宽度，包括padding和border，但是margin是可选的，默认不包括margin

offset()

• offset()：获取集合中第一个元素相对于文档的当前坐标。
• offset(coordinates)：设置集合中所有元素的当前坐标（以像素为单位），相对于文档。

    // 获取集合中第一个元素相对于文档的坐标
    console.log($('#box1').offset());
    
    // 设置元素相对于文档的坐标
    $('#box1').offset({
      left: 40,
      top: 40
    })

position() 返回匹配集合元素中第一个元素的偏移父辈位置（像素）。

    // 获取 box2 相对于 box1 的坐标
    console.log($('#box2').position());

操作属性

attr() 获取或设置标签的属性。

  <h1 id="heading" class="greeting">Hello World!</h1>

    // 获取标签的 class 属性的值
    $('#heading').attr('class')
    // 为标签添加 title 属性
    $('#heading').attr('title', 'Hello World!')
    // 一次为标签添加多个属性
    $('#heading').attr({
      title: 'Hello World!',
      style: 'color: red'
    })  

removeAttr() 删除标签的属性。

    // 删除标签的属性
    $('#heading').removeAttr('class')
    // 一次删除多个标签属性，属性名之间以空格分隔
    $('#heading').removeAttr('class style')
    // 不能一下删除所有属性

prop() 获取或设置元素的属性。

  <h1 id="heading" class="greeting">Hello World!</h1>

    // 获取元素的属性值，不能一次获取多个属性的值
    console.log($('#heading').prop('className'))
    console.log($('#heading').prop('innerText'))

    // 修改元素属性的值
    $('#heading').prop('innerText', '你好，世界！')
    // 一次修改多个属性的值
    $('#heading').prop({
      innerText: '你好，世界！',
      id: 'greeting',
      className: 'heading'
    })

removeProp() 删除元素的属性。

    // 删除元素的属性（元素的某些属性默认是只读的，不能删除）
    // 为元素自定的属性是可以被删除的
    var heading = $('#heading').prop({
      myname: '王庆'
    })

    console.log(heading)
    // 删除自定义的属性
    heading.removeProp('myname')

    console.log(heading)

data() 为元素绑定数据

    // 使用jQ获取自定义属性的值
    console.log($('#heading').data('myName'))
    console.log($('#heading').data('my-name'))
    console.log($('#heading').data())
    // 为元素绑定数据，jQ 会自动生成一个随机对象，并将数据存到对象中
    // 注意，我们在标签中自定义的属性也会被自动添加到该对象中
    // $('#heading').data('myWeight', 80)
    $('#heading').data({
      myWeight: 80,
      myAddress: '郑州'
    })

removeData() 删除元素上绑定的数据

    // 删除除数据
    $('#heading').removeData()  // 删除所有
    $('#heading').removeData('myWeight')  // 删除一个数据
    $('#heading').removeData(['myWeight', 'myAddress'])  // 删除多个数据

val() 获取或设置表单元素的值。

html([htmlString])
//获取或设置集合中元素的HTML内容。
text(text)
//获取或设置集合中元素的文本内容。

复制元素 clone()

•	clone([withDataAndEvents, deepWithDataAndEvents])
复制元素。可以通过参数来指定是否要复制元素以及子元素上绑定的事件和数据。

  <div id="box1">
    <div id="box2">Hello World!</div>
  </div>

    // 使用 clone() 方法复制元素，该方法需要两个布尔类型的参数，不传则默认为 false
    // 第一个参数，指定是否复制元素自身的事件和绑定的数据
    // 第二个参数，指定是否复制子元素上的事件和绑定的数据

    // 为 box1 和 box2 注册事件处理函数
    $('#box1').on('click', function() {
      $(this).css('background-color', 'red')
    });

    $('#box2').on('click', function() {
      $(this).css('background-color', 'blue')
    });

    // 如果第一参数设置为 true，则第二个参数默认也是 true
    // $('#box1').clone(true).appendTo('body')
    
    // 如果你想让第二参数为 false，则需要将其手动设置成 false
    // $('#box1').clone(true, false).appendTo('body')
    
    // 如果第一参数设置为 false，则第二个参数默认也是 false
    // $('#box1').clone(false).appendTo('body')
    
    // 只有第一个参数为 true 时，第二个参数才起作用
    // 如果第一参数设置为 false，则第二个参数即使设置成 true 也不起作用
    $('#box1').clone(false, true).appendTo('body')

包裹目标元素

wrap(wrappingElement)使用指定的元素分别包裹集合中的每一个元素。

wrapAll(wrappingElement)使用指定的元素统一包裹集合中的所有元素。

wrapInner(wrappingElement)使用指定的元素分别包裹集合中每个元素的内容，包括文本内容。

unwrap([selector]) 删除集合中每个元素的包裹元素。如果指定选择器，则只删除匹配选择器的包裹元素。

    // 使用 div 元素包裹jQ集合中的每一个 p 元素
    $('p').wrap('<div></div>')
    
    // 使用一个 div 元素包裹jQ集合中的所有 p 元素
    $('p').wrapAll('<div></div>')
    
    // 使用 a 元素包裹jq集合中每个 p 元素的子元素
    $('p').wrapInner('<a href=""></a>')

    //（删除每个 span 元素的父元素）
    $('span').unwrap()

向目标元素内部插入内容

append(content,[content])
在集合中元素的后面插入内容（content）。

appendTo(target)
将集合中的元素追加到目标元素（target）内容的后面。

prepend(content,[content])
在集合中元素的前面插入内容（content）。

prependTo(target)
将集合中的元素追加到目标元素（target）内容的前面。

向目标元素外部插入内容
after(content,[content])

在集合中元素的后面插入内容。
before(content,[content])

在集合中元素的前面插入内容。
insertAfter(target)

将集合中的元素插入到目标元素（target）的后面。
insertBefore(target)

将集合中的元素插入到目标元素（target）的前面。
删除目标元素
remove([selector])

从页面上删除集合中的所有元素及其内容，包括事件监听器和数据。如果设置选择器，则删除集合中匹配选择器的元素。
empty()

删除集合中所有元素的内容，元素本身不会被删除。
detach([selector])

从页面上删除集合中的所有元素及其内容，但是保留事件监听器和数据。可以通过选择器过滤出要删除的元素。
替换目标元素
replaceAll(target)

使用集合中的元素替换所有的目标元素。
replaceWith(newContent)

使用新元素替换集合中的所有元素。

    // 替换jq集合中每一个元素
    $('span').replaceWith('<a href="">box</a>')

    $('<a href="">box</a>').replaceAll('span')

生词表

toggle [ˈtɑːɡl] v. (两种状态之间)切换，转换
append [əˈpend] v. (在文章后面)附加，增补
prepend 将…前置
wrap [ræp] v. 包，裹(礼物等);用…包裹(或包扎、覆盖等);用…缠绕(或围紧)
detach [dɪˈtætʃ] v. 拆卸;(使)分开，脱离;挣脱;摆脱;离开;派遣;分遣;分派
快捷键

shift + alt + up/down 向上复制选中的内容或向下复制选中的内容
alt + up/down 向上或向下移动选中的内容
ctrl + [/] 向左或向右移动选中内容