2.WEB前端-JQuery

Jquery

什麼是 JQuery :
jQuery 是一個快速、簡潔的 JavaScript 框架，是繼 Prototype 之後又一個優秀的 JavaScript 代碼庫（或 JavaScript 框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 JavaScript 常用的功能代碼，提供一種簡便的 JavaScript 設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery 的核心特性可以總結爲：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的 css 選擇器，並且可對 CSS 選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery 兼容各種主流瀏覽器，如google,IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 寫更少的代碼,做更多的事情: write Less ,Do more
2. 將我們頁面的 JS 代碼和 HTML 頁面代碼進行分離
JQ 中根據 ID 查找元素

全都是根據選擇器去找的
#ID{}
.類名{}
$("#ID的名稱")

JQ 和 JS 之間的轉換
JQ 對象,只能調用 JQ 的屬性和方法
JS 對象只能調用 JS 的屬性和方法

function changeJS(){
                var div = document.getElementById("div1");
//                div.innerHTML = "JS成功修改了內容"
                //將JS對象轉成JQ對象
                $(div).html("轉成JQ對象來修改內容")
            }
            
            $(function(){
                //給按鈕綁定事件
                $("#btn2").click(function(){
                    //找到div1
//                    $("#div1").html("JQ方式成功修改了內容");
                    //將JQ對象轉成JS對象來調用
                    var $div = $("#div1");
//                    var jsDiv = $div.get(0);
                    var jsDiv = $div[0];
                    jsDiv.innerHTML="jq轉成JS對象成功";
                });
            });

JQ 的開發步驟: (將我們頁面的JS代碼和HTML頁面代碼進行分離)
1. 導入 JQ 相關的文件
2. 文檔加載完成事件: $ ( function ) : 頁面初始化的操作: 綁定事件, 啓動頁面定時器
3. 確定相關操作的事件
4. 事件觸發函數
5. 函數裏面再去操作相關的元素
6. 顯示和隱藏 img.style.display
使用 JQuery 完成頁面定時彈出廣告（定時器）:
- setInterval clearInterval
- setTimeout clearTimeout
- 顯示: img.style.display = "block"
- 隱藏: img.style.display = "none"
- img 對象
  - style屬性: style對象
使用JQuery完成表格的隔行換色
- 獲得所有的行
  - table.rows[]
- 修改行的顏色
  - row.bgColor ="red"
  - row.style.backgroundColor = "black"
  - row.style.background = "red"
  - "background-color:red"
  - "background : red"
使用 JQuery 完成複選框的全選效果
- checked 屬性
- 如何獲取所有複選框:
  - document.getElementsByName get Elements By Name 數據庫裏
使用JQuery完成省市聯動效果
- JS中的數組: ["城市"]
- new Array()
- DOM樹操作:
  - 創建節點: document.createElement
  - 創建文本節點: document.createTextNode
  - 添加節點: appendChild（）
使用JQuery完成下列列表左右選擇
- select下拉列表
- multiple 允許多選
- ondblclick : 雙擊事件
- for 循環遍歷,一邊遍歷一邊移除出現的問題
使用JQuery完成表單的校驗(擴展)，事件:
- 獲得焦點事件: onfocus
- 失去焦點事件: onblur
- 按鍵擡起事件: onkeyup
- 鼠標移入: onmouseenter
- 鼠標移出: onmouseout
- JS 引入外部文件 : script
使用JQuery完成頁面定時彈出廣告，當用戶打開界面，3秒鐘之後彈出廣告，這個廣告顯示5秒鐘，隱藏廣告
- 定時器: setTimeout
- 顯示和隱藏: style.display = " block / none "

【JQ中的動畫效果】

show : 顯示

hide : 隱藏

slideDown: 向下滑動

slideUp: 向上滑動

fadeIn：淡入

fadeOut：淡出

animate : 自定義動畫

舉例：定時彈出廣告

<script>
            //顯示廣告
            function showAd(){
                $("#img1").slideDown(2000);
                setTimeout("hideAd()",3000);
            }
            //隱藏廣告
            function hideAd(){
                $("#img1").slideUp(2000);
            }
            
            $(function(){
                setTimeout("showAd()",3000);
            });
        </script>

JQuery中的選擇器，讓我們能夠更加精確找到我們要操作的元素，

基本選擇器：

