JQ：DOM操作与过滤器 - PHP11学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > JQ：DOM操作与过滤器

博主信息

博文 39

粉丝 0

访问量 39951

专题推荐

更多>

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（）

批改老师：