2022-8-26 jq简单了解

Query 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities





          JS库：别人写好的JS文件，我们拿来直接用
            开发中，会引入很多的.js文件
            JQuery.js------濒临淘汰，经典。
                css库，bootstrap，layui，easyui。
            React.js-------
            Angular.js-----
            Vue.js---------简单。最主流

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

选择器

            基本选择器
                id选择器---返回值是固定的一个
                class选择器---返回值是一堆
                标签选择器---返回值是一堆
                *号选择器---返回值是所有标签
            层级选择器
               div p---div里的p，后代
               div>p---直接子元素 
               div+p---相邻
            过滤选择器
                :first---获取第一个元素
                :last---获取最后一个元素
                :eq(index)---给定位置的元素
                :gt(index)---大于给定位置
                :lt(index)---小于给定位置
                :not(selector)---除了selector以外的所有选择器
            内容选择器：
                :empty---匹配所有不包含子元素的选择器
                :parent---含有子元素的父元素
            属性选择器：
                [name]---包含name属性的元素
                input[type=text]---文本框
                input[type!=text]---除文本框的其他

    <div id="container">
        <p id="p123">123</p>
    </div>

    <!-- 
        script标签：只可以做一件事情
        要么是导入js文件，要么是写js代码
     -->
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(() => {
            /*
                appendTo()：参数是一个JQuery元素，追加到xxx
                prepareTo()：在之前追加

            */
            $("<p>546</p>").appendTo($("#container"));
            $("<p>999</p>").prependTo($("#container"));
            $("<p>888</p>").insertAfter($("#container"));
            $("<p>777</p>").insertBefore($("#container"));

            $("#p123").replaceWith($("<p>666</p>"));
            // $("<span>000</span>").replaceAll($("p"));

            // 在内部的后面追加
            $("#container").append($("<p>100</p>"));
            $("#container").prepend($("<p>200</p>"));

            $("#container").after($("<p>5000</p>"));
            $("#container").before($("<p>6000</p>"));
            // 清空标签内的所有内容
            // $("#container").empty();
            $("p:gt(5)").remove();

        })
    </script>
</body>

        <button id="checkAll">全选</button>
    </div>


    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(() => {
            // $("#div1").text("<p>123</p>");
            $("#username").val("666");
            /*
                属性操作：
                html() ===== innerHTML
                text() ===== innerText
                val() ====== input.value
                val()函数：可以给文本框赋值，
                    可以操作单选框，复选框，下拉菜单的选中状态
            */
           $("#checkAll").click(()=> {
                // $("#swimming").val("swimming");
                // 相当于setAttribute
                // getAttribute
                // alert($("input[type=checkbox]").attr("value","sss"));
                // alert($("input[type=checkbox]").attr("checked"));
                alert($("input[type=checkbox]").prop("checked",true));
                alert($("#sheng").prop("selected"));
           })
        })
    </script>
</body>