人工智能方向近期很热
自动化运维方向
JS DOM 节点操作、事件
JQuery 是在JS的基础上实现了一种封装、对象。
JS DOM---：
完成两个步骤：1、查找标签
document.getElementById(“idname”) //dom对象
document.getElementsByTagName(“tagname”) //dom对象的集合
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)
2导航查找
---通过某一个标签定位到另一个标签的属性
parentElement //父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作标签
1文本操作 取值操作
DOM对象.innerText
DOM对象.innerHTML
赋值操作
this.innerHTML="hello world"
this.innerText="hello world"
实例：
<p id="d1" class="c1">PPP</p>
<p class="c1">PPP</p>
<script>
var ele_p=document.getElementById("d1"); //dom对象，on事件=function
var eles_p=document.getElementsByClassName("c1");
ele_p.onclick=function () {
alert(1234)
}
for (var i=0;i<eles_p.length;i++){
eles_p[i].onclick=function () {
alert(1234)
this 当前点击的标签
this.innerHTML="hello world";
this.innerText="hello";
}
}
2属性操作
DHTML的简洁语法：
console.log(DOM对象.属性)；
DOM对象.属性=值
原生JS：
console.log(DOM对象.getAttribute("属性名"))
DOM对象.setAttribute("属性名"，"值")
示例：
<input type="text" id="inp" value="123">
<script>
var ele_inp=document.getElementById("inp");
ele_inp.onclick=function () {
this.value="hello";
console.log(this.value);
//JS方法 console.log(this.setAttribute("value","666"))
this.setAttribute("value","666");
}
3class属性操作
DOM对象.classList.add("hide");
DOM对象.classList.remove("c1");
左侧菜单实例
<style>
.hide{display:none}
this.classList.add("hide");
this.classList.remove("c1")
<input type="text" id="inp" value="123">
<script>
var ele_inp=document.getElementById("inp");
ele_inp.onclick=function () {
// this.value="hello";
// console.log(this.value);
//JS方法 console.log(this.setAttribute("value","666"))
// this.setAttribute("value","666");
this.classList.add("hide");
}
4CSS样式设置
DOM对象.style.样式属性名=样式值
this.style.color="red"; 样式操作
this.style.border="red 1px solid";
<input type="text" id="inp" value="123">
<script>
var ele_inp=document.getElementById("inp");
ele_inp.onclick=function () {
// this.value="hello";
// console.log(this.value);
//JS方法 console.log(this.setAttribute("value","666"))
// this.setAttribute("value","666");
// this.classList.add("hide");
this.style.color="red";
this.style.border="blue 1px solid";
}
5
获取value值
<select name="" id="s1">
<option value="1">河北省</option>
<option value="2">河南省</option>
<option value="3">山东省</option>
</select>
<script>
var eles_s=document.getElementById("s1");
for (var i=0;i<eles_s.length;i++){
eles_s[i].onclick=function () {
console.log(eles_s.value)
}
}
value属性：input,select,textarea,
<textarea id="c1">
节点操作 1 创建节点 2 添加节点 3 删除节点 4 替换节点 节点就是一个个DOM对象
创建节点 document.createElement("a")
新增 父节点.appendChild()
删除 父节点.removeChild()
替换 父节点.replaceChild(新节点，被替换节点)
事件
用户行为不同：点击、悬浮
onclick 单击事件
ondblclick 双击事件
<div class="c1">DIV</div>
<script>
var ele=document.getElementsByClassName("c1")[0];
ele.onclick=function () {
alert(123)
}
ele.ondblclick=function () {
alert(123)
}
onload 事件
<script>
window 窗口对象
window.onload=function () {
var ele=document.getElementsByClassName("c1")[0];
alert(ele)
}
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
var ele=document.getElementsByClassName("c1")[0];
alert(ele)
} ;
</script>
</head>
<body>
<div class="c1">DIV</div>
</body>
只有窗口对象执行完毕后，才会执行onload触发的内容。
onsubmit 事件 阻止默认事件发生：return false.
先alert(123)或验证内容，后提交事件。
示例：
<form action="" id="form">
<p>用户名：<input type="text" name="user"></p>
<input type="submit">
<!--//默认提交事件 {"user":"yuan"}传给action了-->
<!--<input type="button" value="提交">-->
</form>
<script>
var ele_form=document.getElementById("form");
ele_form.onsubmit=function (e) {
//input标签内容拿到手
var inp=document.getElementsByName("user")[0];
var username=inp.value;
alert(username);
if (username.length>12 || username.length<5){
//阻止默认事件
// return false
// 阻止默认事件
e.preventDefault();
}
alert(123);
};
事件传播
<style>
.outer{
width:300px;
height:300px;
border:1px solid red;
}
.inner{
width:100px;
height:100px;
backgroudcolor:blue;
}
<div class="outer">
<div class="inner">
</div>
</div>
<script>
var outer=document.getElementsByClassName("outer")[0];
var inner=document.getElementsByClassName("inner")[0];
outer.onclick=function(e){
alert(1234)
}
inner.onclick=function (e) { //e=event事件对象
alert(888)
//阻止事件传播
e.stopPropagation()
}
单击inner部分先出888，后出1234。这种情况就是事件传播。
阻止事件传播：e.stopPropagation()
onkeydown事件 按键就触发
<input type="text" id="inp">
<script>
var ele=document.getElementById("inp");
ele.onkeydown=function (e) { // e 事件对象： 存的是与触发事件相关的具体信息
console.log(e.keyCode);
if(e.keyCode==13){
alert(123)
}
}
//e 时间对象：存的是与触发事件相关的具体信息。
QQ截图移动逻辑：鼠标在动，onmousedown事件,onmousemove事件
阻止默认事件方法二：e.preventDefalut().
onselect事件
var ele=document.getElementsByClassName("inp");
ele.onselect=function () {
alert(123)
}
选中文本才会触发
<input type="text" id="inp" value="123">
<script>
var ele=document.getElementById("inp");
ele.onselect=function () {
alert(123)
};
onmouseover事件 鼠标悬浮
<style>
.c1{
width:200px;
height:200px;
backgroud-color:red;
}
<div class="c1">DIV
<script>
var ele=document.getElementsByClassName("c1")[0];
//鼠标悬浮触发事件
ele.onmouseover=function () {
alert(1111)
console.log(111)
}
//鼠标离开区域触发事件
onmouseleave事件
ele.onmouseleave=function () {
alert(777)
console.log(777)
}
示例：模态动画框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{display: none;}
.back{
height:2000px;
}
.shade{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
backgroud-color:green;
opacity:0.4;
}
.model{
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
height:250px;
backgroud-color:white;
}
</style>
</head>
<body>
<div class="back">
<button class="add">添加学员</button>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th class="operate">
<button class="edit">编辑</button>
<button class="del">删除</button>
</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>liwj</td>
<td>18</td>
<td>python18</td>
<td>
<button class="edit">编辑</button>
<button class="del">删除</button>
</td>
</tr>
<tr class="t1">
<td>liwj2</td>
<td>19</td>
<td>python19</td>
<td class="yangben">
<button class="edit">编辑</button>
<button class="del">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="shade hide"></div>
<div class="model hide">
<form action="">
<p>姓名<input type="text" class="item"></p>
<p>年龄<input type="text" class="item"></p>
<p>班级<input type="text" class="item"></p>
<p>
<input type="button" value="提交" class="submit">
<input type="button" value="修改" class="mod">
<input type="button" value="取消" class="cancel">
</p>
</form>
</div>
<script>
//删除事件
var eles_del=document.getElementsByClassName("del");
var ele_tbody=document.getElementById("tbody");
for (var i=0;i<eles_del.length;i++){
eles_del[i].onclick=function () {
ele_tbody.removeChild(this.parentElement.parentElement);
}
};
// model对话框
var ele_add=document.getElementsByClassName("add")[0];
var ele_cancel=document.getElementsByClassName("cancel")[0];
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];
ele_add.onclick=function () {
ele_shade.classList.remove("hide");
ele_model.classList.remove("hide")
};
ele_shade.onclick=function () {
ele_shade.classList.add("hide");
ele_model.classList.add("hide")
};
//添加事件
var ele_submit=document.getElementsByClassName("submit")[0];
ele_submit.onclick=function () {
var eles_input=ele_model.getElementsByClassName("item");
//创建节点
var ele_tr=document.createElement("tr");
for (var i=0;i<eles_input.length;i++){
var ele_td=document.createElement("td");
ele_td.innerHTML=eles_input[i].value;
ele_tr.appendChild(ele_td);
}
var ele_th_oprate=document.getElementsByClassName("operate")[0].cloneNode(true);
ele_tr.appendChild(ele_th_oprate);
ele_tbody.appendChild(ele_tr);
ele_shade.classList.add("hide");
ele_model.classList.add("hide")
}
//编辑替换事件
var eles_edit=document.getElementsByClassName("edit");
for (i=0;i<eles_edit.length;i++){
eles_edit[i].onclick=function () {
ele_shade.classList.remove("hide");
ele_model.classList.remove("hide");
var ele_tr_old=this.parentElement.parentElement;
var ele_mod=document.getElementsByClassName("mod")[0];
ele_mod.onclick=function () {
//替换节点
var eles_input=ele_model.getElementsByClassName("item");
var ele_tr=document.createElement("tr");
for (var i=0;i<eles_input.length;i++){
var ele_td=document.createElement("td");
ele_td.innerHTML=eles_input[i].value;
ele_tr.appendChild(ele_td);
}
var ele_th_oprate=document.getElementsByClassName("operate")[0].cloneNode(true);
ele_tr.appendChild(ele_th_oprate);
ele_tbody.replaceChild(ele_tr,ele_tr_old);
ele_shade.classList.add("hide");
ele_model.classList.add("hide");
}
}
}
</script>
</body>
</html>
JQuery
JS网页动态操作，控制标签控制节点，实现动态效果。
只是封装了一些很繁琐的东西
write less,do more.
兼容性
选择器和操作
1 查找标签
选择器 实现
2 标签操作
yuan.js
function add(x,y){
return x+y;
}
引入js文件
head标签内<script src="yuan.js"></script>
<script>add(2,3)
jquery-3-1-1.js
<script src="jquery-3-1-1.js"></script>
<p id="d1">PPP
<script>
$("#d1")=
jquery("#d1") $相当于jquery
jquery拿到的一定是个集合
$("#d1").html()拿到文本内容
jquery选择器
引入js文件<script src="jquery-3-1-1.js">
<p class="c1">P1
<p class="c1">P2
<p class="c1" id="d1">P3
<script>
//基本选择器
*所有
#id
.class
$("#d1").css("color","red") 操作P3
$(".c1").css("color",'red') 操作P1，P2,P3
$("p").css() P1，P2,P3
<div>DIV
$("#d1,div").css() 组合查找 P3,DIV
<div class="outer">
<div class="c2">
<div class="c3">DIV3
<p id="d2" class="c3">PPP
//组合选择器
$(".outer .c3") 后代选择器 DIV3,PPP
$(".outer>.c3") 子代
$(".outer+.c3") 毗邻
//基本筛选器
$(".c1:first") 取到第一个c1标签
$(".c1:last")
$(".c1:eq(1)") 取到第二个c1标签
eq范围
even奇数
gt(1)大于
随心所欲选择
属性选择器
<div egon="dog">egon
<div egon="dog" ale="dog2">egon
$("[egon]").css()
$("[egon="dog"]").css()
$("[egon][alex]").css() 一个筛选不出来就再加一个
表单选择器 只适用于表单标签
<input type="text">
$("[type="text"]").value("hello")
=$(":text").value("hello")
筛选器
过滤筛选器
$(".c1").eq(1).css()
var i=3 eq(i)用于使用变量方式筛选
$(".c1").first().css()
$("#d1").hasclass(c1) 有没有class值为c1的 返回true #用于if语句
查找筛选器
$("div").children(".text")
<div>
<p class="c1">P1
<p class="c1" id="d1">P2
<p class="c1">P3
<p class="c1">P4
<p class="c1" id="p6">P5
</div>
<p class="c1">P7
//向下查找
$("#d1").nextAll().css() 拿到d1标签后面的所有兄弟标签
$("#d1").next().css() 下一个兄弟标签元素
$("#d1").nextUntil("#p6").css() 开区间 从d1到p6范围
//向上查找
$("#p6").prev().css()
$("#p6").prevAll().css()
$("#p6").prevUntil().css()
//查找所有的兄弟标签
$("#d1").siblings().css()
//find children 查找所有的孩子标签
$(".outer").children().length() 孩子的个数，子代非后代
console.log($(".outer").children().length())
$(".outer").children(".c3") .c3的子代
children找儿子，子代
find找后代,只能针对条件性地取
$(".outer").find(".c3")
//找父标签
$("#d3").parent().css() 第一层父标签
$("#d3").parent().parent().css() 第二层父标签
$("#d3").parents().css() 所有父标签，一般使用不到
$("#d3").parentUntil(".outer").css() 开区间
标签操作
<script src="jquery-3-1-1.js">
文本操作
<p id="p1">PPP
<p class="c1">PPP1
<p class="c1">PPP2
<p class="c1">PPP3
<p class="c1">PPP4<a href="">click
事件绑定
<script>
//DOM对象转换为Jquery对象 $(DOM对象)
$("p").click(function () {
alert(123)
console.log($(this));
//取值操作
alert($(this).html()); 内容
alert($(this).text()); 文本
//赋值操作
$(this).html("hello world")
$(this).text("hello world")
$(this).text("<a>hello world</a>")
$(this).html("<a href="">hello world</a>") 有超链接
})
//class操作
<script src="jquery-3-1-1.js">
<p class="c1">P1
<p class="c1">P2
<p class="c1">P3
$("p")
$("p").addClass("c2") 添加标签c2
$("p").addClass("c3") 添加标签c3 有的话不会重复添加
$("p").removeClass("c3")
左侧菜单实例
<script>
$(".title").click(function () {
$(this).next().removeClass("hide");
$(this).parent().siblings().children(".con").addClass("hide");
})
<script>写成一行
$(".title").click(function () {
//jquery支持链式操作
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
})
一个作业：
表格操作，补上编辑。 编辑使用JS写
Jquery写表格的增删改
预习文档节点处理 https://6936986.html 表格增删改
$("")
浙公网安备 33010602011771号