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 () {
    var sum = 0;
    var arr = ['red','blue','green'];
    $('div').each(function (index, domELe) {
        $(domELe).css('color',arr[index]);
        // 里面内容相加，得到字符串再把它转换成数字型
        sum = parseInt($(domELe).text());
    });
    console.log(sum);
})

语法2 : $.each (object , function (index, element) { XXX; } )

1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组, 对象
2. 里面的函数有2个参数: index 是每个元素的索引号; element遍历内容

$.each({name:'lisi', age:18
},function (i,ele) {
    console.log(i);// 输出属性名
    console.log(ele);//输出属性值
})

创建元素

语法：$('<li></li>'); // 动态地创建了一个li

添加元素

1. 内部添加
   element.append("内容”); //把内容放入匹配元素内部最后面,类似原生appendChild
   element.prepend("内容”); //添加的内容放前面

2. 外部添加
   element.after("内容") //把内容放入目标元素后面
   element.before("内容") // 把内容放入目标元素前面

①内部添加元素,生成之后,它们是父子关系。
②外部添加元素,生成之后,他们是兄弟关系。

删除元素

element.remove(); // 删除匹配的元素(本身)
element.empty( ); // 删除匹配的元素集合中所有的子节点
element.html(""); // 清空匹配的元素内容

var li = $('<li>后来添加的li</li>');//创建元素
$('ul').append(li);// 内部添加元素，并放到最后面
$('ul ').prepend(li);// 内部添加元素，并放到最前面

var div = $('<div>后来添加的div</div>');
$('.bef').after(div);//外部添加
$('.bef ').before(div);

$(' ul ').remove();//删除元素

属性操作

设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href , 比如<input>元素里面的type.

1. 获取属性语法 prop("属性")
2. 设置属性语法 prop("属性", "属性值 ")

$(function () {
    console.log($('a ').prop('herf'));
    $('a').prop('title','CSDN');
})

置或获取元素自定义属性值attr()

用户自己给元素添加的属性,我们称为自义属性。比如给div添加 index = “1”

1. 获取属性语法 attr("属性") // 类似原生getAttribute()
2. 设置属性语法 attr("属性",' '属性值'") // 类似原生setAttribute()
   该方法也可以获取H5自定义属性

$(function () {
    console.log($('div ').attr('index'));// 自定义属性index
console.log($('div ').attr('data-index'));//H5自定义属性
    $('div').attr('index','5');
})

数据缓存

data()方法可以在指定的元素上存取数据,不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。

1. 附加数据语法 data("name' ',"value") // 向被选元素附加数据
2. 获取数据语法 date("name") //向被选元素获取数据

同时,还可以读取HTML5自定义属性data-index ,得到的是数字型

 $("span "). data( "uname",'andy');
 console.log($("span" ) .data("uname" ));//  andy  不会再span内显示
//这个方法获取data-index h5自定义属性第一个不用写data- 而且返回的是数字型
console.log($(" div ").data("index" ));

相关链接

jQuery API 中文文档在线手册 速查表