22-作业二:jquery与dom练习

已于 2022-09-19 19:44:22 修改
阅读量431 收藏
点赞数
分类专栏： javaweb应用开发从入门到实战 文章标签： jquery javascript 前端
于 2022-09-19 19:43:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DAIMAZHUANG/article/details/126940330
版权

22-作业二:jquery与dom

Js(放js的文件夹)

jquery-3.6.1.js（家人们自己上网上下载，实在找不到可以私我要）

01_jquery入门使用.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>
    <script src="js/jquery-3.6.1.js"></script>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</body>
<script>
    var box1 = $("#box1");
    var box2 = $("#box2");
    // console.log(box1.html());
    alert(box1.html());
   
</script>
</html>

02_jquery事件绑定.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>事件绑定</title>
    <script src="js/jquery-3.6.1.js"></script>
</head>
<body>
    <input type="button" value="点我" id="btn">
</body>
<script>

    // var btn = document.getElementById("btn");
    // btn.onclick = function(){
    //     alert("我被点击了");
    // }

    $("#btn").click(function(){
        alert("我被点击了");
    });
</script>
</html>

03_jquery入口函数.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>
    <script src="js/jquery-3.6.1.js"></script>
    <script>
        // window.onload = function (){
        //     //javascript代码
        // }
        
        //jquery入口函数(dom文档执行完成后执行的代码)
        $(function(){
            $("#btn").click(function(){
                alert("hello");
            });
        });

    </script>
</head>
<body>
    <input type="button" value="点我" id="btn">
</body>
</html>

04_设置css样式.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>
    <script src="js/jquery-3.6.1.js"></script>
    <script>
        $(function(){
            $("#box1").css("width","200px");
            $("#box1").css("height","200px");
            $("#box1").css("backgroundColor","red");
            $("#box1").css("border","1px solid black");
        });
    </script>
</head>
<body>
    <div id="box1">box1</div>
</body>
</html>

05_基本选择器.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: 100px;
            height: 100px;
            border: 1px solid skyblue;
        }
    </style>
    <script src="js/jquery-3.6.1.js"></script>
    <script>
        $(function(){
           $("#btn1").click(function(){
             $("#box1").css("backgroundColor","green");
           });
            $("#btn2").click(function(){
                $(".box2").css("backgroundColor","red");
            });
            $("#btn3").click(function(){
                $("div").css("backgroundColor","yellow");
            });
            $("#btn4").click(function(){
                $("div").css("border","1px solid black");
                $("input").css("border","1px solid black");
            });
        });
    </script>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2" class="box2">box2</div>
    <div id="box3" class="box2">box3</div>
    <div id="box4">box4</div>
    <div id="box5">box5</div>
    <br>
    <input type="text" id="username">
    <br>
    <input type="button" value="将id为box1的元素的背景改成green" id="btn1"><br>
    <input type="button" value="将class为box2的元素的背景改成red" id="btn2"><br>
    <input type="button" value="将div都变成黄色" id="btn3">
    <input type="button" value="将div和input的borde变成1px solid black" id="btn4">
</body>

</html>

06_层级选择器.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>层级选择器</title>
    
    <style>
        div{
            border: 1px solid black;
        }
        #box1{
            width: 500px;
            height: 500px;
            background-color: green;
        }

        #box2{
            width:200px;
            height: 200px;
            background-color: yellow;
        }

        #box3{
            width: 220px;
            height: 220px;
            background-color: pink;
        }

        #box4{
            width: 60px;
            height: 60px;
            background-color: red;
        }
    </style>

    <script src="js/jquery-3.6.1.js"></script>
    <script>
            $(function(){
                 $("#btn1").click(function(){
                    $("#box1 div").css("backgroundColor","skyblue");
                 });
                $("#btn2").click(function(){
                    $("#box1>div").css("backgroundColor","black");
                });
             });
    </script>
</head>
<body>
    <div id="box1">
        box1
        <div id="box2">box2</div>
       
        <div id="box3">box3
            <div id="box4">box4</div>
        </div>
    </div>

    <br>
    <input type="button" value="将div1的所有后代元素背景都改成skyblue" id="btn1">
    <input type="button" value="将div1的所有子元素背景都改成black" id="btn2">
</body>
</html>

07_属性选择器.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>属性名称选择器</title>
    <script src="js/jquery-3.6.1.js">

    </script>

    <script>
        $(function () {
            $("#btn1").click(function(){
                $("div[title]").css("backgroundColor","green");
            });
            $("#btn2").click(function(){
                $("div[title='ss']").css("backgroundColor","green");
            });
            $("#btn3").click(function(){
                $("input[name='hobby'][value='basketball']").css("backgroundColor","skyblue");
            });
        });
    </script>

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div title="ss">div1</div>
    <div title="aa">div2</div>
    <hr>
    爱好:<br>
    <input type="text" name="hobby" value="basketball"><br>
    <input type="text" name="hobby" value="football"><br>
    <input type="button" value="将有title属性的div背景改为green" id="btn1">
    <input type="button" value="将title属性为ss的div背景改为green" id="btn2">
    <input type="button" value="将输入框name为hobby且value为basketball的背景改为skyblue" id="btn3">
    <hr>
