jQuery之dom操作（取赋值方法）

取赋值相关方法：

.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( ) （即可取值又可赋值）

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

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

    <script>

        $('ul').html();  //取值 (ul里的li全部取)

控制台中 console.log($('ul').html())；

显示为

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        $('ul li').html(); //只取第一个li  结果为1

        //innerHTML

        $('ul').html(''); //赋值(可传普通字母，也可带标签)

        //还可传函数

        var arrName = ['周','王','张','白','刘']

        $('ul li').html(function(index,ele){

           return '<p style="color:orange">'+ arrName[index] + '</p>'

        })

         //赋值时附一个值会把所有的li都赋成9 (取值时取一个，赋值时赋所有)

         $('ul li').html('9');

    </script>

2、text( )

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

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

    <script>

        // text innerText

        $('ul').text(); //取值

console.log($('ul').text());

显示

        1

        2

        3

        4

        5

        $('ul li').text(); //取值（都取，与html不同）

console.log($('ul li').text());

显示     12345

        //赋值

        $('ul li').text('9') //都变9

        $('ul').text('9') //覆盖掉 变成一个9

        $('ul').text('<p>3</P>') //文本形式的标签   显示结果： <p>3</p>

        //也可传函数

        $('ul li').text(function(index,ele){

            return arrName[index];

        })

    </script>

3、size( )

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

4、.addClass( ) 可传字符串

    <div class="demo"></div>

    <div class="demo"></div>

    <div class="demo"></div>

    <script>

    $('.demo').eq(0).addClass('active')

   </script>

也可填两个属性

$('.demo').eq(0).addClass('active duyi')
所有div都加active属性
$('.demo').addClass('active')

也可传函数

$('.demo').addClass(function(index,ele){

if(index % 2 == 0){

return 'duyi'

}

return 'active'

});

</script>

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

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

    <div class="demo active"></div>

    <div class="demo"></div>

    <div class="demo"></div>

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

    <script>

    console.log($('.demo').hasClass('active'));

    //有active类名  返回true

小案例（点击更改颜色）

    <style>

        .demo{

            width:100px;

            height:100px;

            background:red;

            margin-bottom:10px;

        }

        .demo.active {

            background:orange;

        };

    </style>

</head>

<body>

    <div class="demo active"></div>

    <div class="demo"></div>

    <div class="demo"></div>

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

    <script>

    $('.demo').click(function(e){

      $('.demo').removeClass('active')

      $(this).addClass('active')

    });

   </script>

换肤

        .wrapper .style1{

            background:orange;

        }

        .wrapper .style1 li{

            background:blue;

        }

        .wrapper .style2{

            background:purple;

        }

        .wrapper .style2 li{

            background:sienna;

        }

        .wrapper.active .style1{

            background:red;

        }

        .wrapper.active .style1 li{

            background:blueviolet;

        }

        .wrapper.active .style2{

            background:paleturquoise;

        }

        .wrapper.active .style2 li{

            background:greenyellow;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul class = "style1">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

        <ul class = "style2">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

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

    <script>

        $('.wrapper').click(function (index,ele) {

           if($(this).hasClass('active')){

            $(this).removeClass('active')

           }else{

            $(this).addClass('active')

           }

        });

.css( )

        //.css赋值形式

        $('.demo').css('width','100px')

        $('.demo').css('width',100)

        //多个样式

        $('.demo').css({width:'100px',height:'100px',backgroundColor:'red'})

                  .css({width:'+=100px'}) //这种形式也可以

        //也可取值

        console.log( $('.demo').css('backgroundColor')) //结果返回RGB

.attr( ) 基于 setAttribute getAttribute

.prop( )

    <div class="demo" cst = 'aa'></div>

    <input type="checkbox" checked = ''>

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

    <script>

       //取值

       console.log( $('.demo').attr('class')) // 结果 demo

       console.log( $('.demo').attr('cst'))   // 结果 aa

       //checked中有没有赋值都返回checked

       console.log( $('input').attr('checked'))//取值是selected checked disabled 不用attr方法

       //prop 在标签上取值只能取特性的值

       console.log( $('.demo').prop('class')) //cst不可以取

       console.log( $('input').prop('checked')) //返回 true 如果把checked = ''去掉则返回false (关注状态是否被选中)

       //赋值

       $('.demo').attr('id','demo1'); //自定义的属性使用attr

       $('.demo').prop('id','demo1'); //特性使用prop

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

jQuery 第二章实例方法 DOM操作取赋值相关方法
取赋值相关方法: .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...
第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类核心-DOM: DOM Co ...
解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
03-老马jQuery教程-DOM操作
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery 第四章实例方法 DOM操作之data方法
jquery 里面的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...

随机推荐

MySQL完整性约束foreign key与表操作。
一 MySQL中表的完整性约束: 我们首先知道约束条件跟类型的宽度一样,都是可选的,也就是说,我们在创建表的时候可以不指定,但是为了创建的表更加的完整,我们一般会加一些约束条件,name下面我们讲一 ...
当别人给你一个wsdl或者webservice接口时
一通过wsdl生成客户端引用于http://www.cnblogs.com/yisheng163/p/4524808.html 参照http://www.cnblogs.com/xdp-gacl ...
Python并发编程-事件驱动模型
一.事件驱动模型介绍 ...
在Linux上git pull线上仓库代码时，出现error: Your local changes to the following files would be overwritten by merge
在Windows上工作时未出现过该问题,于是通过命令: git diff 查看差异,得到结果: diff --git a/start_crons.sh b/start_crons.sh old mod ...
NoSQL学习1
MongoDB使用C++语言编写的一个基于分布式的文件存储的开源数据库.可以在承受高负载的情况下,保证服务器的性能. MongoDB将数据存储成为一个文档,数据结构有键值对组成.类似于JSON,字段值 ...
CSS选择器效率
CSS选择器效率从高到低的排序如下: ID选择器比如#header 类选择器比如.promo 元素选择器比如 div 兄弟选择器比如 h2 + p 子选择器比如 li > ul 后代选 ...
ROS学习手记 - 8 编写ROS的Publisher and Subscriber
上一节我们完成了 message & srv 文件的创建和加入编译,这次我们要玩简单的Publisher 和 Subscriber 要玩 Publisher 和 Subscriber, 需要具 ...
webDAV
wiki webDAV client - java https://github.com/lookfirst/sardine https://www.cnblogs.com/xgjblog/p/383 ...
js提高篇
1定义一个方法 function aa(){alert(this)} 对于浏览器这只是一个方法,那么this是什么的,this理所当然是document对象了..也就是说打页面定义的方法都是do ...
numpy+pandas 基础学习
#-*- coding:utf-8 -*- import numpy as np; data1=[1,2,3,4,5] array1=np.array(data1) #创建数组/矩阵 # 使用nump ...

jQuery之dom操作（取赋值方法）

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

随机推荐

热门专题