亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索

微信公眾號

首頁文章專題 AI工具學習編程手冊下載最近更新

文章 web3.0 后端開發(fā) web前端數據庫開發(fā)工具 php框架常見問題科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數據庫開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程新聞

AI工具 AI 聊天問答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設計工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學習 AI 編程開發(fā) Prompt指令

學習大前端后端開發(fā) 數據庫移動端運維開發(fā) UI設計計算機基礎

編程手冊大前端 JavaScript 后端開發(fā) 數據庫移動端運維開發(fā) UI設計計算機基礎 XML Web Services

下載 js特效網站源碼工具下載類庫下載網站素材學習資源插件擴展手機/移動開發(fā) 手機游戲

JQuery使用方法

1.可以從https://jquery.com/download/下載jquery.js文件；通過script標簽src屬性導入文檔使用

<script src="jquery.js"></script>

2.可以使用在線的JQuery的文檔來使用：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

JQuery選擇器使用`$()`

$()的參數的四種類型

CSS選擇器
原生js對象,(包裝器功能)
html字符串, 創(chuàng)建dom元素
回調函數,在頁面加載完成,dom樹創(chuàng)建成功后自動調用

JQuery：DOM屬性操作

方法	作用描述
`.addClass()`	為每個匹配的元素添加指定的樣式類名
`.attr()`	獲取匹配的元素集合中的第一個元素的屬性的值。設置每一個匹配元素的一個或多個屬性。
`.hasClass()`	確定任何一個匹配元素是否有被分配給定的（樣式）類。
`.html()`	獲取集合中第一個匹配元素的HTML內容設置每一個匹配元素的html內容。
`.prop()`	獲取匹配的元素集中第一個元素的屬性（property）值為匹配的元素設置一個或多個屬性（properties）。
`.removeAttr()`	為匹配的元素集合中的每個元素中移除一個屬性（attribute）。
`.reomoveClass()`	移除集合中每個匹配元素上一個，多個或全部樣式。
`.removeProp()`	為集合中匹配的元素刪除一個屬性（property）
`.toggleClass()`	在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類。
`.val()`	獲取匹配的元素集合中第一個元素的當前值。設置匹配的元素集合中每個元素的值。

JQuery:CSS樣式操作

方法	作用描述
`.css()`	獲取匹配元素集合中的第一個元素的樣式屬性的值設置每個匹配元素的一個或多個CSS屬性。
`.height() .width()`	獲取匹配元素集合中的第一個元素的當前計算高度值（寬度值）。設置每一個匹配元素的高度值（CSS寬度值）
`.innerHeight() .innerWidth()`	為匹配的元素集合中獲取第一個元素的當前計算高度值(寬度值),包括padding，但是不包括border。
`.offset()`	在匹配的元素集合中，獲取的第一個元素的當前坐標，坐標相對于文檔。設置匹配的元素集合中每一個元素的坐標，坐標相對于文檔。
`.position()`	獲取匹配元素中第一個元素的當前坐標，相對于offset parent的坐標。( 譯者注：offset parent指離該元素最近的而且被定位過的祖先元素 )
`.outerHeight() .outerWidth()`	獲取元素集合中第一個元素的當前計算高度值(寬度值),包括padding，border和選擇性的margin。（注：返回一個整數（不包含“px”）表示的值，或如果在一個空集合上調用該方法，則會返回 null。）
`.scrollTop()`	獲取匹配的元素集合中第一個元素的當前垂直滾動條的位置或設置每個匹配元素的垂直滾動條位置。設置每個匹配元素的垂直滾動條位置
`.scrollLeft()`	獲取匹配的元素集合中第一個元素的當前水平滾動條的位置。設置每個匹配元素的水平滾動條位置

JQuery遍歷

.each()：遍歷一個jQuery對象，為每個匹配元素執(zhí)行一個函數。

實操練習

1.代碼

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
    <script src="jquery.js"></script>
    <style>
        .item{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <ul id="second">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</body>
<script type="text/javascript">
    let cl=console.log;
    cl($);
    // $()參數類型
    let uls=$("ul>li");//css選擇器
    cl(uls);
    cl($(document.querySelectorAll("li")));//JS原始的DOM對象
    cl($("<li>item</li>"));//HTML元素標簽
    cl($(function (){
        return $("ul");
    }));
    $("ul").attr("class","item");//把匹配的所有元素添加屬性
    cl($("ul:last-of-type").attr("id"));//獲取匹配元素第一個的屬性值
    cl($("li").html());//獲取匹配到第一個元素內的內容包含html元素
    cl($("li").text());//獲取匹配到所有的元素的內容，純文本
    // cl($("li").html("你好"));
    // cl($("li").text("你好"));
    cl($("ul").html());//獲取匹配到第一個元素的內容包含html元素
    cl($("ul").text());//獲取匹配到所有的元素的內容，純文本
    // 設置css屬性
    $("ul").css("color","red");
    $("ul").css("box-shadow","0 0 3px #000033");
</script>
</html>