在head 中插入 script 标签 <script></script>
一条script语句只能执行一次script动作
3、变量 定义用 var
判断变量的类型------typeof(var)
有假返第一个假，无假返b
有真返第一个真，无真返b
数组赋值，会自动扩容，数组最大下标+1就是长度，中间空的元素undefined
function标识符定义函数
有参
带返回值的函数
直接固定名function(){},赋值给变量，var fun
alert() 输出 和 println()相同
js不允许函数重载
下边函数同名的会覆盖上面的
当有参被无参覆盖后，还是可以传参数--------- -隐形参数
无参函数形参存在一个隐形的参数-----------------arguments（数组）
静态注册：直接在所需要的标签中使用，直接调用head中静态函数
onload事件 -------------页面加载完成后，常用于页面js代码初始化操作
在head中创建函数，在body中的onload事件中使用
动态注册 onload 事件-----直接在head中使用
赋值自定义函数
在head中用
赋值function函数
onclick单击事件 ------------------常用于按钮点击响应
静态注册onclick事件
在<script>中创建点击函数
在<button>中onclick属性使用该点击函数
动态注册onclick事件
获取标签对象
通过标签对象 . 事件名 = function(){}; ------- 动态注册
onblur失去焦点事件 --------常用于输入框失去焦点后验证输入内容是否合法
失去焦点事件+校验
1. 获取标签对象 username、usernamespan
2. 创建正则表达式判断规则
3. 正则表达式test判断标签对象username值value
4. 通过标签对象usernamespan . innerHTNL返回标签之间HTML
onchange内容发生改变事件 --------------常用于下拉列表和输入框内容发生改变后操作
静态注册
动态注册
onsubmit表单提交事件
操作标签，就需要先获取标签，Document.get...by...获取标签对象，通过对象调用属性等
GetElementById()
通过按钮校验用户名输入是否合法，用alert返回警告
1. 先要注册按钮 onclick 事件（静态注册）
创建onclickFun函数
2. 通过 id 获取用户名文本输入标签，得到标签对象
调用标签对象的value------(输入的用户名)，
自定义正则表达式-----------用户名检验规则
将value用正则表达式的text（）方法检验------判断用户名是否符合要求
在text（）检验结果为真处，用alert返回警告
在text（）检验结果为假处，用alert返回警告
正则表达式regrexp
/\w/ 是最常用的
前后加 ^ 和 $ ,意味着从头到尾必须都是以 a 类型开头，结尾 至少3个连续，最多5个连续
通过校验输入文本是否合法，通过span域返回警告
1. 先要注册按钮 onclick 事件（静态注册）
创建onclickFun函数
2. 通过 id 获取用户名文本输入标签，得到标签对象
调用标签对象的value------(输入的用户名)，
自定义正则表达式-----------用户名检验规则
将value用正则表达式的text（）方法检验------判断用户名是否符合要求
3.通过 id 获取span标签，得到标签对象
在text（）检验结果为真处，将警告赋值给对象的innerHTML（标签之间的文本）
在text（）检验结果为假处，将警告赋值给对象的innerHTML（标签之间的文本）
操作span标签的起始结束标签之间的文本---------获取该标签
通过设置获取的标签对象的标签之间的文本innerHTML,返回警告
GetElementsByName()
获取多个，name相同的标签
getElementByTagName
该语句在页面还没加载完全就输出，没有值
放在window.onload = function(){}中，就是等页面加载完才执行
放在onclick函数里面，当按按钮时，页面就已经读取完了
取内容---都要，取文本---只要文字
创建文本子节点
导入jQuery类库
用js实现获取标签
用jQuery实现---获取标签
---------获取标签
--------按标签名查
Dom对象是通过id获取（查询）标签，.innerHTML设置标签之间文本
jQuery对象通过$()中放入ID选择器，查询标签对象
jQuery对象$obj === Dom的数组+jQuery提供的功能函数
所以jQuery对象通过数组下标可以去除DOM对象
Dom ==> jQuery
jQuery ==> Dom
$(document).ready(function(){
});
简写:
$(function($){
});
其中的jQuery代码都是表示页面加载后执行的
$("form input")-------form 里面所有的-----input
$("form>input")------form 后面所有的-----子inoput
$("label + input")----所有label 后面紧接着的------input
$("form ~ input")----form 后面所有的-----input
---------------------------------------------------------------------
$("form input")
---------------------------------------------
$("form>input")
---------------------------------------------------
$("label + input")
-------------------------------------------------
$("form ~input")
$("body div") body内 所有div
$("body>div") body内 所有子div
$("#one+div") id为one标签外(之后) 下一个
$("#div+span") 所有div标签外(之后) 下一个span标签
$("#two~div") id为two标签外(之后) 所有同级标签
选择器选出的标签对象，通过 . css() 或者 .style.color="blue"
只要没有disabled 
只要有disabled 
通过：checkbox过滤后，还可以通过其他属性过滤
通过 :checkbox 过滤再通过 [name='值'] 过滤，再通过 :checked 过滤
获取第二个p标签
结果
获取第一个li标签 结果
获取最后一个li标签 结果
input type为checkbox的父元素，是否为form
返回含有span的div
删除所有p中id=selected的标签
获取所有div的所有子标签
结果
给第一个div后面所有div加上class
所有p标签的父元素集合
所有p标签的父元素中class为selected
找到所有p前一个元素的集合
找到最后div前面所有div，加上class
追加span对象给div集合
html()
text()
val()
通过 .val( ) 操作文本框输出---只需输入“”字符串 
表单项的value操作 .val( [ " value值 " ] ); 通过value值操作指定的
通过表单过滤器 :radio 获取多个表单，通过 .val( [ " value值 " ] )；
通过表单过滤器 :checkbox 获取多个表单，通过 .val(["value值","value值”]);
同时操作单选、多选、下拉框多选、下拉框单选的选中状态（顺序没有影响）
attr() 可以获取自定义的值
都不选中-------------prop()修饰选中与否更直观-------prop()可以操作未定义checked的多选框的选中
全选/全不选提交球类案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../03jQuery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
// 【全选】绑定单击事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked",true);
});
// 【全不选】绑定单击事件
$("#checkedNotBtn").click(function () {
$(":checkbox").prop("checked",false);
});
// 【反选】绑定单击事件
$("#checkedRevBtn").click(function () {
// 通过:checkbox和name筛选，再遍历
$(":checkbox[name='items']").each(function () {
//操作的是选中状态checked
this.checked=!this.checked;
});
// 检查是否满选
// 获取全部球类个数
var length = $(":checkbox[name='items']").length;
//再获取选中的个数：checked 属性筛选，得到已经选中的
var length1 = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",length==length1);
/*if(length==length1){
$("#checkedAllBox").prop("checked",true)
}else {
$("#checkedAllBox").prop("checked",false)
}*/
});
// 【提交】
$("#sendBtn").click(function () {
$(":checkbox[name='items']:checked").each(function () {
alert(this.value)
})
});
// 给【全选/全不选】绑定单击事件
$("#checkedAllBox").click(function () {
// 获取该单选的选取状态,this表示正在响应的dom对象
// alert(this.checked);
// 获取四个球类的dom对象
$(":checkbox[name='items']").prop("checked",this.checked);
});
// 给【每个球类】绑定单选事件，不满足满选时，全选也会取消
$(":checkbox[name='items']").click(function () {
// 检查是否满选
// 获取全部球类个数
var length = $(":checkbox[name='items']").length;
//再获取选中的个数：checked 属性筛选，得到已经选中的
var length1 = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",length==length1);
});
})
</script>
</head>
<body>
<form method="post" action="http://localhost:8080">
你喜欢的运动？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNotBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="submit" id="sendBtn" value="提 交"/>
</form>
</body>
</html>
内部插入
把<h1> 插入到div里面最后一个
把<h1> 插入到div里面第一个
外部插入
把<h1> 插入到div后面
把<h1> 插入到div前面
替换
用<h1> 替换 div 
用<h1>替换所有div
删除
删除所有div
删除所有div中的文本
动态添加删除行记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css.css">
<script src="../03jQuery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
// 创建一个删除复用函数
var deleted = function(){
// this 表示在事件响应的function函数中，正在响应的dom对象
// 此时this为a标签,取两次父元素---行元素---再remove()
var $trObj = $(this).parent().parent();
var name = $trObj.find("td:first").text();
/*confirm是JavaScript提供的确认提示函数，传什么提示什么
* 当用户点击确定，返回true，点击取消，返回false
* */
if (confirm("你确定要删除["+name+"]吗？")){
// 行对象 . remove()
$trObj.remove();
}
// return false 可以阻止元素的默认行为
return false;
};
// 给【删除】绑定点击事件
/*特别强调：该点击事件中，直接传入deleted函数就行
否则，this会出错*/
$("a").click(deleted);
// 给【submit】绑定单击事件
$("#addEmpButton").click(function () {
// 获取输入框姓名、邮箱、工资内容
var name = $('#empName').val();
var email = $("#email").val();
var salary = $("#salary").val();
// 创建一个行标签对象，添加到显示数据的表格中去
var $trObj = $("<tr>" +
"<td>"+name+"</td>" +
"<td>"+email+"</td>" +
"<td>"+salary+"</td>" +
"<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
"</tr>");
// 添加到显示数据的表格中
$trObj.appendTo($("#employeeTable"));
// 给【新添加的行a标签】绑定点击事件
$trObj.find("a").click(deleted);
});
});
</script>
</head>
<body>
<table id="employeeTable" border="1" cellspacing="0">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
</table>
<div id="formDiv" style="border: 1px solid black; width: 300px; ">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
3551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
