JQuery基礎

時間 2019-12-01

標籤 jquery 基礎欄目 JQuery 简体版

原文原文鏈接

1、爲了講EasyUI,老師給咱們開了JQuery基礎。整理一下哈。。javascript

　1.JQuery是輕量級的javascript框架html

2.基本用法：$(function(){代碼}) -----> window.onload(); 確保頁面加載完成以後再執行代碼。java

3.選擇器node

　　基本選擇器、層次選擇器、過濾選擇器三種jquery

4.對象轉換數組

2、練習代碼以下：框架

7<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
//創建一個文件夾用來存放js
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

// alert("Hello jquery");
// 至關於window.load() 當窗口加載完畢後再觸發
// 調用jquery
$(function()
    
    {
        //alert("Hello jquery");
        
        //選擇器
        
        // ID選擇器
        $("#bt1").click(
                function()
                {
                    alert("點擊歐拉 ");
                }
        );
        
        // 標籤選擇器
        // 屬性過濾器
        $("input:button").click
        (
             function()
             {
                 alert("經過標籤選擇器選中了按鈕");
             }
        );
        
        // 類選擇器
        $(".cl[type=text]").click
        (
            function()
            {
                alert("經過類選擇器選中");
            }
        );
        
        // 使用DOM方式獲取元素
        var bt_3 = document.getElementById("bt3");
        
        var jbt_3 = $(bt_3);
        
        jbt_3.click
        (
            function()
            {
                alert("從DOM對象轉爲jQuery對象");
            }
        );
        
        // 從jQuery對象轉爲DOM對象
        var $jbt_1 =$("#bt1");
        
        alert("數組的長度："+$jbt_1.length);
        
        var bt_1 = $jbt_1.get(0);
        
        alert("DOM按鈕的內容 ="+bt_1.value);
        
        var $jbt_4 =$("button");
        
        var bt_4 = $jbt_4[0];
        
        alert("按鈕名=" + bt_4.firstChild.nodeValue);
        
        $jbt_4.click
        (
            function()
            {
                alert("button 的文本="+$(this).text());
            }
        );
    }
 )

</script>
</head>
<body>

測試JQuery
<br><br>

<input id="bt1" type="button" value="按鈕1">

<br><br>

<input id="bt2" class="cl" type="button" value="按鈕2">

<br><br>

<input type="text" class="cl">

<br><br>

<input id="bt3" value="按鈕3" type="button">

<br><br>
<button id="bt4">按鈕4</button>
<br><br>
<button id="bt5">按鈕5</button>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。