</body>
</html>

08_过滤选择器.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>
    <script src="js/jquery-3.6.1.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function(){
                $("div:first").css("color","red");
            });
            $("#btn2").click(function(){
                $("div:last").css("color","red");
            });
            $("#btn3").click(function(){
                $("div:not(div:first)").css("color","red");
            });
            $("#btn4").click(function(){
                $("div:even").css("color","red");
            });
            $("#btn5").click(function(){
                $("div:odd").css("color","red");
            });
            $("#btn6").click(function(){
                $("div:eq(2)").css("color","red");
            });
            $("#btn7").click(function(){
                $("div:gt(2)").css("color","red");
            });
            $("#btn8").click(function(){
                $("div:lt(2)").css("color","red");
            });
            $("#btn9").click(function(){
                $("div:gt(1)").css("color","red");
            });
        })
    </script>
</head>

<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
    <div>div8</div>
    <div>div9</div>
    <div>div10</div>
    <hr>

    <input type="button" value="将第一个div中的文字改成红色" id="btn1">
    <input type="button" value="将最后一个div中的文字改成红色" id="btn2">
    <input type="button" value="将除第一个div的其他div中的文字改成红色" id="btn3">
    <input type="button" value="将所有偶数位置的div改成红色" id="btn4">
    <input type="button" value="将所有奇数位置的div改成红色" id="btn5">
    <input type="button" value="将第3个div的文字改成红色" id="btn6">
    <input type="button" value="将位置大于3的div文字改成红色" id="btn7">
    <input type="button" value="将位置小于3的div文字改成红色" id="btn8">
    <input type="button" value="将位置不小于3的div文字改成红色" id="btn9">
</body>

</html>

09_表单选择器.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>
    <script src="js/jquery-3.6.1.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function(){
                $("input[type='text']:enabled").val("this is it")
            });
            $("#btn2").click(function(){
                $("input[type='text']:disabled").val("this is it")
            });
            $("#btn3").click(function(){
                var ck=$("input[type='checkbox']:checked").val()
                alert(ck)
            });
            $("#btn4").on("click",function(){
                var ct= $("option:selected").length
                alert(ct)
            });
        })
    </script>
</head>

<body>
    <input type="text" name="不可用1" id="" disabled>
    <input type="text" name="可用" id="">
    <input type="text" name="不可用2" id="" disabled>
    <input type="text" name="可用" id="">
    <br>
    <input type="button" value="使用val()改变可用的输入框中的名字" id="btn1">
    <input type="button" value="使用val()改变不可用的输入框中的名字" id="btn2">
    <br>
    <hr>
    <input type="checkbox" name="gender" id="" value="boy">男
    <input type="checkbox" name="gender" id="" value="girl">女
    <input type="button" value="获取选中的checkbox" id="btn3">
    <br>
    <hr>
    <select multiple id="city">
        <option value="cs">长沙</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select>
    <input type="button" value="显示选中的个数" id="btn4">

</body>

</html>

10_内容操作.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>内容操作</title>
    <script src="js/jquery-3.6.1.js">

    </script>
    <style>
        div {
            border: 1px solid red;
        }

        #box1 {
            width: 200px;
            height: 200px;
        }

        #box2 {
            width: 100px;
            height: 100px;
        }

        #box3 {
            width: 50px;
            height: 50px;
        }
    </style>

    <script>
        $(function () {
            $("#btn1").click(function(){
                var ct= $("html").html()
                alert(ct)
            });
            $("#btn2").click(function(){
                $("div").html("Hello <b>world!</b>");
            });
            $("#btn3").click(function(){
                var ct= $("div").text()
                alert(ct)
            });
            $("#btn4").click(function(){
                $("div").text("set text");
            });
            $("#btn5").click(function(){
                var ct= $("input[type='text']").val()
                alert(ct)
            });
            $("#btn6").click(function(){
                $("input[type='text']").val("san");
            });
        })
    </script>
</head>

<body>
    <div id="box1">
        <div id="box2">box2</div>
    </div>

    <br>
    <input type="button" value="获取html内容" id="btn1">
    <input type="button" value="设置html内容" id="btn2">

    <input type="button" value="获取text内容" id="btn3">
    <input type="button" value="设置text内容" id="btn4">

    <br>
    <hr>
    <input type="text" name="username" id="username" value="王二麻子">
    <input type="password" name="password" id="password" value="123456">

    <input type="button" value="获取value属性值" id="btn5">
    <input type="button" value="设置value属性值" id="btn6">

