- 浏览: 64387 次
- 性别:
- 来自: 西安
文章分类
最新评论
获取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class值与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,jquery代码如下:
复制代码 代码如下:
var p_class = $("p").attr("class"); //获取p元素的class
[html]
使用attr()方法来设置p元素的class,JQuery代码如下:
1 $("p").attr("'class", "high"); //设置p元素的class为 "high"
大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。
追加样式 什么是追加class呢?假如p元素原本的class为myClass,那么追加一个名叫high的class后,class属性变为 “myClass high”,即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解,首先在 style标签里添加另一组样式:
复制代码 代码如下:
1 .high{ color:red; }
2 .another{ font-style:italic; color:blue; }
后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another"); // 追加样式
3 });
后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。
1.如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。 2.如果有不同的class设定了同一样式属性,则后者覆盖前者。 在上例中,相当于给p元素添加了如下样式:
复制代码 代码如下:
1 color : red; /* 字体颜色设置红色*/
2 font-style:italic;
3 color:blue;
以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。
移除样式 如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:
复制代码 代码如下:
1 $("p").removeClass("high"); //移除p元素中值为"high"的class
果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:
1 $("p").removeClass("high").removeClass("another");
Query提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:
1 $("p").removeClass("high another");
外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:
1 $("p").removeClass(); //移除p元素的所有class
换样式 JQuery中有一个方法toggle(),JQuery代码如下:
1 toggleBtn.toggle(function(){
2 //元素显示 代码③
3 }, function(){
4 //元素隐藏 代码④
5 })
oggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。
另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。
复制代码 代码如下:
1 $("p").toggleClass("another"); //重复切换类名“another”
不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:
复制代码 代码如下:
1 $("p").hasClass("another");
个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:
复制代码 代码如下:
view sourceprint? 1 $("p").is(".another"); //is("."+class);
复制代码 代码如下:
var p_class = $("p").attr("class"); //获取p元素的class
[html]
使用attr()方法来设置p元素的class,JQuery代码如下:
1 $("p").attr("'class", "high"); //设置p元素的class为 "high"
大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。
追加样式 什么是追加class呢?假如p元素原本的class为myClass,那么追加一个名叫high的class后,class属性变为 “myClass high”,即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解,首先在 style标签里添加另一组样式:
复制代码 代码如下:
1 .high{ color:red; }
2 .another{ font-style:italic; color:blue; }
后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another"); // 追加样式
3 });
后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。
1.如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。 2.如果有不同的class设定了同一样式属性,则后者覆盖前者。 在上例中,相当于给p元素添加了如下样式:
复制代码 代码如下:
1 color : red; /* 字体颜色设置红色*/
2 font-style:italic;
3 color:blue;
以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。
移除样式 如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:
复制代码 代码如下:
1 $("p").removeClass("high"); //移除p元素中值为"high"的class
果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:
1 $("p").removeClass("high").removeClass("another");
Query提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:
1 $("p").removeClass("high another");
外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:
1 $("p").removeClass(); //移除p元素的所有class
换样式 JQuery中有一个方法toggle(),JQuery代码如下:
1 toggleBtn.toggle(function(){
2 //元素显示 代码③
3 }, function(){
4 //元素隐藏 代码④
5 })
oggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。
另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。
复制代码 代码如下:
1 $("p").toggleClass("another"); //重复切换类名“another”
不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:
复制代码 代码如下:
1 $("p").hasClass("another");
个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:
复制代码 代码如下:
view sourceprint? 1 $("p").is(".another"); //is("."+class);
发表评论
-
获取ztree 当前节点的所有父节点name!
2018-08-02 09:49 676function getFilePath(treeObj ... -
Bootstrap table无法获取pagesize问题解决
2018-05-01 13:20 1107在bootstrap-table.min.js中搜索 &quo ... -
天地图影像地图服务
2018-01-18 14:20 4207全球影像 http://t0.tianditu.cn/im ... -
jQuery常用API
2017-11-24 10:17 450$("[name=replaytitle]" ... -
微信utf-8格式 post方法
2017-11-08 18:58 607@RequestMapping(value = "c ... -
微信jssdk 图片预览接口调用方法!
2017-11-07 16:23 487$(".weui_uploader_files ... -
使用spring @Scheduled注解执行定时任务、
2017-10-31 13:47 387老大说这配置太麻烦、每个调度都需要多加在spring的配置中、 ... -
.bootstrapValidator 密码格式及等值验证
2017-09-18 11:15 785function formValidator() { ... -
BootStrap table 传递搜索参数
2017-09-15 17:57 4319function Search() { var ... -
easyui datebox 时间格式化
2017-08-11 10:39 654//easyui 格式化日期控件 $(" ... -
HTTP协议详解
2017-03-29 09:57 433引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷、 ... -
java MongoDB 简单查询
2017-03-22 18:31 411前言 MongoDB的java驱动提供了查询 ... -
js设置form表单内元素为只读属性
2017-03-22 10:57 1287js设置form表单内元素为只读属性 $('#formID' ... -
EasyUI Dialog Buttons 绑定click事件
2017-03-20 11:37 12231、jsp页面定义dialog及Buttons; < ... -
jQuery EasyUI window - 自定义工具栏
2017-02-23 13:57 740默认情况下,窗口(window)有四个工具:collaps ... -
easyui layout 折叠后显示标题
2017-02-06 09:53 769(function($){ var buttonDir = ... -
js获取浏览器长度、宽度!
2016-12-22 16:42 1084有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏 ... -
Easyui 栏目组定义
2016-05-30 15:43 322columns:[[{ title ...
相关推荐
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法。分享给大家供大家参考。具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,...
主要介绍了jQuery实现鼠标划过添加和删除class的方法,涉及jQuery鼠标事件及页面样式的相关操作技巧,需要的朋友可以参考下
$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式 $(”元素名称”).text(); 获得该元素的文本 $(”元素名称”).text(value); 设置该元素的文本值为value $(”元素名称”).toggleClass(class) 当元素...
使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改。 <input id=txtBianCeng type=text /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById...
这里主要介绍jQuery如何设置页面的样式风格。包括添加、删除、动态切换等。 1. 添加、删除css类别。 代码如下:$(function() { //同时添加多个CSS类别 $(“img”).addClass(“css1 css2”); }); 如以上代码对img...
$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式 $(”元素名称”).text(); 获得该元素的文本 $(”元素名称”).text(value); 设置该元素的文本值为value $(”元素名称”).toggleClass(class) 当元素...
可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...
4.9 基于URL地址为导航链接添加class样式 4.10 如何延迟添加class类 4.11 如何延迟清除class类 4.12 动态调整页面的字体大小 第5章 jQuery实现用户输入自动完成功能 5.1 最简单的用户输入自动完成 5.2 使用远程数据...
$("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数...
本资源主要介绍如何使用 jQuery 开发交互效果页面,具体来说是开发一个留言页面。下面是相关知识点的总结: 1. jQuery 的下载和引入方法:在使用 jQuery 之前,我们需要下载 jQuery 库并将其引入到我们的网页中。...
注意:当一个节点元素包含了多个class样式时,将按照以下方式进行处理: 如果给一个元素添加了多个 class 值, 那么就相当于合并了它们的样式 如果有不同的 class 设定了同一样式属性, 则后者覆盖前者 移除样式...
$("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数中...
$("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为 value $("元素名称").toggleClass(class) 当元素存在...
JScript code Attribute: ...$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式 $(”元素名称”).text(); 获得该元素的文本 $(”元素名称”).text(value); 设置该元素的文本值为value
$("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $(“元素名称”).toggleClass(class) 当元素存在参数...
当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 <script type="text/javascript" src="jquery.js"> ...
jQuery操作class的方式非常强大 写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个...