资讯专栏INFORMATION COLUMN

jquery梳理之属性操作

silencezwm / 2074人阅读

摘要:与元素属性原生对于元素的属性有三种方法来操作为元素添加属性名和属性值获取元素属性值删除元素属性而则将以上三个操作简化为和对应对应对应上述的为属性名,为属性值对于需要设置多个属性时,采用的方式是在方法传入属性配置对象元素值属性三个方法都

attr与removeAttr - 元素属性

JS原生对于元素的属性有三种方法来操作

dom.setAttribute(name , value) //为元素添加属性名 和 属性值
dom.getAttribute(name) //获取元素属性值
dom.removeAttribute(name) //删除元素属性

而JQuery则将以上三个操作简化为: attr 和 removeAttr

attr(name , value) //对应 dom.setAttribute(name , value)
attr(name) //对应dom.getAttribute(name)
removeAttr(name) //对应dom.removeAttribute(name)

* 上述的name 为属性名,value为属性值
对于需要设置多个属性时,采用的方式是在 attr方法传入属性配置对象

dom.attr({
    "class" : "xxxx"
    "data-name" : "xxxxx"
});
html() 、text()、val() - 元素值属性

三个方法都是为匹配的元素设置或者获取内容
不同之处:
html设置的内容可以包含元素;
text设置的内容为纯文本;
val 设置input(文本框的值)或select选中值

用法:
1、获取内容

$(dom).html()
$(dom).text()
$(dom).val(); //*当dom为select,且可以多选,则返回值为数组

2、设置内容

$(dom).html(string)
$(dom).text(string)
$(dom).val(string)

对于获取或者设置输入框的值,还可以采用attr方法

$(dom).attr("value" , data);  ---> $(dom).val(data);
$(dom).attr("value");             ---> $(dom).val();
addClass,removeClass, toggleClass ,css -- 操作样式属性

addClass方法:添加样式

$(dom).addClass(classname);
$(dom).addClass(function(index,classname) {
    //遍历匹配的元素,并做相关添加样式操作
    //index 遍历元素的下标, name 当前元素的class属性值
});

removeClass方法:删除样式

$(dom).removeClass(classname);
$(dom).removeClass(function(index,classname) {
    //遍历匹配的元素,并做相关删除样式操作
    //index 遍历元素的下标, name 当前元素的class属性值
    return "删除的样式名称"; //必须返回
});

toggleClass方法:切换样式

$(dom).toggleClass(classname); 
//切换样式,如果元素存在classname这个样式,则删除,如果没有则添加

$(dom).toggleClass(classname , flag)
//flag为布尔值,true表示添加样式,false表示删除样式

css方法:设置样式值

$(dom).css(name);
//获取匹配元素中,第一个元素的样式属性值
$("p").css("width"); //获取第一个p标签的width样式值
$(dom).css(name , value)
$(dom).css(name , callback)
$(dom).css(properties)
//设置匹配元素的样式属性
//当第二个参数为函数时,函数必须返回属性值
//当第一个参数为一个键值对的对象(properties)时,表示为元素设置多个属性值

**注意:
css方法中的name是指具体的样式属性名称,如 width、height、position
addClass方法中的classname 是指定义于.css文件中或者style标签内的类选择器的名称
例如 .add { color:red; }
$(dom).addClass("add");**

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88603.html

相关文章

  • jquery梳理常用选择器

    摘要:基于规范选择元素选择器选择器相当于原生元素选择器直接传入标签相当于原生通配符选择器相当于原生层级选择器选择节点下的节点,节点只能是直接节点,如果是下的节点则获取不到选择节点下的所有节点选择与节点同级的下一个节点有且仅有一个选择与节点同级的所 基于CSS规范选择元素 id选择器 $(#id) class选择器 $(.class) //相当于原生:document.getEleme...

    Raaabbit 评论0 收藏0
  • 前端文章- 收藏集 - 掘金

    摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

    sugarmo 评论0 收藏0
  • 前端文章- 收藏集 - 掘金

    摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

    Pocher 评论0 收藏0
  • 理解jquery的$.extend

    摘要:当目标对象为空时,对象将会被默认为目标对象,这时相当于我们在的命名空间下添加新的功能,这是常见的插件开发模式。以上皆个人愚见,请笑纳 理解jquery的$.extend 今日在写js插件过程中需要使用扩展对象的方法,便想到了jQuery.extend这个方法,但又不甚了解,故去查了下官方API文档,自己也进行了相应尝试,现将所得总结如下: $.extend和$.fn.extend的相关...

    CarterLi 评论0 收藏0
  • JS函数知识点梳理

    摘要:函数的分类普通函数有函数名,参数,返回值,同名覆盖。示例代码如下解构参数默认值为对象字面量默认值为对象本身函数的返回值函数的返回值为基本数据类型,如字符串,数字,,,。示例代码如下函数的返回值为对象。 要想学好JavaScript除了基本的JavaScript知识点外,作为JavaScript的第一等公民——函数,我们要深入的了解。函数的多变来源于参数的灵活多变和返回值的多变。如果参数...

    mgckid 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<