黑马程序员Javascript学习

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

Javascript是一种在浏览器端执行的语言，不用和服务器交互就可以实现网页的一些变化。JavaScript是一种解释型语言，不需要编译就可以随时运行。

Javascript是一种弱类型的语言，不需要指明变量类型，会自动的判断变量类型。声明变量类型都使用var。可以使用双引号或者单引号声明字符串。

Javascript动态创建的元素，搜索引擎捕捉不到，所以可以不需要动态创建的地方就不要动态创建。

//引用外部javascript代码

超链接>//超链接中的javascript代码

//body标签的onload事件会在页面全部加载完后触发
首页//导航到指定的网页，火狐不支持

转到新页面//和navigate()方法的效果相同

刷新页面//刷新当前页面

//在表单验证时禁止提交表单到服务器

//手动触发表单验证

//获取屏幕的信息

//将表单数据发给指定页面

//将表单数据发给服务器

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 = "
Demo
"; //标签内，内容的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 事件不能同时进行，需要延时
            }
        }
    
剪贴板操作！

标题滚动：

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").not($(this)).animate({ "width": "100px", "height": "60px" }); /*选择除该元素以外的所有元素*/
             })

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 = "
123
"; //错误：使用JQuey对象调用DOM对象的方法
            // document.getElementById("Div").html("
123
"); //错误：使用DOM对象调用JQuery对象的方法
            var domObject = document.getElementById("Div"); //得到DOM对象
            $(domObject).html("DOM对象转换为JQuery对象"); //包装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) {
        ///    

        ///    四则运算
         ///    
        ///    参数1
        ///    参数2
        ///    运算符
        ///    
        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("错误，请检查你的输入！");
　　}
});

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

转载于:https://www.cnblogs.com/-zgm/archive/2012/10/31/2747655.html