jQuery-样式（jQuery的属性与样式）

最新推荐文章于 2021-11-04 13:40:31 发布
最新推荐文章于 2021-11-04 13:40:31 发布
阅读量313 收藏 1
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunxiaofre/article/details/58640966
版权

jQuery的属性与样式

之.attr()与.removeAttr()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery的属性与样式之.attr()与.removeAttr()</title>
    <style>
        input {
            display    : block;
            margin     : 10px;
            padding    : 10px;
            background : #bbffaa;
            border     : 1px solid #ccc;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>.attr()与.removeAttr()</h2>
<h3>.attr</h3>
<p>

    一、jQuery中用attr()方法来获取和设置元素属性。
    attr()有4个表达式：
    1，attr(属性名)：获取属性的值；
    2，attr(属性名，属性值)：设置属性的值；
    3，attr(属性名，函数名)：设置属性的函数值；
    4，attr(属性名1：属性值1，属性名2：属性值2)；
    二、removeAttr()删除方法
    .removeAttr(属性名)：为匹配的元素集合中的所有元素移除属性；
    三、区分attribute和property
    1，Attribute：特性，dom节点自带的属性，如id，class，title，align等；
    2，Property：属性，是dom元素作为对象，其附加的内容，如tagName，nodeName，弄的T一盆等；
    3，获取Attribute用attr，获取Property用prop；

</p>
<form>
    <input type="text" value="设置value" />
    <input type="text" value="获取value"/>
    <input type="text" value="回调拼接value" />
    <input type="text" value="删除value" />
</form>

<script type="text/javascript">
    //找到第一个input，通过attr设置属性value的值
    $('input:first').attr('value','.attr( attributeName, value )')
</script>

<script type="text/javascript">
    //找到第二个input，通过attr获取属性value的值
    $('input:eq(1)').attr('value')
</script>

<script type="text/javascript">
    //找到第三个input，通过使用一个函数来设置属性
    //可以根据该元素上的其它属性值返回最终所需的属性值
    //例如，我们可以把新的值与现有的值联系在一起：
    $('input:eq(2)').attr('value',function(i, val){
        return '通过function设置' + val
    })
</script>

<script type="text/javascript">
    //找到第四个input，通过使用removeAttr删除属性
    $('input:eq(3)').removeAttr('value')
</script>


</body>

</html>

之.html()与.text()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery的属性与样式之html()及.text()</title>
    <link rel="stylesheet" href="choose.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>

<h3>.html()与.text()</h3>

.html() 与 .text()
1，.html()读取修改元素的html结构；
2，.text()读取修改元素的文本内容；
3，.html()方法内容使用的是DOM的innerHTML()属性来处理的。
这个操作是针对整个HTML内容，不仅仅只是文本内容；
4，.text()结果返回一个字符串，包含所有匹配元素的合并文本；


<div class="left first-div">
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>:last-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>:last-child</a>
    </div>
</div>

<h4>显示通过html方法获取到的内容</h4>
<p></p>

<h4>显示通过text方法获取到的内容</h4>
<p></p>


<script type="text/javascript">
    //显示出html方法获取到的内容
    //.html()是整个html文档结构
    $('p:first').html( $(".first-div").html() )
</script>


<script type="text/javascript">
    //显示出text方法获取到的内容
    //.text()是文本内容的合集
    $('p:last').text( $(".first-div").text() )
</script>


<script type="text/javascript">
    //通过.text()方法替换文本内容
    $(".left a:first").text('替换第一个a元素的内容')
</script>


<script type="text/javascript">
    //通过.html()方法替换html结构
    $(".left div:first").html('整个div的子节点都被替换了')
</script>


<script type="text/javascript">
    //通过.text()的回调，获取原本的内容，修改，在重新赋值
    $(".left a:first").text(function(idnex,text){
        return '增加新的文本内容' + text
    })
</script>



</body>

</html>

之.val()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery的属性与样式之.val()</title>
    <style>
        p {
            color: red;
            margin: 4px;
        }

        b {
            color: blue;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h3>.val()</h3>
1，.val()方法：用于处理表单元素的值，如input、select、textarea；
只能用在表单元素上；
2，.text()方法：用来读取元素的纯文本内容，包括后代元素；
不能用在表单元素上；
3，.html()和.val()方法：若是用在多个元素上时，只读取第一个元素；
4，.text()方法：若是用在多个元素上时，将会读取所有选中元素的文本内容；
<br>

<select id="single">
    <option selected="selected">单选前端</option>
    <option>单选后端</option>
</select>
<select id="multiple" multiple="multiple">
    <option selected="selected">多选上面</option>
    <option>多选中间</option>
    <option selected="selected">多选下面</option>
</select>
<input type="text" value="click a button" />
<p id="p1"></p>
<p id="p2"></p>


<script type="text/javascript">
    //单个select，返回第一个
    $("#p1").text( $("#single").val() )
</script>

<script type="text/javascript">
    //多个select被选择，返回["上面", "下面"]
    $("#p2").text( $("#multiple").val() )
</script>


<script type="text/javascript">
    //选择一个表单，修改value的值
    $("input[type='text']").val('修改表单中的内容')
</script>


</body>

</html>

之增加样式.addClass()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="3-4.css" type="text/css">
    <title>jQuery的属性与样式之增加样式.addClass()</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
1，.addClass(className)方法作用：为每个匹配元素动态增加一个或多个class类名；
2，注意：.addClass(className)方法不会替换一个样式类名，
    它只是简单的添加一个类名到元素上；

<h2>.addClss()方法</h2>
<div class="left">
    <div class="xiao">
        <p>newClass</p>
    </div>
    <div class="xiao">
        <p>newClass</p>
    </div>
</div>
<div class="right">
    <div class="aa bb boke">
        <article>
            <p>bokeClass</p>
        </article>
    </div>
    <div class="bb cc boke">
        <article>
            <p>bokeClass</p>
        </article>
    </div>
</div>

<script type="text/javascript">
    $('.left div').addClass('newClass');
</script>

<script type="text/javascript">
    $('div').addClass(function (index, className) {
        if(-1!==className.indexOf('boke')){
            $(this).addClass('bokeClass');
        }
    });
</script>

</body>
</html>

之删除样式 .removeClass()

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left,
        .right {
            width: 300px;
            height: 120px;
        }

        .left div,
        .right div {
            width: 100px;
            height: 90px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
        }

        .newClass{
            background: #bbffaa;
        }

        .imoocClass{
            background: red;
        }

    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>.removeClass()方法</h2>

1，removeClass([className])：每个匹配元素移除一个或多个用空格隔开的类名；
2，removeClass(function(index,class))：一个函数，返回一个或多个将要被移除的类名；

<div class="left">
    <div class="aaron newClass">
        <p>newClass</p>
    </div>
    <div class="aaron newClass">
        <p>newClass</p>
    </div>
</div>
<div class="right">
    <div class="aa bb imoocClass">
        <article>
            <p>imoocClass</p>
        </article>
    </div>
    <div>
        <article>
            <p>imoocClass</p>
        </article>
    </div>
</div>

<script type="text/javascript">
    //class=left下div元素删除newClass样式
    $('.left div').removeClass('newClass')
</script>


<script type="text/javascript">
    //.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式
    $('.right > div:first').removeClass(function(index,className){

        //className = aa bb imoocClass
        //把div的className赋给下一个兄弟元素div上作为它的class
        $(this).next().addClass(className)

        //删除自己本身的imoocClass
        return 'imoocClass'
    })


</script>



</body>

</html>

之切换样式 .toggleClass()

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery切换样式.toggleClass()</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        body,
        table,
        td
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }

        .h {
            background: #f3f3f3;
            color: #000;
        }

        .c {
            background: #ebebeb;
            color: #000;
        }
    </style>
</head>

<body>
<h2>隔行换色</h2>
<h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
    <tr>
        <td>jQuery快到碗里来！</td>
        <td>jQuery快到碗里来！</td>
    </tr>
    <tr>
        <td>jQuery快到碗里来！</td>
        <td>jQuery快到碗里来！</td>
    </tr>
    <tr>
        <td>jQuery快到碗里来！</td>
        <td>jQuery快到碗里来！</td>
    </tr>
    <tr>
        <td>jQuery快到碗里来！</td>
        <td>jQuery快到碗里来！</td>
    </tr>
    <tr>
        <td>jQuery快到碗里来！</td>
        <td>jQuery快到碗里来！</td>
    </tr>
</table>
<script type="text/javascript">
    //给所有的tr元素加一个class="c"的样式
    $("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
    //给所有的偶数tr元素切换class="c"的样式
    //所有基数的样式保留，偶数的被删除
    $("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
    //第二个参数判断样式类是否应该被添加或删除
    //true，那么这个样式类将被添加;
    //false，那么这个样式类将被移除
    //所有的奇数tr元素，应该都保留class="c"样式
    $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
</script>
</body>

</html>

之样式操作 .css()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="3-7.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <title>jQuery样式操作.css()</title>
</head>
<body>

<h3>获取css属性</h3>
<div class="first">获取颜色</div>
<p></p>
<div class="second">获取文字尺寸</div>
<p></p>
<div class="third">获取宽高尺寸</div>
<p></p>

<script type="text/javascript">
    //background-color:blue; => rgb(0, 0, 255)
    //颜色都会转化成统一的rgb标示
    $('p:eq(0)').text( $('.first').css('background-color'))

</script>

<script type="text/javascript">
    //字体大小都会转化成统px大小 em=>px
    $('p:eq(1)').text( $('.first').css('font-size') )
</script>

<script type="text/javascript">
    //获取尺寸，传入CSS属性组成的一个数组
    //{width: "60px", height: "60px"}
    var value = $('.first').css(['width','height']);
    //因为获取的是一个对象，取到对应的值
    $('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )
</script>

</br></br></br>
<h3>设置css属性</h3>
<div class="fourth">设置颜色设置文字尺寸</div>
<div class="fifth">设置颜色设置文字尺寸</div>
<div class="sixth">通过回调设置新的值</div>
<div class="seventh">同时设置多少个样式</div>

<script type="text/javascript">
    //多种写法设置颜色
    $('.fourth').css('background-color','red');
    $('.fifth').css('backgroundColor','yellow');
</script>

<script type="text/javascript">
    //多种写法设置字体大小
    $('.fourth').css('font-size','15px');
    $('.fifth').css('font-size','0.9em');
</script>


<script type="text/javascript">
    //获取到指定元素的宽度，在回调返回宽度值
    //通过处理这个value，重新设置新的宽度
    $('.sixth').css('width',function(index,value){
        value = value.split('px');
        return (Number(value[0])+50)+value[1];
    })
</script>

<script type="text/javascript">
    //合并设置,通过对象传设置多个样式
    $('.seventh').css({
        'font-size':'15px',
        'background-color':'green',
        'border':'1px solid gray'
    })
</script>


</body>

</html>

之元素的数据存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery元素的数据存储</title>
    <style type="text/css">
        .left,.right {
            width: 300px;
            height: 120px;
        }
        .left div,.right div {
            width: 100px;
            height: 90px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #cccccc;
        }
        .left div {
            background: #bbffdd;
        }
        .right div {
            background: #ddffbb;
        }

    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>jQuery.data()静态方法</h2>
<div class="left">
    <div class="inner">
        <p>click</p>
        <p>jQuery.data</p>
    </div>
    <div><span></span></div>
</div>
<h2>.data()实例方法</h2>
<div class="right">
    <div class="inner">
        <p>click</p>
        <p>.data</p>
    </div>
    <div><span></span></div>
</div>

<script type="text/javascript">
    $('.left').click(function () {
        var ele = $(this);
        //通过$.data方式设置数据
        $.data(ele,"a","data test");
        $.data(ele,"b",{name:"小"});
        //通过$.data方式取出数据
        var reset = $.data(ele,"a") + "<br>" + $.data(ele,"b").name;
        ele.find('span').append(reset);
    });
</script>
<script type="text/javascript">
    $('.right').click(function () {
        var ele = $(this);
        //通过.data方式设置数据
        ele.data("a","data test");
        ele.data("b",{name:"小"});
        //通过.data方式取出数据
        var reset = ele.data("a") + "<br>" + ele.data("b").name;
        ele.find('span').append(reset);

    });
</script>


</body>
</html>
sundaxiao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 设置style:display的方法
10-24
主要介绍了jquery 设置style:display的方法,需要的朋友可以参考下
jQuery中设置样式的两种方式
weixin_43727538的博客
04-06 2764
一、$(“div”).css(“height”,“30px”); 二、 $(“div”).css({fontSize:“30px”,color:“red”});
JQuery为元素添加样式
weixin_34353714的博客
05-10 462
        由于jquery支持css3，所有能很好的兼容很多浏览器，所以通过jquery来使用css样式比较好         为定义好的css样式可以调用元素的css方法添加样式         $("span").css("css属性名","属性值")         如  $("span").css("color","red") 将标签为span的字体都设为红色的  
Jquery-ui的Resizable属性详解
大牛的博客
11-04 1256
$("#win").resizable ( options); Resizable有16个属性，我们可以自由组合灵活运用来实现我们想要的效果 alsoResize:false,//类型STRING,可以伴随缩放的元素，如要在$("#win") 缩放的同时，“#win-1”也进行缩放，那就可以传“#win-1” animate:false,//类型BOOLEAN，缩放是否带动画效果默认false delay:null,//类型NUMBER,缩放延迟 ...
flexible与jquery-weui样式冲突
俗人
12-24 626
公众号网页flexible与jquery-weui样式冲突 正在写一个微信公众号内嵌H5,因为可能还要写支付宝的，所以用了jquery-weui,刚开始都用pt做的单位，之后发现横屏时还是以高度为准，所以元素都特别小，所以改用rem,就用了flexible.js。 引入之后发现大部分都可以，但是有些机型中元素都特别小，后来发现jquery-weui会对有些分辨率做兼容，比如下图 而且都是加了最大...
jquery-validation - 04 -错误样式
sinat_34003720的博客
03-07 330
jquery-validation支持自定义错误样式，包括如下 自定义错误样式 统一存放错误 定义错误位置 定义验证通过的样式 ???? jquery validation－ 错误样式概述 在验证出现错误后，jquery-validation会做如下操作 如果有errorContainer，在errorCotainer中显示错误(统一显示) 如果没有errorContainer,在input后面添加errorElement，样式是errorClass 默认值如下 规则 描述 默认值
公众号网页flexible与jquery-weui样式冲突
01-08
公众号网页flexible与jquery-weui样式冲突 正在写一个微信公众号内嵌H5,因为可能还要写支付宝的，所以用了jquery-weui,刚开始都用pt做的单位，之后发现横屏时还是以高度为准，所以元素都特别小，所以改用rem,就用了...
jQuery-with-XSS 检测jQuery版本是否存在XSS漏洞
09-29
动态站点会受到一种名为“跨站脚本攻击”（Cross Site Scripting, 安全专家们通常将其缩写成XSS,原本应当是css，但为了和层叠样式表（Cascading Style Sheet,CSS ）有所区分，故称XSS）的威胁，而静态站点则完全不受...
jquery-3.3.1.min.js
12-19
Js脚本，放在项目根目录下，即与.idea同目录，可对其进行外部调用，生成HTML网页中JQuery的事件和效果，显示、隐藏、淡入、淡出等等
jquery-validation 支持 自定义错误样式
06-04
jquery-validation 支持 自定义错误样式 ，包括如下 自定义错误样式 统一存放错误 定义 错误位置 定义 验证通过的样式 jquery validation－ 错误样式概述 在 验证出现错误 后，jquery-validation会做如下操作 如果 ...
jquery-watch：一个jQuery插件，用于监视CSS样式和属性更改，并在发生更改时得到通知
02-23
jQuery的手表一个jQuery插件，用于通知您元素中CSS，属性或属性更改这个小型jQuery插件使您可以监视对任何DOM元素CSS样式，属性或属性的更改，并响应于所监视的样式或属性的任何更改而触发回调。 您可以指定一个元素...
jQuery-样式（jQuery选择器）
小石头
02-24 9814
jQuery-样式（jQuery 选择器）
jQuery（W3S）
小石头
02-28 656
jQuery
认识jQuery(三书)
小石头
02-27 558
jQuery的优势 轻量级。 强大的选择器。 出色的DOM包装。 可靠的事件处理机制。 完善的Ajax。jQuery所有的Ajax操作都包装在$.ajax()中。 不污染顶级变量。 出色的浏览器兼容性。 链式操作方式。 隐式迭代。 行为层与结构层的分离。 丰富的插件支持。 完善的文档。 开源。 14. window.onload与$(document).ready()的对比 执行时机： win
jQuery-样式（初识jQuery）
小石头
02-23 312
jQuery-样式（初识jQuery）
jQuery设计思想（7月6日-7月31日）
小石头
07-06 237
大纲 选择网页元素 改变结果集 链式操作 元素的操作：取值和赋值 元素的操作：移动 元素的操作：复制、删除和创建 工具方法 事件操作 特殊效果
jQuery概要
小石头
02-23 234
jQuery初识、概要
jQuery-Ajax
小石头
03-02 207
$(selector). load()方法 jQuery中的get()和post()方法
jquery-ui-timepicker-addon.css
最新发布
06-03
jquery-ui-timepicker-addon.css是基于jQuery UI的日期时间选择器插件datetimepicker的样式表文件，用于定义和控制datetimepicker组件的外观和样式。 datetimepicker插件是一个基于jQuery UI的日期时间选择器插件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值