取赋值相关方法：

                  .html() .text() .size()
                  .addClass() .removeClass() .hasClass()
                  .css()
                  .attr() .prop()
注意：
     1、尽量避免直接添加行间样式，因为其权重过高，这样不利于响应式设计，破坏了c3 + h5 优雅的解决方案
     2、attr和prop的区别：jQuery认为attribute的checked selecked disabled 就是表示该属性初始状态的值，property的checked、selecked、disabled表示该属性实时状态的值
    （true或false)
 
1、.html( )  （即可取值又可赋值）
  1.     <ul>
  2.         <li>1</li>
  3.         <li>2</li>
  4.         <li>3</li>
  5.         <li>4</li>
  6.         <li>5</li>
  7.     </ul>
  8.     <script src = "./jquery.js"></script>
  9.     <script>
  10.         $('ul').html();  //取值 (ul里的li全部取)
  1. 控制台中 console.log($('ul').html())；
  2. 显示为
  1.         <li>1</li>
  2.         <li>2</li>
  3.         <li>3</li>
  4.         <li>4</li>
  5.         <li>5</li>
  1.         $('ul li').html(); //只取第一个li  结果为1
  2.  
  3.         //innerHTML
  4.         $('ul').html(''); //赋值(可传普通字母，也可带标签)
  5.  
  6.         //还可传函数
  7.         var arrName = ['周','王','张','白','刘']
  8.         $('ul li').html(function(index,ele){
  9.            return '<p style="color:orange">'+ arrName[index] + '</p>'
  10.         })
  11.  
  12.          //赋值时附一个值会把所有的li都赋成9 (取值时取一个，赋值时赋所有)
  13.          $('ul li').html('9');
  14.     </script>

2、text( )

  1.     <ul>
  2.         <li>1</li>
  3.         <li>2</li>
  4.         <li>3</li>
  5.         <li>4</li>
  6.         <li>5</li>
  7.     </ul>
  8.     <script src = "./jquery.js"></script>
  9.     <script>
  10.         // text innerText
  11.         $('ul').text(); //取值
  1. console.log($('ul').text());
  2. 显示
  3.         1
  4.         2
  5.         3
  6.         4
  7.         5
  1.         $('ul li').text(); //取值（都取，与html不同）
  1. console.log($('ul li').text());
  2. 显示     12345
  1.         //赋值
  2.         $('ul li').text('9') //都变9
  3.         $('ul').text('9') //覆盖掉 变成一个9
  4.         $('ul').text('<p>3</P>') //文本形式的标签   显示结果： <p>3</p>
  5.         //也可传函数
  6.         $('ul li').text(function(index,ele){
  7.             return arrName[index];
  8.         })
  9.     </script>

3、size( )

  1. $('ul li').size(); //相当于$('ul li').length

4、.addClass( )    可传字符串

  1.     <div class="demo"></div>
  2.     <div class="demo"></div>
  3.     <div class="demo"></div>
  4.     <script>
  5.     $('.demo').eq(0).addClass('active')
  6.    </script>
  1. 也可填两个属性
  2. $('.demo').eq(0).addClass('active duyi')
    所有div都加active属性
    $('.demo').addClass('active')

也可传函数

<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<script src= "./jquery.js"></script>
<script>
$('.demo').addClass(function(index,ele){
    if(index % 2 == 0){
       return 'duyi'
}
       return 'active'
});
</script>

.removeClass()  用法同理.addClass( )

.hasClass()   判断标签中存不存在类名

  1.     <div class="demo active"></div>
  2.     <div class="demo"></div>
  3.     <div class="demo"></div>
  4.     <script src= "./jquery.js"></script>
  5.     <script>
  6.     console.log($('.demo').hasClass('active'));
  7.     //有active类名  返回true

小案例 （点击更改颜色）

  1.     <style>
  2.         .demo{
  3.             width:100px;
  4.             height:100px;
  5.             background:red;
  6.             margin-bottom:10px;
  7.         }
  8.         .demo.active {
  9.             background:orange;
  10.         };
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="demo active"></div>
  15.     <div class="demo"></div>
  16.     <div class="demo"></div>
  17.     <script src= "./jquery.js"></script>
  18.     <script>
  19.     $('.demo').click(function(e){
  20.       $('.demo').removeClass('active')
  21.       $(this).addClass('active')
  22.     });
  23.    </script>

