国产一区二区三区麻豆,人妻斩精品资源,日本视频12345区

jquery安裝與基本語法

從 jquery.com 下載 jQuery 庫
有兩個版本的 jQuery 可供下載：
1.Production version - 用于實際的網站中，已被精簡和壓縮
2.Development version - 用于測試和開發(fā)（未壓縮，是可讀的代碼）
jQuery 庫是一個 JavaScript 文件,必須要在HTML的<head>頭部添加<script>標簽引入使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    //引入下載好的jquery庫
    <script src="./jquer-3.3.1.min.js"></script>
</head>
<body>
</body>
</html>

jQuery入口函數(shù)(document.ready)加載文檔就緒事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    //引入JQuery庫
    <script src="./jquer-3.3.1.min.js"></script>
    //加載JQuery入口函數(shù)(一共四種)
    <script>
        //1.第一種標準寫法
        $(document).ready(function(){
            //編寫jQuery代碼塊
            alert('hello word');
        });

        //2.第二種簡化寫法(強裂推薦)
        $(function(){
            //編寫jquery代碼塊
            alert('hello word');
        });

        //3.第三種
        JQuery(document).ready(){
            //編寫jquery代碼塊
            alert('hello word');
        };

        //4.第四種
        JQuery(function(){
            //編寫jQuery代碼塊
            alert('hello word');
        });
    </script>
</head>
<body>
</body>
</html>

解決項目期間$符號沖突

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    //引入JQuery庫
    <script src="./jquer-3.3.1.min.js"></script>
    //解決$符號沖突問題
    <script>
        //在使用jquery入口函數(shù)(document.ready)之前自定義符號
        var wu = JQuery.noConflict();
        //用自定義wu符號代替$編寫jquery入口函數(shù)
        wu(function(
            //編寫jquery代碼塊
            alert('hello word');
        });
    </script>
</head>
<body>
</body>
</html>

jQuery選擇器

<html>標簽元素選擇器
1.指定html標簽元素選擇器:$('html')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <!-- //引入JQuery庫 -->
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- 
    //$('<html>')指定的<html>標簽元素選擇器
    //實例:擊按鈕后，所有 <p> 元素都隱藏
     -->
    <script>
        //jquery入口函數(shù)
        $(function(){
            //button按鈕添加click()鼠標點擊事件
            $('button').click(function(){
                //將所有<p>標簽的元素添加hide()隱藏事件
                $('p').hide();
            });
        });
    </script>
</head>
<body>
<h2>這是一個標題</h2>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<button>點我</button>
</body>
</html>

2.所有html標簽元素選擇器:$('*')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <!-- //引入JQuery庫 -->
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- 
    //$('*')全部<html>標簽元素選擇器
    //實例:擊按鈕后，所有<html>標簽元素都隱藏
     -->
    <script>
        //jquery入口函數(shù)
        $(function(){
            //button按鈕添加click()鼠標點擊事件
            $('button').click(function(){
                //將所有<html>標簽的元素添加hide()隱藏事件
                $('*').hide();
            });
        });
    </script>
</head>
<body>
<h2>這是一個標題</h2>
<b>這是一個段落。</b>
<hr>
<span>111111</span>
<p>這是另一個段落。</p>
<button>點我</button>
</body>
</html>
<!--

ID屬性選擇器:$('#id')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <!-- 引入JQuery庫 -->
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- 
        $('#id')選擇器
        實例:點擊按鈕后, 所有id="test" 屬性的元素將被隱藏
     -->
    <script>
        //加載jquery入口函數(shù)
        $(function(){
            //button按鈕添加clic()點擊事件
            $('button').click(function(){
                //id='test'屬性的元素添加hide()隱藏事件
                $('#test').hide();
            });
        });
        
    </script>

</head>
<body>
<h2>這是一個標題</h2>
<p id="test">這是一個段落。</p>
<p id="test">這是另一個段落。</p>
<button>點我</button>
</body>
</html>

class屬性選擇器:$('.class')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <!-- //引入JQuery庫 -->
    <script src="./jquery-3.3.1.min.js"></script>

    <!--
    //$('.class')選擇器
    //實例:點擊按鈕后所有帶有 class="test" 屬性的元素都隱藏 -->
    <script>
        //加載jquery入口函數(shù)
        $(function(){
            //button按鈕添加click()點鼠標點擊事件
            $('button').click(function(){
                //將class = test 屬性的元素添加hide()隱藏事件
                $('.test').hide();
            })
        });
    </script>
</head>
<body>
<h2>這是一個標題</h2>
<p class="test">這是一個段落。</p>
<p class="test">這是另一個段落。</p>
<button>點我</button>
</body>
</html>

當前<html>元素選擇器:$(this)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <!-- //引入JQuery庫 -->
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- 
    //$(this)當前<html>標簽元素選擇器
    //實例:擊按鈕后，將當前點擊的按鈕元素隱藏
     -->
    <script>
        //jquery入口函數(shù)
        $(function(){
            //<button>按鈕添加click()鼠標點擊事件
            $('button').click(function(){
                //將當前<button>標簽元素添加hide()隱藏事件
                $(this).hide();
            });
        });
    </script>
