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',//有中橫線的話必定要用引號括起來
        })

1、選擇器　

$('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元素

 2、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() 方法刪除被選元素的父元素
   

   一、$('p').wrapInner('<b></b>');    
    輸出：<p><b>第一段</b></p>
   
   二、$('p').wrap('<b></b>');    
   輸出：<b><p>第一段</p></b><b><p>第二段</p></b>
   
   三、$('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());//這是把第二段先進行復制，再粘貼到第一段以前

3、事件

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);
                   },
               });