jquery之类名操作

1. addClass 添加类名

• 添加多个类名以空格隔开

$('demo').addClass('active tzh')

• addClass 函数逻辑操作

$('div').addClass(function(index,ele){
        return 'tzh' + index
    })

2. removeClass 移除类名

• 移除多个类名以空格隔开

$('div').removeClass('demo active')

匹配到类名就删除，没有匹配到就忽略

• removeClass 函数逻辑操作

$('div').removeClass(function(index,ele){
        if(index<3){
            return 'demo active'
        }
    })

没有顺序前后，匹配到类名就移除

3. hasClass 判断类名

• 包含有类名就返回 true 没有就返回 false

4. 选项卡功能练习

• 第一种方式 类名实现：

	<div class="demo active"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    
    <script src="./jquery.js"></script>
    <script>
     	$('.demo').click(function(){
         	$('.demo').removeClass('active')
         $(this).addClass('active')
   	   })
    </script>

• 第二种方式 css样式实现 :

<div class="demo active"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <script src="./jquery.js"></script>
    <script>
    $('.demo').click(function(){
        $('.demo').css({background:'orange'})
        $(this).css({background:'red'})
    })
    </script>

两种方式都能实现同样的效果，但是更加推荐第一种方式，区别在于结构样式行为相分离，在 JS 代码中过多的使用css样式，后期 js 函数功能越来越多，不利于维护，还有一个复用性，
JS代码中过多使用css样式很容易造成代码冗余的问题，把 JS 代码中使用 css 操作样式的部分抽离出来放到 css文件中还可以提高一个性能整体性，因为浏览器对css文件有缓存的功能，大大优化网页。
多节点操作样式时，更能体现操作类名的好处，用 JS 中的 css 方法更换样式时，对dom节点不太友好，如果使用类名；在css文件中事先编辑好需求的样式，然后对整个区块进行更换，一步到位。