JQuery操作属性、样式、风格(attr、class、css)
2017-01-11 09:26
591 查看
样式操作
在上面代码中,class也是p元素的属性,因此获取class和设置class都可以用attr()方法来完成
代码如下:
也可以用attr()方法来设置class
在大多数情况下,它是将原来的class替换成新的class,而不是在原来基础上追加新的class
新的代码为
追加样式
在网页中追加一个样式
方法
对同一个网页操作
第一次使用方法
第一次结果
再次使用方法
结果
移除样式 removeClass()
结果
将p两个类都移除
或者
结果
<p>test</p> 移除样式 也可以用 removeAttr()。主要指移除属性
切换样式
Jquery提供toggleClass()方法控制样式的切换
判断是否包含某样式,如果有返回true 否则返回 false
判对Class中或者说Style中的具体样式操作,可以使用css(),方法,例如
如果修改color的值为blue,代码如下
<p class=”myclass” title=”选择喜欢的水果”>你最喜欢的水果是?</p>
在上面代码中,class也是p元素的属性,因此获取class和设置class都可以用attr()方法来完成
代码如下:
var p_class=$("p").attr("class"); //获取p元素的class
也可以用attr()方法来设置class
$("p").attr("class","high"); //将p元素的class设置为high
在大多数情况下,它是将原来的class替换成新的class,而不是在原来基础上追加新的class
新的代码为
<p class="high" title="选择喜欢的水果">你最喜欢的水果是?</p>
追加样式
<style>
.another {
Font-style: italic; /* 斜体 */
Color: blue;/* 字体设为蓝色 */
}
</style>
在网页中追加一个样式
$("input:eq(2)").click(function(){ $("p").addclass("another"); })
方法
addClass()
attr()
对同一个网页操作
<p>test</p>
第一次使用方法
$("p").addClass("high"); $("p").attr("class","high")
第一次结果
<p class="high">test</p>;
再次使用方法
$("p").addClass("another"); $("p").attr("class", "another")
结果
<p class="high another">test</p> <p class="another">test</p>
移除样式 removeClass()
$("p").removeClass("high");
结果
<p class="another">test</p>
将p两个类都移除
$("p").removeclass("high") .removeClass("another");
或者
$("p").removeClass();或者 $("p").removeClass("high another");或者 $("p").removeAttr("class");//移除class属性
结果
<p>test</p> 移除样式 也可以用 removeAttr()。主要指移除属性
$("p").removeAttr("class");//移除class属性
切换样式
Jquery提供toggleClass()方法控制样式的切换
$("p").toggleClass("another"); //对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果
判断是否包含某样式,如果有返回true 否则返回 false
$("p").hasClass("another"); //相当于$("p").is(".another");
判对Class中或者说Style中的具体样式操作,可以使用css(),方法,例如
<p style="color:red">test</p>
如果修改color的值为blue,代码如下
$("p").css("color", "blue")
相关文章推荐
- jQuery实现判断控件是否显示的方法
- jQuery Form表单取值的方法
- jQuery学习笔记(四) 事件及特效
- jQuery对table表格进行增删改查
- 正则验证不能含有中文的实现方法【jQuery与java实现】
- jquery 调用 click 事件 的 三种 方式
- jquery选择器使用优化
- ie8下jquery异步加载视图不显示
- jquery隐藏表格行
- jQuery的input失去焦点之后,不能使用focus()重新得到焦点
- Jquery选择器
- Jquery读取json文件和xml文件以及解析
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- [转]JQuery控制div外点击隐藏,div内点击不会隐藏
- jquery对象以及方法总结
- jquery版列表切换功能
- 前段HTML+CSS+Javascript+Jquery总结
- 封装自己的jquery插件
- jQuery点击图片弹出大图遮罩层
- 利用jQuery对table表达增删改查