【前端之Jquery操作类名、操作样式、操作属性的基本语法知识】

前端之Jquery操作类名、操作样式、操作属性的基本语法知识

我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS；
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用，希望能够对你们有些帮助。

1. JQuery操作类名
2. JQuery操作样式
3. JQuery操作属性
4. 总结

1.JQuery操作类名

addClass()、removeClass()、toggleClass()

  <div class="a b c d"></div>
<button>切换</button>

1. addClass()
   ==语法: 元素集合.addClass(需要添加的类名) ==

$('div').addClass('e')

2. removeClass()
   语法: 元素集合.removeClass(你要删除的类名)

$('div').removeClass('b')

3. toggleClass()
   语法: 元素集合.toggleClass(你要切换的类名)
   // 语法: 元素集合.toggleClass(你要切换的类名)
   // 切换: 如果本身有这个类名, 那么就是删除, 如果本身没有这个类名, 那么就是添加

var btn = document.querySelector('button')
btn.onclick = function () {
  // 执行 jQuery 切换 div 类名的操作
  $('div').toggleClass('box')
}

2.jquery操作样式

css()

1. css 获取样式
   注意: 可以获取到元素的行内样式, 也可以获取到元素的非行内样式
   语法: 元素集合.css(你要获取的样式名称)
   返回值: 该样式的样式值

console.log($('div').css('width'))
console.log($('div').css('height'))
console.log($('div').css('background-color'))

2. css 设置样式
语法: 元素集合.css(样式名, 样式值)
注意: 当你需要给一个元素设置样式值为 px 单位的时候, 可以省略单位不写

$('div').css('width', '300px')
$('div').css('height', 500)
$('div').css('background-color', 'red')

3. css 批量设置样式
语法: 元素集合.css({ 你所有需要设置的样式 })

$('div').css({
  width: 260,
  height: 320,
  opacity: 0.68,
  'background-color': 'purple'
})

3.jquery操作属性

attr()、removeAttr()、prop()、removeProp()

1. attr()
   可以进行设置和获取元素的属性
   注意: 一般用于操作元素的自定义属性；attr 操作的所有属性都会直接出现在元素的标签身上。

<div id="box" hello="world"> 我是一个 div 标签 </div>

获取:
语法: 元素.attr(你要获取的属性名)
返回值: 该属性名对应的属性值

// 1-1. attr() 获取
console.log($('div').attr('hello'))
console.log($('div').attr('id'))

设置:
语法: 元素.attr(属性名, 属性值)

// 1-2. attr() 设置
$('div').attr('a', 100)
$('div').attr('id', 'container')

2. removeAttr()
对元素的属性进行删除操作
语法: 元素集合.removeAttr(你要删除的属性名)

// 1-3. removeAttr()
$('div').removeAttr('hello')
$('div').removeAttr('id')

3. prop()
可以获取和设置元素的属性
注意:当 prop 设置元素的原生属性, 会直接响应在元素标签身上；当 prop 设置元素自定义属性, 不会直接响应在元素标签身上, 会响应在元素对象身上。
注意: prop 方法不能获取元素标签身上的自定义属性, 只能获取到 prop 方法自己设置的自定义属性。

<div id="box" hello="world"> 我是一个 div 标签 </div>

prop() 设置
语法: 元素集合.prop(属性名, 属性值)

    // 1-1. prop() 设置
    $('div').prop('id', 'container')
    $('div').prop('a', 100)
console.log($('div'))

prop() 获取
语法: 元素集合.prop(你要获取的属性名)
返回值: 该属性对应的值

// 1-2. prop() 获取
console.log($('div').prop('id'))
console.log($('div').prop('hello'))
console.log($('div').prop('a'))

4. removeProp()
用来删除元素属性的方法
注意:不能删除原生属性；只能删除由 prop 方法设置的自定义属性
语法: 元素集合.removeProp(你要删除的属性名)

// 1-3. removeProp()
$('div').removeProp('id')
$('div').removeProp('a')
console.log($('div'))

总结

• JQuery操作类名：addClass()、removeClass()、toggleClass()
• JQuery操作样式：css()
• JQuery操作属性：attr()、removeAttr()、prop()、removeProp()

好了，关于前端之Jquery操作类名、操作样式、操作属性的基本语法知识已经写的非常清楚了，具体实战有什么问题的小伙伴可留言或者私信，看到一定帮您解决，我们别的文章再见。