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

随机推荐

hive类型转化错误，会错误提示指定分区参数
select * from TRAD_LIST t WHERE t.dt >= '2017-10-18' and t.dt <= '2017-11-01' and t.con_level ...
git将多个commit合并成一个
1. 查看提交历史(最近10个) git log - 2. 回到前面第十个commit,且将后面九个commit提交的内容状态改为未提交 git reset commitID(第十个commit的ID ...
day3（第一周）周末作业
1.创建字符串变量的三种写法及其区别# 代码:单引号 ''# 双引号 ""# 多引号 ''' '''# 区别:单引号和双引号没有任何区别,一般用于单行字符:多行字符用多引号.## ...
《算法》第二章部分程序 part 3
▶ 书中第二章部分程序,加上自己补充的代码,包括各种优化的快排 package package01; import edu.princeton.cs.algs4.In; import edu.prin ...
Flex 画图
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...
day33-常见内置模块二(hashlib、shutil、configparse)
一.hashlib算法介绍 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 1.什么是摘要算法呢? 摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一 ...
排序NB三人组
排序NB三人组快速排序,堆排序,归并排序 1.快速排序方法其实很简单:分别从初始序列“6 1 2 7 9 3 4 5 10 8”两端开始“探测”.先从右往左找一个小于6的数,再从左往 ...
JavaScript：几种常用循环
##循环数组的方法 1.for循环 for(let i = 0;i < ary.length;i++){ console.log(ary[i]); } 2.forEach ary.forEach ...
Oracle问题小结
1.win8.1安装Oracle11g后,重启电脑,出现黑屏. 解决办法:安全模式下,找到以oracle开头的全部服务,所有“自动”或者“自动(延迟启动)”的都设置为“手动”,只需要开启OracleO ...
mysql 忘记密码解决方案
Mysql 忘记root密码的完美解决方法转载 2016-12-23 作者:MR.QiGao 我要评论通常在使用Mysql数据库时,如果长时间没有登陆,或者由于工作交接完成度不高,会导 ...

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

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

随机推荐

热门专题