</head>
<body>
<h2>這是一個標題</h2>
<b>這是一個段落。</b>
<p>這是另一個段落。</p>
<button>點我</button>
</body>
</html>

jQuery事件(常用)

1.鼠標事件

click()方法:鼠標單擊事件

    <script>
        //jquery入口函數(shù)
        $(function(){
            //<button>按鈕添加.click()鼠標單擊事件
            //在click()方法內添加function()事件函數(shù)
            $('button').click(function(){
                //按鈕button被點擊后當前被點擊的button按鈕觸發(fā).hide()隱藏效果
                $(this).hide();
            });
        });
    </script>

dblclick():鼠標雙擊事件

    <script>
        //jquery入口函數(shù)
        $(function(){
            //<button>按鈕添加.dblclick()鼠標雙擊事件
            //在dblclick()方法內添加function()事件函數(shù)
            $('button').dblclick(function(){
                //按鈕button被雙擊后,當前被雙擊的button按鈕觸發(fā).hide()隱藏效果
                $(this).hide();
            });
        });
    </script>

mouseenter:鼠標指針觸碰觸發(fā)
mouseleave 鼠標指針離開觸發(fā)
備注(一般情況下mouseenter()和mouseleave()一起使用)

<script>
        //jquery入口函數(shù)
        $(function(){
            //1.綁定jquery事件
            //<button>按鈕添加mouseenter()鼠標觸碰事件
            //在mouseenter()方法內添加function()事件函數(shù)
            $('button').mouseenter(function(){
                //2執(zhí)行jquery效果代碼
                //將當前<button>元素添加hide()隱藏效果
                $(this).hide(1000,function(){
                    alert('鼠標觸碰按鈕消失')
                });
            });

            // 1.綁定jquery事件
            // <button>按鈕添加mouseleave()鼠標離開事件
            // 在mouseleave()方法內添加function()事件函數(shù)
            $('button').mouseleave(function(){
                //2執(zhí)行jquery效果代碼
                //將當前<button>元素添加shouw()顯示效果
                $(this).show(1500,function(){
                    alert('鼠標離開按鈕回復');
                });
            });
        }); 
    </script>

hover()鼠標懸停事件
備注:(mouseenter()觸碰事件和mouseleave()離開事件的結合體)

 <script>
        //jquery入口函數(shù)
        $(function(){
            //1.綁定jquery事件
            //<button>按鈕添加hover()鼠標懸停事件
            //在hover()方法內添加function()事件函數(shù)
            $('button').hover(
                function(){
                    //執(zhí)行jquery效果代碼
                    //將當前button按鈕隱藏并彈窗提示隱藏
                    $(this).hide(1000,function(){
                        alert('隱藏');
                    });
                },
                function(){
                    //執(zhí)行jquery效果代碼
                    //將當前button按鈕顯示并彈窗提示顯示
                    $(this).show(1500,function(){
                        alert('顯示')
                    });
                }
            );
        }); 
    </script>

2.鍵盤事件

keydown() 按鍵按下觸發(fā)
keyup() 按鍵松開觸發(fā)

<script>
    //jquery入口函數(shù)
    $(function(){
        //綁定keydown鍵盤按下事件
        $('input').keydown(function(){
            //按鍵按下時觸發(fā)當前input元素背景顏色更換為紅色
            $(this).css('background-color','red');
        });
        //綁定keyup鍵盤松開事件
        $('input').keyup(function(){
            //按鍵松開觸發(fā)當前input元素背景顏色更換為黃色
            $(this).css('background-color','yellow');
        });

    });
</script>

3.表單事件

focus() 獲得焦點時觸發(fā)
blur() 失去焦點時觸發(fā)
備注:(通常在form表單時使用)

    <script>
        //jquery入口函數(shù)
        $(function(){
            //<input>標簽元素綁定focus()獲焦事件
            $('input').focus(function(){
                //執(zhí)行代碼
                //當前input表單獲焦點表單背景為紅色
                $(this).css('background-color','red');
            });

            //<input>標簽元素綁定blur()失焦事件
            $('input').blur(function(){
                //執(zhí)行代碼
                //當前input表單失去焦點時表單背景為藍色
                $(this).css('background-color','yellow');
            });
        });

    </script>

4.文檔/窗口事件

load() 文檔加載完畢時觸發(fā)
load() 方法在 jQuery 版本 1.8 中廢棄

<script>
    //jquery入口函數(shù)
    $(function(){
        //綁定文檔加載load()事件
        $('img').load(function(){
            //圖片加載完成后彈窗提示
            alert('圖片加載完成')
        });
    });
</script>

jQuery效果

