共计 3958 个字符，预计需要花费 10 分钟才能阅读完成。
js 是什么
js 是直译的语言 (没有编译的过程) 与 java 不同, 基于对象的语言(没有类的概念), 弱语言, 内置对象()
变量不辨别类型, 能够指向任意数据六类型
`var s=100;
s=”abc”;
s=ture;……
`
劣势:
良好的交互性
安全性(只在浏览器外部器)
跨平台:
(JS 语言是跨平台的，是因为有浏览器，但浏览器不跨平台
Java 语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )
数据类型(5 大):
1. 数据类型(number), 所有的数值在底层都是浮点型，然而在解决和显示的过程中会主动的和整型进行转换。例如：2.4+3.6=6
2 字符串类型(string), 字符串类型属于根本数据类型，字符串常量能够应用单引号或者应用双引号引起来。3 布尔类型(boolean):true 和 false
4undefined 类型值只有一个，就是 undefined，示意变量未定义
5 null 类型: 示意空值。空的对象。JS 中的数组能够存储任意类型的数据, 长度是能够被任意扭转的
var arr1 = [];
console.log("此处数组的长度为:"+arr1.length); // 0
arr1.length = 5;
console.log("此处数组的长度为:"+arr1.length); // 5
arr1[9] = "a";
console.log("此处数组的长度为:"+arr1.length); // 10
arr1[99] = "b";
console.log("此处数组的长度为:"+arr1.length); // 100js 获取元素
document 是一个对象, 用于示意以后 html 网页 document.getElementById(id 值) 通过元素的 id 值, 获取元素对象document.getElementsByTagName(元素名) — 通过元素名称获取以后文档中的所有指定名称的元素，返回的是一个数组，其中蕴含了所有指定名称的元素document.body — 获取以后文档中的 body 元素ele.parentNode — 获取以后元素的父元素。ele 示意以后元素
Js 增删改元素
document.createElement(元素名称) — 依据元素名称创立指定名称的元素，返回的是示意新创建元素的 js 对象parent.appendChild(child) — 通过父元素增加子元素，其中 parent 示意父元素，child 示意子元素parent.removeChild(child)— 通过父元素删除子元素，其中 parent 示意父元素，child 示意子元素ele.innerHTML= dateStr — 获取以后元素的 html 内容(从开始标签到完结标签之间的所有内容)，还能够设置以后元素的 html 内容(如果元素外部有内容，将会笼罩原有内容)
jQuery 简介
轻量, 收费开源的 js 函数库, 简化 js 代码引入 jq<script src="js/jquery-1.8.3.js"></script>
文档就绪事件函数: 整个 html 网页都被加载了, 最初才加载
<script src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1. 获取 id 为 demo 的 h1 元素
var h1 = document.getElementById("demo");
//2. 获取 h1 元素中的内容(innerHTML)
alert(h1.innerHTML);
});
</script>
</head>
<body>
<h1 id="demo">jQuery 的引入示例...</h1>
</body>
创立一个元素
var $tab = $("<table></teble") 创立 table 元素
$td.html("Hello TD~~"); 创立 td 元素, 并为 td 增加内容
$tr.append($td); // 将 td 增加到 tr 元素内
// 获取指定元素的值
js 中:
var rows = document.getElementById("rows").value;
jq 中:trim()去掉头尾空格
var id = $("#box1 input[name='id']").val().trim();根本选择器
(1)元素名选择器
$("div") -- 选中所有的 div 元素
$("span") -- 选中所有的 span 元素
(2)class/ 类选择器
$(".s1") -- 选中所有 class 值为 s1 的元素(class 值为 s1 的元素可能是任何元素)
$("span.s1") -- 选中所有 class 值为 s1 的 span 元素
(3)id 选择器
$("#one") -- 选中 id 为 one 的元素
(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的 div 元素, 以及所有的 span 元素, 以及所有 class 值为 s1 的元素, 以及 id 为 one 的元素层级选择器
$("div span") -- 选中所有 div 外部的所有 span 元素
$("#one span") -- 选中 id 为 one 的元素外部的所有 span 元素
$("#two+span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素
$("#two").next("span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素
$("#two").prev("span") -- 选中 id 为 two 的元素后面紧邻的 span 兄弟元素
$("#two~span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素
$("#two").nextAll("span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素
$("#two").prevAll("span") -- 选中 id 为 two 的元素后面所有的 span 兄弟元素
$("#two").siblings("span") -- 选中 id 为 two 的元素前、后所有的 span 兄弟元素根本过滤选择器
(1) 选中第一个 div 元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2) 选中最初一个 div 元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
(3) 选中第 n + 1 个 div 元素(n 从零开始)
$("div:eq(n)")
$("div").eq(n)全选或不选
function checkAll(){//1. 获取全选复选框的选中状态( 选中(true)? 没选中(false)? )
var isCheck = $("#all").prop("checked"); //true|false
//2. 获取所有一般复选框, 将全选框的选中状态设置给所有一般复选框
$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}html 元素内容和值的操作
$("div").html() -- 获取所有 div 中的第一个 div 的内容
$("div").html("xxxx") -- 为所有 div 设置内容
$("div").text() -- 获取所有 div 中的所有文本内容
$("div").text("xxxx") -- 为所有 div 设置文本内容
$("input").val() -- 获取所有 input 元素中的第一个 input 元素的 value 值
$("input").val(值) -- 为所有的 input 元素设置 value 值
prop 一个取, 两个赋
$("input[type='checkbox']").prop("checked")
-- 获取 input 复选框的选中状态, 返回 true 示意复选框为选中状态, 返回 false 示意复选框为勾销选中状态
$("input[type='checkbox']").prop("checked", true)
-- 设置所匹配的复选框元素为选中状态
$("#inp").prop("name"); // 获取 id 为 inp 元素的 name 属性值, 返回 useranme
$("#inp").prop("name","user"); // 为 id 为 inp 的元素设置 name 属性值, name 属性值就会变成 user
each()函数 遍历
show() -- 设置元素由暗藏变为显示
hide() -- 设置元素由显示变为暗藏
toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为暗藏, 否则切换为显示
slidToggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为暗藏，否则切换为显示，切换为显示为下拉状态，暗藏为膨胀状态。为元素绑定点击事件
js 的绑定点击事件:
<script>
function fn(){alert("input 按钮被点击了...");
}
</script>
<body>
<input onclick="fn()" type="button" value="点我~!" />
</body>
// 第二种
<script>
window.onload = function(){
// 获取 id 为 btn 的元素
var btn = document.getElementById("btn");
btn.onclick = function(){alert("input 按钮被点击了...");
}
}
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>
jq 中事件点击事件
<script>
$(function(){
// 当点击 btn 按钮时, 触发点击事件执行其中的函数
$("#btn").click(function(){alert("input 按钮被点击了...");
});
});
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>
