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

随机推荐

C# JToken类的使用，实现解析动态json数据、遍历、查找
在原来解析json数据是,一般都是用反序列化来实现json数据的解读,这需要首先知道json数据的结构并且建立相应的类才能反序列化,一旦遇到动态的json数据,这种方法就不使用. 为了解决动态解析js ...
elastalert新增自定义警告推送
举例,博主公司有自己的内部通讯工具(类似QQ),接下来用IM代称该工具.于是希望elastalert的警告推送可以支持IM的公众号群发功能. 等博主这个月知识库写了再来补充hah
微信小程序笔记<五> 页面管理及生命周期（route）——getCurrentPages()
在小程序中所有页面的路由全部由框架进行管理,而框架以栈的形式维护了当前的所有页面. 当发生路由切换时,页面栈的表现: getCurrentPages() 用于获取当前页面栈的实例,可以把 getCur ...
python-html-百度云音视频点播服务
加密的视频: 一:python后端需要生成token token计算规则名词解释: userId: 百度云用户唯一标识,可在百度云管理控制台账号基本信息中得到,32位字符串. userKey:用户密 ...
SQL Server 合并行
select a.*,b.Organization_Name,c.User_Name sgry,c.renNum,d.User_Name fzr,e.pic_url from dbo.TB_ZYM_L ...
输出单个文件中的前 N 个最常出现的英语单词，并将结果输入到文本文件中。程序设计思路。
将文件内容读取后存入StringBuffer中. 利用函数将段落分割成字符串,按(“,”,“.”,“!”,“空格”,“回车”)分割,然后存入数组中. 遍历数组,并统计每个单词及其出现的次数. 要求出文 ...
搭建eclipse开发环境
eclipse-jee配置基本配置: 快捷查找:window->perferences->搜索框搜索 utf8: window->perferences->general-& ...
hive压缩
1. 常用 rcfile + gzip parquet + snappy 2. 压缩比,参考 TextFile默认格式,加载速度最快,可以采用Gzip进行压缩,压缩后的文件无法split,即并行处理 ...
C# 反射常见用法
定义: 反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型(包括类.结构.委托.接口和枚举等)的成员和成员的信息.有了反射,即可对每一个类型了如指掌.另外我还可以直接创建对 ...
beeline 连接hive
HiveServer2是一个能使客户端针对hive执行查询的一种服务,与HiverServer1比较,它能够支持多个客户端的并发请求和授权的:HiveCLI 和 hive –e的方式比较单一,HS2允 ...

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

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

随机推荐

热门专题