属性操作主要分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

　　HTML属性操作：属性的读取，设置，以及移除，如attr()、removeAttr()

　　DOM属性操作：属性的读取，设置，以及移除，如prop()、removeProp()

　　类样式操作：指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

　　值操作：对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

        //获取属性值

        var id = $('div').attr('id')

        console.log(id)

        var cla = $('div').attr('class')

        console.log(cla)

        //设置值

        //1.设置一个值 设置div的class为box

        $('div').attr('class','box')

        //2.设置多个值，参数为对象，键值对存储

        $('div').attr({name:'hahaha',class:'happy'})

removeAttr()

//删除单个属性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

//删除多个属性

$('#box').removeAttr('name class');

prop()

　　当该方法用于返回属性值时，则返回第一个匹配元素的值。

　　当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

返回属性值：

$(selector).prop(property)

设置属性和值（可以以键值对的形式设置多个）：

$(selector).prop(property,value)

注意：

　　attr(),prop()两个区别很小，一般常用attr()，只有在含有true，false的情况下使用prop()

使用案例

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    男<input type="radio" id='test' name="sex"  checked/>

    女<input type="radio" id='test2' name="sex"/>

    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //获取第一个input

            var el = $('input').first();

            //undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined

            console.log(el.attr('style'));

            // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象

            console.log(el.prop('style'));

            console.log(document.getElementById('test').style);

            $('button').click(function(){

                alert(el.prop("checked") ? "男":"女");

            })

        })

    </script>

</body>

</html>

效果：

addClass()

添加多个类，追加一个类名

removeClass()

移除指定类名，括号里面不填默认移除全部

例

鼠标点击名称，改变颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .active{

            color: red;

        }

    </style>

</head>

<body>

     <ul>

         <li class="item">张三</li>

         <li class="item">李四</li>

         <li class="item">王五</li>

     </ul>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function(){

             $('ul li').click(function(){

                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象

                 $(this).addClass('active').siblings('li').removeClass('active');

             })

         })

     </script>

</body>

</html>

toggleClass

　　如果存在就删除一个类

　　不存在就添加一个类

html获取值

　　获取选中标签元素中所有的内容

$('#box').html();

设置值：设置该元素的所有内容 会替换掉 标签中原来的内容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

text获取值

　　和thml用法一样

val（和数据发生交互，这个在后期学习中很重要）

$(selector).val()//设置值和获取值

val()用于表单控件中获取值，如input，select中

例

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form action="">

            <input type="radio" name="sex" value="1"/>男

            <!-- 设置cheked属性表示选中当前选项 -->

            <input type="radio" name="sex" value="2" checked=""/>女

            <input type="radio" name="sex" value="3"/>gay

            <input type="checkbox" value="a" checked=""/>吃饭

            <input type="checkbox" value="b" checked=""/>睡觉

            <input type="checkbox" value="c" />打豆豆

    <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->

            <select name="timespan" id="timespan" class="Wdate"   >

                <option value="1">8:00-8:30</option>

                <option value="2" selected="">8:30-9:00</option>

                <option value="3">9:00-9:30</option>

            </select>

            <input type="text" name="" id="" value="111" />

    </form>

</body>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            // 1.获取值

            // 获取选框中被选中的value值,得到结果2

            console.log($('input[type=radio]:checked').val());

            // checked值有多个，只获取第一个被选中的值，val()中可以赋值，从伪数组中查看checked值有几个

            console.log($('input[type=checkbox]:checked').val());

            // 查看下拉列表被选中的值

            var obj = $("#timespan option:selected");

            // 获取选中的值，即2

            var time = obj.val();

            console.log(time);

            // 获取文本,得到val:2 text:8:30-9:00

            var time_text = obj.text();

            console.log('val:'+time,'text:'+time_text);

            // 获取文本框中的value值,得到下面输入的‘试试就试试’

            console.log($('input[type=text]').val());

            // 2.设置值

            // 可以设置单选框和多选框被选中项

            $('input[type=radio]').val(['666']);

            $('input[type=checkbox]').val(['a','b']);

        })

            // 通过使用select设置下拉列表框中的选中值，select可以设置单个，也能设置多个

            $('select').val(['3','2'])

             // 设置文本框中的value值

            $('input[type=text]').val('试试就试试')

    </script>

</html>

界面显示

　　

前端jQuery之属性操作的更多相关文章

  1. 前端 ----jQuery的属性操作

    04-jQuery的属性操作   jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...

  2. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  3. jquery之属性操作

    jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...

  4. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  5. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  6. jQuery系列（四）：jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  7. JQuery常用属性操作，动画，事件绑定

    jQuery 的属性操作        html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.        text() 它可以设置和获取起始标签和 ...

  8. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  9. jQuery的属性操作

    下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...

随机推荐

  1. Mybatis学习笔记13 - 动态sql之set标签

    示例代码: 接口定义: package com.mybatis.dao; import com.mybatis.bean.Employee; public interface EmployeeMapp ...

  2. 性能测试工具LoadRunner06-LR之Virtual User Generator 事务（Transaction）

    定义 为了衡量某个操作的性能,需要在操作的开始和结束位置插入这样一个范围,这就定义了一个transaction. 原因 从性能测试的角度出发,我们需要知道不同的操作所花费的时间,这样就能衡量不同的操作 ...

  3. Kudu1.1.0 、 Kudu1.2.0 Kudu1.3.0的版本信息异同比较

    不多说,直接上干货!  Kudu1.1.0 新特性 python API升级,具备JAVA C++client一样的功能(从0.3版本直接升级到1.1),主要的点如下: 1.1. 改进了Parial ...

  4. Linux网卡操作

    单个网卡操作 [root@localhost ~]# ifdown eth0 #关闭网络 [root@localhost ~]# ifup eth0 #启动网络 网络服务: [root@localho ...

  5. 解决dede图集上传图片时跳出302错误

    错误.以前从来没遇到过,想了半天也没想出是哪里出了错误,郁闷~ 没辙,去论坛搜了一下,还真有同命相连的兄弟,同样爆出这个错误.往下拉了几楼,还是找到了答案. 解决办法是: 在include/userl ...

  6. pat1088. Rational Arithmetic (20)

    1088. Rational Arithmetic (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue F ...

  7. React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接和作者信息. 为了让代码更灵活,可以写更多的组件,我们把这种模 ...

  8. python面试题——框架和其他（132题）

    一.框架对比 (1)django.flask.tornado框架的比较? Django:简单的说Django是一个大而全的Web框架,内置了很多组件,ORM.admin.Form. ModelForm ...

  9. Xxy 的车厢调度

    有 一 个 火 车 站 , 铁 路 如 图 所 示 ,每辆火车从 A 驶入, 再从 B 方向驶出,同时它的车厢可以重新组合.假设 从 A 方向驶来的火车有 n 节(n<=1000) ,分别按照顺 ...

  10. selenium找不到元素

    1.页面元素处于不显示状态时,找不元素.必须使元素处于显示状态.使用js 或者 元素的点击事件等方式可以实现. " src="index.php?m=Index&a=Men ...