day56：jQuery

生JS事件綁定例題

1、開關燈示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }
        .bg_green{background-color: green}
        .bg_red{background-color: red}
    </style>
</head>
<body>
    <div id="d1" class="c1 bg_red bg_green"></div>
    <button id="d2">變色</button>
<script>
    let btnEle=document.getElementById('d2')
    let divEle=document.getElementById('d1')
    btnEle.onclick=function () {          //點擊時調用事件句柄
        divEle.classList.toggle('bg_red')   //有則刪除，無則添加
    }
</script>
</body>
</html>

2、input框獲取焦點示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="hello world" id="d1">

<script>
    let iEle=document.getElementById('d1')  // 點擊了后執行的操作（獲取焦點）
    iEle.onfocus=function (){
        iEle.value=''  // 重新賦值為空
    }
    iEle.onblur=function (){  // 鼠標點擊了其他地方執行的操作（移除焦點）
        iEle.value='goodbye'
    }
</script>
</body>
</html>

3、input框實時刷新時間實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width:200px">
<button id="d2">開始</button>
<button id="d3">結束</button>

<script>
    //4、創建一個變量t，用來存儲定時器
    let t=null
    //1、 把要操作的標簽生成對象
    let inputEle=document.getElementById('d1')
    let starEle=document.getElementById('d2')
    let endEle=document.getElementById('d3')
    //2、定義一個函數用于展示實時時間
    function showTime(){
        let time=new Date();  //  生成一個時間對象
        inputEle.value=time.toLocaleString()  //獲取當前時間，并賦值給input標簽
    }
    //3、給頁面上的按鈕綁定功能，一個開始，一個結束
    starEle.onclick=function (){
        if (!t){
            t=setInterval(showTime,1000)    //每點擊一下就會生成一個定時器
        }
    }
    endEle.onclick=function (){
        clearInterval(t)    //只能清除一個定時器
        t=null
    }
</script>
</body>
</html>

4、省市聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1" >
    <option value="---請選擇---" selected disabled>---請選擇---</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle=document.getElementById('d1')
    let cityEle=document.getElementById('d2')
    //1、先模擬省市數據
    data={
        '江西':['南昌','九江','贛州','上饒'],
        '浙江':['杭州','義烏','紹興','嘉興'],
        '江蘇':['南京','蘇州','泰州','南通'],
        '廣東':['廣州','深圳','惠州','清遠']
    };
    //2、for循獲取到省
    for (let key in data){
        //2.1 將省信息做成一個個option標簽，并添加到第一個select框中
        //1 創建option框
        let opEle=document.createElement('option')
        //2 設置value
        opEle.value=key
        //3 設置文本
        opEle.innerText=key
        //4 添加到第一個select中
        proEle.appendChild(opEle)
    }
    //3、設置文本域變化事件，使得再更換省的時候可以更新市
    proEle.onchange=function (){
        //先清空市select中所有的option
        cityEle.innerHTML=''
        //先獲取到用戶選擇的省
        let getPro=proEle.value
        //獲取對應的市信息
        let getCity=data[getPro]
        //添加默認選擇標簽
        let oppEle=document.createElement('option')
        oppEle.innerText='-請選擇-'
        oppEle.setAttribute('selected','selected')
        oppEle.setAttribute('disabled','disabled')
        cityEle.appendChild(oppEle)
        //for循環所有的市，渲染到第二個select中
        for(let i=0;i<getCity.length;i++){
            //拿到市名
            let city=getCity[i]
            //創建標簽
            let opEle=document.createElement('option')
            //設置文本
            opEle.innerText=city
            //設置值
            opEle.value=city
            //添加到第二個select中
            cityEle.appendChild(opEle)
        }
    }

</script>
</body>
</html>

jQuery

jQuery 是一個快速、小巧且功能強大的 JavaScript 庫。它通過簡化 JavaScript 編程，使開發人員能夠更輕松地操作 HTML 文檔、處理事件、執行動畫效果以及處理 AJAX 請求等。

jQuery基本語法：

jQuery（選擇器）.action（）
可以簡寫：jQuery()===$()

基本選擇器：

