Web学习Day4

2024-01-02 11:39:58

层级选择器

$(“div span”)–选中所有div内部的所有span元素
$("#one span")—选中id为one的元素内部的所有span元素

$("#two+span")—选中id为two的元素后面紧临的span兄弟元素
$("#two").next(“span”)—选中id为two的元素后面紧临的span兄弟元素
$(“two”).prev(“span”)—选中id为two的元素前面紧临的span兄弟元素

$("#two~span")—选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll(“span”)—选中id为two元素后面所有的span兄弟元素
$("#two").prevAll(“span”)—选中id为two元素前面所有的span兄弟元素

$("#two").siblings(“span”)—选中id为two元素前面,后面所有的span兄弟元素

案例：

$("#b4").click(function(){
$(“div span”).css(“background”,"#DC21D2")；
});
/* 选中id为b5的按钮并为其邦定点击事件，点击b5按钮，改变id为two的元素的下一个相邻的div元素的背景色为#29a29e*/

$("#b5").click(function(){
$(“two”).next(“div”).css(“background”,"#29a29e");
});

/* 选中id为b6的按钮并为其邦定点击事件，点击b6按钮，改变id为two的元素后面所有div兄弟元素的背景色为#ECD822*/

$("#b6").click(function(){
$(“two”).nextAll(“div”).css(“background”,"#ECD822");
});

过滤选择器

1。选中第一个div元素
$(“div:first”)
$(“div:eq(0)”)
$(“div”).eq(0)

2.选中最后一个div元素
$(“div:last”)
$(“div:eq(-1)”)
$(“div”).eq(-1)

3.选中第n+1个div元素（n从0开始）
$(“div:eq(n)”)
$(“div”).eq(n)

$("#b7").click(function(){ $(“div:first”).css(“background”,"#5500ff"); $(“div:eq(0)”).css(“background”,"#5500ff");
$(“div:last”).css(“background”,"#5500ff");
$(“div:eq(-1)”).css(“background”,"#5500ff");
});
选中id为b8的按钮，并为其绑定事件，点击b8按钮改变第四个div元素背景色为D917C6
$("#b8").click(function(){]
$(“div:eq(3)”).css(“background”,“D917C6”);
})

表单选择器

$(":input") 匹配所有控件
$(":password")匹配所有密码框
$(":radio")匹配所有单选
$(":checkbox")匹配所有多选
$(":checked")匹配所有选中的单选多选和下拉选
$(“input:checked”)匹配所有选中的单选多选
$(":selected")匹配所有选中的下拉选

属性选择器

$(“div[属性名]”) 匹配所有包含xxx属性的div
$(“div[属性名=‘值’]”) 匹配某个属性名等于某个值的div
$(“div[属性名!=‘值’]”) 匹配某个属性名不等于某个值的div

body
男
女

篮球
足球

北京上海广州用户名：邮箱：
密码：问题 1.输出所有的表单项元素，写出它的长度 2。匹配所有的普通文本输入框 3。匹配所有的普通密码输入框 4。匹配所有的单选框 5。匹配所有的复选框 6。匹配所有被选中的复选框

$("#b9").click(function(){ var len=$(":input").length; console.log(len) $(":text").css("background","greenyellow"); //$(":text")==$("input[type='text']")
(":password").css("background","skyblue") //(":password").css("background","skyblue")//(":password")==$(“input[type=‘password’]”)

//(":radio")==(":radio")==(“input[type=‘radio’]”)
//(":checkbox")==(":checkbox")==(“input[type=‘checkbox’]”)
//$(":checkbox:checked")
})

JQuery操作

html元素操作

1。创建元素
$("

")—创建一个div元素，返回的是一个jquery对象，表示的创建的div元素
$(“
xxxx
”)----创建一个包含内容的div元素，返回的是一个jquery对象，表示创建的div元素
2。添加子元素
parent.append(parent.append(child)—父元素调用方法添加子元素
$(“body”).append(“

我是新来的…
”);—往body元素内部追加一个div元素
3。删除元素
$(“div”).remove()—删除所有的div元素
js中删除所有的div元素
var divArr=document.getElementsByTagName(“div”);
for(var i=0;i<divArr.length;i++){
divArr[0].parentNode.removeChild(divArr[0]);
}
4.替换元素
$(“div”).replaceWith(“
我是来替换的…

”)

函数

1。html()函数（类似于js中的innerHTML属性）

–用于获取或设置元素的内容，比如为div，span，p，h1~h6，table
，tr，td，form等元素设置内容
$(“div”).html()–获取所有div中的第一个div内容
$(“div”).html(“xxxxx”)–为所有的div设置内容

2。text()函数（类似js中的innerText属性，innerText在部分浏览器中不兼容）

–用于获取或设置元素的文档内容
$(“div”).text()----获取所有div的所有文本内容
$(“div”).text(“xxxx”)----为所有div设置内容

3。val()函数(类似js中的value属性)

—获取或者设置表单项元素的value值
$(“input”).val();—获取所有input元素中第一个input元素的value值
$(“input”).val(值);–为所有的input元素设置value值

4。prop()函数—用于获取或者设置元素的属性值
$(“input[type=‘checkbox’]”).prop(“checked”)
//获取input复选框的选中状态，返回true表示复选框为选中状态，返回false表示复选框为取消状态
$(“input[type=‘checkbox’]”).prop(“checked”,true);
//设置所匹配的复选框元素为选中状态

5。css()函数—用于获取或者设置元素的css属性值
$("#div1").css(“width”)—获取id为div1元素的宽度
$("#div1").css(“width”,“200px”)—设置id为div1元素的宽度为200px

6。show()/hide()函数
$(“div”).show()—设置所有div元素为显示
$(“div”).hide()—设置元素由显示变为隐藏

JQuery案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			function createTable1(){
				//1.创建一个table元素
				var $tab=$("<table></table>");
				//2.创建一个tr元素
				var $tr=$("<tr></tr>");
				var $td=$("<td></td>");
				$td.html("Hello");
				$tr.append($td);
				$tab.append($tr);
				$("body").append($tab); 
			}
		</script>
	</head>
	<body>
		<input type="button" value="创建单行单列表格" onclick="createTable1()"/><br/><br/>
	</body>
</html>

案例2：创建5行6列的表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			function createTable2(){
				//1.创建一个table元素
				var $tab=$("<table></table>");
				for(var j=0;j<5;j++){
					var $tr=$("<tr></tr>");
					for(var i=0;i<6;i++){
						var $td=$("<td></td>");
						$td.html("Hello");
						$tr.append($td);
					}
					$tab.append($tr);
				}
				$("body").append($tab);
			}
		</script>
	</head>
	<body>
		<input type="button" value="创建表格(5行6列)" onclick="createTable2()"/><br/><br/>
	</body>
</html>

码农公寓