jQuery01-入门-选择器
1 什么是jQuery
前段，作用和js一模一样，里面封装了很多常用的js代码，是一个js代码库,不是封装了所有的js代码
1.1 jQuery的作用与js代码区别
1.1jQuery的作用
封装的作用：减少代码量
1.2jQuery与js代码之间的区别
1.2.1通过id获取组件
//js方式：document.getElementByid("id");
//jQuery方式：$("#id")
1.2.2通过类获取组件
//js方式：document.getElementByClassName("id");
//jQuery方式：$(".id")
1.2.3通过标签获取组件
//js方式：document.getElementByTagname("id");
//jQuery方式：$("input")
2 基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 1)、id选择器：将id为sa的span标签的背景设为黄色。
$("#sa").css({
"background":"yellow"});
// 2)、类选择器：将div标签里面class的值为sb的文本框标签的背景设为黄色。
$(".sb").css({
"background":"yellow"});
// 3)、标签选择器：将div里面input标签的背景设为黄色。
$("input").css({
"background":"yellow"});
// 4)、*选择器：将整个页面所有标签的背景设为绿色。
$("*").css({
"background":"green"});
// 5)、,选择器：将id为sa的div里面所有input、span标签的背景设为黄色。
$("input,span").css({
"background":"yellow"});
})
</script>
</head>
<body>
<div id="mysa">
<span id="sa">这是span1</span><br />
<span id="sb">这是span2</span><br />
<span id="sc">这是span3</span><br />
<input type="button" value="按钮" /><br />
<input type="text" class="sa" value="文本框1"/><br />
<input type="text" class="sb" value="文本框2"/><br />
</div>
<div>
<span id="sa">这是span4</span><br />
<span id="sb">这是span5</span><br />
<span id="sc">这是span6</span><br />
<input type="text" class="sb" value="文本框3"/><br />
最低0.47元/天 解锁文章
1045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
