本文深入探讨了JavaScript和jQuery在网页开发中的应用，包括使用let声明变量、原生JS操作DOM、控制元素显示隐藏、判断元素属性、字符串匹配、HTTP请求、时间处理、事件触发，以及二叉树数据结构的实现与操作。
文章目录
document
let
使用 let 声明的变量，在声明前无法使用，否则将会导致错误。
如果未在 let 语句中初始化您的变量，则将自动为其分配 JavaScript 值 undefined
原生js的document
- 获取id为xxx的元素
var toolbox = document.getElementById("catKeywordGroups");
- 创建按钮 内容为CLICK ME
var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
- 用户点击时执行方法
function myUpdateFunction() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
console.log(code);
var xml = Blockly.Xml.workspaceToDom(workspace);
console.log(xml);
}
document.getElementById('showButton').addEventListener("click", myUpdateFunction);
原生js控制div显示隐藏
利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。
方法一：
document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";
利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。
方法二：
document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";
利用上述方法实现隐藏后，页面的位置不被占用。
判断元素是否含有属性
1、element.hasAttribute(‘属性名’); 如果存在指定属性，则返回 true，否则返回 false。ie8及以下不支持
如下：
<div id="box" class="classa">这是一个段落</div>
<script>
var box=document.getElementById("box");
var attr=box.hasAttribute('class');
var attr2=box.hasAttribute('onclick');
console.log(attr); //true
console.log(attr2); //false
</script>
2、element.hasAttributes(); //在某节点有任何属性时返回 true，否则返回 false。
<div id="box" class="classa">这是一个段落</div>
<script>
var box=document.getElementById("box");
var attr=box.hasAttributes();
console.log(attr); //true
</script>
js判断包含字符串
https://www.cnblogs.com/ooo0/p/7741651.html
jquery
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示： 除此之外，Jquery还提供了大量的插件。
校验
引入jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<h1>hello</h1>
</body>
</html>
HTTP 请求：GET vs. POST
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
get
$("button").click(function(){
$.get("urlurl",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
post
$("button").click(function(){
var fromData = "{name:'name',url:'http://www.111.com'}";
$.post('${base}/pub/chapterapply/seal/'+getApplyNo(),fromData,
function(data,status){
alert("数据: \n" + data.success + "\n"+data.msg+"状态: " + status);
});
});
1.验证开始时间小于结束时间
2.将当前时间填入input,div
<script>
window.onload = function(){
function getDate(){
debugger;
var today = new Date();
var date;
date = (today.getFullYear()) +"-" + (today.getMonth() + 1 ) + "-" + today.getDate() + "-" + today.toLocaleTimeString();
return date;
}
window.setInterval(function(){
document.getElementById("getBookTime").value=getDate();
}, 1000);
}
</script>
jQuery-事件-ready() 方法
在文档加载后激活函数
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
//使用滑动效果（高度变化）来切换元素的可见状态
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>
-
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
-
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
-
ready() 函数规定当 ready 事件发生时执行的代码。
-
ready() 函数仅能用于当前文档，因此无需选择器。
提示：ready() 函数不应与 <body οnlοad=""> 一起使用。
二叉树
二叉排序树（Binary Sort Tree），又称二叉查找树（Binary Search Tree），亦称二叉搜索树。
结构图
涉及功能
- 插入操作
- 中序遍历(左根右/按顺序输出)
- 前序遍历(根左右/复制二叉树)
- 后序遍历(左右根)
- 查找算法(查找效率高)
- 找最小值(最左边叶子节点),最大值(最右叶子节点)
- 删除节点
源码
<!DOCTYPE html>
<html>
<head>
<title>Binary Tree</title>
</head>
<body>
<script type="text/javascript">
function BinaryTree(){
//二叉树结构
var Node = function(key){
this.key = key;
this.left = null;
this.right = null;
};
//定义根节点
var root = null;
//插入==========================
this.insert = function(key){//接口
var newNode = new Node(key);
if (root == null){
root = newNode;
} else {
insertNode(root, newNode);
}
};
var insertNode = function(node, newNode){
//如果新节点值小于老节点
if (newNode.key < node.key){
if (node.left === null){
node.left = newNode;
}else {
insertNode(node.left, newNode);
}
} else {//如果新节点值大于老节点
if (node.right === null){
node.right = newNode;
}else {
insertNode(node.right, newNode);
}
}
};
//插入end=====================
//中序遍历==========================
var inOrderTraverseNode = function(node, callback){
if (node !==null){
inOrderTraverseNode(node.left, callback);
callback(node.key);
inOrderTraverseNode(node.right, callback);
}
}
this.inOrderTraverse = function(callback){//接口
inOrderTraverseNode(root, callback)
}
//中序遍历end==========================
//前序遍历==========================
var preOrderTraverseNode = function(node, callback){
if (node !==null){
callback(node.key);
preOrderTraverseNode(node.left, callback);
preOrderTraverseNode(node.right, callback);
}
}
this.preOrderTraverse = function(callback){//接口 回调函数作为参数
preOrderTraverseNode(root, callback)
}
//前序遍历end==========================
//后序遍历==========================
var postOrderTraverseNode = function(node, callback){
if (node !==null){
postOrderTraverseNode(node.left, callback);
postOrderTraverseNode(node.right, callback);
callback(node.key);
}
}
this.postOrderTraverse = function(callback){//接口 回调函数作为参数
postOrderTraverseNode(root, callback)
}
//后序遍历end==========================
//查找最小值==========================
this.min = function(){
return minNode(root);
}
var minNode = function(node){
if (node){
while(node && node.left !== null){
node = node.left;
}
return node.key;//返回数值
}
return null;
}
var findMinNode = function(node){//返回对象
if (node){
while(node && node.left !== null){
node = node.left;
}
return node;
}
return null;
}
//查找最小值end==========================
//查找最大值==========================
this.max = function(){
return maxNode(root);
}
var maxNode = function(node){
if (node){
while(node && node.right !== null){
node = node.right;
}
return node.key;
}
return null;
}
//查找最大值end==========================
//查找值是否存在==========================
this.search = function(key){
return searchNode(root, key);
}
var searchNode = function(node, key){
if (node === null){
return false;
}
if (key < node.key){
return searchNode(node.left, key);
} else if (key > node.key){
return searchNode(node.right, key);
} else {
return true;
}
}
//查找值是否存在end==========================
//删除节点==========================
this.remove = function(key){
root = removeNode(root, key);
}
var removeNode = function(node, key){
if (node === null){
return null;
}
if (key < node.key){
node.left = removeNode(node.left, key)
return node;
} else if (key > node.key){
node.right = removeNode(node.right, key);
return node;
} else {
if (node.left === null && node.right === null){
node = null;
return node;
}
if (node.left === null){//只有右子树
node = node.right;
return node;
} else if (node.right === null){
node = node.left;
return node;
}
//含有两个孩子节点
var aux = findMinNode(node.right);//找到右子树最小节点(最左节点)
node.key = aux.key;//最小值赋值给当前node
node.right = removeNode(node.right, aux.key);//从右子树中删除旧节点
return node;
}
}
//删除节点end==========================
}
//数组
var nodes = [8, 3, 10, 1, 6, 14, 4, 7, 13];
//构造二叉树
var binaryTree = new BinaryTree();
nodes.forEach(function(key){
binaryTree.insert(key);
});
//回调函数
var callback = function(key){
console.log(key);
}
console.log("中序遍历");
binaryTree.inOrderTraverse(callback);
//console.log("前序遍历");
//binaryTree.preOrderTraverse(callback);
//console.log("后序遍历");
//binaryTree.postOrderTraverse(callback);
console.log("min :" + binaryTree.min());
console.log("max :" + binaryTree.max());
console.log("1 is have :" + binaryTree.search(1));
console.log("9 is have :" + binaryTree.search(9));
binaryTree.remove(4);
binaryTree.inOrderTraverse(callback);
</script>
</body>
</html>
额外:
==和===区别
https://www.cnblogs.com/baizhanshi/p/4604257.html
扫一扫
4477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
