2022-8-26第一组孙乃宇Jquery

Jquery

JS库：别人写好的JS文件，我们拿来直接用

开发中，会引入很多的.js文件

JQuery.js------濒临淘汰，经典。10%以下

css库，bootstrap，layui，easyui。

React.js-------30%市场

Angular.js-----10%以下，最难

Vue.js---------50%以上，简单。最主流。

尤雨溪

选择器

基本选择器

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]---除文本框的其他

事件

他们分别在什么时候触发？

1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签

window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象

2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次

lick()---单击事件

blur()----失去焦点

mouseover()---鼠标悬停

change()-----改变事件

live()----它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的

appendTo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 600px;
                height: 600px;
                border: 1px solid;
            }
            p {
                background-color: yellow;
            }
        </style>
    </head>
​
    <body>
​
        <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>
</html>

属性操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 600px;
                height: 600px;
                border: 1px solid;
            }
            p {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <input type="text" id="username">
​
            <input type="checkbox" value="swimming" id="swimming"
                readonly required>游泳
​
​
            <select name="" id="sheng">
                <option value="jl">吉林省</option>
                <option value="ln">=辽宁省</option>
            </select>
​
            <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>
</html>
 
posted @ 2022-08-26 21:56  孙乃宇  阅读(31)  评论(0)    收藏  举报