作业：1. 编程:$()函数的常用场景:选择元素,创建元素，执行回调等。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery创建元素添加元素函数回调</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<script>
//添加一个div标签到当前body中
$('<div class="box"></div>').appendTo('body'); // 向body中添加一个div元素
$('.box').append($('<h3>静夜思</h3>')); // 在div下面添加一个h3标题
$('.box').append($('<p>窗前明月光，</p>'));//在div 下添加一个p标签
$('.box').append($('<p>疑是地上霜。</p>'));
$('.box').append($('<p>举头望明月，</p>'));
$('.box').append($('<p>低头思故乡。</p>'));
//get()和[],获取jquery对象中的dom,将jquery转为dom
//let p3 = $('p')[1]; 用数组的方式，获取jq对象中的第二DOM元素p
//let p3 = $('p').get(2).innerHTML; // 获取素有p标签的jq对象（p标签的dom集合），所以可以用原生dom方法innerHTML；
//alert (p3);
//用jq方法操作一下p标签
//$('p').eq(1).css('background-color','cyan'); //为毛用gt和lt 就不行。
$('p').eq(3).html('<span>低头思故乡。<br>唐 李白</span>'); //gt 大于，lt小于
//写一个简单的回调
/* $(function () {
$('.box').css('background-color','green');
})*/
$(function () {
$('.box').css('color','green');
})
//遍历
$('p').each(function () {
//this.style.backgroundColor ='yellow'; //DOM 原生方法，this指的p
$(this).css('background-color','cyan'); //将this抓换成了jq对像，可以使用jq封装的方法
})
//length 统计JQ对象集合中DOM元素的个数
// alert($('p').length);
//index 获取某个元素的索引位置
$('p').eq(2).attr('id','p1');
alert($('#p1').index());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业：2.编程:jQuery常用的选择器操作,重点在层级和表单上
以下代码主要是：选择器的使用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ 选择器</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<div class="box">
<img src="./images/pic.jpg" alt="登鹳雀楼">
<ul>
<li>
<h3>登鹳雀楼</h3>
</li>
<li>白日依山尽，</li>
<li>
<span>黄河入海流。</span>
</li>
</ul>
<ul>
<li>欲穷千里目，</li>
<li>更上一层楼。</li>
</ul>
<p>《登鹳雀楼》是盛唐诗人王之涣创作的一首诗。</p>
<p>此诗前两句写的是自然景色，但开笔就有缩万里于咫尺，使咫尺有万里之势；</p>
<p>后两句写意，写的出人意料，把哲理与景物、情势溶化得天衣无缝，成为鹳雀楼上一首不朽的绝唱。</p>
</div>
<script>
$('h3:first').attr('id','h3title'); // 给第一个h3标签添加一个id属性
$('ul li:first-child').attr('class','text'); // 给每个ul 下的第一个子元素添加class
$('ul li:first').removeAttr('class');//移除ul下的第一个li的类属性
console.log($('div.box')); //选取类为box的div
//添加类属性
$('<style></style>').appendTo('head').text('.red {color:red}');
$('ul li:last-child').addClass('red');//给ul下每个最后一个娃，添加一个red类
$('li').last().removeClass('red'); // 删除最后一个娃儿的红衣衣。
//查看和设置元素
$('li:eq(3)').html('想哟看得远，');
// alert($('li').eq(3).text());
//jq中的CSS 操作
//(1).css():获取与设置元素的style属性,支持字符串和对象字面量与回调
// (2).快捷方法:width(),height(),innerWidth()/innerHeight()/outerHeight()/outWidth() ,margin 的边框操作
//$('.box').width(800).height(700).css('background-color','#666');
$('.box').css({
width:'600px',
height:'600px',
backgroundColor:'coral' //注意和style中的不一样，驼峰 或者'background-color' 加个引号
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
以下是表单的选择器操作：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ 表单操作</title>
<script src="lib/jquery.js"></script>
<style>
.red {
background-color: orangered;
}
</style>
</head>
<body>
<form action="">
邮箱：<input type="text"><br>
密码：<input type="password"><br>
<!--多选框-->
<input type="checkbox" name="hobby[]" value="dance">跳舞
<input type="checkbox" name="hobby[]" value="sing">唱歌
<input type="checkbox" name="hobby[]" value="draw" checked>绘画<br>
<!--单选按钮-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female" >女 <br>
<!--下拉列表-->
<select name="" id="">
<option value="">博士</option>
<option value="">硕士</option>
<option value="" selected >学士</option>
<option value="">专科</option>
<option value="">其他</option>
</select> <br>
<!--按钮-->
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<script>
// $('<style></style>').appendTo('head').text('.red {color: red}');//添加一个style
$('input[type="text"]').addClass('red');//选择 type属性等于text的文本框添加个样式
console.log( $(':input'));//：input包括input，textarea button select
$(':input').not(':submit').addClass('red'); //除了submit按钮之外所有的input
//alert($(':checkbox:checked').val());//输出被多选按钮默认选中的值
alert($(':checkbox').not(':checked').val());//输出未被多选按钮默认选中的值 只能输出顺序的第一个.
alert($(':checked').val()); //等价于checked
console.log($(':input :selected').val()) //选取selected
//alert($('selected'));
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业：3. 编程:常用的DOM操作有哪些?一定要结合实例完成
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ DOM操作</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<div>
<h3>望月怀远</h3>
<h6>唐：张九龄</h6>
<ul>
<li>海上生明月，</li>
<li>天涯共此时。</li>
<li>情人怨遥夜，</li>
<li>竟夕起相思。</li>
<li>灭烛怜光满，</li>
<li>披衣觉露滋。</li>
<li>不堪盈手赠，</li>
<li>还寝梦佳期。</li>
</ul>
</div>
<script>
$('div').css('textAlign','center');
$('ul').append('<li>当时已惘然！</li>');//在ul下,追加一个li
$('<li>梦里见过你！</li>').appendTo('ul'); //把li追加到ul下
$('ul').prepend('<li>举杯邀明月！</li>');//在ul 头部添加一个li
$('<li>古人西辞黄鹤楼</li>').prependTo('ul');//把li,添加到头部
$('li:eq(5)').after('<li>待到重阳日</li>');//在li的索引是5的后面插入
$('<li>白发三千丈</li>').insertAfter('li:eq(7)');//插入到7后
$('li:eq(3)').before('<li>缘愁是个长</li>');//在3前添加
$('li:contains("明月")').replaceWith('<li>古道西风瘦马</li>');//用古道替换明月的诗句
$('<li>自是长恨水长东</li>').replaceAll('li:contains("竟夕起相思")');
//删除
//$('li').remove(); //全部删除
//$('li').remove(':odd');//删除奇数 even 偶数
$('ul').empty();//清空ul
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业：4. 问答: jQuery与原生javascript相比，有哪些优势，哪些劣势。
<!--
JQ 是个精简的JS库，封装了很多方法比原生js方法精炼，减少了自己编写的时间，write less，do more
小的项目并不需要JS库
-->
