分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

jQuery操作属性的方法

发布时间:2023-09-06 02:09责任编辑:熊小新关键词:jQuery

jQuery操作属性的方法

1、一般属性的操作方法

1.1、attr()方法 传一个参数用于获取传入的属性值,如果调用者为一个集合,则返回集合中第一个对象的属性值 传两个参数用于设置属性值,如果调用者为一个集合,则设置集合中每一个对象的属性值,如果该属性不存在,则自动增加该属性

1.2、removeAttr()方法:传一个参数,用于移除所有找到的DOM对象的属性

1.3、prop()方法:用法和作用与attr()方法一致 区别:当作用于布尔类型属性时(如:checked属性),获取到的是true/false值 而用attr()方法获取到的是属性名称/undefined

1.4、removeProp()方法:用法和作用与removeAttr()方法一致

1.5、注意点:

  a.传入的属性名和属性值均为字符串的形式传入;

  b.属性名和属性值的写法和在HTML标签内的写法完全一致;

   c.重复设置同一属性会造成覆盖。

2、操作类属性相关方法

2.1、addClass(class|fn)添加类

2.2、removeClass([class|fn])删除类

2.3、toggleClass(class|fn[,sw])切换类:有就删除,没有就添加

2.4、注意点:

  a.同时操作多个类时,多个类名之间用空格分隔

  b.与attr(class,className1[ className2 ...] )的区别:

  用attr方法设置class属性是一次性覆盖设置,新设置的类会覆盖掉原有的类 而用上面3个方法操作类属性时,不会影响原有的其他类。

3、内容/文本操作方法

html()、text()、val():获取时不用传参,设置时传入需要设置的值作为参数

4、综合案例

<!doctype html><html><head><meta charset="utf-8"><title></title> ???<style> ???????.tored{ ???????????width:200px; ???????????height:30px; ???????????background:red; ???????} ???????.togreen{ ???????????width:200px; ???????????height:30px; ???????????background:green; ???????} ???????#div1{ ???????????width:250px; ???????????height:30px; ???????????background:red; ???????} ???????#ddiv1{ ???????????width:200px; ???????????height:30px; ???????????background:green; ???????} ???</style> ???<script src="js/jquery.js"></script></head><body><div id="div1">点我设置我的id属性为ddiv1</div><div id="div2"></div><button id="btn1">设置div2style属性</button><button id="btn2">移除div2style属性</button><div id="div3" class="tored">点我切换类</div><script> ???$(function(){ ???????$("#div1").click(function(){ ???????????$(this).attr("txt1","txt1生效"); ???????????$(this).attr("id","ddiv1"); ???????????$(this).text("我现在是ddiv1了"); ???????}); ???????$("#btn1").click(function(){ ???????????$("#div2").attr("style","width:300px;height:30px;background:red;"); ???????}); ???????$("#btn2").click(function(){ ???????????$("#div2").removeAttr("style"); ???????}); ???????$("#div3").click(function(){ ???????????$(this).toggleClass("tored togreen"); ???????????//$(this).toggleClass("tored").toggleClass("togreen"); ?等效 ???????}); ???});</script></body></html>

jQuery操作属性的方法

原文地址:https://www.cnblogs.com/chuanzi/p/9454324.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved