摘要:与元素属性原生对于元素的属性有三种方法来操作为元素添加属性名和属性值获取元素属性值删除元素属性而则将以上三个操作简化为和对应对应对应上述的为属性名,为属性值对于需要设置多个属性时,采用的方式是在方法传入属性配置对象元素值属性三个方法都
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
摘要:基于规范选择元素选择器选择器相当于原生元素选择器直接传入标签相当于原生通配符选择器相当于原生层级选择器选择节点下的节点,节点只能是直接节点,如果是下的节点则获取不到选择节点下的所有节点选择与节点同级的下一个节点有且仅有一个选择与节点同级的所 基于CSS规范选择元素 id选择器 $(#id) class选择器 $(.class) //相当于原生:document.getEleme...
摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...
摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...
摘要:当目标对象为空时,对象将会被默认为目标对象,这时相当于我们在的命名空间下添加新的功能,这是常见的插件开发模式。以上皆个人愚见,请笑纳 理解jquery的$.extend 今日在写js插件过程中需要使用扩展对象的方法,便想到了jQuery.extend这个方法,但又不甚了解,故去查了下官方API文档,自己也进行了相应尝试,现将所得总结如下: $.extend和$.fn.extend的相关...
阅读 1120·2021-11-25 09:43
阅读 1642·2021-09-13 10:25
阅读 2596·2021-09-09 11:38
阅读 3403·2021-09-07 10:14
阅读 1716·2019-08-30 15:52
阅读 642·2019-08-30 15:44
阅读 3573·2019-08-29 13:23
阅读 1975·2019-08-26 13:33