今天学习了Jquery的基础知识和简单的Dom操作
代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./lib/jquery.js"></script>
<script>
$('<ul class="list"></ul>').appendTo('body');
$('.list').append($('<li>iPhone Xr上市了,你的***还够用吗?</li>'));
$('.list').append($('<li id="ten">我有10个,不怕</li>'));
$('.list').append($('<li>',{
class:'iphone6sp',
text:'我的6sp还可以在站3年',
click:function () {
alert("iphone6sp")
}
}));
$('.list').each(function () {
$(this).css('background-color','red');
})
console.log($('li').length);
$('li').get(0).style.backgroundColor='lightgreen';
$('li')[1].setAttribute('style','color:red');
console.log($('li').get().length);
console.log($('li#ten').index());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.highlight{
background-color: yellow;
}
#title{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScript</h3>
<ul>
<li>Jquery</li>
<li>Bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
邮箱: <input type="text"><br>
密码: <input type="password"><br>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<input type="checkbox" name="hobby[]" value="dance"checked>跳舞
<input type="checkbox" name="hobby[]" value="sing">唱歌
<br>
你的学历:
<select name="" id="">
<option value="">幼儿园</option>
<option value="小学" selected>小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<script src="./lib/jquery.js"></script>
<script>
// $('*').addClass('highlight');
// $('li').addClass('highlight');
// $('.highlight').css('color','red');
// $('#title').addClass('highlight');
//$('li:first h3').addClass('highlight');
//$('li:first>h3').addClass('highlight');
// $("li:contains('HTML'):last").addClass('highlight');
//$("li:contains('HTML'):last+li").addClass('highlight');
//$("li:contains('HTML'):last~li").addClass('highlight');
//$("input[type='text']").addClass('highlight');
//$(':input').not(':submit').not(':disabled').addClass('highlight');
console.log($(':checkbox:checked').val());
console.log($(':checkbox').not(':checked').val());
console.log($(':checkbox').val());
console.log($(':input:selected').val());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script src="./lib/jquery.js"></script>
<script>
$('ul').append('<li>新元素1</li>');
$('<li>新元素2</li>').appendTo('ul');
$('ul').prepend('<li>新元素3</li>');
$('<li>新元素4</li>').prependTo('ul');
$('li:eq(2)').after('<li>新元素5</li>');
$('<li>新元素6</li>').insertAfter('li:eq(4)');
$('li:contains("新元素")').replaceWith('<li style="color:red">新元素</li>');
$('<li style="color:lightgreen">新元素</li>').replaceAll('li:contains("新元素")');
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