hide() 隱藏效果
show() 顯示效果

    <script>
        //jquery入口函數(shù)
        $(function(){
            //1.綁定jquery事件
            //click()單擊button按鈕
            $('button').click(function(){
                //2執(zhí)行jquery效果代碼
                //hide()隱藏<p>標簽元素內容
                $('p').hide();
            });
            //1.綁定jquery事件
            //click()單擊button按鈕
            $('button').click(function(){
                //2執(zhí)行jquery效果代碼
                //show()顯示<p>標簽元素內容
                $('p').show();
            });
        }); 
    </script>

toggle() 隱藏和顯示效果
hide()和show()的結合體

    <script>
        //jquery入口函數(shù)
        $(function(){
            //1.綁定jquery事件
            //click()單擊button按鈕
            $('button').click(function(){
                //2執(zhí)行jquery效果代碼
                //togllr()顯示或者隱藏<p>標簽元素內容
                $('p').toglle();
            });
        }); 
    </script>

fadeIn() 緩緩顯示隱藏的元素

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕淡出隱藏的div元素
                $('#div1').fadeIn();
                $('#div2').fadeIn('slow');
                $('#div3').fadeIn('fast');
                $('#div4').fadeIn('3000');
            });
        }); 
    </script>

fadeOut() 緩緩隱藏顯示的元素

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按扭淡入顯示的div元素
                $('#div1').fadeOut();
                $('#div2').fadeOut('slow');
                $('#div3').fadeOut('fast');
                $('#div4').fadeOut('3000');
            });
        }); 
    </script>

fadeTagge() 淡入淡出結合體

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按扭淡入顯示的div元素
                $('#div1').fadeTagge();
                $('#div2').fadeTagge('slow');
                $('#div3').fadeTagge('fast');
                $('#div4').fadeTagge('3000');
            });
        }); 
    </script>

fadeTo() 將淡入淡出效果設置透明度（值介于 0 與 1 之間）

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按扭淡入顯示的div元素
                $('#div1').fadeTo('slow',0.1);
                $('#div2').fadeTo('fast',0.12);
                $('#div3').fadeTo('3000',1);
            });
        }); 
    </script>

slideDown() 元素下拉(主要用作側邊欄/導航欄)

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕下拉id = div1 的元素
                $('#div1').slideDown('slow');
            });
        }); 
    </script>

slideUp() 元素收縮(主要用于側邊欄/導航欄)

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕收縮id = div1 的元素
                $('#div1').slideUp('slow');
            });
        }); 
    </script>

slideTagge() 下拉/收縮結合體

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕收下拉或者收縮id = div1 的元素
                $('#div1').slideToggle('slow');
            });
        }); 
    </script>

jQuery獲取內容和屬性

-text() 獲取元素的文本

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按以鈕彈窗形式獲取<p>元素里面的文本
                alert($('p').text());
            });
        }); 
    </script>

html()設置 / 獲取元素的內容(包括 HTML 標記)

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按以鈕彈窗形式獲取<p>元素里面的內容(包括html標簽)
                alert($('p').html());
            });
        }); 
    </script>

val() 獲取表單字段的value值

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按以鈕彈窗形式獲取<p>元素里面的value值
                alert($('input').val());
            });
        }); 
    </script>

attr() 獲取元素的屬性值

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按以鈕彈窗形式獲取<img>元素里面的屬性值
                alert($('img').attr('src'));
            });
        }); 
    </script

jQuery設置內容和屬性

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的value值

    <script>
        //jquery入口函數(shù)
        $(function(){
            //1修改p1元素標簽的文本內容
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕將<p1>元素的文本修改為1111
                $('p1').text('111');
            });

            //2修改p2元素標簽的內容(包含hatml標簽)
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕將<p2>元素的內容包含(html標簽)修改為1111
                $('p2').text('111');
            });

            //3修改input表單元素的value值
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕將<input>表單元素的value修改為1111
                $('input').text('111');
            });
        }); 
    </script>

attr() 設置元素屬性值(可以設置多個屬性值)

    <script>
        //點擊按鈕更換鏈接及鏈接名
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕重新設置<a>標簽元素的多個屬性值
                $('a').attr({
                    'herf':'www.baidu.com',
                    'title':'百度'
                });

                //通過修改的title值來修改鏈接名
                var title = $('a').attr('title');
                $('a').html(title);
            });
        }); 
    </script>
</head>

jQuery 刪除和清空

remove() - 刪除被選元素（及其子元素）

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕刪除整個div元素(包含子元素)
                $('div').remove();
        }); 
    </script>

empty() 清空元素里的內容(包含子元素的內容)

    <script>
        //jquery入口函數(shù)
        $(function(){
            //按鈕綁定單擊事件
            $('button').click(function(){
                //點擊button按鈕清空div元素里面的內容(包含子元素內容)
                $('div').empty();
        }); 
    </script>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JQuery

JQuery

jquery安裝與基本語法

jQuery選擇器

jQuery事件(常用)

jQuery效果

jQuery獲取內容和屬性

jQuery設置內容和屬性

jQuery 刪除和清空

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JQuery

jquery安裝與基本語法

jQuery選擇器

jQuery事件(常用)

jQuery效果

jQuery獲取內容和屬性

jQuery設置內容和屬性

jQuery 刪除和清空

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av