0917作业
1. 编程:$()函数的常用场景:选择元素,创建元素，执行回调等。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程1：$()函数常用的场景：选择元素，创建元素，执行回调</title>
</head>
<body>
<script src="../lib/jquery.js"></script>
<script>
//添加创建元素
//1.$(selector/html/obj/function())
$('<ul class="list"></ul>').appendTo('body');
$('.list').append($('<li >今天是下雨的第5天</li>'));
//创建元素时添加元素
$('.list').append($('<li id="two">雨可以停一下吗</li>'));
//将创建元素的属性或方法,如果较多,推荐使用对象字面量的方式进行添加
$('.list').append($('<li>',{
class:'sunshine',
text:'晴天和***在哪里啊',
click:function(){
alert("我是小***啊！")
}}));
//选择元素进行执行回调
$(document).ready(function(){
let li = $('li')[1];
li.innerHTML = '<span style="color:yellowgreen">明天就是第六天</span>';
$('li').eq(1).html('<span style="color:lightsalmon">***要出来了吧</span>');
});
// $(function()):直接执行一个回调,这是执行jQuery代码最简单最常用的方式
// 简写:直接传递一个匿名函数给$(),$()可以执行多次,所以 $(function())也可以调用多次
$(function(){
$('.sunshine').css('color','#00EE00');
})
//each(function):对jquery对象中的每个元素进行回调处理,css()一会再详细介绍
$('li').each(function(){
$(this).css('background-color','#EE9572');
});
//get()和[],获取jquery对象中的dom,将jquery转为dom·
$('li').get(0).style.backgroundColor = 'lightgreen'
$('li')[1].setAttribute('style','color: red');
console.log($('li').get().length); //不传参数返回全部元素
// index(selector/element)
console.log($('li.sunshine').index()); // 返回为第三个dom的数字索引: 2
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.编程:jQuery常用的选择器操作,重点在层级和表单上
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程2：jQuery中常用的选择器</title>
<style>
table {
border-collapse: collapse; /*设置表格合并边框模型*/
width: 700px;
height:300px;
text-align: center;
margin: 20px auto;/*两个参数,第一个参数是定上下,上下外边各10px.第二个是左右自动适应,*/
}
.highlight {
background-color: yellow;
}
#title {
color: red;
}
</style>
</head>
<body>
<table>
<caption >购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>数量</th>
<th>备注</th>
<th >操作</th>
</tr>
<tr id="item1">
<td>1</td>
<td>酱油</td>
<td>一瓶</td>
<td>海天</td>
<td><a href="http://jd.com" >点击***</a></td>
</tr>
<tr>
<td>2</td>
<td>肉</td>
<td>3斤</td>
<td>五花肉</td>
<td ><a href="http://jd.com" >点击***</a></td>
</tr>
<tr>
<td>3</td>
<td>糖</td>
<td>1斤</td>
<td>冰糖</td>
<td > <a href="http://jd.com">点击***</a></td>
</tr>
</table>
邮箱:<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>
<script src="../lib/jquery.js"></script>
<script>
//通用选择器
//addClass() 方法向被选元素添加一个或多个类。
//该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性
// $('*').addClass('list'); //选择了页面中所有元素
// $('tr').addClass('item'); // 选择所有的 <tr>标签
// $('.list').css('color','red'); // 选择有class="list"的元素
// $('.item').addClass('highlight');
// $('#item1').addClass('highlight'); // id选择器
//层级选择器
// $('tr:first th').addClass('highlight'); // 选择第一个<tr>下全部<th>
// $('li:first > th').addClass('highlight'); // 仅选择子级元素,更深的级别忽略
//th:contains('HTML'):last 定位到第一个内容是编号列表项上
// $("th:contains('编号'):last").addClass('highlight'); //验证定位效果
// $("th:contains('编号'):last + th").addClass('highlight'); //相依兄弟
// $("th:contains('编号'):last ~ th").addClass('highlight'); // 相邻所有兄弟
// 选择文本框，属性选择器和表单过滤器
// $('input[type="text"]').addClass('highlight'); // 属性选择器
// 元素:input表示 选择<input><select><textarea><button>
//$(':input').not(':submit').not(':disabled').addClass('highlight');
// console.log($(':checkbox:checked').val()); // 当前选中的值,dance
// console.log($(':checkbox').not(':checked').val()); //未被选中的值,sing
//console.log($(':checkbox').val()); //默认返回被选中的值
console.log($(':input :selected').val()); // 注意过滤器之间必须要加空格,类:input并不针对select
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 编程:常用的DOM操作有哪些?一定要结合实例完成
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程3：常用的DOM操作有哪些？一定要结合实例完成</title>
</head>
<body>
<ul>
<li>我是列表项01</li>
<li>我是列表项02</li>
<li>我是列表项03</li>
<li>我是列表项04</li>
<li>我是列表项05</li>
</ul>
<!--导入jQuery函数库-->
<script src="../lib/jquery.js"></script>
<script>
//1.元素内部添加
//append()和appendTo(): 将当前元素添加到父元素内部的尾部
// 添加到尾部
$('ul').append('<li>新元素1</li>');
$('<li>新元素2</li>').appendTo('ul');
// 添加到尾部
//prepend()和prependTo(): 将节点添加到父元素内部的头部
$('ul').prepend('<li>新元素3</li>');
$('<li>新元素4</li>').prependTo('ul');
//2.元素前后添加,就是根据索引，中间也可以添加新元素
//after()和insertAfter():将元素插入到当前节点的后面
$('li:eq(3)').after('<li>新元素5</li>');
$('<li>新元素6</li>').insertAfter('li:eq(4)');
//before()和insertBefore():将元素插入到当前节点的前面
$('li:eq(7)').before('<li>新元素7</li>');
$('<li>新元素8</li>').insertBefore('li:eq(8)');
//3.替换:将li文本包含有: "新元素"内部的元素全部替换成指定元素
//replaceWith()和replaceAll():替换掉匹配的html内容
$('li:contains("新元素")').replaceWith('<li style="color:indianred">新元素</li>');
$('<li style="color:lightseagreen">新元素</li>').replaceAll('li:contains("新元素")');
//4.删除
//remove() 方法移除被选元素，包括所有的文本和子节点。
//empty():删除匹配到的元素集合中所有的子节点
// 不传参数是全部删除
$('li').remove();
// 删除奇数(从0开始)
$('li').remove(':odd');
$('li').remove();
//等价于 $('li').remove();
$('ul').empty();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 问答: jQuery与原生javascript相比，有哪些优势，哪些劣势。
JavaScript的优点和缺点：
优点：
1.性能：由于JavaScript运行在***端，节省了web服务器的请求时间和带宽
轻量级的脚本语言，比较容易学习。
2.运行在用户机器上，运行结果和处理相对比较快。
3.可以使用第三方附加组件来检查代码片段。
缺点：
1.安全问题：由于JavaScript在***端运行，可能被用于黑客目的。
2.渲染问题：在不同浏览器中的处理结果可能不同。
jQuery优缺点：
优点：
1.jQuery消除了JavaScript跨平台兼容问题。
2.相比其他JavaScript和JavaScript库，jQuery更容易使用。
3.jQuery有一个庞大的库/函数。
4.jQuery有良好的文档和帮助手册。
5.jQuery支持AJAX。
缺点：
1.由于不是原生JavaScript语言，理解起来可能会受到限制。
2.项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。