换肤

  1.         .wrapper .style1{
  2.             background:orange;
  3.         }
  4.         .wrapper .style1 li{
  5.             background:blue;
  6.         }
  7.         .wrapper .style2{
  8.             background:purple;
  9.         }
  10.         .wrapper .style2 li{
  11.             background:sienna;
  12.         }
  13.         .wrapper.active .style1{
  14.             background:red;
  15.         }
  16.         .wrapper.active .style1 li{
  17.             background:blueviolet;
  18.         }
  19.         .wrapper.active .style2{
  20.             background:paleturquoise;
  21.         }
  22.         .wrapper.active .style2 li{
  23.             background:greenyellow;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div class="wrapper">
  30.         <ul class = "style1">
  31.             <li>1</li>
  32.             <li>2</li>
  33.             <li>3</li>
  34.             <li>4</li>
  35.             <li>5</li>
  36.         </ul>
  37.         <ul class = "style2">
  38.             <li>1</li>
  39.             <li>2</li>
  40.             <li>3</li>
  41.             <li>4</li>
  42.             <li>5</li>
  43.         </ul>
  44.     </div>
  45.  
  46.     <script src="./jquery.js"></script>
  47.     <script>
  48.         $('.wrapper').click(function (index,ele) {
  49.            if($(this).hasClass('active')){
  50.             $(this).removeClass('active')
  51.            }else{
  52.             $(this).addClass('active')
  53.            }
  54.         });

.css( )

  1.         //.css赋值形式
  2.         $('.demo').css('width','100px')
  3.         $('.demo').css('width',100)
  4.         //多个样式
  5.         $('.demo').css({width:'100px',height:'100px',backgroundColor:'red'})
  6.                   .css({width:'+=100px'}) //这种形式也可以
  7.         //也可取值
  8.         console.log( $('.demo').css('backgroundColor')) //结果返回RGB

.attr( )  基于  setAttribute     getAttribute

.prop( )

  1.     <div class="demo" cst = 'aa'></div>
  2.     <input type="checkbox" checked = ''>
  3.     <script src="./jquery.js"></script>
  4.     <script>
  5.        //取值
  6.        console.log( $('.demo').attr('class')) // 结果 demo
  7.        console.log( $('.demo').attr('cst'))   // 结果 aa
  8.        //checked中有没有赋值都返回checked
  9.        console.log( $('input').attr('checked'))//取值是selected checked disabled 不用attr方法
  10.        //prop 在标签上取值只能取特性的值
  11.        console.log( $('.demo').prop('class')) //cst不可以取
  12.        console.log( $('input').prop('checked')) //返回 true 如果把checked = ''去掉则返回false (关注状态是否被选中)
  13.  
  14.        //赋值
  15.        $('.demo').attr('id','demo1'); //自定义的属性使用attr
  16.        $('.demo').prop('id','demo1'); //特性使用prop
 

jQuery之dom操作（取赋值方法）的更多相关文章

  1. jQuery 第二章 实例方法 DOM操作取赋值相关方法

    取赋值相关方法:  .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...

  2. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  3. js，jQuery和DOM操作的总结（二）

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  4. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  5. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  6. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  7. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  8. Jquery所有Dom操作汇总

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery 第四章 实例方法 DOM操作之data方法

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

随机推荐

  1. Linux性能及调优指南1.2之Linux内存架构

    本文为IBM RedBook的Linux Performanceand Tuning Guidelines的1.2节的翻译原文地址:http://www.redbooks.ibm.com/redpap ...

  2. VMware NAT模式多个虚拟机相互访问

    在一台主机上只允许有一个NAT模式的虚拟网络.因此,同一台主机上的多个采用NAT模式网络连接的虚拟机也是可以相互访问的.

  3. redis如何随系统启动

    Redis可以通过命令redis-server启动,但这种启动方式适用于开发环境,对于生产环境来说,配置好redis的配置文件,并使redis随linux启动则更加方便些,下面则记录下redis如何随 ...

  4. 深入Spring Boot：怎样排查 Cannot determine embedded database driver class for database type NONE

    ref:https://www.journaldev.com/13830/spring-boot-cannot-determine-embedded-database-driver-class-for ...

  5. for循环执行时在，每执行一次for循环中弹出提示框，延时问题

    在需求中,ajax的返回值,根据数组内容的长度去做循环,每循环一次弹出提示框,发现for循环的执行速度非常之快,想到了延时,但是在for循环中延时并不能解决这个问题. 查到setTimeout的递归处 ...

  6. 框架： require.js

    require.js http://www.bootcdn.cn/require.js/ HTML: <div class="container" data-page=&qu ...

  7. 《汇编语言 基于x86处理器》第十二章浮点数部分的代码

    ▶ 书中第十二章的程序,主要讲了 FPU 的指令和浮点数计算的过程 ● 代码,简单的 32 为浮点数测试 INCLUDE Irvine32.inc INCLUDE macros.inc .data f ...

  8. zabbix使用ICMP Ping模版实现对客户端网络状态的监控，监控丢包率、响应时间

    参考网站: https://www.cnblogs.com/saneri/p/6706578.html 使用fping报错注意事项: https://blog.csdn.net/oqqssh/arti ...

  9. 关于 version control

    1.什么是 version control 版本控制(Vevision control)是维护工程蓝图的标准作法,能追踪工程蓝图从诞生一直到定案的过程.此外,版本控制也是一种软体工程技巧,借此能在软体 ...

  10. Python conda 入门

    https://blog.csdn.net/yimingsilence/article/details/79388205 查看版本 conda --version 列出所有的Python环境 cond ...