jquery 参数学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery使用</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<script>
// JavaScript代码尝试在控制台中打印出jQuery对象和它的类型。
console.log( jQuery );
console.log(typeof jQuery );
// 如果jQuery已经加载，那么这将会显示"object"（或"function"，这取决于具体的JavaScript引擎和jQuery版本，但通常在现代浏览器中它会显示为"object"）。
// 如果jQuery没有加载，这将会显示"undefined"。
// $=jQuery,原则：写的少做的多
let fn =()=>{};
fn.title="php中文网";
console.log(fn.title);
</script>
</body>
</html>
<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<!-- <ul class="list" style = "color: red";> -->
<ul class="list" ;>
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
<li class="item">item4</li>
<li class="item">item5</li>
</ul>
<ul id="小明">
<li>看电影</li>
<li>喝奶茶</li>
</ul>
<ul class="小红">
<li>听音乐</li>
<li>睡觉</li>
</ul>
<!-- <div>吃玉米吧，看起来好香呀</div> -->
<!-- /红色 -->
<script>
// 1.选择器
// document.body.style.color = "green";
// 1.先找到所有类名为“item”且是类名为“list”的元素的子元素（或更深层级的后代元素），然后遍历这些元素，并将它们的文本颜色设置为绿色。
// document.querySelectorAll( ".list .item" ).forEach((item)=>(item.style.color = "green"));
// 绿色
// jQuery把文字改为蓝色
// $(".item").css('color','bule');
// 2.包装器
// 将 document.body 转换为 jQuery 对象，并尝试设置其文本颜色为蓝色。
// 这行代码是尝试设置 body 元素的文本颜色为蓝色，但这通常不会看到任何效果，因为 body 元素本身并不直接包含文本内容。body 元素是 HTML 文档的容器，它通常包含其他元素（如段落 <p>、标题 <h1> 等），这些元素会继承 body 元素的样式（包括颜色），但 body 元素本身的文本颜色属性不会影响其子元素的文本颜色，除非这些子元素没有自己的文本颜色设置。
// 然而，这里有一个关键点：即使 body 元素没有直接可见的文本内容，css("color", "blue") 仍然会设置 body 元素的 color 属性为蓝色。这不会改变任何已经存在的文本颜色（因为 body 没有文本），但会影响将来添加到 body 中的任何没有指定颜色属性的文本元素。
// 举个例子，如果你之后动态地向 body 添加了一个没有指定颜色的 <p> 元素，那么这个 <p> 元素的文本颜色将会继承自 body 的颜色设置，也就是蓝色。
// $(document.body).css("color","blue");
// console.log($(document.body)instanceof jQuery); //true //试图检查 $(document.body) 是否是 jQuery 的一个实例,返回true就是实例
// console.log(document.body instanceof jQuery);//false
// 3.html文本
$("<p>今天阳光真好呀！ o(*￣▽￣*)ブ 开心😊</p>").insertAfter("ul");
// $()来创建一个新的<p>元素。这个<p>元素包含了文本内容“今天阳光真好呀！ o(￣▽￣)ブ 开心😊”。
// .insertAfter("ul")：这部分代码将新创建的<p>元素插入到所有<ul>元素之后。注意，如果页面上有多个<ul>元素，那么每个<ul>元素之后都会插入这个<p>元素的一个副本。
// 如果你只想在特定的<ul>元素之后插入这个<p>元素，你可能需要给那个<ul>元素添加一个特定的ID或类，然后使用那个ID或类来选择它。
// $("<p>今天阳光真好呀！ o(*￣▽￣*)ブ 开心😊</p>").insertAfter("小明");
// $("<p>今天阳光真好呀！ o(*￣▽￣*)ブ 开心😊</p>").insertAfter("小红");
document .body.insertAdjacentHTML("beforebegin" , "<p>小猪佩奇今天出门啪的一下摔成了粉红色呜呜</p>" );//插入到body父级元素之前
// document.body.insertAdjacentHTML() 方法用于在指定位置插入HTML内容
//'beforebegin': 在当前元素之前插入内容。
//'afterbegin': 在当前元素的第一个子元素之前插入内容。
//'beforeend': 在当前元素的最后一个子元素之后插入内容。
//'afterend': 在当前元素之后插入内容。
// 4.回调
// 只需要将js代码或jq代码，放到html文件的代码尾部就可以不用回调
$(()=>{
$("div").css('color','red');
})
</script>
<div>吃玉米吧，看起来好香呀</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<style>
* {
font-size: 20px;
}
.title {
text-align: center;
}
.width {
width: 1200px;
}
tr {
height: 50px;
}
</style>
<body>
<h3 class="title h3" id="titleId">用户列表</h3>
<table class="width" id="tableId" border="1" align="center" cellspacing="0">
<thead>
<tr>
<th>1</th>
<th>代号</th>
<th>年龄</th>
<th>职业</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<th>2</th>
<td>1</td>
<td>18</td>
<td>呜呜</td>
<td>电影</td>
</tr>
<tr><th>3</th>
<td>2</td>
<td>20</td>
<td>安安</td>
<td>奶茶</td>
</tr>
<tr>
<th>4</th>
<td>3</td>
<td>16</td>
<td>丫丫</td>
<td>西瓜</td>
</tr>
<tr>
<th>5</th>
<td>4</td>
<td>19</td>
<td>拉拉</td>
<td>吃瓜</td>
</tr>
</tbody>
</body>
<script>
// 1.标签选择器
// console.log($("table"));
// $("table").css("color","red");
// console.log(document.getElementsByTagName("h3"));//js
// 2.id选择器:#代表id,
// jQuery获取的ID是一个对象，里面有0下标
console.log($("#titleId"));
$("#titleId").css("background-color","Yellow");
// js获取的id，是HTML代码
console.log(document.getElementById("titleId"));//document.getElementById("")用于获取页面上具有特定的元素
// document.getElementById 是基于元素的 id 属性来选择元素的。
// 在 HTML 文档中，每个元素的 id 属性应该是唯一的，因此这个方法通常返回单个元素（如果找到）或 null（如果未找到）
// 3.class选择器 .代表class
// console.log($(".title"));
// $(".title").css("color","red");
// console.log(document.getElementsByClassName("title"));
// document.getElementsByClassName 是基于元素的 class 属性来选择元素的。
// 由于 class 属性允许元素有多个类名（类名之间用空格分隔），并且多个元素可以共享相同的类名，因此这个方法返回一个 HTMLCollection，
// 其中包含所有匹配的元素（可能为空集合）
// 4.dom树选择
// console.log($("table tbody tr th"));
// $("table tbody tr th" ).css("backgroundColor","#d4edda");
// $("#tableId td" ).css("backgroundColor","#f8d7da");
// $(".width thead th" ).css("backgroundColor","#fff3cd");
// console.log(document.querySelectorALL("table tbody tr th"));
// 可以选择多个标签，多个ID，多个class，用,逗号隔开
$("h3,th").css("background-color","#f8d7da");
$("#tableId,#titleId").css("background-color","#fff3cd");
$(".width,.title").css("background-color","red");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<style>
* {
font-size: 20px;
}
.title {
text-align: center;
}
.width {
width: 1200px;
}
tr {
height: 50px;
}
</style>
<body>
<h3 class="title h3" id="titleId">用户列表</h3>
<table class="width" id="tableId" data-id="1" border="1" align="center" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>天蓬</td>
<td>tianpeng@php.cn</td>
<td>13854381111</td>
<td>安徽</td>
<td>合肥</td>
<td>40</td>
</tr>
<tr>
<th>2</th>
<td>欧阳克</td>
<td>ouyangke@php.cn</td>
<td>13854382222</td>
<td>安徽</td>
<td>马鞍山</td>
<td>40</td>
</tr>
<tr>
<th>3</th>
<td>灭绝师太</td>
<td>miejue@php.cn</td>
<td>13854383333</td>
<td>安徽</td>
<td>滁州</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
<script>
// jQuery代码，是两部分组成
// $("")选择器
// .css()是属性操作
// $("").css()
// 1.css方法
// css(name):获取样式
// css(name,value):设置样式
// css（name，callback）:回调函数 设置
// $("table").css("width","500px");
// console.log(document.querySelector("table").style.width);
// console.log(window.getComputedStyle(document.querySelector("table"),null).getPropertyValue("width"));
// console.log($("table").css("width"))
// $("table").css("width","500px");
// $("table").css({
// "color":"red",
// "width":"600px",
// "background":"green"
// })
// window.getComputedStyle() 方法，这是一个更强大和可靠的方式来获取元素的最终计算样式。
// 这个方法会考虑所有的 CSS 规则（包括从外部和内联样式表、CSS 类、内联样式等）并返回元素的最终样式。
// $("table").css("background-color", function() {
// const colors = ["#d4edda","#f8d7da","#fff3cd","#d1ecf1"];
// // 使用Math.random()生成一个随机索引，并确保它在数组范围内
// const randomIndex = Math.floor(Math.random() * colors.length);
// console.log(randomIndex);
// console.log(colors[randomIndex]);
// // 返回随机颜色
// return colors[randomIndex];
// });
// $("table").css("background-color", ()=> {
// const colors = ["#d4edda","#f8d7da","#fff3cd","#d1ecf1"];
// // 使用Math.random()生成一个随机索引，并确保它在数组范围内
// let randomIndex = Math.floor(Math.random() * 4);
// console.log(randomIndex);
// console.log(colors[randomIndex]);
// // 返回随机颜色
// return colors[randomIndex];
// });
// 2.attr方法
// 设置或获取元素的属性值
// attr(name):获取
// attr(name,value):设置
// console.log($("table").attr("border"));
// $("table").attr("border","10");
// console.log($("table").atter,("align"));
// $("table").attr("align","left");
// $("table").attr("border",()=>{
// return 40;
// });
// 3.removeAttrAttr方法：删除
$("table").removeAttr("border");
$("table").removeAttr("class");
// 标签<div>除了#id和.class可以增加其他的属性
// 为什么增加其他属性呢？ data-
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<body>
<style>
* {
font-size: 20px;
}
.title {
text-align: center;
}
.width {
width: 1200px;
}
tr {
height: 50px;
}
</style>
<body>
<h3 class="title h3" id="titleId">用户列表</h3>
<table class="width" id="tableId" data-id="1" border="1" align="center" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>天蓬</td>
<td>tianpeng@php.cn</td>
<td>13854381111</td>
<td>安徽</td>
<td>合肥</td>
<td>40</td>
</tr>
<tr>
<th>2</th>
<td>欧阳克</td>
<td>ouyangke@php.cn</td>
<td>13854382222</td>
<td>安徽</td>
<td>马鞍山</td>
<td>40</td>
</tr>
<tr>
<th>3</th>
<td>灭绝师太</td>
<td>miejue@php.cn</td>
<td>13854383333</td>
<td>安徽</td>
<td>滁州</td>
<td>18</td>
</tr>
</tbody>
</table>
<button>按钮</button>
</body>
<script>
// $("button").click(function a(){
// alert('点击事件')
// })
// 因为js获取标签会有0下标，所以要加上[0]
// console.log( document.getElementsByTagName("button"));
// document.getElementsByTagName("button")[0].onclick = function(){
// alert('点击事件');
// }
$("button").click(function(){
$("table th").css("background-color","#fff3cd");
$("table td").css("background-color","#d1ecf1");
})
</script>
</body>
</html>
浙公网安备 33010602011771号