JQ：DOM操作与过滤器

1.getter

1.1 attr(): html属性进行操作

    attr(name):　 getter
    attr(name, value):　setter
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getter和setter - 1</title>
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<style>
    body{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    form{
        width: 350px;
        /* height: 150px; */
        border: 1px solid #aaa;
        padding: 20px 10px;
        background-color: cyan;
        box-shadow: 0 0 5px #aaa;
        box-sizing: border-box;
        border-radius: 5px;
        display: grid;
        grid-template-columns: 60px 200px;
        place-content: center center;
        gap: 5px;
    }
    button:hover{
        color:white;
        background-color: #888;
        border: none;
        cursor: pointer;
    }
</style>
<body>
    <h3>用户登录</h3>
    <form action="handle.php" method="post">
        <label for="">邮箱</label>
        <input type="email" name="email" id="email" value = "abc@php.cn" autofocus required >
        <label for="">密码</label>
        <input type="password" name="password" id="password" value = "不少于八位密码" required>
        <label for="">记住我</label>
        <div>
            <input type="radio" name="save" id="confirm" value="1"><label for="" checked>保存</label>
            <input type="radio" name="save" id="cancel" value="0"><label for="">放弃</label>
        </div>
        <button>提交</button>
    </form>
</body>
</html>
<script>
    var cl = console.log.bind(console);
    // 1. attr(): html属性进行操作
        // attr(name):　 getter
        // attr(name, value):　setter
    var inputs = $("input");
    cl(inputs.attr("name"));
    inputs.attr("value","peter@qq.com");
</script>

实例效果：

1.2 css(): 针对 html元素的style属性进行操作

不仅可以获取到style属性的值,还可以获取到该元素所有样式
<script>
// 2. css(): 针对 html元素的style属性进行操作
// 原生
cl(window.getComputedStyle(document.querySelector(“form”)).width);
// JQ
var forms = $(“form”);
cl(forms.css(“width”));
forms.css({
backgroundColor:”wheat”,
})
inputs.css(“background-color” , “cyan”);

    // 这是一个每次刷新随机返回表单背景色的实例
    forms.css("background-color",function(){
        // 这是一有多个颜色值的数组, 目标是从这个数组中随机返回一个值
        var bgcolor = ["wheat","cyan","pink","tan","lime"];
        // 返回哪个值, 由一个随机索引决定, 索引必须在0 -3 之间
        var rndcolorindex = Math.floor(Math.random() * bgcolor.length);
        return bgcolor[rndcolorindex];
    });
</script>

实例效果：

1.3 val():表单元素的值

<script>
    // 3. val():表单元素的值
    cl($("#email").val());
    $("#email").val("andy@qq.com");
    // 获取选中按钮的值
    cl($("input:radio[name=save]:checked").val());
    // 回调返回默认值
    $("#email").val(function(){
        return this.defaultValue;
    });
</script>

实例效果：

1.4 html()/text(): 元素内容操作

<script>
    // 4. html()/text(): 元素内容操作
      // innerText ===> text();
    //   原生
    // document.querySelector("h2").innerHtml = '<span style="color:red">请登录</span>';
    // jQuery
    // $("h3").text("请登录");
    $("h3").html('<span style="color:red">LOGIN IN</span>');
</script>

实例效果：

2.常用的DOM操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的DOM操作</title>
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
</body>
</html>
<script>
    var cl = console.log.bind(console);
// 1. 元素的插入与替换, 父元素.append(子元素)
$("body").append("<ol>");
$("<li>").text("手提电脑").appendTo("ol");
$("ol").append("<li>激光电视");
$("<li>").addClass("active").text("智能5G手机").appendTo("ol");
$("<li>",{
    id:"news",
    style:"background-color:cyan",
})
.html("<a href=''>最新商品1</a>")
.appendTo("ol");
// append(callback)
$("ol").append(function(){
    var res = "";
    for(var i=0; i <=5; i++){
        res += "<li>最新商品"+(i+2);
    }return res;
});
// 从第3个元素前面添加<li>, before(), 在某个元素之前添加
$("ol>li:nth-of-type(3)").before("<li>VR游戏机</li>");
// insertAfter()
$("<li>北斗导航仪</li>").insertAfter("ol>li:nth-of-type(5)");
// prepend(), prependTo(), 将新元素插入到头部
$("<li>最新潮流</li>").prependTo("ol");
// 元素的换: replaceWith()
$("ol>li:last-of-type").replaceWith("<h4>This is The END!</h4>");
$("<p>This is Begin...</p>").replaceAll("ol > li:first-of-type");
</script>

实例效果：

3.常用过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
    <ul id="first">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <ul id="second">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
</html>
<script>
    var cl = console.log.bind(console);
     //方法 children
     var ul1 = $("ul").filter("#first");
     var childrens = ul1.children();
    // first():返回第一个
    childrens.first().css("background", "lightblue");
    // last(): 返回最后一个
    childrens.last().css("background", "lightgreen");
    // eq(n): 返回任何一个
    childrens.eq(2).css("background", "lightcyan");
    // 仅获取第2个和第3个子元素
    $("ul#second >li:nth-of-type(-n+3):not(li:first-of-type)").css(
      "color",
      "red"
    );
</script>

实例效果：

总结：

常用的getter / setter
常用的DOM操作方法：
.append(“<ol>“)、.appendTo(“ol”)、.append(callback)
.before()、.insertAfter()、.prepend()、.prependTo()
.replaceWith()、..replaceAll()
3.过滤器：筛选器，缩小寻找范围。
方法 children（）、first（）、last（）、eq（）

1.getter

1.1 attr(): html属性进行操作

1.2 css(): 针对 html元素的style属性进行操作

1.3 val():表单元素的值

1.4 html()/text(): 元素内容操作

2.常用的DOM操作方法

3.常用过滤器

相关文章