实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ选择器练习</title>
<style>
#id{
}
</style>
</head>
<body>
<form>
<p>
<label>账号：</label>
<input type="text" autofocus>
</p>
<p>
<label>密码：</label>
<input type="password">
</p>
<p>
<label>复选框：</label>
<input type="checkbox">
</p>
<p>
<label>单选按钮：</label>
<input type="radio">
</p>
<p>
<input type="button" value="提交">
<input type="button" value="充值">
<input type="button" value="返回">
</p>
</form>
<hr>
<ul>
<li id="id" >JAVA</li>
<li class="class" >PHP</li>
<li>HTML</li>
<li>C++</li>
<li>python</li>
</ul>
<hr>
<ol>
<li >JAVA111</li>
<li >PHP111</li>
<li>HTML111</li>
<li>C++111</li>
<li>python111</li>
</ol>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
$(function () {
/*标签选择*/
//id选择器、类、标签、选择器
$('#id').css('color', 'green');
// $('.class').css('background','lightblue');
$('li').css('font-size', '30px');
//子元素选择器
$('ul li:nth-child(3)').css('border', '1px solid red');
$('li:odd').css('margin-left', '20px'); //奇数行，从0开始。
// $(':input').css('background','lightgreen');
/*表单选择*/
//attr()===setAttribte(),推荐使用`[type="类型"]`替代(:'text')
//.css()所有在style里面的样式用。。。 attr()在style外增加的参数用。。
$('input[type="text"]').attr('value', '这里写账号');
// $('input[type="password"]').css('width','200px');
$('input[type="text"]:focus').css('background-color', 'blue');
});
/*DOM和JQ转换*/
//## 5.DOM对象与jQuery对象的相互转换
// DOM转jQuery: $()
// jQuery转DOM: $()[], $().get()
var date=$('ol li'); //JQ对象，所有ol下的li
console.log(date);
var list=$(date).get(); //转换成DOM
console.log(list);
var lis=$(date)[3]; //转换成DOM获取第三个元素
console.log(lis);
var li=$(date).get(3);
li.style.color='blue';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例