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操作

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

               $('div').html(function(index,html){
                   alert(index+html)
               })  遍历回调函数，索引从0开始

2. 获取，设置属性 - 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'
           }); 

3. 类相关操作： addClass(),removeClass(),hasClass(),toggleClass()
4. 设置样式  - css()
   

   $('p').css({
           background:'green',
           'font-size':'30px',//有中横线的话一定要用引号括起来
           })
           
   $('p:first').css({
               background:'green',
               'font-size':function(index,val){
               alert(val);//返回原来的字体大小
               return val='30px';//用return 重新设置
               }
           })

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

           $('#a').append($('p'));//喔噢,还以为append是复制粘贴,原来是直接把原元素剪切到指定位置去
           $('#a').prepend('<p>内部前面</p>');
           $('#a').after('<p>外部后面</p>');
           $('#a').before('<p>外部前面</p>');

6. remove删除整个元素 ，detach与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
    empty()清空内容
   

           var e=$('p').remove();//remove()返回移除的元素
           $('#a').append(e);

7.  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>
   
   

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

       $('p').replaceWith('<div>I am not a paragraph anymore</div>');
           等价于：
       $('<div>I am not a paragraph anymore</div>').replaceAll($('p'));

9. clone()
   

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

三、事件

1. 优先级：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!');
           });        

2. 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());
           })

3. $('#div1').off('click');  取消事件
4. 动画
   

   动画
   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()。

5. load函数
   

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

6. JSON.parse(jsonstr); //可以将json字符串转换成json对象
   JSON.stringify(jsonobj); //可以将json对象转换成json对符串
7. 由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);
       
   

   
   
   
8. ajax post实例
   

               $.ajax({
                   type:'post',
                   url:'0.php',
                   data:{'a':1},
                   dataType:'json',
                   success:function(data){
                   data=JSON.parse(data);//将标准json字符串解析对对象
                   alert(data.name);
                   },
               });