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 跟数据有 ...

随机推荐

solr学习（六）：使用自定义int/long类型主键
需求分析: 我不想使用solr默认的主键id,我想换成其他的,比如我的文章id为article_id,我想让article_id作为主键. 而且,我的主键是int类型,而solr的主键默认是strin ...
让MySql支持表情符号（MySQL中4字节utf8字符保存方法）
UTF-8编码有可能是两个.三个.四个字节.Emoji表情是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去. 解决方案:将编码从utf8转换成utf8mb4. 1. 修改my.in ...
初学Jmeter添加Http请求，执行接口测试
最近测试并发,刚开始使用的是录制方法,后面发现录制后无任何界面,加参数也不知从何着手,于是查了很多文章,终于慢慢的着手从http请求来测试并发了. 当然这是个遗留问题,先放在这里后面清楚了再回来补充: ...
MySQL----ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes
1.问题描述在导入同事提供的一个sql文件时候,出现了一个1071错误,总结学习一下: 2.分析问题错误的字面意思是说mysql字段设置的值太长了,不能大于767个字节,在网上找了一些资料后才知道 ...
企业项目构建学习（一）maven
<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...
django---单表操作之增删改
首先找到操作的首页面‘ 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
linux中测试py脚本使用debug模式
python -mtrace --trace ping_host.py
关于微信支付接口,curl错误代码58
微信支付接口,curl错误代码58 之前的微信付款到用户零钱都是好好的,今天运营来找我, 我想了了下,就是进行了网站搬家看了下微信支付相关的证书配置文件知道了,在这个要改下证书的路径 WxPa ...
ssh rsa 非对称加密基本原理
我们常用的ssh 免密登陆是用了非对称加密的rsa算法(最为常用),与对称加密的相比会慢一些,但是更安全.秘钥长度超过768位无法破解. 默认长度是2048位(无法破解,非常安全) ssh-keyg ...
03.设计模式_抽象工厂模式(Abstract Fcatory)
抽象工厂模式:创建一些列相关或者互相依赖的对象的接口,而无需指定他们具体的类, 1.创建工厂Factory: package patterns.design.factory; import java. ...

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

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

随机推荐

热门专题