abstract:3.2jQuery操作属性方法jQuery的操作属性其原理还是对于DOM的操作,通过对象的关系,对节点树种的元素的属性进行操作的方法:addClass() 该方法向被选中的元素添加一个或者多个类!(也就是添加css类属性!)removeClass() 该方法从被选中的元素移除一个或者多个类!(也就是移除css类属性!)例:$('选择器').addClass('类名
3.2jQuery操作属性方法
jQuery的操作属性其原理还是对于DOM的操作,通过对象的关系,对节点树种的元素的属性进行操作的方法:
addClass() 该方法向被选中的元素添加一个或者多个类!(也就是添加css类属性!)
removeClass() 该方法从被选中的元素移除一个或者多个类!(也就是移除css类属性!)
例:$('选择器').addClass('类名') //多个类之间空格隔开在一个引号内就可以!
attr() 该方法设置或者返回被选中元素的属性值! (获取元素属性值/设置属性值)
例:$('选择器').attr('属性名') //获取选中元素属性值
$('选择器').attr('属性名','属性值') //设置选中元素的属性值中间逗号隔开属性名和属性值
removeAttr() 该方法从被选中的元素中移除属性!如需移除多个用空格隔开!
例:$('选择器').removeAttr('属性名')
hasClass() 该方法检查被选中的元素是否包含指定的Class名!
例:$('选择器').hasClass('class名')
toggleClass() 该方法对选中元素进行添加/删除类的切换操作!
例:$('选择器').toggleClass('类名') //类似于动作来回切换!
总结:添加类不需要加点,多个类中间空格隔开。以上返回第一个匹配元素的值!toggleClass()检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
设置内容:
text() 该方法返回或者设置被选中的元素的文本内容!
例:$('选择器').text() //返回选中元素的文本内容
$('选择器').text('替换的文本内容') //设置选中元素的文本内容
html() 该方法返回或者设置被选中的元素内容(类似于innerHTML 可以包含html标签)
例:$('选择器').html('<h1>替换的文本</h1>') //可以把html标签一并渲染输出替换!
$('选择器').html() //返回被选中元素的内容!
val() 该方法返回或者设置被选元素的值!通常与 HTML 表单元素一起使用。
例:$('选择器').val() //返回被选中元素内容!返回第一个匹配元素的 value 属性的值。
$('选择器').val('被修改的值') //设置被选中元素的值!设置被选元素的 value 属性
总结:text()和html()的区别在于html()设置选中元素内容的时候可以将html标签一并渲染输出替换!
PS:唯一不理解的就是一个问题val()只能设置 value 属性吗?如果总结的有哪些不足或者不对的请指出谢谢!