基本選擇器是JQuery中最常用的選擇器，也是最簡單的選擇器，它通過元素id、class 和標籤名來查找DOM元素。這個非常重要，下面的內容都是以此爲基礎，逐級提高的。
1).ID選擇器 : #ID的名稱“$(“#id”)”，獲取id指定的元素，id是全局唯一的，所以它只有一個成員。
2).類選擇器: 以 . 開頭 .類名：“$(“.class”)”，獲取class指定的元素，不同的元素可以具有相同的class屬性，所以它可能具有多個成員。
3).元素選擇器: 標籤的名稱：“$(“element”)”，獲取element（元素名，比如div、table等）指定的元素，它可能具有多個成員。
4).通配符選擇器: *：“$(“*”)”，獲取所有元素，相當於document。
5).“$(“selector1,selector2,…,selectorN”)”，將每個選擇器匹配到的元素合併後一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。

    <script>
            //文檔加載事件,頁面初始化的操作
            $(function(){
                //初始化操作: 給按鈕綁定事件
                $("#btn1").click(function(){
                    $("#two").css("background-color","palegreen");                    
                });
                
                //找出mini類的所有元素
                $("#btn2").click(function(){
                    $(".mini").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("div").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("*").css("background-color","palegreen");
                    
                });
                /*選擇器分組*/
                
                //找出mini類 和 span元素
                $("#btn5").click(function(){
                    $(".mini,span").css("background-color","palegreen");
                });
            });
        </script>

JQ中的層級選擇器
- 子元素選擇器: 選擇器1 > 選擇器2 , 找出來的是所有子節點，兒子（只包含第一層子元素），“$(“parent > child”)”
- 後代選擇器: 選擇器1 選擇器2 ，找出來的是選擇器1下面的所有選擇器2 ，“$(“ancestor descendant”)”
- 相鄰兄弟選擇器 : 選擇器1 + 選擇器2 : 找出緊挨着的一個下一層子元素，“$(“pre + next”)”
- 找出所有弟弟: 選擇器1~ 選擇器2 : 找出所有的，“$(“pre ~ siblings”)”

<script>
            //文檔加載事件,頁面初始化的操作
            $(function(){
                //初始化操作: 給按鈕綁定事件
                //找出body下面的子div   
                $("#btn1").click(function(){
                    $("body > div").css("background-color","palegreen");                    
                });
                //找出body下面的所有div
                $("#btn2").click(function(){
                    $("body div").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("#one+div").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("#two~div").css("background-color","palegreen");                    
                });
                
            });
        </script>

JQ 中的過濾選擇器

(1). 基本過濾選擇器
a) “:first”，選取第一個元素，別忘記它也是被放在一個集合裏哦！因爲JQuery它是DOM對象的一個集合。如，“$("tr:first")”返回所有tr元素的第一個tr元素，它仍然被保存在集合中。
b) “:last”，選取最後一個元素。如，“$("tr:last")”返回所有tr元素的最後一個tr元素，它仍然被保存在集合中。
c) “:not(selector)”，去除所有與給定選擇器匹配的元素。如，“$("input:not(:checked)")”返回所有input元素，但去除被選中的元素（單選框、多選框）。
d) “:even”，選取所有元素中偶數的元素。因爲JQuery對象是一個集合，這裏的偶數指的就是集合的索引，索引從0開始。
e) “:odd”，選取所有元素中奇數的元素，索引從0開始。
f) “:eq(index)”，選取指定索引的元素，索引從0開始。
g) “:gt(index)”，選取索引大於指定index的元素，索引從0開始。
h) “:lt(index)”，選取索引小於指定index的元素，索引從0開始。
i) “:header”，選取所有的標題元素，如hq、h2等。
j) “:animated”，選取當前正在執行的所有動畫元素。

        <script>
            $(function(){
                /<script>
            //文檔加載事件,頁面初始化的操作
            $(function(){                
                //初始化操作: 給按鈕綁定事件
                //過濾出所有div中第一個元素
                $("#btn1").click(function(){
                    $("div:first").css("background-color","palegreen");                    
                });                
                //過濾出所有div中偶數位的div
                $("#btn2").click(function(){
                    $("div:even").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("div:odd").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("div:gt(2)").css("background-color","palegreen");                    
                });            
            });
        </script>

(2).JQ 中的屬性過濾選擇器

通過元素的屬性來選取相應的元素。
a) “[attribute]”，選取擁有此屬性的元素。
b) “[attribute=value]”，選取指定屬性值爲value的所有元素。
c) “[attribute !=value]”，選取屬性值不爲value的所有元素。
d) “[attribute ^= value]”，選取屬性值以value開始的所有元素。
e) “[attribute $= value]”，選取屬性值以value結束的所有元素。
f) “[attribute *= value]”，選取屬性值包含value的所有元素。
g) “[selector1] [selector2]…[selectorN]”，複合性選擇器，首先經[selector1]選擇返回集合A，集合A再經過[selector2]選擇返回集合B，集合B再經過[selectorN]選擇返回結果集合。