1. 元素選擇器：使用元素名稱選擇 HTML 元素。例如：`$("p")` 會選擇所有的 `<p>` 元素。

2. ID 選擇器：使用元素的 ID 屬性選擇指定的元素。例如：`$("#myElement")` 會選擇具有 ID 屬性為 "myElement" 的元素。

3. 類選擇器：使用元素的類名選擇指定的元素。例如：`$(".myClass")` 會選擇具有類名為 "myClass" 的元素。

4.屬性選擇器：使用元素的屬性選擇指定的元素。例如：$("[name='myName']") 會選擇具有 name 屬性值為 "myName" 的元素。

通過jQuery選擇器獲取到的對象都是jQuery對象，如需使用JavaScript代碼對其進行操作的話，則需要轉換成標簽對象。

$("#myElement")[0]	//轉成標簽對象

同樣，標簽對象也可轉成jQuery對象：

$(document.getElementByid('#myElement')) //轉成jQuery對象

組合分組嵌套選擇器：

jQuery也支持組合選擇器：

$('div#d1')	//選擇具有 id 屬性為 "d1" 的 <div> 元素。
$('div.c1')	//選擇具有 class 屬性為 "c1" 的 <div> 元素。
... ...
$('div span')	//后代選擇器，用于選擇 <div> 元素內的所有 <span> 元素。
$('div>span')	//子元素選擇器，用于選擇 <div> 元素的直接子元素中的 <span> 元素。
$('div+span')	//相鄰元素選擇器，用于選擇緊接在 <div> 元素后面的第一個 <span> 元素。
$('div~span')	//兄弟元素選擇器，用于選擇所有在 <div> 元素后出現的同級別的 <span> 元素。

基本篩選器：

在jQuery中，篩選器可以根據不同的條件來選擇匹配的元素，從而實現對元素的精確控制和操作。

jQuery提供了許多基本篩選器，用于選擇匹配指定條件的元素。以下是一些常用的基本篩選器：

- `:first`：選擇第一個匹配的元素。
- `:last`：選擇最后一個匹配的元素。
- `:even`：選擇索引為偶數的元素（從0開始計數）。
- `:odd`：選擇索引為奇數的元素（從0開始計數）。
- `:eq(index)`：選擇索引為指定值的元素。
- `:gt(index)`：選擇索引大于指定值的元素。
- `:lt(index)`：選擇索引小于指定值的元素。
- `:header`：選擇所有標題元素（如`<h1>`、`<h2>`等）。
- `:not(selector)`：選擇不匹配給定選擇器的元素。
- `:has(selector)`：選擇包含匹配給定選擇器的元素。
- `:contains(text)`：選擇包含指定文本內容的元素。

$('ul li') #ul下面的所有li子標簽
$('ul li:first') #ul下面的第一個li子標簽 $('ul li').first()
$('ul li:last') #ul下面的最后一個li子標簽 $('ul li').last()
$('ul li:eq(2)') #放索引，根據索引取值
$('ul li:even') #偶數索引，0包含在內
$('ul li:odd') #奇數索引
$('ul li:gt(2)') #大于索引
$('ul li:lt(2)') #小于索引
$('div:has("p")') #選舉出包含一個標簽，或多個標簽在內的標簽（父級）
$('ul li:not("#d1")') # 移除所有滿足條件的標簽

這些基本篩選器可以與其他選擇器和方法組合使用，以便更精確地選擇和操作網頁中的元素。

表單篩選器：

特殊情況

篩選器方法：

：背景

1. 講故事

前段時間搞了一個地方性民生資訊號，資訊嘛，都是我抄你的，你抄官媒的，小市民都喜歡奇聞異事，所以就存在一個需求，如何去定向抓取奇聞異事的地方號上的新聞，其實做起來很簡單，用邏輯回歸即可，這篇主要討論如何去抓取，在 C# 中大家都知道抓取通用的庫是 HtmlAgilityPack，但是這個庫主流的做法是采用 xpath 提取網頁內容，這就讓我很不爽了，畢竟不熟悉莫名的抵抗哈，像我這個年紀的碼農，被 Jquery 教育了至少 5-6 年，所以必須用類Jquery 的方式，在 python 中有 cquery 做這件事情，那在 C# 中有沒有類似的方式呢？嘿嘿，萬能的 github 上還真有。。。就是本篇介紹的 CSQuery。

