1. 编程:$()函数的常用场景:选择元素,创建元素，执行回调等。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQueyr对象的核心访求与属性</title>
</head>
<body>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
<!-- 导入jQuery函数库 -->
<script src="../lib/jquery-3.3.1.js"></script>
<script>
//1.$(selector/html/obj/function())
$('<ul class="list"></ul>').appendTo('body');
$('.list').append($('<li>iPhone Xplus上市了,你的***还够用吗?</li>'));
//创建元素时添加元素
$('.list').append($('<li id="ten">我有10个,不怕</li>'));
//将创建元素的属性或方法,如果较多,推荐使用对象字面量的方式进行添加
$('.list').append($('<li>',{class:'iphone6s',text:'我的6s还能再战2年',click:function(){alert("iphone6s")}}));
//$(function()):直接执行一个回调,这是执行jQuery代码最简单最常用的方式
$(function(){
$('.iphone6s').css('color','blue');
})
//each(function):对jquery对象中的每个元素进行回调处理
$('li').each(function(){
//回调中this默认指向的DOM元素
// this.style.backgroundColor = 'lightgreen';
//如果想使用jquery中的方法,需要将DOM元素转为jquery对象
$(this).css('background-color','cyan');
});
//查看jQuery对象集合中的DOM数量
console.log($('li').length);
//get()和[],获取jquery对象中的dom,将jquery转为dom
$('li').get(0).style.backgroundColor = 'lightgreen'
$('li')[1].setAttribute('style','color: red');//并把原有的style给替换了
console.log($('li').get().length); //不传参数返回全部元素
// index(selector/element)
console.log($('li#ten').index()); // index() 方法返回指定元素相对于其他指定元素的 index 位置。返回为第二个dom的数字索引: 1
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.编程:jQuery常用的选择器操作,重点在层级和表单上
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery中常用的选择器</title>
</head>
<body>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScrip</h3>
<ul>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
邮箱:<input type="text"> <br>
密码:<input type="password"> <br>
<!--input:radio-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<!--input:checkbox-->
<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>
<!-- 导入jQuery函数库 -->
<script src="../lib/jquery-3.3.1.js"></script>
<script>
//通用选择器
//$('*').addClass('highlight');//选择了页面中所有元素
//$('li').addClass('highlight'); // 选择所有的 <li>标签
//console.log($('li').length);
//$('.highlight').css('color','red'); // 选择有class="highlight"的元素
//$('#title').addClass('highlight'); // id选择器
//层级选择器
//$('li:first h3').addClass('highlight'); // 选择第一个<li>下全部<h3>
//$('li:first > h3').addClass('highlight'); // 仅选择子级元素,更深的级别忽略
//li:contains('HTML'):first 定位到第一个内容是html列表项上
//li:contains('HTML'):last 定位到最后一个内容是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').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()); // 注意过滤器之间必须要加空格,类:input并不针对select
//更多表单过滤器,请同学们上机练习
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 编程:常用的DOM操作有哪些?一定要结合实例完成
实例
<!DOCTYPE html>
<html>
<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="../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文本包含有: "新元素"内部的元素全部替换成指定元素
$('li:contains("我是新")').replaceWith('<li style="color:red">新元素</li>');
// $('<li style="color:lightgreen">新元素</li>').replaceAll('li:contains("新元素")');
//删除
// $('li').remove(); // 不传参数是全部删除
// $('li').remove(':odd'); // 删除奇数(从0开始)
//$('ul').empty(); // 等价于 $('li').remove();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 问答: jQuery与原生javascript相比，有哪些优势，哪些劣势。
优势：
代码更加精简，优雅；
jQuery对不同浏览器的事件,DOM对象,都进行了封装,各种操作都可以直接兼容各种浏览器
劣势：
代码执行速度慢；
jquery是一个特化的框架，它不是一个完整的解决方案，仍然离不开javascript。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。