jQuery中的样式操作、元素操作、属性操作

样式操作

操作css方法

jQuery可以使用Css方法来修改简单元素样式;也可以操作类,修改多个样式。

1. 参数只写属性名,则是返回属性值 $('this').css('color');

2. 参数是属性名，属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号 $('this').css('color','red');

3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
   $('this').css({'color':'red', 'backgroundColor': 'pink', 'fontSize': '12px'});

设置类样式方法

作用等同于以前的classList ,可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类 $( "div" ).addClass("current");
2. 移除类 $( "div" ).removeClas("current'");
3. 切换类 $( "div" ).toggleClass("current'");

类操作与className区别

1. 原生JS中className会覆盖元素原先里面的类名。
2. jQuery里面类操作只是对指定类进行操作,不影响原先的类名。

元素操作

主要是遍历、创建、添加、删除元素操作。

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一元素做不同操作,就需要用到遍历。
语法1: $ ("div") .each (function (index, domEle) { xxx; } )

$('div').each(function (index, domELe) {
   
    console.log(index);//得到索引号  可以自己指定索引号名称
    console.log(domELe);// <div>1</div> 得到每个dom元素对象
   // domELe.css('color');// 报错，dom元素对象是没有css方法的。
    $(domELe).css('color','red');//转换成jQuery对象就可以了
})

1. each()方法遍历匹配的每一个元素。 主要用DOM处理。
2. 里面的回调函数有2个参数: index是每个元素的索引号; demEle是每个DOM元素对象,不是jQuery对象
3. 所以要想使用 jQquery方法,需要给这个dom元素转换为 jQuery对象$(domEle)

$(function