jquery如何操作元素属性

这篇文章主要讲解了“jquery如何操作元素属性”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery如何操作元素属性”吧！

我们一直强调网站建设、成都网站制作对于企业的重要性,如果您也觉得重要,那么就需要我们慎重对待,选择一个安全靠谱的网站建设公司,企业网站我们建议是要么不做，要么就做好,让网站能真正成为企业发展过程中的有力推手。专业网络公司不一定是大公司,创新互联公司作为专业的网络公司选择我们就是放心。

操作元素属性的方法有：1、操作class属性的方法，包括addClass()、hasClass()、removeClass()、toggleClass()；2、操作指定属性的方法，包括attr()、prop()、removeAttr()。

本教程操作环境：windows7系统、jquery1.12.4版本、Dell G3电脑。

jQuery 属性操作方法

方法	描述
addClass()	向匹配的元素添加指定的类名（class属性值）。
attr()	设置或返回匹配元素的属性和值。
prop()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类（class）。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类（class）。
toggleClass()	从匹配的元素中添加或删除一个类（class）。

jQuery attr()和prop()方法返回或设置属性

prop() 方法和 attr() 方法相似，都是用来获取或设置元素的 HTML 属性的，不过两者也有着本质上的区别。

jQuery 官方建议：具有 true 和 false 这两种取值的属性，如 checked、selected 和 disabled 等，建议使用 prop() 方法来操作，而其他的属性都建议使用 attr() 方法来操作。

    
    
    
    


    

        苹果
        香蕉
        西瓜
    
    

在这个例子中，我们其实是想通过$(this).attr("checked")判断单选框是否被选中，如果被选中，就获取该单选框的 value 值。可是运行代码后发现：完全没有效果！这是为什么呢？

实际上，对于表单元素的 checked、selected、disabled 这些属性，我们使用 attr() 方法是没法获取的，而必须使用 prop() 方法来获取。因此，我们把 attr() 方法替换成 prop() 方法就有效果了。

其实，prop()方法的出现就是为了弥补 attr() 方法在表单属性操作中的不足。记住一句话：如果某个属性没法使用 attr() 方法来获取或设置，改换 prop() 方法就可以实现。

removeAttr()方法删除属性

在 jQuery 中，我们可以使用 removeAttr() 方法来删除元素的某个属性。

语法：

$().removeAttr("属性名")

jQuery 类名操作

类名操作，指的是为元素添加一个 class 或删除一个 class，从而整体控制元素的样式。

在 jQuery 中，CSS 类名操作共有以下 3 种。

• 添加 class。

• 删除 class。

• 切换 class。

addClass()方法添加class

在 jQuery 中，我们可以使用 addClass() 方法为元素添加一个 class。

语法：

$().addClass("类名")

removeClass()方法删除class

在 jQuery 中，我们可以使用 removeClass() 方法来为元素删除一个 class。

语法：

$().removeClass("类名")

toggleClass()方法切换class

在 jQuery 中，我们可以使用 toggleClass() 方法为元素切换类名。toggle，其实就是“切换”的意思，之后我们会大量接触这个单词，例如 toggle()、slideToggle() 等，小伙伴要留意和对比一下。

语法：

$().toggleClass("类名")

toggleClass() 方法用于检查元素是否有某个 class。如果 class 不存在，则为元素添加该 class；如果 class 已经存在，则为元素删除该 class。

感谢各位的阅读，以上就是“jquery如何操作元素属性”的内容了，经过本文的学习后，相信大家对jquery如何操作元素属性这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

网站栏目：jquery如何操作元素属性
本文URL：http://scjbc.cn/article/jhpgej.html