巨蟒python全棧開發數據庫前端7:jQuery框架

時間 2019-11-29

標籤巨蟒 python 開發數據庫前端 jquery 框架欄目 Python 简体版

原文原文鏈接

每一個人的標準不一樣,見解等等,認識,價值觀有所不一樣,促成了這些矛盾.css

1.select例子html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--html選擇的開始-->
    <select name="" id="s1">
        <option value="">aa</option>
        <option value="">bb</option>
        <option value="">cc</option>
    </select>
    <!--html選擇的結束-->
    
    <!--js關聯上邊的選擇的開始-->
    <script>
        var s1=document.getElementById('s1');
        s1.onchange=function () {
            console.log(this.options[this.selectedIndex].innerText)
        }
    </script>
    <!--js關聯上邊的選擇的結束-->
</body>
</html>

效果圖:前端

2.select聯動實現省份關聯市案例:jquery

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select聯動</title>
</head>
<body>
<select id="province">
  <option>請選擇省:</option>
</select>

<select id="city">
  <option>請選擇市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");
  //頁面一刷新就將全部的省份都添加到select標籤中
  for (var i in data) {
    var optionP = document.createElement("option"); //建立option標籤
    optionP.innerHTML = i; //將省份的數據添加到option標籤中
    p.appendChild(optionP);//將option標籤添加到select標籤中
  }
  //只要select中選擇的值發生變化的時候，就能夠觸發一個onchange事件，那麼咱們就能夠經過這個事件來完成select標籤聯動
  p.onchange = function () {
    //1.獲取省的值
    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是當前選擇的option標籤的索引位置，this.options是獲取全部的option標籤，經過索引拿到當前選擇的option標籤對象，而後.innerHTML獲取對象中的內容，也就是省份
    //還能夠這樣獲取省：var pro = this.value;
    var citys = data[pro]; //2. 經過上面得到的省份去data裏面取出該省對應的全部的市
    // 3. 清空option
    c.innerHTML = ""; //清空顯示市的那個select標籤裏面的內容
　　

    //4.循環全部的市，而後添加到顯示市的那個select標籤中
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

測試結果:編程

一開始打開:後端

選擇的結果:數組

3.人臉識別,機器學習(之後能夠考慮走的方向)瀏覽器

TensorFlow,OpenStack網絡

今日主要內容

1.什麼是jquery?jquery與js的關係?

引子,例1:app

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<div id="d1">我是div</div>
</body>
</html>

思考:如何找到div,打印出文本?

運行,原生js的操做方式.結果顯示:

jquery包的下載方式:

1.在百度一下上輸入'jquery.com',

2.點擊有官網字樣的標題,點擊一下,

3.再點擊進入

4.進入下圖,

5.上圖第一個表示壓縮版的jquery,第二個表示未壓縮版本的jquery.

6.右擊連接地址

7.點擊保存存儲到桌面上便可.

第二種方式,點擊進入網址,將jquery的信息拷貝出來,存儲成這個名字便可.

引子,例2:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div id="d1">我是div</div> <script src="jquery-3.3.1.min.js"></script>
<!--導入js文件-->

</body>
</html>

運行結果分析:

上邊的第一種方式是原生的js寫的,下邊是用到了一個工具,也就是jquery,功能是同樣的,jquery是別人已經寫好的模塊或者包,咱們直接導入用就能夠了.

已經用過的第三方包:gevent,request,beautiful

如何快速開發,爲的是快速解決問題.纔會引入這個模塊的,用起來比較簡單,因此咱們使用這個第三方模塊.

jquery介紹:

(1)jQuery是一個輕量級.兼容多瀏覽器的js庫.

(2)jQuery使用戶可以更方便地處理HTML Document,Events,實現動畫效果,方便的進行Ajax交互,可以極大的簡化js編程,它的宗旨就是"Write less,do more."

jquery的優點:

(1)一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。

(2)豐富的DOM選擇器,jQuery的選擇器用起來很方便，好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再好比要將一個表格的隔行變色，jQuery也是一行代碼搞定。

(3)鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。

(4)事件、樣式、動畫支持。jQuery還簡化了js操做css的代碼，而且代碼的可讀性也比js要強。

(5)Ajax操做支持。jQuery簡化了AJAX操做，後端只需返回一個JSON格式的字符串就能完成與前端的通訊。

(6)跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。

(7)插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。

jquery內容:

(1)選擇器

(2)篩選器

(3)樣式操做

(4)文本操做

(5)屬性操做

(6)文檔處理

(7)事件

(8)動畫效果

(9)插件

(10)each、data、Ajax

易錯點1:

錯誤代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div id="d1">我是div</div>

<script>
    console.log($("#d1").text());
</script>
<script src="jquery-3.3.1.min.js"></script>
<!--導入js文件-->

</body>
</html>

View Code

正確代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div id="d1">我是div</div>

<script src="jquery-3.3.1.min.js"></script>
<!--導入js文件-->

<script>
    console.log($("#d1").text());
</script>


</body>
</html>

View Code

出錯緣由:表示先使用了jquery後導入了jquery

jquery庫最後導入了,結果報錯,說明沒有定義這個,is not defined,咱們應該在body的最開始倒入jquery模塊

咱們應該,先導入後使用!!!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div id="d1">我是div</div>

<script src="jquery-3.3.1.min.js"> $("#d1").text() </script> <!--導入js文件--> <script> console.log($("#d1").text()); </script>

#不能同時用上邊的兩種方式
</body>
</html>

jquery版本

1.x版本　　兼容ie678

2.x版本　　基本不用了

3.x版本　　不兼容　　添加了不少新的內容

同時導入兩個版本會是什麼狀況?

後邊的版本會覆蓋前面的版本.

一個頁面只須要導入一次就能夠了.

jquery的使用

過程:找到標籤,修改標籤的樣式,修改標籤的文本,==>總結就是查找標籤,操做標籤.

基礎語法:$==jquery (dollar符號就是個小名,也就是別名),相似於import gevent as g

　　　　　　目的:寫起來方便.

代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div id="d1">我是div</div>

<script src="jquery-3.3.1.min.js">
    $("#d1").text()
</script>
<!--導入js文件-->

<script>
    console.log($("#d1").text());
</script>


</body>
</html>

操做:

查找標籤--選擇器

jquery的基礎語法

查找標籤的最基本語法:$("條件")

查找標籤的最基本語法:$("條件").方法()

如下顯示的結果不一樣.

js能夠用於調用原生的方法,jquery不能用於調用原生的方法

總結:也就是不能用jquery對象調用原生對象的屬性或方法.

問題:用jquery找到這個對象,怎樣拿到裏邊的內容?

找到數組的第一個元素,就至關因而原生的js拿到了這行代碼,再用這行代碼找到裏邊的文本.

上邊的$("#d1")[0],至關於包含原生對象的數組的jquery對象,

jquery對象根據索引值可以拿到具體的標籤對象

jquery若是想要調用本身的想要獲取對象的文本內容,能夠調用本身的方法;或者找到原生的,再調用原生的屬性.(具體以下)

易錯點二:

若是出現下圖這個錯誤,表示原生的js調用了jquery的方法,這樣是不能夠的

緣由分析:看一下是否是對一個原生的DOM對象調用了jQuery的方法

用法彙總之基本選擇器:

id選擇器:　　$("#id")

標籤選擇器: $("tagName")

class選擇器: $(".className")

配合使用:　 $("div.c1")　　//找到c1　　class類的div標籤

全部元素選擇器:　　$("*")

組合選擇器:　　$("#id,.className,tagName")

例子:

html代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div id="d1">我是div</div> <div class="c1">div2</div> <p class="c1"></p>

<script src="jquery-3.3.1.min.js"></script>
<!--導入js文件-->

<script>
    console.log($("#d1").text());
</script>

</body>
</html>

d1找到1行代碼,.c1找到兩行代碼

p標籤找到了1個,*標籤找到了11個.

上圖是組合選擇器,逗號表示"或者"的意思

層級選擇器:

x和y能夠爲任意選擇器

$("x y");// x的全部後代y（子子孫孫）
$("x > y");// x的全部兒子y（兒子）
$("x + y")// 找到全部緊挨在x後面的y
$("x ~ y")// x以後全部的兄弟y

基本篩選器:

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例子:

$("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

測試結果代碼(基本篩選器):

基本篩選器示例:
html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<ul id="u1">
    <li>001</li>
    <li>002</li>
    <li id="l3">003</li>
    <li>004</li>
    <li>005</li>
</ul>

<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

測試代碼:

快速建立方法1:

ul>li*5    ==>　　再按TAB鍵,會變成

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
快速建立方法2:

ul>li{$$$}*5　　==>　　再按TAB鍵,會變成

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

表示,找到含有類的.c1的標籤,去掉含有p的標籤(從前面找的結果裏把符合後面條件的移除)

測試has,

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<ul id="u1">
    <li>001</li>
    <li>002</li>
    <li id="l3">003</li>
    <li>004</li>
    <li>005</li>
</ul>

<hr>
<div class="c1">div</div>
<p class="c1">ppp</p>
<hr>

<div>
    <p>div中的p</p>
</div>
<div>div2</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

找到div中含有p標籤的:

測試以下:

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<ul id="u1">
    <li>001</li>
    <li>002</li>
    <li id="l3">003</li>
    <li>004</li>
    <li>005</li>
</ul>

<hr>
<div class="c1">div</div>
<p class="c1">ppp</p>
<hr>

<div>
    <span>div>span</span>
</div>
<div>div2</div>
<div>
    <p>
        <span>div>p>span</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

測試結果:

表示,只要後代中含有span標籤就能夠找到.

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<ul id="u1">
    <li>001</li>
    <li>002</li>
    <li id="l3">003</li>
    <li>004</li>
    <li>005</li>
</ul>

<hr>
<div class="c1">div</div>
<p class="c1">ppp</p>
<hr>

<div>
    <span>div>span</span>
</div>
<div>div2</div>
<div>
    <p>
        <span class="c2">div>p>span</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

測試結果:

第二條表示,找後代中有span標籤的div標籤
第三條表示,找後代中有span標籤和.c2屬性的div標籤
彈出框做業jQuery版本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        .cover{
            position: fixed;
            /*首先將位置固定住*/
            top:0;
            right:0;
            bottom:0;
            left:0;
            /*上下左右設置都爲0*/
            background-color: rgba(0,0,0,0.2);

            z-index:99;
            /*指定一個元素的堆疊順序,數值越大,表示在越上邊*/
        }
        .modal{
            width:700px;
            height:400px;
            position: absolute;
            top:50%;
            left:50%;
            margin-left: -350px;
            margin-top: -200px;
            background-color: white;
            z-index: 100;
            /*將x的位置移動*/
        }
        .close{
            float: right;
            /*在這裏將x移動到右上角*/
            margin-right: 15px;
            margin-top: 10px;
            font-size: 16px;
        }
        .hide{
            display: none;
            /*表示不顯示*/
        }
    </style>
</head>
<body>

<button id="b1">點我彈出</button>

<div class="cover hide" ></div>
<!--這個標籤經過設置CSS樣式,將button及下層的東西蓋住,好比註冊登陸窗口的彈出就須要這個-->
<!--hide表示不顯示這個div標籤,注意這個hide寫在class裏邊-->

<div class="modal hide" >
    <span class="close" id="s1">&times;</span>
    <!--&times;表示x的意思,也能夠直接寫x-->
</div>

<script src="jquery-3.3.1.min.js"></script>
<!--1.首先引入jQuery模塊-->
<script>
    // 思考如何實現,在點擊彈出按鈕以後,彈出兩個標籤
    //首先,找標籤,注意這個地方是經過id處理的
    // var b1Ele=document.getElementById('b1')
    var b1Ele=$("#b1")[0];//注意這個地方容易漏掉#,必定要多注意這些細節
    //上一行代碼,表示經過jQuery的方式,找到b1標籤

    //下面的書寫太麻煩了,經過定義變量來進行改寫!!!!(提升效率,節省查找時間)
    var coverEle=$(".cover")[0];
    var modalEle=$(".modal")[0];


    //其次,處理事件,單擊button以後,找到類屬性,移除類列表中的隱藏屬性
    b1Ele.onclick=function (ev) {
        // document.getElementsByClassName('cover')[0].classList.remove('hide');
        // $(".cover")[0].classList.remove("hide");
        coverEle.classList.remove("hide");

        // document.getElementsByClassName('modal')[0].classList.remove('hide');
        // $(".modal")[0].classList.remove("hide");
        modalEle.classList.remove("hide");
    //移除樣式
    }

        var s1Ele=document.getElementById('s1')
        //其次,處理事件,單擊button以後,找到類屬性,添加類列表中的隱藏屬性
        s1Ele.onclick=function (ev) {
        // document.getElementsByClassName('cover')[0].classList.add('hide');
        // $(".cover")[0].classList.add("hide");
        coverEle.classList.add("hide");
        // document.getElementsByClassName('modal')[0].classList.add('hide');
        // $(".modal")[0].classList.add("hide");
        modalEle.classList.add("hide");
    //移除樣式
    }
</script>
</body>
</html>
<!--目的就是:一點擊就添加,一點擊就關閉,這樣的操做-->

jquery操做class

樣式操做

樣式類

addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

測試代碼html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        .c{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: red;
        }
        .c1{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="d1" class="c c1">123</div>

<script src="jquery-3.3.1.min.js"></script>

</body>
</html>

在瀏覽器中操做上邊的運行代碼

咱們習慣性,在變量前面加上$前綴,表示jQuery對象的變量名.

屬性選擇器:

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

例子:

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標籤
$("input[type!='text']");// 取到類型不是text的input標籤

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div S14="好">div1</div>
<div>div2</div>

<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

結果測試:

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div S14="好">div1</div>
<div>div2</div>

<input type="text">
<input type="password">
<input type="submit">

<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

結果測試:

表單經常使用篩選器:

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

簡寫尋找屬性的方法:

表單對象屬性

:enabled　　　　　　//默承認以使用的.
:disabled 　　　　//表示禁用的
:checked
:selected

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div S14="好">div1</div>
<div>div2</div>

<input type="text">
<input type="password">
<input type="submit">

<hr>
<input type="checkbox" checked>
<!--<input type="checkbox" checked="checked">-->
<!--上邊的兩條語句的做用是同樣的,都是默認被選中-->
<input type="radio">

<select>
    <option value="111">111</option>
    <option value="222">222</option>
</select>

<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

結果測試:

篩選器方法:

(1)下一個元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<ul>
    <li id="l0">000</li>
    <li id="l1">111</li>
    <li id="l2">222</li>
    <li id="l3">333</li>
    <li>444</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

測試結果:

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<ul>
    <li id="l0">000</li>
    <li id="l1">111</li>
    <li id="l2">222</li>
    <li id="l3">333</li>
    <li>444</li>
</ul>
<div>div</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

測試結果:

證實找的是同級的代碼.

(2)上一個元素:(倒敘尋找)

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

(3)父親元素

$("#id").parent()
$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。

(4)兒子和兄弟元素

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

(5)查找

搜索全部與指定表達式匹配的元素,這個函數是找出正在處理的元素的後代元素的好方法

$("div").find("p")

等價於 $("div p")　　//也就是在div中找p標籤

html代碼:

測試結果:

(6)篩選

篩選出與指定表達式匹配的元素集合.這個方法用於縮小匹配的方位,用逗號分隔多個表達式.

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的

等價於 $("div.c1")

補充：

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

html代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<ul>
    <li id="l0">000</li>
    <li id="l1">111</li>
    <li id="l2">222</li>
    <li id="l3">333</li>
    <li>444</li>
</ul>

<div class="c1">div</div>

<div>
    <p>div>p</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>