jQuery中的属性与CSS

短命女 2022-05-18 02:50 147阅读 0赞

## 基本属性 attr ##

> 原作：西岭老湿、凌风

<body>
        <input type="button" id="btu" value="点击"> <br>
        <img src="91.jpg" id="img">
    </body>
    <script>
        $('#btu').click(function(){
         
            //获取被选元素的属性值。 
            var s = $('#img').attr('src');
            alert(s);
    
            //设置被选元素的属性值
            $('#img').attr('src','92.png')
    
            //设置被选元素的 多个 属性值
            $('#img').attr({
        'src':'92.png','alt':'sdfds'})
    
            //函数返回值为属性值
            $('img').attr('width',function(){
         
                return 10*40;
            });
    
            //删除元素属性
            $('img').removeAttr('src');
        });
    </script>

**知识点：**  
attr(name) ：根据属性的名称获取元素的属性值  
attr(key,value) ：设置元素的属性，key属性，value属性值  
attr(properties) ：一次为元素设置多个属性，要求参数是一个json对象  
attr(key,fn) ：通过函数的返回值设置元素的属性  
removeAttr(name) ：移除元素的属性

## class属性 ##

<head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jq183.js"></script>
        <style media="screen">
            td{
                border: 1px solid black;
            }
            table{
                width: 500px; height: 180px;
                border-collapse: collapse;
                background-color: #e0e0e0;
            }
            .l{
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>编号</td><td>姓名</td>
                <td>性别</td><td>年龄</td>
            </tr>
            <tr>
                <td>1</td><td>刘能</td>
                <td>男</td><td>45</td>
            </tr>
        </table>
    </body>
    <script type="text/javascript">
        $('tr').mouseover(function(){
         
            //添加class值为l
            $(this).addClass('l');
    
            //如果有就移除，没有就添加
            // $(this).toggleClass('l');
        })
        $('tr').mouseleave(function(){
         
            //移除class值为l
            $(this).removeClass('l');
    
            //如果有就移除，没有就添加
            // $(this).removeClass('l');
        })
    </script>

**知识点：**  
addClass(class) ：为元素添加class属性  
removeClass(class) ：移除元素的class属性  
toggleClass(class) ：切换元素的class属性，如果有就移除，没有就添加  
hasClass(class) ：判断元素是否具有某个class属性

## css样式设置 ##

<body>
        <div style="width:300px;height:300px;border:1px red solid">
                itcast
        </div>
    </body>
    <script>
        //获取style属性值
        alert($('div').css('width'));
    
        //设置style 属性值
        $('div').css('background','yellow');
    
        //一次性设置多个值
        $('div').css({
            width:200,
            height:200,
            background:'pink'
        });
    </script>

**知识点**  
css(name) ：根据name获取元素的css属性值  
css(name,value) ：设置元素的属性值  
css(properties) ：一次为元素设置多个属性值，要求参数是一个json对象

## offset位置 ##

<body>
        <div style="width:300px;height:300px;border:1px red solid">
                itcast
        </div>
    </body>
    <script>
        // 获取div位置
        var pos = $('div').offset();
        alert('横坐标开始位置'+pos.left);
        alert('纵坐标开始位置'+pos.top);
    
        //修改坐标位置
        $('div').offset({
            left:50,
            top:30
        });
    </script>

**知识点**  
offset() ：获取元素的横纵坐标，返回一个json对象，拥有left与top属性  
offset(coordinates) ：设置元素位置要求是一个json对象，必须包含left与top属性

## 宽高设置 ##

<body>
        <div style="width:300px;height:300px;border:1px red solid">
                itcast
        </div>
    </body>
    <script>
        //获取宽高值
        alert($('div').width());
        alert($('div').height());
    
        //设置宽高值
        $('div').width(500);
        $('div').height(500);
    </script>

**知识点**  
width() ：获取元素的宽度  
width(value) ：设置元素的宽度  
height() ：获取元素的高度  
height(value) ：设置元素的高度

## 文本 & 表单值 ##

<body>
        <input type="button" name="" value="文本值" id="i">
        <hr>
        <input type="text" name="" value="" id="u">
        <div id="d"><div><p>icast</p></div></div>
    </body>
    <script>
        $('#i').click(function(){
         
            //文本框的内容
            alert($('#u').val());//获取
            $('#u').val(222);//设置
    
            //文本内容
            $('#d').html('西岭老湿'); //设置
            alert($('#d').html()); //获取(包括标签)
    
            $('#d').text('西岭老湿');//设置
            alert($('#d').text());//获取(不包括标签)
    
            //html()方法和text()方法的区别
            $('#d').html('<strong>西岭老湿</strong>'); //内容会被解析
            $('#d').text('<strong>西岭老湿</strong>'); //内容原样输出
    
        });
    </script>

**知识点**  
val() ：获取表单元素的value值  
val(val) ：设置表单元素的value值

html() ：获取元素的内容  
html(val) ：设置元素的内容

text() ：获取元素的**文本**内容  
text(val) ：设置元素的**文本**内容