JavaScript 与 jQuery 核心概念详解
JavaScript 基础语法
脚本引入方式
// 方式一：内联脚本
<script>
console.log('Hello World');
</script>
// 方式二：外部文件引用
<script src="main.js"></script>
数据类型与转换
JavaScript 包含以下基本类型：
- Number：不区分整型与浮点，支持正负数
- String：字符串类型
- Boolean：true 或 false
- undefined：未赋值变量的默认值
- null：表示空对象引用
使用 typeof 可检测变量类型。注意：null 的类型返回为 object。
类型转换方法
// 字符串转数字
let str = "123.45";
console.log(parseInt(str)); // 123
console.log(parseFloat(str)); // 123.45
console.log(Number(str)); // 123.45
// 数字转字符串
let num = 98.6;
console.log(num.toString()); // "98.6"
console.log(String(num)); // "98.6"
console.log("" + num); // "98.6"
强制与隐式类型转换
// 强制转换
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean("hello")); // true
// 隐式转换示例
console.log(1 + true); // 2 (true → 1)
console.log(5 - "2"); // 3 ("2" → 2)
console.log("Age: " + 25); // "Age: 25"
原始值 vs 引用值
原始类型（如 Number、String）存储在栈中，赋值时复制值本身；引用类型（如 Object、Array）的变量名指向堆中的实际对象。
// 原始类型独立
let a = "old";
let b = a;
a = "new";
console.log(b); // "old"
// 引用类型共享内存
let arr1 = [1, 2];
let arr2 = arr1;
arr1.push(3);
console.log(arr2); // [1, 2, 3]
运算符与条件表达式
// 比较运算符
console.log(5 == "5"); // true (仅值比较)
console.log(5 === "5"); // false (类型和值都比较)
// 逻辑运算符
console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false
// 三元操作符
let age = 17;
let status = age >= 18 ? "adult" : "minor";
流程控制结构
if-else 结构
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else {
grade = "C";
}
switch 语句
switch(day) {
case "Mon":
action = "Start week";
break;
case "Fri":
action = "Weekend soon";
break;
default:
action = "Normal day";
}
循环结构
// for 循环
for (let i = 0; i < 3; i++) {
console.log(i);
}
// for...of 遍历数组元素
for (const item of [10, 20, 30]) {
console.log(item);
}
// for...in 遍历对象属性或数组索引
for (const key in {x: 1, y: 2}) {
console.log(key);
}
// while 循环
let n = 0;
while (n < 3) {
console.log(n++);
}
数组操作
let fruits = ["apple", "banana"];
// 添加/删除元素
fruits.push("orange");
fruits.pop();
// 修改顺序
fruits.reverse();
// 排序（数值）
fruits.sort((a, b) => a - b);
// 查找与过滤
let evenNums = [2, 4, 6].filter(x => x % 2 === 0);
let doubled = [1, 2, 3].map(x => x * 2);
函数定义与调用
// 函数声明
function greet(name) {
return `Hello, ${name}`;
}
// 箭头函数
const multiply = (a, b) => a * b;
// 默认参数
function log(msg = "Default") {
console.log(msg);
}
字符串处理
let text = "JavaScript";
console.log(text.toUpperCase());
console.log(text.slice(0, 4));
console.log(text.split(""));
// ES6 模板字符串
let name = "Alice";
console.log(`Welcome, ${name}!`);
Date 对象
let now = new Date();
console.log(now.getFullYear());
console.log(now.getMonth() + 1); // 月份从0开始
console.log(now.getDate());
// 格式化输出
function formatTime() {
let d = new Date();
let weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} ${weekDays[d.getDay()]}`;
}
Math 工具方法
console.log(Math.max(1, 5, 3)); // 5
console.log(Math.random()); // 0~1 随机数
console.log(Math.round(2.6)); // 3
console.log((3.14159).toFixed(2)); // "3.14"
Object 与 JSON
let person = {
name: "Tom",
age: 25
};
// 遍历对象属性
for (let key in person) {
console.log(key, person[key]);
}
// JSON 序列化
let jsonStr = JSON.stringify(person);
let obj = JSON.parse(jsonStr);
BOM 浏览器对象模型
window 对象方法
alert("Message");
let confirmed = confirm("Proceed?");
let input = prompt("Enter value:", "default");
window.open("https://example.com", "_blank", "width=600,height=400");
定时器
// 延迟执行
let timerId = setTimeout(() => {
console.log("Delayed");
}, 1000);
clearTimeout(timerId);
// 重复执行
let intervalId = setInterval(() => {
console.log("Tick");
}, 1000);
clearInterval(intervalId);
Location 与 History
// 获取当前 URL 信息
console.log(location.href);
console.log(location.protocol);
console.log(location.pathname);
// 页面跳转
location.assign("https://google.com");
history.back();
history.forward();
本地存储
// 永久存储
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));
localStorage.removeItem("theme");
// 会话级存储
sessionStorage.setItem("tempData", "value");
DOM 文档对象模型
节点选择
document.getElementById("myId");
document.getElementsByClassName("myClass")[0];
document.getElementsByTagName("div");
// 使用 CSS 选择器
document.querySelector(".header");
document.querySelectorAll("p");
事件绑定
let btn = document.getElementById("btn");
// 动态绑定
btn.addEventListener("click", function(e) {
e.stopPropagation(); // 阻止冒泡
alert("Clicked!");
});
// 内联绑定（不推荐）
// <button onclick="handleClick()">
元素操作
let el = document.getElementById("box");
// 内容修改
el.innerHTML = "<b>Bold Text</b>";
el.textContent = "Plain text";
// 属性操作
el.setAttribute("data-id", "123");
el.removeAttribute("hidden");
// 样式控制
el.style.color = "red";
// 类名管理
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("visible");
节点增删改
// 创建新元素
let div = document.createElement("div");
div.textContent = "New Element";
// 插入到父节点
document.body.appendChild(div);
// 删除节点
div.parentNode.removeChild(div);
jQuery 入门
选择器
$("#myId") // ID 选择
$(".myClass") // 类选择
$("p") // 标签选择
$(".container p") // 后代选择
$(".parent > .child") // 子元素选择
$(".prev + .next") // 相邻兄弟
$(".start ~ .siblings") // 一般兄弟
筛选与遍历
$("div").first();
$("ul li").eq(2);
$("div").find(".inner");
$("span").parent();
$("li").siblings();
$("li").next();
DOM 操作
// 内容设置
$("#content").text("Hello");
$("#content").html("<i>Italic</i>");
$("#input").val("default");
// 节点插入
$("#parent").append("<p>New</p>");
$("#child").appendTo("#parent");
// 节点移除
$("#item").remove();
$("#item").empty(); // 清空子节点
事件处理
// 绑定事件
$("#btn").on("click", function() {
console.log("Button clicked");
});
// 解绑事件
$("#btn").off("click");
// 事件代理（适用于动态元素）
$("#list").on("click", "li", function() {
console.log("List item clicked:", $(this).text());
});
动画效果
$("#box").show(1000);
$("#box").hide(500);
$("#box").fadeIn();
$("#box").slideDown();
// 自定义动画
$("#box").animate({
left: "+=50px",
opacity: 0.5
}, 800, function() {
console.log("Animation complete");
});
CSS 控制
$("#element").css("color", "blue");
$("#element").css({
"font-size": "16px",
"margin-top": "10px"
});
// 类操作
$("#element").addClass("highlight");
$("#element").toggleClass("active");
