属性操作主要分为四个部分：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. Dropping Balls UVA - 679（二叉树的遍历）

    题目链接:https://vjudge.net/problem/UVA-679 题目大意:t组样例,每组包括D M   层数是D   问第M个小球落在哪个叶子节点?    每个节点有开关  刚开始全都 ...

  2. form表单序列化数据之后，追加额外数据

    form表单序列化数据之后追加额外数据多使用在js中,下面是追加额外数据的代码: <span style="font-size:18px;">$.param({'inv ...

  3. bcc-tools安装

    1           一. 安装cmake cmake是一种跨平台的编译工具,安装过程如下: 下载源码包:https://cmake.org/files/v3.8/cmake-3.8.0.tar.g ...

  4. jemalloc报 Unsupported system page size错误

  5. IDEA部署Express工程

    1.下载并安装Nodejs 2.通过Nodejs的NPM工具安装全局安装express工具,命令如下: npm install -g express@XXX npm install -g expres ...

  6. git跟svn 服务端对比

    Git已经火了很久,简单的使用也没有问题,但有几个问题一直以来都没有搞清楚:git跟svn有哪些异同,两者相互的优劣是什么,git的分布式怎么理解,为什么有离线提交,,,自己动手,分别看一下服务端跟客 ...

  7. Spring Boot实战(2) Spring常用配置

    1. Bean的Scope scope描述Spring容器如何新建Bean的实例.通过注解@Scope实现,取值有: a. Singleton:一个Spring容器中只有一个Bean的实例.此为Spr ...

  8. node搭环境(二)之 bower gulp

    前面详细记录了安装node及git,接来下要安装bower,首先创建一个空文件夹bowerandgulp. 步骤:1.安装node.js 2.node里面自带了 npm  3.通过npm 安装cnpm ...

  9. Navicat连接Oracle数据库报错ORA-28547解决方法

    先说明下我机器的环境: 1.Win10 - 64bit 2.Navicat Premium_11.2.7  - 64bit 3.未安装Oracle数据库(包括Client也未安装) 解决方法: 1.下 ...

  10. python的数字

    1.整数 与其它语言不同点两个乘号(**)代表 乘方运算 .前面代表底数,后面代表指数. 2.浮点数 它的小数位数可能是不确定的,需要注意 3.使用str()避免错误 在输出字符串时,可以避免类型错误 ...