今天继续给大家分享一下代码。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>