// 選擇器[href]  : 單個屬性
        $(function(){
                //找到有name屬性的input
                $("#btn1").click(function(){
                    $("input[name]").attr("checked",true);
                });
                $("#btn2").click(function(){
                    $("input[name='accept']").attr("checked",true);
                });
                $("#btn3").click(function(){
                    $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
                });
            });

(3).JQ中的表單過濾器

a) “:input”，選取所有<input>、<textarea>、<select >和<button>元素。
b) “:text”，選取所有的文本框元素。
c) “:password”，選取所有的密碼框元素。
d) “:radio”，選取所有的單選框元素。
e) “:checkbox”，選取所有的多選框元素。
f) “:submit”，選取所有的提交按鈕元素。
g) “:image”，選取所有的圖像按鈕元素。
h) “:reset”，選取所有重置按鈕元素。
i) “:button”，選取所有按鈕元素。
j) “:file”，選取所有文件上傳域元素。
k) “:hidden”，選取所有不可見元素。

(4).選取表單對象元素屬性的過濾選擇器。

“:enabled”，選取所有可用元素。
“:disabled”，選取所有不可用元素。
“:checked”，選取所有被選中的元素，如單選框、複選框。
“:selected”，選取所有被選中項元素，如下拉列表框、列表框。

option:selected

<script>
  //1.文檔加載事件    
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>

(5). 內容過濾選擇器
它是對元素和文本內容的操作。
a) “:contains(text)”，選取包含text文本內容的元素。
b) “:empty”，選取不包含子元素或者文本節點的空元素。
c) “:has(selector)”，選取含有選擇器所匹配的元素的元素。
d) “:parent”，選取含有子元素或文本節點的元素。（它是一個父節點）

(6). 可見性過濾選擇器
根據元素的可見與不可見狀態來選取元素。
“:hidden”，選取所有不可見元素。
“:visible”，選擇所有可見元素。
可見選擇器：hidden 不僅包含樣式屬性 display 爲 none 的元素，也包含文本隱藏域 (<input type=“hidden”>)和 visible:hidden 之類的元素。

(7).子元素過濾選擇器
一看名字便是，它是對某一元素的子元素進行選取的。
a) “:nth-child(index/even/odd)”，選取索引爲index的元素、索引爲偶數的元素、索引爲奇數的元素。
l nth-child(even/odd)：能選取每個父元素下的索引值爲偶(奇)數的元素。
l nth-child(2)：能選取每個父元素下的索引值爲 2 的元素。
l nth-child(3n)：能選取每個父元素下的索引值是 3 的倍數的元素。
l nth-child(3n + 1)：能選取每個父元素下的索引值是 3n + 1的元素。
b) “:first-child”，選取第一個子元素。
c) “:last-child”，選取最後一個子元素。
d) “:only-child”，選取唯一子元素，它的父元素只有它這一個子元素。

使用JQ完成表格的隔行換色

    $(function(){
                //獲得所有的行 :   元素選擇器
                $("tbody > tr:even").css("background-color","#CCCCCC");
                //修改基數行
                $("tbody > tr:odd").css("background-color","#FFF38F");
//                $("tbody > tr").css("background-color","#FFF38F");
                
                
            });

使用JQuery完成表單的全選全不選功能
使用JQ完成省市聯動效果，添加節點 : appendChild (JS)
1. append : 添加子元素到末尾
2. appendTo : 給自己找一個爹,將自己添加到別人家裏
3. prepend : 在子元素前面添加
4. after : 在自己的後面添加一個兄弟

$(function(){
                $("#province").change(function(){
//                    alert(this.value);
                    //得到城市信息
                    var cities = provinces[this.value];
                    //清空城市select中的option
                    /*var $city = $("#city");
                    //將JQ對象轉成JS對象
                    var citySelect = $city.get(0)
                    citySelect.options.length = 0;*/
                    
                    $("#city").empty();  //採用JQ的方式清空
                    //遍歷城市數據
                    $(cities).each(function(i,n){
                        $("#city").append("<option>"+n+"</option>");
                    });
                });
            });

使用JQ完成下拉列表左右選擇


        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script>
            $(function(){
                $("#a1").click(function(){
                    //找到被選中的那一項
                    //將被選中項添加到右邊
                    $("#rightSelect").append($("#leftSelect option:selected"));
                });
                
                //將左邊所有商品移動到右邊
                $("#a2").click(function(){
                    $("#rightSelect").append($("#leftSelect option"));
                });
            });
        </script>

總結：

