黑马程序员Javascript学习
Javascript是一种在浏览器端执行的语言，不用和服务器交互就可以实现网页的一些变化。JavaScript是一种解释型语言，不需要编译就可以随时运行。
Javascript是一种弱类型的语言，不需要指明变量类型，会自动的判断变量类型。声明变量类型都使用var。可以使用双引号或者单引号声明字符串。
Javascript动态创建的元素，搜索引擎捕捉不到，所以可以不需要动态创建的地方就不要动态创建。
<script type="text/javascript" src="链接地址"></script>//引用外部javascript代码
<a href="javascript:alert('Hello')">超链接</a>//超链接中的javascript代码
<body onload="alert('当页面加载完后触发')">//body标签的onload事件会在页面全部加载完后触发
<button onclick="navigate('http://www.baidu.com')">首页</button>//导航到指定的网页，火狐不支持
<button onclick="window.location.href='http://www.baidu.com'">转到新页面</button>//和navigate()方法的效果相同
<button onclick="window.location.reload()">刷新页面</button>//刷新当前页面
<input type="submit" value="注册" onclick="alert('信息不完整，无法提交！'); return false;"/>//在表单验证时禁止提交表单到服务器
<input type="button" onclick="document.forms[0].submit();" value="提交表单" />//手动触发表单验证
<input type="button" value="屏幕信息" onclick="alert('宽：'+window.screen.width+' 高：'+window.screen.height)"/>//获取屏幕的信息
<form action="指定页面链接"></form>//将表单数据发给指定页面
<form id="Form1" runat="server"></form>//将表单数据发给服务器
window.history.forward(); //操作历史记录，前进 window.history.back(); //后退 var div = document.getElementById("DivID");//通过获取元素Id操作元素 var radio = document.getElementsByName("Vocation"); //通过获取元素的name操作元素，通常需要操作一组元素的时候使用 var input = document.getElementsByTagName("input"); //通过获取元素的标签名称操作元素，通常需要操作一组元素的时候使用 document.getElementById("DivID").innerHTML = "<h1>Demo</h1>"; //标签内，内容的HTML源码表示形式 document.getElementById("TextareaID").value = "Demo"//标签内，内容的文本表示形式，innerText：IE支持，火狐等不支持; window.document.title = "页面标题改变了！"; //设置页面标题
动态创建元素、添加元素和设置属性：
function Method() { var input = document.createElement("input"); //创建元素 input.setAttribute("type", "button");//设置属性 input.setAttribute("value", "创建元素"); input.setAttribute("class", "face"); document.body.appendChild(input); //添加元素 } function ChangeFont() { var p = document.getElementsByTagName("p"); //获取页面上所有的p标签 p.item(0).className = "face"; //设置第一个p标签的class属性 }
alert()：警告框。confirm:确认框。prompt：消息框。
var result = confirm("点击确认可以得到人民币！");//确认框返回了bool值 if (result) { alert("你得到了人民币！");//警告框弹出消息 } result = prompt("请输入你的姓名！", "");//消息框返回了输入的消息 alert("你的姓名是：" + result);
事件冒泡：事件由内向外依次执行
<div onclick="alert('div点击事件')"><span onclick="alert('span点击事件')"><strong onclick="alert('strong点击事件')">事件冒泡</strong></span></div>
使用document读取元素的width、height等属性时，读出来的是像"10px"这样的字符串。
使用document动态设置元素的width、height等属性时，可以使用parseInt将"10px"这样的字符串解析成10，然后进行四则运算等。
var width = document.getElementById("Demo").style.width; alert(parseInt(width));
在javascript中没有类的语法，只有对象
function Person(name, age) { this.Name = name; //声明对象的成员的值等于传进来的参数 this.Age = age;//对象的成员就是以对象的key的方式出现的 this.Say = function() { alert("大家好，我叫" + this.Name + ",今年" + this.Age + "岁") }; } p1 = new Person("张耕明", 26); //这里必需要使用new以后才可以像操作一个对象一样操作这个方法 p1.Say();
数组的初始化：
var arr = [1, 2, 3, "天", "地", "人"]; //普通数组初始化 var arr1 = { "姓名": "张耕明", "年龄": "28", "性别": "男" }; //键值对数组初始化 for (var i in arr) { //在javascript中这样写遍历的是数组的key alert(arr[i]); //获取该key上的value } 区 分： foreach (string str in nickname) //C#中foreach遍历的是数组的值 { Console.WriteLine("绰号：" + str); } 查看对象所有的成员或者属性： for (var v in document) { alert(v); //对象的成员就是以对象的key的方式出现的 }
Array 对象的使用：
var arr = new Array(); //动态数组，不需要指定数组的大小 arr[0] = "吃饭"; arr["晚上"] = "睡觉"; arr[-1] = "武术"; arr[1] = "玩电脑"; arr[0.1] = "锻炼"; arr.reverse();//元素反转 for (var i in arr) { alert(i + " " + arr[i]); }
setInterval(重复执行的定时器)、setTimeout(等待一段时间后执行一次的定时器)。
清除setInterval类型的定时器时用clearInterval()方法，清除setTimeout类型的定时器时用clearTimeout()方法。
var interval; //为定时器设定一个标识、编号。 function Start() { interval = setInterval("Method('Hello Javascript！')", 3000); //执行有参数的方法，每隔3秒执行一次 interval = setInterval("Method()", 3000); //执行没有参数的方法 interval = setTimeout("Method()", 3000); //3秒后执行一次指定的方法 } clearInterval(interval); //清除定时器时传入指定的定时器编号
剪贴板操作：
function SetClipboard() { var text = document.getElementById("Text").innerHTML; text = text + "本文章来自：" + window.location.href; if (window.clipboardData) { //这个属性支持IE，不支持火狐 window.clipboardData.setData("text", text);//设置剪贴板内容和 oncopy 事件不能同时进行，需要延时 } } <p id="Text" oncopy="setTimeout('SetClipboard()',100);" >剪贴板操作！</p>
标题滚动：
function ScrollTitle() { var title = document.title; var first = title.charAt(0); var last = title.substring(1, title.length); document.title = last + first; } function Start() { setInterval("ScrollTitle()", 300); }
正则表达式：
//用圆括号将所有选择项括起来，相邻的选择项之间用|分隔。但用圆括号会有一个副作用，是相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。 ^：匹配输入字符串的开始位置。例：^\d。 $：匹配输入字符串的结束位置。例：\d$。 *：匹配零次或多次。例：\d*。等价于{0,}。 +：匹配一次或多次。例：\d+。等价于{1,}。 ?：匹配零次或一次。例：\d?。等价于{0,1}。 {n}：匹配n次。例：\d{2}。 {n,}：匹配至少n次。例：\d{2,}。 {n,m}：匹配至少n次，最多m次。例：\d{1,2}。 \d：匹配数字字符。等价于[0-9]。 \D：匹配非数字字符。等价于[^0-9]。 \n：匹配换行符。等价于\x0a。 \t：匹配制表符。等价于\x09。 \s：匹配任何空白字符，包括空格、制表符、换页符等。 \S：匹配任何非空白字符。 \w：匹配数字、字母和下划线。等价于[A-Za-z0-9_]。 \W：匹配非数字、字母和下划线。等价于[^A-Za-z0-9_]。 [\u4e00-\u9fa5]：匹配汉字。例：[\u4e00-\u9fa5]或[汉字]。 ?：：后向引用，表示忽略相关匹配的保存。例：^(?:(?:[1-9])|(?:[1-2][0-9])|30|31)$。
Javascript中使用正则表达式：
var reg = /^\w{0,9}$/;//正则表达式 var bl = reg.test("123");//返回bool值 var result = reg.exec("123");//返回字符串
JQuery学习
JQuery简介：
JQuery是对Javascript封装的库，其内部是一些Javascript函数。
JQuery采用链式编程，都是用方法来取值或者赋值，所以可以一直点下去。
普通Javascript的缺点：在一些不同浏览器下需要不同的实现方法，要编写跨浏览器的程序非常麻烦。
JQuery优点：JQuery占用空间少，使用简单方便（Write less, Do more），跨浏览器兼容性好，插件丰富、开源、免费。
JQuery中ready的多次注册：
jQuery(document).ready(Demo); /*传入当DOM就绪后要执行的函数*/ function Demo() { alert("这是一次演示！"); } $(document).ready(function () { alert("这是匿名的函数"); }); /*尽量使用匿名函数，可以避免命名冲突 */ $(function () { alert("这样也可以！") }); /*这是ready注册函数的简写*/ window.onload = function () { alert("DOM元素、CSS、图片等DOM元素的属性加载完毕后触发"); } window.onload = function () { alert("后来的替代了先来的！"); /*window.onload只能注册一次，后注册的函数会覆盖先注册的函数*/ }
JQuery提供的函数：
/*调用map函数对传入的数组中的元素逐个进行处理，然后将处理后的元素返回*/ var arr = [1, 3, 5, 2, 4, 6]; var newArr = $.map(arr, function (element) { /*第一个参数代表传入的数组，第二个参数中的element代表数组中的每一个元素*/ if (element % 2 == 0) { return element + 5; } else { return element; /*使用map函数需要提供返回值*/ } }) /*调用each函数对传入的数组中的元素逐个进行处理。*/ var arr1 = { "动漫1": ["海贼王", "路飞"], "动漫2": ["火影忍者", "鸣人"], "电影": ["功夫", "周星驰"] }; $.each(arr1, function(key, value) { /*第二个参数中的key和value代表数组中的键和值*/ alert("这里是" + key + "频道。\n" + "正在播放" + value[0] + ",主角：" + value[1]); })/*使用 $.each()函数不需要提供返回值*/ //在每一个匹配元素的submit事件中绑定一个处理函数。 $("#Btn").submit(function() { return false; }) $("#Btn").unbind("submit"); //bind()的反向操作，从每一个匹配的元素中删除绑定的事件。 //禁止表单提交 $("#BtnSubmit").click(function() { return false; })
JQuery动画效果：
$(element).show()、$(element).hide()，显示和隐藏。
$(element).slideUp()、$(element).slideDown()、$(element).slideToggle()，滑动效果。
$(element).fadeIn()、$(element).fadeOut()、$(element).fadeTo()，淡入淡出效果。
$(element).animate()，自定义动画。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）
$("#Button").click(function() {
$("#Div3").animate({
width: "30px",
height: "100px",
fontSize: "100px"
}, 3000);
})
//鼠标跟随效果
$(document).mousemove(function (e) {
$("p").css({ position: "absolute", left: e.pageX, top: e.pageY }); /*e.pageX和e.pageY分别代表鼠标在页面上的X坐标和Y坐标*/
})
JQuery基本选择器：
$(".style") /*选择class属性是style的所有元素*/
$("#Div input") /*选择id是"Div"下的所有input元素*/
$("#Div > input") /*选择id是"Div"下的直接input元素*/
$("div ul li") /*选择div元素内的ul元素内的li元素*/
$("body,input.style,ul") /*选择body元素、class属性是"style"的所有input元素、所有ul元素*/
$(element).next() /*选择该元素后相邻的同级元素*/
$(element).nextAll() /*选择该元素后所有的同级元素*/
$(element).siblings() /*选择该元素同级的所有元素*/
$("td").mouseenter(function() {
$(this).animate({ "width": "200px", "height": "60px" }); /*选择鼠标进入的<td>元素*/
$("td").not($(this)).animate({ "width": "100px", "height": "60px" }); /*选择除该<td>元素以外的所有<td>元素*/
})
JQuery过滤选择器：
$("td:first") /*选择第一个td元素*/
$("td:last") /*选择最后一个td元素*/
$("td:not(td:last)") /*选择不是最后一个td元素的所有td元素*/
$("td:even") /*选择所有偶数行的元素，索引从0开始计数，奇数索引受影响。例：第二行，索引为1*/
$("td:odd") /*选择所有奇数行的元素，索引从0开始计数，偶数索引受影响。例：第一行，索引为0*/
$("td:eq(0)") /*选择等于该索引值的元素，eq---equal*/
$("td:gt(0)") /*选择大于该索引值的元素，gt---great*/
$("td:lt(9)") /*选择小于该索引值的元素，lt---little*/
$(":header") /*选择所有的标题元素，h1...h6*/
JQuery属性过滤选择器：
$("input[id]") /*选择所有具有id属性的input元素*/
$("[title=提示消息]") /*选择title等于"提示消息"的所有元素*/
$("input[title!=提示消息]") /*选择title不等于"提示消息"的所有input元素*/
$("input[title^=输入]") /*选择title以"输入"开始的所有input元素*/
$("input[title$=搜索]") /*选择title以"搜索"结束的所有input元素*/
$("input[title*=关键词]") /*选择title包含"关键词"的所有input元素*/
$("[id][id$=t]") /*选择所有具有id属性，并且id是以t结束的所有元素*/
表单选择器：
$(":input") /*选择所有 input, textarea, select 和 button 元素*/
$("input") /*选择所有 input元素*/
$(":text") /*选择所有的单行文本框，相当于 $("input[type=text]")*/
$(":password") /*选择所有密码框*/
$(":checkbox") /*选择所有复选框*/
$(":radio") /*选择所有单选按钮*/
$(":reset") /* 选择所有重置按钮*/
$(":submit") /*选择所有提交按钮*/
$(":file") /*选择所有文件域，相当于 $("input[type=file]")*/
$(":image") /*选择所有图像域，相当于 $("input[type=image]")*/
$(":hidden") /*选择所有隐藏元素*/
$(":button") /*选择所有按钮,其中不包括：重置、提交、单选、复选按钮*/
表单对象属性选择：
$("input:enabled") /*选择所有可用的input元素*/
$("input:disabled") /*选择所有不可用的input元素*/
$("input:checked") /*选择所有被选中的input元素(复选框、单选框等，不包括select中的option)*/
$("select option:selected") /*选择所有被选中的option元素*/
属性的增加、删除、修改、读取：
$("a:first").attr("href") /*获取元素的属性值*/
$("a:first").attr({ href: "HomePage.html", title: "首页", className: "home" }); /*设置元素的多个属性值*/
$("a:first").attr("title", "首页"); /*设置元素的一个属性值*/
$("p").attr("style", function() {
return "font-size:36px"; /*设置的属性值是一个方法的返回值*/
})
$("a").removeAttr("href"); /*删除元素的属性值*/
创建、删除、替换DOM节点：
$("body").append(element); /*在页面的末尾增加元素*/
$("body").prepend(element); /*在页面的开始增加元素*/
$(element).after(element); /*在指定元素的后面增加元素*/
$(element).before(element); /*在指定元素的前面增加元素*/
$("div").empty(); /*清空div的内容,div仍然保留在页面中*/
$("a").remove("[title]"); /*删除具有title属性的所有a标签*/
$("p:first").replaceAll("p:last");//用第一个p标签替换掉最后一个p标签
JQuery对象和DOM对象：
JQuery对象是通过JQuery包装DOM对象以后产生的对象，DOM对象只有转换为JQuery对象才能被JQuery操作。
JQuery只能调用JQuery内部封装的方法，不能调用DOM对象的方法，反之亦然。
$(function () { // $("#Div").innerHTML = "<p>123</p>"; //错误：使用JQuey对象调用DOM对象的方法 // document.getElementById("Div").html("<p>123</p>"); //错误：使用DOM对象调用JQuery对象的方法 var domObject = document.getElementById("Div"); //得到DOM对象 $(domObject).html("<font>DOM对象转换为JQuery对象</font>"); //包装DOM对象后调用JQuery的方法 var dom = $(domObject)[0]; //将JQuery对象转换为DOM对象 $("#Div").css({ background: "red", width: "300px", height: 300, "margin-left": "300px" }); //如果属性名包含 "-"的话，必须使用引号 $("#Div").css("width", 300).css("height", 300).css("background", "red"); //修改style值 alert($("#Div").css("width")); //获取style值 alert($("#Button").val()); //获取value值 $("#Button").val("value"); //修改value值 alert($("Div").html());//获取html源码内容 alert($("Div").text()); //获取文本内容 })
编写jQuery 插件：
jQuery.extend({ _四则运算: function(a, b, c) { /// <summary> /// 四则运算 /// </summary> /// <param name="a" type="int">参数1</param> /// <param name="b" type="int">参数2</param> /// <param name="c" type="string">运算符</param> /// <returns type="int" /> var arr = ["+", "-", "*", "/"]; a *= 1; b *= 1; //转换为数字 if (isNaN(a) || isNaN(b)) { alert("不能识别的符号，请输入数字！"); return; } for (var i = 0; i < arr.length; i++) { if (arr[i] == c) { switch (c) { case "+": alert(a + b); break; case "-": alert(a - b); break; case "*": alert(a * b); break; case "/": alert(a / b); break; default: } return; } } alert("错误，请检查你的输入！"); } });
