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

随机推荐

Ubuntu下RabbitMQ安装
由于RabbitMQ需要erlang语言的支持,在安装RabbitMQ之前需要安装erlang,执行命令: sudo apt-get install erlang-nox 安装RabbitMQ命令: ...
liinux安装 mysql 及主从复制
mariadb其实就是mysqlmysql已经被oracle收购,它即将闭源,马上要开始收费了因此还想免费试用开源的数据库mysql,就在centos7上,将mysql分支为mariadb 安装mar ...
Spring中BeanFactory与ApplicationContext的区别
BeanFactory:Bean工厂接口,是访问Spring Bean容器的根接口,基本Bean视图客户端.从其名称上即可看出其功能,即实现Spring Bean容器的读取. ApplicationC ...
official shiro（Reference Manual）
Apache Shiro Reference Documentation Overview Core Spring-based Applications 1.Overview pom.xml < ...
设计模式、j2ee 部分、EBJ 部分
八. 软件工程与设计模式 1 .UML 方面标准建模语言 UML.用例图,静态图(包括类图.对象图和包图),行为图,交互图(顺序图,合作图),实现图. 2 .j2ee 常用的 ...
kubernetes下安装mysql
参考文档:https://blog.csdn.net/sealir/article/details/81177747 注:有mysql安装在k8s集群内,集群外且通过k8s service endpo ...
leetcode44
public boolean isMatch(String text, String pattern) { // 多一维的空间,因为求 dp[len - 1][j] 的时候需要知道 dp[len][j ...
UI5-学习篇-8-本地SAP WEB IDE开发
1.本地SAP WEB IDE下载 UI5-学习篇-3-Local SAP WEB IDE下载 2.启动Orion服务解压SAP WEB IDE文件后,双击Orion应用程序启动服务,如下图: 服务 ...
LeetCode 题解：Populating Next Right Pointers in Each Node I & II 二有难度。考虑不全面。
每次应该把root同层的右侧节点传过来.如果没有,就传NULL. 同时,应该是先右后左. 感觉这次的代码还挺简洁的.. void construct(struct TreeLinkNode *root ...
尚硅谷springboot学习15-日志框架1-入门
引子小张:开发一个大型系统 1.System.out.println(""):将关键数据打印在控制台:去掉?写在一个文件? 2.框架来记录系统的一些运行时信息:日志框架 : ...

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

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

随机推荐

热门专题