常用函數:
    屬性prop()    properties : 如果傳入一個參數  就是獲取
    prop("src","../img/1.jpg");  :     設置圖片路徑
    attr : 操作一些自定義的屬性  <img  abc='123' />
    prop: 通常是用來操作元素固有屬性的 ,建議大家使用prop來操作屬性
    css() ; 修改css樣式
    addClass()  : 添加一個 class 樣式
    removeClass() : 移除
    blur : 綁定失去焦點
    focus: 綁定獲得焦點事件
    click:  點擊
    dblclick：    雙擊
    change：更改
    append    :  給自己添加兒子
    appendTo :  把自己添加到別人家

    prepend :  在自己子節點最前面添加子節點

    after  : 在自己後面添加一個兄弟

    before: 在自己前面添加一個兄弟   

    $("數組對象").each(function(index,data))

    $.each(arr,function(index,data))

使用JQ完成表單的校驗
- trigger : 觸發事件，但是會執行類似瀏覽將光標移到輸入框內的這種瀏覽器默認行爲，輸入框獲得焦點
- triggerHandler : 僅僅只會觸發事件所對應的函數
- is()

1. 首先給必填項,添加尾部添加一個小紅點
2. 獲取用戶輸入的信息,做相應的校驗
3. 事件: 獲得焦點, 失去焦點, 按鍵擡起
4. 表單提交的事件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script type="text/javascript">7
            
            $(function(){      //  頁面初始化
                //必填添加小紅點
                    $(".bitian").after("<font class='high'> *</font>");
                    
                    //  必填綁定事件   $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){});  失去焦點。獲得焦點，
                    $(".bitian").blur(function(){
                        
                        //用戶當前輸入的值
                        //var value = this.value;    兩種方式都可以得到當前值
                        var value = $(this).val();             
                         //清空上一次的提示信息
                        $(this).parent().find(".formtips").remove();
                        
                        //判斷當前的值是哪一項輸入的值                        
                        if($(this).is("#username")){                            
                            // 校驗用戶名：
                            if(value.length < 6){
                                $(this).parent().append("<span class='formtips onError'>用戶名太短了</span>");    
                            }else{
                                $(this).parent().append("<span class='formtips onSuccess'>用戶正確</span>");    
                            }
                        }                        
                        if($(this).is("#password")){
                            
                        //校驗密碼
                        if(value.length < 3){
                            $(this).parent().append("<span class='formtips onError'>密碼太短了</span>");    
                        }else{
                            $(this).parent().append("<span class='formtips onSuccess'>密碼可用</span>");    
                        }
                        }
                        
                        //鏈式調用，自動校驗
                    }).focus(function(){
                        $(this).triggerHandler("blur");  //觸發上面定義的 blur 函數
                    }).keyup(function(){
                        $(this).triggerHandler("blur");   
                    });
                    
                    //給表單綁定提交事件
                    $("form").submit(function(){
                        //提交的時候，觸發必填項的校驗邏輯
                        $(".bitian").trigger("focus"); 
                        //判斷錯誤信息是否包含0
                        var length = $(".onError").length ;
                        if(length > 0){
                            return false ;
                        }else
                        return true;                        
                    });                    
            });
            
        </script>        
        <title></title>
    </head>
    <body>
        <form action="表單校驗.html" method="post">
        <div>
            用戶名:<input type="text" class="bitian" id="username"/>
        </div>
        <div>
            密碼:<input type="password" class="bitian" id="password"/>
        </div>
        <div>
            手機號:<input type="tel" />
        </div>
        <div>
            <input type="submit" value="提交"/>
        </div>
        </form>
    </body>
</html>

著作權所有，轉載請註明出處。

2.WEB前端-JQuery

Jquery

[軟件工具百科] 互聯網資源歷史快照歸檔站點與數字圖書館

杭州的 IT 崩盤了麼？

VS2022 解決方案打不開 .NET Framework 4.0 、 4.5 等老項目

Vue3 運行可以，build 打包發佈報錯，app.config.globalProperties 用法坑

既然測試也要求寫代碼，那乾脆讓開發兼任測試不就好了嗎？

程序員常見的文本查看工具

ITSM落地經驗之建設藍圖規劃

PDF 補丁丁 1.0.2 版更新

奇怪！應用的日誌呢？？

unity通過 rtmp 協議實現海康攝像頭的實時連接（二）

C# -SaveFileDialog設置多個Filter-簡記

Linux下安裝.NET CORE2.2出錯，版本降級問題及解決思路

sql 對同一個表同一字段不同條件排序後，將不同條件的結果及排序結果累加，得到值；join left

C#實現簡單讀取txt，按行循環篩選出所需要的文檔區間，並將篩選出的文本輸出到txt中，即從一大坨txt文本中篩選出所需要內容，並導出！！

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結