操作类名

假设我们有如下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 + [/] 向左或向右移动选中内容

jQuery---操作类名相关推荐

Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
目录 1.jquery操作样式类名代码演示二.添加元素 1.append()演示 2.prepend()演示 3.after()演示 4.before()演示三.jQuery-CSS()方法 1 ...
jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
jQuery操作json
2019独角兽企业重金招聘Python工程师标准>>> 前言在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所 ...
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
jQuery框架学习第四天：使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
[转帖]jQuery框架学习第四天：使用jQuery操作元素的属性与样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
[乐意黎转载]从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
用ajax修改成功怎么返回页面,jquery操作ajax返回的页面元素
这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...
JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
使用jQuery获取类名
本文翻译自:Get class name using jQuery I want to get the class name using jQuery 我想使用jQuery获取类名 And if it ...

jQuery---操作类名