JavaScript是一种解释性脚本语言(代码不进行预编译)
1.为网页添加各式各样的动态功能
2.为用户提供流畅美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能。
在HTML页面中的脚本必须位于script围堵标签之间，标签放在head中、body中或是放在最后都可以，对位置要求不严格。
外部JavaScript文件的文件扩展名是.js(多个网页引用，写在外部)。
外部脚本不能包含script标签
函数function f1(){ alert("内容")；}
在HTML中通过<script type="text/javascript" src="" />调用
标签属性中的js：<a href="javascript:alert(‘ok’)">内容显示</a>
引号嵌套：外单内双/外双内单
JavaScript注释：单行注释以//开头；多行注释以/*开始，以*/结束。
JavaScript声明(所有)变量的关键字：var
变量必须以字母、$或_开头，不能使用关键字保留字
变量名称对大小写敏感（y和Y是不同的变量）
局部变量会在函数运行以后被删除/全局变量会在页面关闭以后被删除。
JavaScript的对象：JavaScript将浏览器窗口拆分成不同的对象来表示，各个对象管理的内容也不一样。
window 表示整个窗体
history 表示历史记录
location 表示访问地址
document 表示页面中的元素对象(文档)
window方法：带有确定按钮的弹窗 .alert("内容")；/可以接收用户输入的信息，带有确定和取消两个按钮 .prompt("提示性文字"，"输入框的提示性文字")；/ .confirm("提示信息")；
window对象是js操作过程中最大的对象，因此可以省略window前缀。
history方法：等同于浏览器的后退按钮 .back()；/.go(-1)；/等同于浏览器的向前按钮 .forward()；/.go(1)；
location方法：刷新 .reload()；/跳转 .replace(‘url地址’)；
location.href="请求地址"；通过js跳转到某个请求地址，功能类似于a标签
document方法：向浏览器端输出代码 .write("输出内容")；/通过id定位到某个页面元素 .getElementById("id名")；
注意：xxxx is not defined 表示该变量未被声明
undefined 指该变量未初始化
绝对不要在文档(DOM)加载完成之后使用document.write()，否则会覆盖该文档。
document.getElementById("id名").value；获得对应id的value值，如果在value后加等号赋值，则表示修改值(表单元素用)。
document.getElementById("id名").innerHTML/innerText="内容"；用来操作标签对中间的文本信息，既可以获得值，也可以修改值(成对出现用)。
document.getElementById("id名").style.property=新样式；
document.getElementById("id名").checked；获得被点击的复选框的状态。
JavaScript自定义对象
var student = { name="张三"；age=20；info：function(){匿名函数写方法}；
JS调试：alert()弹窗，查看代码的执行环节；使用浏览器自带的bug调试工具(按F12)，重点关注两个地方：network(网络)和console(控制台)。
字符串方法：通过下标找字符 charAt(下标)；通过字符找下标 indexOf("字符")；
截取字符串 substring(begin,end)；包含开始位置，不包含结束位置；
分割字符串 split("分割的依据")；返回值是数组。
数组方法：增强循环 for(var i in names){
//in前面的变量只能获取到数组的下标
alert(i+","+names[i])；}
=== 绝对等于(值和类型都相同) !== 绝对不等于(任意一个或两个都不相等)
JavaScript的Array对象中length是属性不是方法。
var num = Math.random()；返回0~1之间的随机数 Math.max/min()；
全局属性NaN：非数值。
console.log(isNaN(666))；//返回false
console.log(parseFloat(String))；解析字符串，返回浮点数
若第一个字符不为数字，则返回NaN；两数之间存在空格，只打印空格前的值。
HTML事件是发生在HTML元素上的事情；在HTML页面中使用JavaScript时可以触发这些事件。
onclick单击事件 onmouseover鼠标放上 onmouseout鼠标离开
onfocus获得焦点 onblur失去焦点 onkeydown键盘按下
onchange当内容被改变时 onload页面加载完毕 onsubmit确认按钮被点击
操作页面属性的语法：
元素对象.getAttribute("属性名")； 获得某个属性的值
元素对象.setAttribute("属性名"，"属性值")；设置某个属性的值
动态时间：var flag = setInterval("显示时间的函数"，毫秒数)；
function stop(){
//清除定时器
clearInterval(flag)； }
省市级联(二级联动)
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function get() {
var shi = document.getElementById("s").value;
var qu = document.getElementById("q");
if(shi == -1) {
alert("请先选择市的信息");
} else {
qu.length = 0;
switch(shi) {
case "bj":
qu.add(new Option("海淀", "hd"));
qu.add(new Option("朝阳", "cy"));
qu.add(new Option("昌平", "cp"));
break;
case "gz":
qu.add(new Option("越秀", "yx"));
qu.add(new Option("天河", "th"));
qu.add(new Option("白云", "by"));
break;
case "fs":
qu.add(new Option("禅城", "cc"));
qu.add(new Option("南海", "nh"));
qu.add(new Option("顺德", "sd"));
break;
}
}
}
</script>
</head>
<body>
<select id="s" οnchange="get()">
<option value="-1">请选择</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="fs">佛山</option>
</select>市
<select id="q">
<option>请选择</option>
</select>区
</body>
表单验证：表单数据在提交前需要先做数据有效性验证。
目的：1、保证提交给服务器的数据是有意义的
2、减轻服务器端的压力
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function test1() {
var us = document.getElementById("user").value;
//tirm()去除空格
if(us.trim().length == 0) {
document.getElementById("testus").innerText = "请输入用户名";
return false;
} else {
if(us.trim().length < 8 || us.trim().length > 12) {
document.getElementById("testus").innerText = "用户名的长度为8-12位";
return false;
}
}
document.getElementById("testus").innerText = "√";
return true;
}
function test2() {
var up = document.getElementById("upass").value;
if(up.trim().length == 0) {
document.getElementById("testup").innerText = "请输入密码";
return false;
} else {
if(up.trim().length < 6 || up.trim().length > 8) {
document.getElementById("testup").innerText = "密码的长度为6-8位";
return false;
}
}
document.getElementById("testup").innerText = "√";
return true;
}
function testall() {
if(test1() && test2()) {
return true;
}
alert("表单有误!");
return false;
}
</script>
<style type="text/css">
span { color: red; }
</style>
</head>
<body>
<form action="index.html" method="get" οnsubmit="return testall()">
用户名：<input type="text" id="user" οnblur="test1()" />
<span id="testus"></span><br />
密码：<input type="password" id="upass" οnblur="test2()" />
<span id="testup"></span><br />
<input type="submit" value="提交" />
</form>
</body>
---------------------------------------------------------------------------------------------------------------------
<body>
<button type="button" οnclick="createNewP()">动态添加一个元素</button>
<div id="div1"><p id="p1">段落1</p></div>
</body>
<script>
function createNewP(){
//创建一个新的段落元素
var newElementP = document.createElement("p")；
//创建一个新的节点
var text = document.createNode("")；
//将新的节点添加到新创建的段落元素中
newElementP.appendChild(text)；
var div = document.getElementById("div1")；
//Var p1 = document.getElementById("p1")；
//添加新元素newElementP到已存在的元素div中，并插入到段落P1前面
//div.inserBefore(newElementP，p1)；
div.appendChild(newElementP)；
}
</script>
替换元素replaceChild()；删除元素removeChild()；
RegExp正则表达式
var reg = new RegExp(/正则表达式主体/，修饰符(可选))；
^匹配输入字符串的开始位置 $匹配输入字符串的结束位置
表达式：中文字符的范围[\u4e00-\u9fa5]、查找方括号之间的任何字符[a-z]、查找任何从0至9的数字[0-9]、(x|y)先尝试匹配|左边的表达式，匹配成功则跳过右边的表达式，否则尝试匹配|右边的表达式。
修饰符：i执行对大小写不敏感的匹配/m执行多行匹配/g执行全局匹配（查找所有匹配，而非在找到第一个匹配后停止）。
元字符：\d数字 \D非数字 \s空白字符 \S非空白字符 \b匹配单词边界 \w单词字符 \W非单词\uxxxx查找以十六进制数xxxx规定的Unicode字符
量词：+ 匹配前一个字符至少一次、* 匹配前一个字符多次，包含零次、? 匹配前一个字符零次或一次、{m}匹配前一个字符m次、{m，n}匹配前一个字符m至n次。
正则表达式的方法test(" ") 用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false。
验证：年龄在0-120之间 /^120$|^((1[0-1]|[1-9])?\d)$/
jquery是JavaScript的一个函数库，也是目前最流行的JS框架。
jquery的作用：页面特效、表单验证和异步请求。
jquery的语法：
1、在使用jquery之前，需要先引入封装的js文件
<script type="text/javascript" src="jquery文件引入的位置"></script>
<script type="text/javascript">内容</script>
2、jquery的代码是使用预编译(提前编译好)，需要先定义jquery代码编写的位置。
格式一：$(document).ready(function(){ //代码编写的位置 })；
格式二：$(function(){ //代码编写的位置 })；
3、语法基础 $("选择器").函数名()； 选择器与CSS的选择器相通。
鼠标事件：将js中on事件的on关键字去掉，剩下的就变成了函数。
键盘事件：
$(document).keydown(function(mykey){
//mykey是自定义的参数名，代表的是被按下的键
if(mykey.keyCode==13){
//回车键值是13 换行键值是10(Ctrl+Enter)
var rs = confirm("确认提交表单吗？")
if(rs == true){
//提交表单
//js实现表单提交的方式
document.getElementById("myform").submit()；
//jquery实现表单提交
$("#myform").submit()；
//通过表单数组提交
document.form[0].submit()；
}else{
alert("取消提交")；
}
}
})；
$(this).css()；this表示修改当前选中标签的样式
js对象和jquery对象的互相转换：
js->jquery
$(function(){
var getstr = document.getElementById("getstr")；
var jquerystr = $(getstr)；
jquerystr.click(function){
alert("按钮被点击了")；
}
})；
jquery->js jquery对象[0]
$("#getstr").click(function(){
//获得文本框的信息
var str = $("#str")[0].val；
alert(str)；
})；
控制台上显示为[Object object]表示jquery对象，将js对象转换为jquery对象可通过console.log($(js对象))；
window.onload只能执行一次，如果执行第二次，第一次的执行会被覆盖，而且必须等待网页全部加载完毕后(包括图片等)再执行包裹的代码。
$(function(){ })；可执行多次，不会覆盖之前的执行，只需要等待网页中的DOM结果加载完毕就可以执行包裹的代码。
属性选择器：
$("[属性1][属性2][属性3]")获取同时满足多个属性的元素
$("[属性名^=value]")获取以value属性值为开头的元素
$("[属性名$=value]")获取以value属性值为结尾的元素
$("[属性名*=value]")获取包含指定value值的元素
基本过滤选择器：$("标签：:first选择第一个元素/:last选择最后一个元素/:even选择下标为偶数的元素/:odd选择下标为奇数的元素/:eq(下标)等于指定下标的元素/:gt(下标)大于指定下标的元素/:lt(下标)小于指定下标的元素/:not(选择器)除该选择器以外的元素被选中")；
可见性选择器：$("标签：visible可见/hidden不可见")；
相邻选择器$("label + input")；label标签只是用来显示的。
同辈选择器$("form ~ input")；
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var rs_a = false;
var rs_b = false;
$(function() {
//1.验证用户名
$("#user").blur(function() {
var u = $(this).val();
if($.trim(u).length == 0) {
$("#testus").html("请输入用户名");
rs_a = false;
} else if($.trim(u).length < 8 || $.trim(u).length > 12) {
$("#testus").html("用户名的长度为8-12位");
rs_a = false;
} else {
$("#testus").html("√");
rs_a = true;
}
});
//2.验证密码
$("#upass").blur(function() {
var p = $(this).val();
if($.trim(p).length == 0) {
$("#testup").html("请输入密码");
rs_b = false
} else if($.trim(p).length < 6 || $.trim(p).length > 8) {
$("#testup").html("密码的长度为6-8位");
rs_b = false
} else {
$("#testup").html("√");
rs_b = true;
}
});
//3.防止用户直接点击提交按钮
$("form").submit(function() {
if(（rs_a == true） && （rs_b == true）) {
document.forms[0].submit();
} else {
alert("表单有误");
return false;
}
});
});
</script>
<style type="text/css">
span { color: red; }
</style>
</head>
<body>
<form action="index.html" method="get">
用户名：<input type="text" id="user" />
<span id="testus"></span><br />
密码：<input type="password" id="upass" />
<span id="testup"></span><br />
<input type="submit" value="提交" />
</form>
</body>
//1、与内容相关的函数
function textFun(){
//获取第一个匹配元素中的所有内容，包括嵌套在内部的标签
//html()等价于innerHTML
var str1=$("div").html()；
console.log(str1)；
//获取第一个匹配元素中的所有文本，不包含标签的内容
var str2=$("div").text()；
console.log(str2)；
//val()等价于js中的value属性，只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
var str3=$("div").val()；
//input是表单项元素，val()可以获取到
var str4=$("input").val()；
console.log(str3)；
console.log(str4)；
}
//2、与属性相关的函数
function attrFun(){
var img=$("img")；
//设置属性
img.attr("src","img/cat.jpg")；
img.attr("title","不服！")；
//移除属性
img.removeAttr("title")；
//获取属性
var src=img.attr("src")；
var title=img.attr("title")；
//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
var list=$("input[type='radio']")；
for(var i=0;i<list.length;i++){
var flag=$(list[i]).prop("checked")；
console.log("checked="+flag)；
}
}
//3、与css相关的函数
function cssFun(){
//给获取的元素添加、删除、切换已有的样式，注意：样式一定是在样式表中提前定义好的
$("div").addClass("样式")；
$("div").removeClass("样式")；
//没有参数的时候直接移除所有的样式
$("div").removeClass()；
//匹配元素如果有当前的样式就删除，如果没有就添加
$("div").toggleClass("样式")；
//给所有的元素添加样式，样式直接添加，无需提前定义
$("input").css("border-color","blue")；
$("input").css({"color":"red","border-color":"green"})；
}
append()；在被选元素的结尾插入内容 before()；在被选元素之前插入内容
prepend()；在被选元素的开头插入内容 after()；在被选元素之后插入内容
元素的克隆：$(selector).clone(true/false).appendTo("div")；
将所有匹配的元素替换成指定的HTML或DOM元素：replaceWith()；
将匹配的元素替换掉所有selector匹配到的元素：replaceAll()；
remove()；删除被选元素(及其子元素) empty()；从被选元素中删除子元素
$(selector).hide隐藏([speed，callback])；
$(selector).show展示([speed，callback])；
$(selector).toggle切换([speed，callback])；
可选的speed参数可以取以下值："slow"、"fast"或毫秒值。
可选的callback参数是隐藏或显示完成后所执行的函数名称。
fadeIn淡入/fadeOut淡出/fadeToggle切换/sideDown下滑/sideUp上滑
bootstrapt的使用(迅速美化页面)：
1.必须先引入bootstrapt的支持，包括js、css、font文件。
2.引入的文件必须先有jquery的核心文件，再引入bootstrapt的js文件，最后引入自己的文件。
3.css文件必须先引入bootstrapt的css文件，再引入自己的文件。
font文件无需在页面上引入，但是需要在项目的目录中存在。
扫一扫
6092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
