1. 编程:$()函数的常用场景:选择元素,创建元素，执行回调等:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-3.3.1.js"></script>
<script>
//1. 编程:$()函数的常用场景:选择元素,创建元素，执行回调等。
//将元素ul添加到body中
$('<ul class="list"></ul>').appendTo('body');
//添加li元素
$('.list').append($('<li>iphoneXS上市了</li>'));
//可以添加ID属性
$('.list').append($('<li id="ten">我有10个***</li>'));
//
$('.list').append($('<li>',{
class: 'iphoneXS',
text:'wode还能用3年',
click:function(){alert('iphone6SP');
}
}));
//选择元素
$('li').each(function(){
//原生方法
//this.style.backgroundColor = 'lightgreen';
//jQurey方法调用
$(this).css('background-color','cyan');
})
//背景修改成亮绿
$('li').get(0).style.backgroundColor = 'lightgreen';
//$('li').get(1).style.color = 'red';
//把字体修改成绿色
$('li')[1].setAttribute('style','color:green');
console.log($('li').length);
//index
console.log($('#ten').index());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.编程:jQuery常用的选择器操作,重点在层级和表单上:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.highlight {
background-color : yellow;
}
</style>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScript</h3>
<ul>
<li>jQurey</li>
<li>Bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
邮箱:<input type="text" name="email"><br>
密码:<input type="password" name="password"><br>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female" checked>女
<br>
你的学历:
<select name="" id="">
<option value="幼儿园">幼儿园</option>
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="其他">其他</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<script src="jquery-3.3.1.js"></script>
<script>
//通用选择器
//$('*').addClass('highlight');
//所有的li被添加高亮样式
//$('li').addClass('highlight');
//类选择样式,所有字体改成红色
//$('.highlight').css('color','red');
//ID选择器
//$('#title').addClass('highlight');
//层级选择器
//包含HTML的最后一个
//$("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:<input><textarea><select><button>
//不选中 submit reset 按钮
$(':input').not(':submit').not(':disabled').addClass('highlight');
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 编程:常用的DOM操作有哪些?一定要结合实例完成:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery常用DOM操作</title>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script src="jquery-3.3.1.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("新元素")');
//删除
//$('li').remove();
$('li').remove(':odd');
$('li').empty();//$('li').remove();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 问答: jQuery与原生javascript相比，有哪些优势，哪些劣势:
jQuery优点:写更少的代码,能做更多的事.缺点:不能很深刻的的理解JavaScript的语法,因为这些都事按照jQuery的方法来写的