</body>
</html>
苏打盐汽水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初识jQuery基础入门到放弃Day3——笔记整理+作业×1+经典例题×1
Myself's CSDN
05-29 327
1.jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型 <body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width()); /
jQuery的dom操作综合练习
Kaizd的博客
12-21 357
jQuery的dom操作综合练习 今天跟大家分享的是 jQuery Dom操作综合练习呦！ css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
第4章 jQuery之dom操作
行云流水
03-07 262
我们把页面上的元素分为3种节点： 1、元素节点     用过选择器获取 2、属性节点 3、文本节点       4.1 属性节点 4.1.1 一般 获取： attr(name)方法 如：,获取id的值 则：$("div").attr("id"); 结果：zhangsan   设置： 1、attr(key,value)方法  --- 设置单个属性值 如：，为图像设置s
JQuery（11）_JQuery 中的 DOM 操作练习
魏宇轩
12-13 648
本系列博客汇总在这里：JQuery 汇总 JQuery 中的 DOM 操作练习一、题目要求二、实现代码三、实现效果 一、题目要求 二、实现代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.s...
jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
入梦镜
10-23 538
jQuery中的 DOM 操作 查 查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 操作文本节点：通过 text() 方法 增 创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回. 注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用
JQuery专题(三)-JQuery之DOM操作
08-29 279
1.DOM常见操作API 1.1.DOM对象的属性操作 方法 作用 attr(name | properties | name,value | name, fn) 设置或获取标签的属性，操作自定义属性 prop(name | properties | name,value | name, fn) 设置或获取标签的js对象(DOM对象)的属性，操作DOM对象的属性 remo...
JavaScript-UI-and-DOM:JavaScript UI和DOM课程作业
05-18
在"JavaScript-UI-and-DOM-master"这个文件中，可能包含了完成这些作业所需的代码示例、练习项目和测试用例。通过学习和实践这些作业，学生将深入理解JavaScript如何与DOM结合，创建动态、交互式的Web应用程序。
JS-UI-DOM:Telerik Academy课程2015家庭作业
05-20
【JavaScript UI与DOM：Telerik Academy 2015家庭作业详解】 JavaScript UI与DOM是前端开发中的核心技能，此课程源自Telerik Academy 2015年的教学内容，旨在帮助学员深入理解JavaScript在构建用户界面和操作文档...
JQuery第七章上机练习和课后作业
最新发布
08-08
**jQuery第七章上机练习与课后作业详解** 在学习jQuery的过程中，第七章通常涵盖了更高级和实用的技术，包括DOM操作、事件处理、动画效果以及AJAX交互等。本篇文章将详细探讨这些知识点，旨在帮助前端开发者提升...
xmascounterjQuery:学校作业，jQuery练习
03-17
【xmascounterjQuery】是一个基于jQuery的学校作业项目，旨在帮助学生熟悉并实践JavaScript库jQuery的基本用法。在这个项目中，开发者将学习如何利用jQuery来实现动态计数器功能，通常这种功能在节日主题的网页中...
web网页基础设计大作业 html+css+纯jquery
01-04
网页基础设计大作业 欢迎共享，讨论
Jquery,CSS,HTML学期作业
03-15
本人的学期作业，使用Html，CSS，Jquery技术实现了一个淘宝客主题网站，主要通过页面导购，是访问者进入合作的淘宝卖家店铺的商品页面，在交易实现后可获得合作方的一定报酬，本站一共包含6个页面，对应6中商品。
北大青鸟accp7.0 使用jQuery快速高效制作网页交互特效课件+上级+课后作业答案
05-26
北大青鸟accp7.0 使用jQuery快速高效制作网页交互特效课件+上级+课后作业答案
number-guesser：一个用于练习jQuery的两人数字猜谜游戏
02-17
Number Guesser是在图灵软件与设计学院的前端工程计划的第二周分配的一个项目。 作业的目的是创建一个交互式数字猜谜游戏。 该分配提供了必须编程的功能列表以及必须尽可能接近地重新创建的静态组成。 该游戏具有...
JQuery——选择器作业
weixin_44502548的博客
09-24 900
一、省市级连 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function sel(){ var province=document.getElementById("province").value; var city=document.getElementById("cit
4.20作业--jQuery
kelouze06的博客
04-20 1062
1.使用jquery修改div元素的背景色(随意颜色) 2.使用jquery修改div的子元素p的内容为"我是子元素" 3.使用jquery修改第二个p元素的背景色为"orange" 4.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面 5.删除列表元素中最后一个li元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U.
jquery实现增删改（伪）-老男孩作业day13
weixin_33730836的博客
03-23 112
使用jquery进行，文件的编写，实现自增id,删除，添加，编辑模式。 jquery放在本地，src="jquery_js.js" 可以改成其他，或者在线的路径 readme <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
jQuery第六章课后作业
suixinCaesar的博客
07-19 4628
5.制作当页面加载完毕时，列表隔行变色，背景颜色值为#ececec。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;隔行变色的列表&lt;/title&gt; &lt;link rel="st
jQuery第二章课后作业
gz98411的博客
07-12 4556
3.模拟计算机病毒效果，当打开一个页面时，会不停的弹出窗口。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;病毒网页&lt;/title&gt; &lt;/head&gt; &lt;b
JQuery入门教程：事件与DOM操作
JQuery是由John Resig在2006年创建的一个JavaScript库，它的主要目标是简化JavaScript编程，特别是在处理DOM操作、事件、动画和Ajax交互等方面。JQuery的设计原则是简洁和一致性，它借用了HTML和CSS的一些概念，使得...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值