jquery筆記（僅供我的參考）

時間 2019-11-18
原文原文鏈接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jquery 練習 </title>
<script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $().ready(function(){    //這一句必定不能忽略啊！！！
            // 基礎選擇器  id class html標籤 多個一塊兒
        /*    $("#div1").text('a');
            $('div').text('b');
            $('.p1').text(333);
            $('div,p').text(10086);
         <body>
         <div id="div1">456</div>
         <div>789</div>
         <p class="p1">0</p>
         </body>
        */
        /************************************************************/
          // 層級選擇器  後代  子代 >   緊挨 +
        //$("#div1 p").html(123);   //後代        段落1 2 3
          //$("#div1 > p").html(456);  //子代     段落1 3
        //    $('#div1 + p').html(789);   //緊挨    段落4 變了
        /*
        * <div id='div1'>
         <p>段落1</p>
         <form>
         <p>段落2</p>
         </form>
         <p>段落3</p>
         </div>
         <p>段落4</p>
         <p>段落5</p>
         */
            /*******************簡單*************************/
            // 重要的  :eq(index) ：匹配索引爲指定值的元素
            //        :not(selector) ：匹配除了指定選擇器以外的全部元素
         /*   $('td:first').text('ab');
            // :first :last :even(偶數） ：odd(奇數）
            $('td:eq(1)').text('cd');  //下標從0開始
            $('td:not(td:eq(2))').text('fg');  //除了 第2 ，其餘都爲 fg
        */
            /*
            * <table width=800 border=1>
             <tr>
             <td>0</td>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             </tr>
             </table>
             */
        /*****************內容********************/
        //  ：constains(text) 匹配內容中包含指定內容的元素
        //  :empty    匹配內容爲空的元素
     /*   $('li:contains("三國")').text(123);
            $('li:empty').text(456);
     */   /*
        * <ol>
         <li>三國</li>
         <li>
         西
         <a>遊</a>
         記
         </li>
         <li></li>
         <li>水滸傳</li>
         </ol>

         */
            /*****************:hidden :visible********************/
          /*  $('#btnOk').bind('click', function () {
              //  $('div:hidden').show();  //顯示 div2
                $('div:visible').hide();  //隱藏 div1
            })*/
        /*<div>div1</div>
         <div style='display: none'>div2</div>
         <hr>
         <input type='button' id='btnOk' value='肯定' />
        */
            /*****************屬性********************/
            //[attribute]    ：匹配具備指定屬性的元素
            //[attribute=value] ：匹配屬性等於指定值的元素

       // $('font[color]').html(123);
  //        $('font[color="#ccccc5"]').html(456);
           /*<font>test1</font>
            <hr>
            <font color='#ccccc5'>test2</font>
            <hr>
            <font color='#cc3cc5'>test3</font>
*/
            /*****************表單********************/
            // :input 匹配全部表單元素
               //$(":input")  匹配全部表單元素 select textarea
            //$("input") 匹配Input 標籤

            //  jquery轉dom 操做 ：jquery[0]    jquery.get[0]
            //  dom 轉 jquery 操做：  $(dom)

            /***************************************/
            //  屬性操做
                    /*attr(name) ：獲取指定屬性的值
                     attr(key,value) ：設置指定屬性的值
                     attr(properties) ：一次設置多個屬性的值，要求參數必須是json對象
                     attr(key,fn) ：經過一個函數的返回值設置指定屬性的值
                     removeAttr(name) ：刪除指定的屬性
                     */
            /*var a=$("#id1").attr('src');
            document.write(a);*/
            //$("#id1").attr("src","../img/2.jpg");
            /*var data={
                src:'../img/2.jpg',
                width:100
            }
            $("#id1").attr(data);
            */
            /*$("#id1").attr('src', function () {
                return '../img/2.jpg';
            });
            $("#id1").removeAttr('src');

             <img id="id1" src="../img/1.jpg"/>
            */
            /**********css操做************************/

 /*       $("#btnOk").bind('click',function(){
            $("#div1").addClass('cls2');   // 添加css樣式
            $("#div1").removeClass('cls1'); // 刪除 css 樣式
            $("#div1").toggleClass('cls3'); // 切換 樣式
            if($("#div1").hasClass('cls3')){    // 判斷是否有樣式
                alert('yes');
            }else{
                alert('no');
            }
        });

*/
        /*<style>
         .cls1 {
         color: red;
         }

         .cls2 {
         font-size: 30px;
         }

         .cls3 {
         border: 1px solid green;
         }
         </style>
         <div id='div1' class='cls1'>jQuery</div>
         <hr>
         <input type='button' id='btnOk' value='肯定' />
             */
        /***********html 文本 val ************************/
            //  獲取值  html()    設置值   html('<font color=red>abc</font>');
            //  html
            //  文本
            //  val  表單

            /***********css 操做 ************************/
        //    $("#btnOk").bind('click', function () {
                 //$("#div1").css('color');  // 獲取 css 屬性值
                //  $("#div1").css('color','red');   //設置 css
                  //設置多個  json格式
           /*       var data={
                      color:'green',
                      fontSize:'30px'
                  }
                  $("#div1").css(data);
           */
             // 獲取 div1元素位置
            //var data=$("#div1").offset();
        //    alert(data.left + ':'+ data.top);
            // 設置 div1元素的位置
            /*    var data={
                    left:50,
                    top:100
                }
                $("#div1").offset(data);
             */
              //  設置 尺寸  width()   height()
        /*       $("#div1").css({
                   'border':'1px solid red'
               });
                $("#div1").width(500);
                $("#div1").height(100);
            })
         <div id='div1'>jQuery</div>
         <hr>
         <div id='div2'>Ajax</div>
         <hr>
         <input type='button' id='btnOk' value='肯定' />
         */
            /*********** 事件編程 ************************/
             //mouseover();
   /*        $("#content").bind('mouseover', function () {
               $(this).css('color','red');
           })
            $("#content").bind("mouseout", function () {
                $(this).css('color','blue');
            })
    <div id='content'>jQuery</div>
     */
             /*


            *    blur(fn)        ：失去焦點
                 change(fn)        ：內容改變
                 click(fn)        ：點擊
                 dblclick(fn)        ：雙擊
                 focus(fn)        ：得到焦點
                 keydown(fn)    ：鍵盤按下
                 keyup(fn)        ：鍵盤擡起
                 keypress(fn)    ：鍵盤點擊
                 load(fn)        ：頁面載入
                 unload(fn)        ：頁面關閉
                 mousedown(fn)    ：鼠標按下
                 mouseup(fn)    ：鼠標擡起
                 mousemove(fn)    ：鼠標移動
                 mouseover(fn)    ：鼠標通過
                 mouseout(fn)    ：鼠標離開
                 resize(fn)        ：改變尺寸
                 scroll(fn)        ：滾動條滾動
                 select(fn)        ：選擇內容
                 submit(fn)        ：提交按鈕

             * */
            /*********** 事件切換  ************************/
    /*        $("#content").hover(function () {       //  $().hover(  function(){},function(){}   注意寫法    );
                $(this).css('color','red');
            },function(){
                $(this).css("color","blue");
            });
            // toggle(fn,fn2,[fn3,fn4,...]);    鼠標點擊時的事件綁定 切換   // $().toggle( function(){},function(){},function(){});
            $("#result").toggle(function () {
                $(this).css('color','red');
            }, function () {
                $(this).css('color','green');
            }, function () {
                $(this).css('color','blue');
            });
    */
            /*<div id='content'>jQuery</div>
             <div id='result'>Smarty</div>
             */
            /*********** 事件綁定  bind    ************************/
            //綁定多個
    /*        var data={
                mouseover: function () {
                    //$(this).css('color','red');
                    this.style.color='red';
                },
                mouseout: function () {
                    $(this).css('color','blue');
                }
            };
            $("#div1").bind(data);
    */
            /*<div id='div1'>div1</div>
             <hr>
             <p id='p1'>p1</p>
             <hr>
             <input type='button' id='btnOk' value='肯定' />
             */

            //one方法綁定的事件只觸發一次
            /* $('#div1').one('click', function() {
             alert('hello!');
             });

             //移除全部事件綁定
             $('#div1').unbind();
             \
             */

            //  jquery 解決事件冒泡    取消默認行爲   已經寫了

            // jquery 效果
            /*
             show()        顯示         hide()  隱藏   toggle()  顯示隱藏切換
             show(speed,[callback])     以動畫效果顯示
             speed：動畫持續時間（毫秒）
             [callback] ：動畫執行完畢後所調用的函數
              */

        /*     $("#btn1").bind('click', function () {
                $("div").show(5000);
            })
            $("#btn2").bind('click', function () {
                $("div").hide('normal', function () {         //"slow"：緩慢            "normal"：正常          "fast"：快速
                    alert('ok');
                });
            })
            $("#btn3").bind("click", function () {
                $("div").toggle();
            })
        */
            /*
             <div style="width:250px; height:250px; background-color:red;"></div>
             <hr>
             <input type='button' id='btn1' value='show' />
             <input type='button' id='btn2' value='hide' />
             <input type='button' id='btn3' value='toggle' />

             */

            //    滑動  顯示隱藏
            /*
                 slideDown(speed,[callback])
             向下滑動    （顯示）

                 slideUp(speed,[callback])
             向上滑動    （隱藏）

                 slideToggle(speed,[callback])
             滑動切換

             */
            //  淡入淡出
            /*
                 fadeIn(speed,[callback])
             淡入（顯示）

                 fadeOut(speed,[callback])
             淡出（隱藏）

                 fadeTo(speed,opacity,[callback])
             淡入淡出到指定值
             speed：動畫持續時間
             opacity：清晰度    0-----1    0：消息        1：顯示    0.2  20%       【清晰度】
             [callback]：動畫完畢後執行的函數

             */
            //                             文檔處理
            // 1.1內部插入
            // <div>abcjQuerydef</div>
            // append()  插後面        appendTo()
            //  prepend()  插前面      prependTo()
       /*     $("#btnOk").bind('click', function() {
              //  $("#result").append('linux');     //在result內容最後插入linux!
               // $("#result").appendTo('#p1');    //將result插入到p1內容的最後
                $("#result").prependTo("#p1"); ////將result插入到p1內容的最前面
            });

       */
             /*
             <div id='result'>jQuery!</div>
             <p id='p1'>thinkphp!</p>
             <hr>
             <input type='button' id='btnOk' value='肯定' />
             */

            //  1.2.外部 插入
            // abc<div>jQuery</div>def
            /*
                 after(content) ：在元素的後面插入數據
                 before(content) ：在元素的前面插入數據
                 insertAfter(content) ：將匹配元素插入到指定內容的後面
                 insertBefore(content) ：將匹配元素插入到指定內容的前面

            //  2 刪除
            /*
             empty是將元素內容清空，但元素自己保留
             remove是將元素自己刪除，後面不容許再對元素進行操做
             //$('#result').empty();
             */
            // 3 複製
            /*
                 clone()  ：複製匹配的元素
                 clone(true) ：複製匹配的元素，同時也複製它的事件機制   指綁定的事件

             */
        /*    $('div').bind('click', function() {
                alert('hello!');
            });
            //綁定按鈕點擊事件
            $("#btnOk").bind('click', function() {
                var $div = $('div:first').clone(true);    //  true  複製所綁定的事件
                //將新的div插入btnOk按鈕的後面
                $div.insertAfter('#btnOk');
            });
        */
            /*
             <div style="border:1px solid red;">jQuery!</div>
             <hr>
             <input type='button' id='btnOk' value='肯定' />

             */
            // 4 replaceWith()  替換
       /*     $('#btnOk').bind("click", function() {

                //$('li:eq(1)').html('紅樓夢');
                //$('li:eq(1)').replaceWith('<li>紅樓夢</li>');
                var $li = $('<li></li>');    //  建立一個新節點    document.createElement('li');
                $li.html('紅樓夢');
                $li.css('color', 'red');
                $li.bind('click', function() {
                    alert('hi!');
                });
                $('li:eq(1)').replaceWith($li);
                $('p').replaceWith('<div>smarty!</div>');
            });
        */
            /*
             <ol>
             <li>三國</li>    <li>西遊</li>    <li>水滸</li>
             </ol>
             <hr>
             <p>p1</p>
             <input type='button' id='btnOk' value='肯定' />
             */

            //  5  包裹  【外包】
            //<strong><div><b>jQuery</b></div></strong>
            /*
                 wrap()    ：對匹配的元素使用指定的內容進行包裹      //$('div').wrap('<strong></strong>');
                 wrapAll()    ：對匹配的元素使用指定的內容進行包裹（僅包裹一次）
                 wrapInner() ：對匹配元素的內容進行包裹          //  包在裏面！

             */

            //   6.查找
            /*
                 eq(index)    ：匹配指定索引的元素
             $(‘div’).eq(3)    ：匹配索引爲3的div
                 filter(expr)    ：匹配過濾的元素
             $(‘div’).filter(‘.cls1’)    ：匹配使用了cls1樣式的全部div
                 not(expr)    ：匹配除了指定元素以外的全部元素
             $(‘div’).not(‘.cls1’)    ：匹配除了使用cls1樣式的全部div
                 children([expr])    ：匹配全部子元素
             $(‘product’).children(‘name’).text();
                 find(expr)        ：查找指定的元素
             $(xml).find(‘product’)
                 next([expr])
             $(「#div1」).next()    ：匹配div1相鄰的下一個平輩節點
                 prev([expr])
             $(‘#div1’).prev()        ：匹配div1相鄰的上一個平輩節點
                 parent([expr])
             $(「#div1」).parent    ：匹配div1元素的父節點

             */
            //    插件機制          有時間再增強。。。
            /*
                   jquery.fn.extend({
                       fn1:function(){},
                       fn2:function(){},
                       ......
                   });
             */
        /*    jQuery.fn.extend({
                fn1: function (size) {
                    this.css('fontSize',size);
                },
                fn2: function (color) {
                    this.css('color',color);
                }
            });
            $("#btnOk").bind('click', function () {
                $('div').fn1('50px');
                $('div').fn2('blue');
            })
        */
            /*
             <div>jQuery!</div>
             <hr>
             <input type='button' id='btnOk' value='肯定' />
             */

        //    each()  each方法用於遍歷jQuery對象
        /*    function callback(i,item){            i指個數    item 指div 自己
            }
         */
         /*    $("#btnOk").bind('click', function () {
                 $('div').each(function (i,item) {
                     $(item).html('這是第'+(i+1)+'個div');
                 });
             })
        */
        /*
         <div>div1</div>
         <hr>
         <div>div2</div>
         <hr>
         <div>div3</div>
         <hr>
         <input type='button' id='btnOk' value='肯定' />
         */


        //  jquery底層 ajax
            /*
             jQuery.ajax(options);
             要求參數必須是一個json對象，json對象下的屬性以下

                 async     ：是否異步        true：異步（默認）        false：同步
                 complete     ：當ajax對象的狀態碼爲4時執行的函數
                 contentType ：請求頭
                 dataType     ：指望獲得的數據類型

                 type        ：請求類型        get   post
                 url        ：請求地址
                 data         ：傳遞的參數，要求是一個字符串
                 cache     ：是否緩存
                 success     ：ajax對象狀態碼爲4而且http響應狀態碼爲200時所執行的函數
             */
        $("#btn1").bind('click', function () {
            $.ajax({
                type: 'get',                 //  get
                url: 'demo03_1.php',
                data: 'username=zhangsan',
                cache: false,                //  get 須要 cache
                success: function (msg) {
                    alert(msg);
                }
            });
        });
            $('#btn2').bind('click', function() {
                $.ajax({
                    type : 'post',                            //post
                    url : 'demo03_2.php',
                    data : 'username=lisi',
                    success : function(msg) {
                        alert(msg);
                    }
                });
            });

            $('#btn3').bind("click", function() {
                $.ajax({
                    type : 'post',
                    url : 'demo03_3.php',
                    dataType : 'json',                                //  dataType
                    success : function(msg) {
                        alert(msg.name + ':' + msg.age);
                    }
                });
            });
            /*
            *   <?php
             $person = array (
                'name' => 'xiaoqiang',
                'age' => 30
             );

             echo json_encode ( $person );     json_encode 就獲得 json 數據
            *
            *   ?>
            *
            * */

        /*
           demo03_1.php
           <?php $username=$_GET['username'];
              echo  'hello,'. $username;      //  echo
              ?>
         */
        /*
        html
         <input type='button' id='btn1' value='$.ajax()    get' />
         <input type='button' id='btn2' value='$.ajax()  post' />
         <input type='button' id='btn3' value='$.ajax()  json' />
         */


        // jquery 高級ajax
            $.get();   //  須要時間戳
            $('#btn1').bind('click', function() {

                //將要傳遞的參數生成json對象
                //注意：須要本身解決緩存問題
                var data = {
                    first : 10,
                    second : 20,
                    _ : new Date().getTime()             // 時間戳參數
                };

                //發送get請求
                $.get('demo04_1.php', data, function(msg) {                 // $.get();
                    alert(msg);
                });
            });
            /*
             <?php
             $first = $_GET ['first'];
             $second = $_GET ['second'];
             echo $first + $second;  ?>
             *
             * */
            $('#btn2').bind('click', function() {
                //將要傳遞的參數生成json對象
                var data = {
                    first : 10,
                    second : 20
                };
                //發送post請求
                $.post('demo04_2.php', data, function(msg) {                 // $.post();
                    alert(msg);
                });
            });
        /*
         <input type='button' id='btn1' value='$.get()' />
         <input type='button' id='btn2' value='$.post' />
         */
        //   jquery 跨域請求  先路過吧。。

        })
    </script>

</head>

<body>

</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。