第1章 WEB前端开发工程师-jQuery框架 1-12： jQuery元素属性和样式操作

老张谋

于 2019-06-20 16:15:53 发布

阅读量236

点赞数

分类专栏：前端技术文章标签： jquery

本文链接：https://blog.csdn.net/wgf5845201314/article/details/93054680

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

jQuery元素属性和样式操作

本节课所讲内容：

1. jQuery 元素属性操作

2. jQuery元素样式操作

主讲教师：Head老师

一. jQuery元素属性操作

除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

attr()和 removeAttr()

方法名	描述
attr(key)	获取某个元素 key 属性的属性值
attr(key, value)	设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...})	设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {})	设置某个元素 key 通过 fn 来设置

$('div').attr('title'); //获取属性的属性值

$('div').attr('title', '我是域名'); //设置属性及属性值

$('div').attr('title', function () { //通过匿名函数返回属性值

return '我是域名';

});

$('div').attr('title', function (index, value) { //可以接受两个参数

return value + (index+1) + '，我是域名';

});

删除指定的属性，这个方法就不可以使用匿名函数，传递 index 和 value 均无效。

$('div').removeAttr('title'); //删除指定的属性

二. jQuery元素样式操作

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种

操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点

掌握。

方法名	描述
css(name)	获取某个元素行内的 CSS 样式
css([name1, name2, name3])	获取某个元素行内多个 CSS 样式
css(name, value)	设置某个元素行内的 CSS 样式
css(name, function (index, value) )	设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2})	设置某个元素行内多个 CSS 样式
addClass(class)	给某个元素添加一个 CSS 类
addClass(class1 class2 class3...)	给某个元素添加多个 CSS 类
removeClass(class)	删除某个元素的一个 CSS 类
removeClass(class1 class2 class3...)	删除某个元素的多个 CSS 类
toggleClass(class)	来回切换默认样式和指定样式
toggleClass(class1 class2 class3...)	同上
toggleClass(class, switch)	来回切换样式的时候设置切换频率
toggleClass(function () {})	通过匿名函数设置切换的规则
toggleClass(function () {}, switch)	在匿名函数设置时也可以设置频率
toggleClass(function (i, c, s) {}, switch)	在匿名函数设置时传递三个参数

$('div').css('color'); //获取元素行内 CSS 样式的颜色

$('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色

在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用

传统方式进行解析需要使用 for in 遍历。

var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象

for (var i in box) { //逐个遍历出来

alert(i + ':' + box[i]);

}

jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻

松的遍历对象数组。

$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组

alert(attr + ':' + value);

});

使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使

用.each()方法呢？

$('div').each(function (index, element) { //index 为索引，element 为元素 DOM

alert(index + ':' + element);

});

在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。

$('div').css({

'background-color' : '#ccc',

'color' : 'red',

'font-size' : '20px'

});

如果想设置某个元素的 CSS 样式的值，但这个值需要计算我们可以传递一个匿名函数。

$('div').css('width', function (index, value) {

return (parseInt(value) - 500) + 'px';

});

除了行内 CSS 设置，我们也可以直接给元素添加 CSS 类，可以添加单个或多个，并且

也可以删除它。

$('div').addClass('red'); //添加一个 CSS 类

$('div').addClass('red bg'); //添加多个 CSS 类

$('div').removeClass('bg'); //删除一个 CSS 类

$('div').removeClass('red bg'); //删除多个 CSS 类

我们还可以结合事件来实现 CSS 类的样式切换功能。

$('div').click(function () { //当点击后触发

$(this).toggleClass('red size'); //单个样式多个样式均可

});

.toggleClass()方法的第二个参数可以传入一个布尔值，true表示执行切换到 class类，false

表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。

var count = 0;

$('div').click(function () { //每点击两次切换一次 red

$(this).toggleClass('red', count++ % 3 == 0);

});

默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 1 和样式 2

之间的切换还必须自己写一些逻辑。

$('div').click(function () {

$(this).toggleClass('red size'); //一开始切换到样式 2

if ($(this).hasClass('red')) { //判断样式 2 存在后

$(this).removeClass('blue'); //删除样式 1

} else {

$(this).toggleClass('blue'); //添加样式 1，这里也可以 addClass

}

});

上面的方法较为繁琐，.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要

切换的规则。

$('div').click(function () {

$(this).toggleClass(function () { //传递匿名函数，返回要切换的样式

return $(this).hasClass('red') ? 'blue' : 'red size';

});

注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的 class 类没

有被删除，只不过被替代了而已。所以，需要改写一下。

$('div').click(function () {

$(this).toggleClass(function () {

if ($(this).hasClass('red')) {

$(this).removeClass('red');

return 'green';

} else {

$(this).removeClass('green');

return 'red';

}

});

我们也可以在传递匿名函数的模式下，增加第二个频率参数。

var count = 0;

$('div').click(function () {

$(this).toggleClass(function () {

return $(this).hasClass('red') ? 'blue' : 'red size';

},count++ % 3 == 0); //增加了频率

});

对于.toggleClass()传入匿名函数的方法，还可以传递 index 索引、class 类两个参数以及

频率布尔值，可以得到当前的索引、class 类名和频率布尔值。

var count = 0;

$('div').click(function () {

$(this).toggleClass(function (index, className, switchBool) {

alert(index + ':' + className + ':' + switchBool); //得到当前值

return $(this).hasClass('red') ? 'blue' : 'red size';

},count++ % 3 == 0);

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="q">
    <title>jQuery 元素及内容设置</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script>
        $(function(){
/*
          //1. 属性值 获取、设置
           //alert($('div').attr('title')); 
         //  $('div').attr('title','我是域名');
            // $('div').attr('title',function(){
            //   return '我是域名1';
            // })

          //2. 属性 添加 删除
         //  $('div').removeAttr('title');

          //3. CSS样式 获取、设置

            //3.1 获取和设置单个属性值
          //  alert($('div').css('color')) ;   
          //  $('div').css('color','blue');

           //3.2 获取多个属性值
           // var box = $('div').css(['color','margin','fontSize']);
         
            js中的遍历方法
            for(var i in box){
              //alert(i+":"+box[i]);
              alert(box);
            }
            
            //jquery中的each遍历方法
      
              $.each(box,function(attr,value){
                alert(attr+': '+value);
              })
           

            //3.3 设置多个属性值
            $('div').css({
                
                'backgroundColor': '#ccc',
                'color': 'green',
                'font-size': '20px'
              })
            

              // 3.4 添加 删除类
              $('div').addClass('af ae');
              $('div').removeClass('af ae'); 
               */
               $('div').click(function(){
                  $(this).toggleClass('af ae');
               })
        })
    </script>
    <style>
        div{
          margin:50px;
        }
        #ad{
          color:red;
        }
        .ae{
          font-size: 25px;
        }
        .af{
          background-color: brown;
          width: 200px;
          height: 200px;
        }
    </style>
</head>
<body>
    <div title="abc" id='ad'>
        ad
    </div>
  
</body>
</html>