jquery获取body_从0到1~jQuery入门基础(t136t145)


今天继续给大家分享一下代码。t136
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        //习题,如何能够获取第2个div元素        $(function () {           $("#first+div").css("color","blue");           //$("#first").next("div").css("color","blue");        });script>head><body>    <div id="first">1div>    <div>2div>    <div>3div>body>html>
t137
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        //习题,如何在li元素之间添加一个10px的间距        $(function () {           //$("li+li").css("margin-top","10px");            $("li").next("li").css("margin-top","10px");        });script>head><body>    <ul>        <li>第1个元素li>        <li>第2个元素li>        <li>第3个元素li>        <li>第4个元素li>        <li>第5个元素li>    ul>body>html>
t138
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        //习题,选取type取值为radio的input元素        $("input[type=radio]");        //选取class属性以article开头的div元素        $("div[class ^='article']");        //选取class属性以content结尾的div元素        $("div[class $='content']");        //选取带有id属性并且class属性以article开头的div元素        $("div[id][class ^='article']");script>head><body>body>html>
t139
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        $(function () {           //位置 伪类选择器           // :first :last           $("li:first,li:last").css("color","blue");        });script>head><body>    <ul>        <li>HTMLli>        <li>CSSli>        <li>Javascriptli>        <li>jQueryli>        <li>Vue.jsli>    ul>body>html>
t140
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        $(function () {           //位置伪类选择器           // :odd 偶数行           $("li:odd").css("color","blue");        });script>head><body>    <ul>        <li>HTMLli>        <li>CSSli>        <li>Javascriptli>        <li>jQueryli>        <li>Vue.jsli>    ul>body>html>
t141
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        $(function () {            //位置伪类选择器            // :even 奇数行            $("li:even").css("color","blue");        });script>head><body><ul>    <li>HTMLli>    <li>CSSli>    <li>Javascriptli>    <li>jQueryli>    <li>Vue.jsli>ul>body>html>
t142
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        $(function () {            //位置伪类选择器            // :eq 等于            $("li:eq(4)").css("color","blue");        });script>head><body><ul>    <li>HTMLli>    <li>CSSli>    <li>Javascriptli>    <li>jQueryli>    <li>Vue.jsli>ul>body>html>
t143
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        $(function () {            //位置伪类选择器            // :lt(n) 小于, 不包含n            $("li:lt(2)").css("color","blue");        });script>head><body><ul>    <li>HTMLli>    <li>CSSli>    <li>Javascriptli>    <li>jQueryli>    <li>Vue.jsli>ul>body>html>
t144
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="../js/jquery-3.5.1.js">script>    <script>        $(function () {            //位置伪类选择器            // :gt(n) 大于, 不包含n            $("li:gt(2)").css("color","blue");        });script>head><body><ul>    <li>HTMLli>    <li>CSSli>    <li>Javascriptli>    <li>jQueryli>    <li>Vue.jsli>ul>body>html>
t145
<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        * {            padding: 0;            margin: 0;        }        ul{            list-style-type: none;        }        li{            height: 20px;            font-size: 16px;        }style>    <script src="../js/jquery-3.5.1.js">script>    <script>        $(function () {            //子元素 伪类选择器            $("ul li:first-child").css("color","blue");            $("ul li:nth-child(2)").css("background-color","orange");            $("ul li:nth-child(4)").css("background-color","yellow");            $("ul li:last-child").css("color","blue");        });script>head><body>    <ul>        <li>1li>        <li>2li>        <li>3li>        <li>4li>        <li>5li>    ul>body>html>

0e41313e6654091fc4c8624a9341d825.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值