二：CSQuery

1. 安裝

github的地址： https://github.com/zone117x/CsQuery 然后在vs中 nuget 一下即可：

2. 舉幾個例子

一切都準備就緒了，那怎么用呢？不著急，我以博客園舉兩個例子。

1) 將首頁中的友情連接提取到

如上圖，要想獲取這里的友情鏈接幾個大字，直接用 text() 肯定是不行的，默認情況它會將所有的子節點的文本也會抓到，如下圖：

那怎么處理呢？可以用 jquery 提供的 contents 方法，然后在獲取的所有子節點中判斷是否有文本節點，最后獲取文本節點的內容即可，如下代碼：

用js是搞定了，那用 CSQuery 代碼怎么搞定呢？模仿唄，如下代碼：


        static void Main(string[] args)
        {
            var jquery=CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));

            var content=jquery["#friend_link"].Contents().Filter((dom)=>
            {
                return dom.NodeType==NodeType.TEXT_NODE;
            }).Text();

            Console.WriteLine(content);
        }

我不知道用 xpath 提取這樣的內容麻不麻煩，不過用 jquery 方式不簡單，但輕車熟路。

2) 如何將 html 中的某些元素標顏色

有時候為了業務需要將某些 html 標簽改一下顏色，比如說將首頁的 tabmenu 中博問和專區改成紅色，如下圖：

那用 CSQuery 怎么處理呢？如果玩過 jquery，一般來說步驟如下：

使用 each 遍歷每一個子 li 標簽
使用 CSS 方法給 li 中 a 標簽賦樣式
使用 Render 渲染生成一個新的的html

有了步驟，C#代碼如下：


        static void Main(string[] args)
        {
            Config.HtmlEncoder=HtmlEncoders.None;

            var jquery=CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));

            var html=jquery["#nav_left li"].Each(dom=>
               {
                   var self=jquery[dom];

                   var text=self.Text();

                   if (text=="博問" || text=="專區")
                   {
                       self.Find("a").CssSet(new { color="red" });
                   }
               }).Render();
        }

3) 其他的操作方法

除了上面兩個操作方法外，你還可以使用 after，before，replaceAll,IS 等等一百來個實用的方法，這篇肯定也無法一一介紹了，大家有興趣可以下載下來看一看，搗鼓搗鼓。

三：其他用途

除了抓取html中的元素，我覺得這玩意還可以用在發送郵件時操控郵件模板，畢竟在很久以前大家都是用jquery來繪制 html，所以用 CSQuery 也是可以的，相對使用 xslt 有利有弊吧，接下來做一個例子：

1. 生成一個html模板


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <ul id="main"></ul>
</body>
</html>

2. 使用 CSQuery 給 ul 追加 li

可以用 Append 將內容追加到 <ul> 節點內。


    class Program
    {
        static void Main(string[] args)
        {
            Config.HtmlEncoder=HtmlEncoders.None;

            var strlist=new string[2] { "1", "2" };

            var path=Environment.CurrentDirectory + "\\2.html";
            var jquery=CQ.CreateFromFile(path);

            foreach (var str in strlist)
            {
                jquery.Find("#main").Append($"<li>{str}</li>");
            }

            var html=jquery.Render();
        }
    }

3. 部分渲染 RenderSelection

Render方法是將整個Dom渲染成html，但有時候你只需要得到你修改的那部分內容，而不是整個html，這就涉及到了部分渲染，可以用 RenderSelection 方法即可，代碼如下：


        static void Main(string[] args)
        {
            Config.HtmlEncoder=HtmlEncoders.None;

            var strlist=new string[2] { "1", "2" };

            var path=Environment.CurrentDirectory + "\\2.html";
            var jquery=CQ.CreateFromFile(path);

            var current=jquery.Find("#main");

            foreach (var str in strlist)
            {
                current.Append($"<li>{str}</li>");
            }

            var html=current.RenderSelection();

            Console.WriteLine(html);
        }

------------- output ----------------

<ul id="main"><li>1</li><li>2</li></ul>

