1.讲解attr() removeAttr() 设置元素的属性
Js
声明var box = document.getElementById("box");通过getElementById()方法获取id
给box添加class属性box.setAttribute("class", "wrapper");
获取box中的class的属性值var str = box.getAttribute("class");
控制台输出 console.log(str);-------》 wrapper
Jq
获取id, $("#box").attr("index", "213");通过attr()返回元素的属性值
声明var index = $("#box").attr("index");
控制台输出console.log(index);-------》213
RemoveAttr()
从每一个匹配的元素中删除一个属性1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。
移除 $("#box").removeAttr("index");
2.对class类的操作 addClass()、 removeClass() 、toggleClass() 、 hasClass()
Html代码
addClass()为每个匹配的元素添加指定的类名。
为匹配的元素加上 'box1 box2' 类
$(“div”).addClass(“box1 box2”);
示例:
removeClass()从所有匹配的元素中删除全部或者指定的类。
从匹配的元素中删除 'box1 box2类
$(“div”).removeClass(“box1 box2”);
删除匹配元素的所有类
$(“div”).removeClass();
示例:
toggleClass()如果存在(不存在)就删除(添加)一个类。
为匹配的元素切换 ’wrapper’类
$("#btn").click(function () {//通过点击事件click()
$("#box").toggleClass("wrapper");//判断是否存在wrappe类
var bl = $("#box").hasClass("wrapper");//true 添加 ,false 不执行
console.log(bl);
})
示例:
拓展
Data([key],[value])
在元素上存放或读取数据,返回jQuery对象。
当参数只有一个key的时候,为读取该jQuery对象对应DOM中存储的key对应的值,值得注意的是,如果浏览器支持HTML5,同样可以读取该DOM中使用 data-[key] = [value] 所存储的值。参见最后一个示例。
当参数为两个时,为像该jQuery对象对应的DOM中存储key-value键值对的数据。
如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。
V1.4.3 新增用法, data(obj) 可传入key-value形式的数据。
在div中储存数据
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
示例:
想要学好,就必需通过各种的资料,对不懂得知识点进行查找备注
这样可以加深对知识点的理解,往往一些疑点难点都是一些简单的知识点只不过是因为你不记得不经常使用而已。
以上就是我的分享
如果有更好的方法或不懂得地方欢迎在评论区教导和提问!