jQuery对于属性以及css的操作及offset和positon的讲解（第三天）

$的工具方法

1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
   javascript

  <script src="./js/jquery-1.10.1.js"></script>
    <script>
        //1.$.each():遍历数组或对象中的数据
        var person = {
            name: 'tom',
            age: 50
        }
        //传入参数（<参数1>：键值，<参数2>：回调函数：用于取出被遍历对象的值）
        $.each(person, function (key, value) {
            console.log(key, value);
        })
        //2.$.trim():去除字符串两边的空格
        var str = "  my home  ";
        console.log($.trim(str));
        //3.$.type(obj):得到数据的类型
        console.log($.type($) === "function");//true
        //4.$.isArray(obj):判断是否是数组
        console.log($.isArray($('body')));//false
        console.log($.isArray([]));//true

        //5.$.isFunction//判断是否是函数
        console.log($.isFunction($));//true
        console.log($.isFunction($()));//false
        //6.$.parseJSON():解析json字符串转换为js对象/数组
        /*
        json对象整体2种类型：
        1.json对象:{key1:value1,key2:value2}
        2.json数组：[value1,value2]
        3.key只能是字符串
        4.value的类型:number string boolean null [] {}

        */
        var json = '{"username":"jack","age":12}'
        console.log($.parseJSON(json))//对象
        json = '[{"username":"jack","age":15},{"username":"tom","age":15}]';
        console.log($.parseJSON(json));

        JSON.parse(jsonString);//json字符串 -->js对象/数组
        JSON.stringify(jsObj, jaArr);//js对象/数组  --->json字符串

    </script>
    

jQuery对于属性的操作

1. 操作任意属性
   attr()
   removeAttr()
   prop()
2. 操作class属性
   addClass()
   removeClass()
3. 操作HTML代码/文本/值
   html()
   val()

html

 <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box" title="two">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br />
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>

    <input type="text" name="username" value="guiguClass" />
    <br>
    <input type="checkbox">
    <input type="checkbox">
    <br>
    <button>选中</button>
    <button>不选中</button>

javascript

 <script>
        $(function () {
            //  1. 读取第一个div的title属性
            console.log($('div:first').attr('title'));
            //  2. 给所有的div设置name属性(value为mystyle)
            $('div').attr('name', 'mystyle');
            //  3. 移除所有div的title属性
            $('div').removeAttr('title');
            //  4. 给所有的div设置class='guiguClass'
            $('div').attr('class', 'guiguClass');
            //  5. 给所有的div添加class='abc'
            $('div').addClass("abc");
            //  6. 移除所有div的guiguClass的class
            $('div').removeClass('guiguClass');
            //  7. 得到最后一个li的标签体文本
            console.log($('li:last').html());
            //  8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
            $('li:first').html('<h1>mmmmmmmm</h1>');
            //  9. 得到输入框中的value值

            //这里用的是jQuery的表单选择器，（见上次博客）

            console.log($(':text').val());
            //  10. 将输入框的值设置为mystyle
            $(':text').val('mystyle');
            //  11. 点击'全选'按钮实现全选
            //property:操作属性值为布尔值的属性
            //attribute:操作属性值不为布尔的值
            var $checkbox = $(':checkbox')
            $('button:first').click(function () {
                $(':checkbox').prop('checked', true)//property attribute
                //$checkbox.attr('checked',true);
            })
            //  12. 点击'全不选'按钮实现全不选
            $('button:last').click(function () {
                $(':checkbox').prop('checked', false);
                //$checkbox.attr('checked',false);
            })
        })



    </script>

jQuery对于css的操作

html

 <p style="display: block;">尚硅谷</p>
    <p style="display: block;">太阳的后裔</p>

javascript

  <script src="./js/jquery-1.10.1.js"></script>
    <script>
        /*
     1. 得到第一个p标签的颜色
     2. 设置所有p标签的文本颜色为red
     3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
     */
        $(function () {
            //  1. 读取第一个p标签的颜色
            console.log($('p:first').css('color'));
            //  2. 设置所有p标签的文本颜色为red
            $('p').css('color', 'red');
            //  3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
            //设置第几个是使用eq(i),连续设置多个属性的时候：可传入一个对象
            $('p:eq(1)').css({
                color:"#ff0011",
                background:"blue",
                width:300,
                height:30
            })
        })


    </script>

offset和position的区别

** 区别** 获取/设置标签的位置数据
* offset(): 相对页面左上角的坐标
* position(): 相对于父元素左上角的坐标
html

  <div class="div1">
        <div class="div2">测试offset</div>
    </div>

    <div class='div3'>
        <button id="btn1">读取offset和position</button>
        <button id="btn2">设置offset</button>
    </div>

javascript

```javascript
  <script src="./js/jquery-1.10.1.js"></script>
    <script>
        $(function () {
            // 需求:
            // 1. 点击 btn1
            //   打印 div1 相对于页面左上角的位置
            $('btn1').click(function () {
                //包含着坐标的对象offset1和offset2
                var offset1 = $('.div1').offset();
                console.log(offset1.left, offset1.top);
                //   打印 div2 相对于页面左上角的位置
                var offset2 = $('.div2').offset();
                console.log(offset2.left, offset2.top);
                //   打印 div1 相对于父元素左上角的位置
                var position1 = $('.div').position();
                console.log(position1.left, position1.top);
                //   打印 div2 相对于父元素左上角的位置
                var position2 = $('.div2').position();
                console.log(position2.left, position2.top);
                // 2. 点击 btn2
                $('btn2').click(function () {
                    //   设置 div2 相对于页面的左上角的位置
                    //   设置时须向offset里面传入坐标对象
                    $('.div1').offset({
                        left: 20,
                        top: 40
                    })
                })

            })
        })
    </script>