四：總結

Jquery 這種操作模式對我個人來說還是比較舒服的，畢竟熟！不過在 html5 中也新增了 querySelector 和 querySelectorAll 支持 css3 選擇器，非常強大，可 jquery 不光在選擇器的靈活上，還在于對節點的靈活操作上，總的來說不是特別富交互的情況下可以懷舊一把。

.jQuery庫中的$()是什么？

$() 函數是 jQuery() 函數的別稱，$()函數用于將任何對象包裹成 jQuery對象，接著被允許調用定義在jQuery對象上的多個不同方法。甚至可以將一個選擇器字符串傳入$()函數，它會返回一個包含所有匹配的DOM元素數組的jQuery對象。這個問題我已經見過好幾次被提及，盡管它非常基礎，它經常被用來區分一個開發人員是否了解jQuery。

2.網頁上有5個div元素，如何使用 jQuery來選擇它們？

jQuery支持不同類型的選擇器，例如ID選擇器、class選擇器、標簽選擇器。鑒于這個問題沒提到ID和class，可以用標簽選擇器來選擇所有的div 元素。jQuery代碼：$("div")，這樣會返回一個包含所有5個div標簽的jQuery 對象。

3.$(this) 和 this 關鍵字在 jQuery 中有何不同？

這對于很多java零基礎學jQuery的初學者來說是一個棘手的問題，其實是個簡單的問題。$(this) 返回一個jQuery對象，你可以對它調用多個 jQuery方法，比如用text()獲取文本，用val()獲取值等等。而this代表當前元素，它是JavaScript關鍵詞中的一個，表示上下文中的當前DOM元素。你不能對它調用 jQuery方法，直到它被 $() 函數包裹，例如 $(this)。

4.使用CDN加載 jQuery庫的主要優勢是什么？

除了報錯節省服務器帶寬以及更快的下載速度這許多的好處之外, 最重要的是，如果瀏覽器已經從同一個CDN下載類相同的jQuery版本, 那么它就不會再去下載它一次，因此今時今日，許多公共的網站都將jQuery用于用戶交互和動畫, 如果瀏覽器已經有了下載好的jQuery庫，網站就能有非常好的展示機會。

5.jQuery中的方法鏈是什么？使用方法鏈有什么好處？

方法鏈是對一個方法返回的結果調用另一個方法，這使得代碼簡潔明了，同時由于只對DOM進行了一輪查找，性能方面更加出色。

6.如何將一個HTML元素添加到DOM樹中的？

可以用 jQuery方法appendTo()將一個HTML元素添加到DOM樹中。這是jQuery提供的眾多操控DOM的方法中的一個。可以通過appendTo()方法在指定的DOM元素末尾添加一個現存的元素或者一個新的HTML元素。

7.說出jQuery中常見的幾種函數以及他們的含義是什么?

（1）get()取得所有匹配的DOM元素集合；

（2）get(index)取得其中一個匹配的元素.index表示取得第幾個匹配的元素；

（3）append(content)向每個匹配的元素內部追加內容；

（4）after(content)在每個匹配的元素之后插入內容；

（5）html()/html(var)取得或設置匹配元素的html內容；

（6）find(expr)搜索所有與指定表達式匹配的元素；

（7）bind(type,[data],fn)為每個匹配元素的特定事件綁定事件處理函數；

（8）empty()刪除匹配的元素集合中所有的子節點；

（9）hover(over,out)一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法；

（10）attr(name)取得第一個匹配元素的屬性值。

8.jQuery 能做什么？

獲取頁面的元素；修改頁面的外觀；改變頁面大的內容；響應用戶的頁面操作；為頁面添加動態效果；無需刷新頁面，即可以從服務器獲取信息；簡化常見的javascript任務。

9.jquery中的選擇器和CSS中的選擇器有區別嗎？

jQuery選擇器支持CSS里的選擇器，jQuery選擇器可用來添加樣式和添加相應的行為，CSS中的選擇器是只能添加相應的樣式。

10.jQuery的特點都有什么？

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

在線咨詢

上一篇：HTML實例解析
下一篇：6個非常有用的 VS Code CSS擴展

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商