jQuery基本选择器
什么是选择器
在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//① $('#id属性值')
$('#username').css('color','red');
//② $('tag标签名称')tag标签选择器
$('input').css('background-color','blue');
//③ $('.class属性值') class类别选择器
$('.apple').css('background-color','green');
//④ $('*') 通配符选择器
//$('*').css('background-color','gray');
//⑤ $('s1,s2,s3...')联合选择器selector
$('p,#username,.apple').css('font-size','25px');
}
</script>
<style type="text/css">
#username{}
p{}
.apple{}
*{}
.apple,span,input{} /*联合选择器*/
</style>
</head>
<body>
<h2>基本选择器(灵感来源于css样式选择器)</h2>
<input type="text" name="username" value="php中文网" id="username" /><br />
<p>大家好</p>
<div class="apple">欢迎来到php中文网</div>
<span>让我们一起开始学习jQuery吧</span><br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
neue Datei
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//① $('#id属性值')
$('#username').css('color','red');
//② $('tag标签名称')tag标签选择器
$('input').css('background-color','blue');
//③ $('.class属性值') class类别选择器
$('.apple').css('background-color','green');
//④ $('*') 通配符选择器
//$('*').css('background-color','gray');
//⑤ $('s1,s2,s3...')联合选择器selector
$('p,#username,.apple').css('font-size','25px');
}
</script>
<style type="text/css">
#username{}
p{}
.apple{}
*{}
.apple,span,input{} /*联合选择器*/
</style>
</head>
<body>
<h2>基本选择器(灵感来源于css样式选择器)</h2>
<input type="text" name="username" value="php中文网" id="username" /><br />
<p>大家好</p>
<div class="apple">欢迎来到php中文网</div>
<span>让我们一起开始学习jQuery吧</span><br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)