07_jquery入门第一天

视频来源：麦子学院　　讲师：魏畅然

补充：JSON.stringify()函数【https://www.cnblogs.com/damonlan/archive/2012/03/13/2394787.html】用来将对象序列化，也就是将对象转换为json字符串，例如

    var obj={};

    obj.name='yolo';

    obj.age=22;

    console.log(obj);//输出： "[object Object]"

    obj=JSON.stringify(obj);

    console.log(typeof obj);//输出: "string"

    console.log(obj);//输出："{"name":"yolo","age":22}

　　
    console.log(JSON.stringify($('p').css('background','lightgreen')));
    //报错："Uncaught TypeError: Converting circular structure to JSON"
    原因：发生了递归引用关系，如果一个json中的结构是a包含b,b包含c,c包含a,就无法执行toJSON方法
    因为我的代码是设置背景啊
    改为获取，$('p').css(['color','background']);
    
            $('p').css({
            background:'green',
            'font-size':'30px',//有中横线的话一定要用引号括起来
        })

一、选择器　

$('li:not(li:first)').css('background','yellow');

$('li:odd').css('background','yellow');

$('li:lt(2)').css();//lt小于,基本过滤选择器索引值从0开始

$('li:nth-child(2)').css();//子元素过滤选择器索引从1开始

$('div:contains(理想)').css('background','yellow');     选取div中含有文本内容包含理想元素

:empty 选择内容为空&&没有子元素

:parent 选择内容不为空||含有子元素

:contains(text)  选择含有text文本的元素

:has(p) 选择含有p元素的元素

$('[type]').css('background','red');  选择含有type属性的元素

$('[value^=input]').css('background','red');

$('li:first-child')范围比$('li:first')广

$('li:nth-child(2)').css();

$('li:only-child').css('background','yellow');只有唯一子元素的元素

$('p:only-child').css('background','yellow');选中作为唯一子元素存在的p元素

二、DOM操作

设置或者获取内容 - html(),text() val()

            $('div').html(function(index,html){

                alert(index+html)

            })  遍历回调函数，索引从0开始

获取，设置属性 - attr(),removeAttr()

<div id="div2"  data-id="data-id2">  data-id是自定义属性

    css代码:    div[data-id="data-id2"]{background: orange;}

    <p class="p1 orange">div1-p1</p>  多个类是用空格分开的

        $('p[data-id]').attr('data-id','red');    选取含有data-id属性的p元素，再将data-id属性值设为red

　　　　　//同时设置多种属性

        $('p[data-id]').attr({

            'data-id':'red',

            'class':'p2'

        });

类相关操作： addClass(),removeClass(),hasClass(),toggleClass()

设置样式 - css()

$('p').css({

        background:'green',

        'font-size':'30px',//有中横线的话一定要用引号括起来

        })

$('p:first').css({

            background:'green',

            'font-size':function(index,val){

            alert(val);//返回原来的字体大小

            return val='30px';//用return 重新设置

            }

        })

元素内添加：append，prepend（appendTo，prependTo）
元素外添加：after，before（insertAfter，insertBefore）

        $('#a').append($('p'));//喔噢,还以为append是复制粘贴,原来是直接把原元素剪切到指定位置去

        $('#a').prepend('<p>内部前面</p>');

        $('#a').after('<p>外部后面</p>');

        $('#a').before('<p>外部前面</p>');

remove删除整个元素，detach与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
empty()清空内容
```
        var e=$('p').remove();//remove()返回移除的元素

        $('#a').append(e);
```

wrapInner ，wrap，wrapAll
unwrap() 方法删除被选元素的父元素

1、$('p').wrapInner('<b></b>');

 输出：<p><b>第一段</b></p>

2、$('p').wrap('<b></b>');

输出：<b><p>第一段</p></b><b><p>第二段</p></b>

3、$('p').wrapAll('<b></b>');

输出：        <b>

        <p>第一段</p>

        <p>第二段</p>

        </b>

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。(replaceAll)

    $('p').replaceWith('<div>I am not a paragraph anymore</div>');

        等价于：

    $('<div>I am not a paragraph anymore</div>').replaceAll($('p'));

clone()

        $('p:first').before($('p:last'));//这是把第二段剪切到第一段之前

        $('p:first').before($('p:last').clone());//这是把第二段先进行复制，再粘贴到第一段之前

三、事件

优先级：mousedown>mouseup>click,所以这里只执行mousedown事件

        $('#div1').on('mousedown',function(){

            alert('mousedown now!');

        });

        $('#div1').on('mouseup',function(){

            alert('mouseup now!');

        });

        $('#div1').on('click',function(){

            alert('click now!');

        });

keydown,keyup,keypress （http://blog.csdn.net/z69183787/article/details/25700837）

    <p>当您在下面的框中键入文本时，会弹出键位序号。</p>

    <input type="text" placeholder="请随意键入字符……" />

    <script type="text/javascript">

        $('input').keydown(function(event){

            alert(event.which);

        })

    ，就是在左侧输入，右侧同步显示的过程中很有用处。典型的例子就是邮件编辑预览的应用。

    <script type="text/javascript">

        $('input').keyup(function(event){

            $('#div1').html($(this).val());

        })

$('#div1').off('click'); 取消事件

动画

动画

1 基本动画:show(speed[,callback]),hide(),toggle();speed值 - normal,fast,slow,或者具体数值,不用带单位,默认毫秒数

2 预制动画:slideDown(speed[,callback]),slideUp(),slideToggle(),fadeIn(),fandeOut(),fadeToggle(),

fadeTo(),控制透明度$('#div1').fadeTo(100,0.2);

3 自定义动画  animate(css,持续时间,速率,回调函数)

setTimeout() 只执行 code 一次。

如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

load函数

$('#div1').load("0.php",{name:'yolo'},function(){

alert(23);});

JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串

由JSON字符串转换为JSON对象

方法一

    var str='{ "name": "John" }';//标准JSON字符串，外面单引号，里面双引号，反正错过来就运行不了

    var obj = jQuery.parseJSON(str)

    alert( obj.name);
方法二
    var j='{"name":"sa","age":22}';
    j=eval('('+j+')')
    alert(j.name);
方法三
　　JSON.parse(jsonstr);

ajax post实例

            $.ajax({

                type:'post',

                url:'0.php',

                data:{'a':1},

                dataType:'json',

                success:function(data){

                data=JSON.parse(data);//将标准json字符串解析对对象

                alert(data.name);

                },

            });

秒客网

07_jquery入门第一天

相关文章