时间：2023-06-06 12:54:02 | 来源：网站运营
时间：2023-06-06 12:54:02 来源：网站运营
5.jQuery 快速网页交互开发-jQ基础：
在线咨询
<script src="js/jquery-1.12.4.min.js"></script>设置样式：<style> * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; background-color: pink; } </style></head><body> <div class="box" id="box"></div>原生JS获取元素：var box = document.getElementById("#box") var box = document.getElementsByTagName("div")[0]JQ获取元素：$(".box") $("#box")JQ获取 css 样式，并设置:console.log($("#box").css("width")) // 100px $(".box").css("width",200)事件简化:$(".box").click(function () { $(this).css("background-color","skyblue") })运动方法$(".box").animate({"width": 500},1000)<body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> <p>段落6</p> <p>段落7</p> <p>段落8</p> <script src="js/jquery-1.12.4.min.js"></script> <script> // 获取元素 $("p").css("background-color","red") jQuery("p").css("background-color","red") </script><head> <style> * { margin: 0; padding: 0; } p { width: 50px; height: 50px; margin-bottom: 10px; } </style> <script src="js/jquery-1.12.4.min.js"></script></head><body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p></body>$("p").css("background-color","pink") $("p").html("你好") $("p").animate({"width": 300},1000)console.log($("p").innerHTML) // undefined $("p").style.backgroundColor = "red" // 报错var ps = document.getElementsByTagName("p"); ps[0].html("haha") // 报错console.log($("p"))$().length和$().size()console.log($("p").length) console.log($("p").size())var $ps = $("p") $ps[0].innerHTML = "你好"var op = document.getElementsByTagName("p")[0] $(op).css("background-color","skyblue")// 基础选择器 $("*") $("p") $(".box") $("#demo") // 高级选择器 $(".box p").html("你好")<input type="button" value="按钮1"> <input type="button" value="按钮2" disabled="disabled"> <input type="button" value="按钮3"> <textarea name="" id="" cols="30" rows="10"></textarea>input:disabled：被禁用的按钮input:enabled：没有被禁用的按钮:input：匹配所有 input, textarea, select 和 button 元素// 所有按钮都编程粉色 $("input").css("backgroundColor","pink") // 只有被禁用的按钮变蓝色 $("input:disabled").css("background","blue")// 只有没被禁用的按钮变绿色 $("input:enabled").css("backgroundColor","green") // 所有相关的表单元素 $(":input").css("backgroundColor","yellow")最后效果图：| $(":last") | 最后一个 |
| $(":eq(index)") | 下标为 index 的项，从0开始 |
| $(":gt(index)") | 大于下标为 index 的项，从0开始 |
| $(":lt(index)") | 小于下标为 index 的项，从0开始 |
| $(":odd") | 下标为奇数的项，从0开始 |
| 下标为偶数的项，从0开始 | |
| $(":not(selector)") | 去除所有与给定选择器匹配的元素 |
$("p:first").css("background-color","pink") $("p:last").css("background-color","skyblue") $("p:eq(5)").css("background-color","skyblue") $("p:gt(5)").css("background-color","skyblue") $("p:lt(5)").css("background-color","skyblue") $("p:odd").css("background-color","skyblue") $("p:even").css("background-color","skyblue") $("p:not(:eq(6))").css("background-color","skyblue") $("p:not(.para)").css("background-color","skyblue")| $("p").first() |
|---|
| $("p").last() |
| $("p").eq(3) |
$("p").first().css("background-color","skyblue") $("p").last().css("background-color","skyblue") $("p").eq(4).css("background-color","skyblue")<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } p { width: 50px; height: 50px; margin-bottom: 10px; } table { border-collapse: collapse; } td { width: 100px; height: 50px; } </style></head><body> <table border="1"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script src="js/jquery-1.12.4.min.js"></script> <script> // 原生方法 // var trs = document.getElementsByTagName("tr"); // // 遍历 // for (var i = 0 ; i < trs.length ; i+=2) { // trs[i].style.backgroundColor = "skyblue" // } // jQuery的方法 $("tr:even").css("background-color","blue") </script></body></html>关键词：基础,交互
