jQuery前端开发学习

jQuery前端开发学习

chapter1-JavaScript基础

JavaScript的定义：

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。

JavaScript的特点：

1)交互、脚本语言、解释性语言
2)边执行边解释
3)弱类型的语言

JavaScript的组成：

1)ECMAScript是一种语法标准
    01)是一种开发的、国际上广为接受的、标准的脚本语言规范
    02)编码遵循ECMAScript标准
        ·语法
        ·变量和数据类型
        ·运算符
        ·逻辑控制语句
        ·关键字
        ·保留字
        ·对象
2)BOM:Browser Object Model（浏览器对象模型）
    浏览器对象模型可以实现与HTML的交互。
3)DOM：Document Object Model（文档对象模型）
    用来访问和操纵HTML文档。

JavaScript在网页中的应用方式：

1.直接在HTML标签中
    例：<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
2.嵌入在网页任何位置：使用<script>标签
3.外部文件
    例：<script src="test.js" type="text/javascript"> </script>

JavaScript核心语法：

    ·变量 
    ·控制语句
    ·语法约定 
    ·数据类型
    ·注释
    ·运算符号
    ·数组
变量：（var）
    1)先声明变量再赋值
        var width;      
        width=10;
    2)同时声明和赋值变量
        var width=10;
        var i,j,k=15;
    3)不声明直接赋值
        userName = "七月与安生";
数据类型：
    ·undefined（未定义类型）
    ·null（空类型）
    ·number（数值类型）
    ·string（字符串类型）
    ·boolean（布尔类型）
运算符：
    1)算术运算符：+    -   *    /    %    ++    --
    2)赋值运算符：=
    3)比较运算符：>    <     >=      <=     ==    !=
                运算后的结果一定布尔类型[真or假]
    4)逻辑运算符: && ||  !
        ·&&:并且(两个同时为真，那么结果就是真；)
        ·||:或者(运算的两个变量只要有一个为真，那么就是真的；)
        ·！：非（取反，否定）
注释：
    ·单行注释以 // 开始，以行末结束
    ·多行注释以 /* 开始，以 */ 结束

chapter2-函数

函数：

·函数的含义：程序的基本单元，是完成特定任务的代码语句块
·函数分类：系统函数和自定义函数
·函数的特征：
        1.实现一定的功能
        2.可以返回一个结果
        3.可以有参数

系统函数：

    ·parseInt();            // 转换成整型
    ·parseFloat();          // 转换成浮点型
    ·isNaN();               // 判断不是Number， 不是Number 返回true ,否则 false

自定义函数：

语法：

    function 函数名称(参数名称1,名称2,名称3){
        // javascript代码
        [return 返回值]
    }

变量的作用域：

    ·全局变量:在其他任何位置都可以使用
    ·局部变量：  
        1.只能在自己当前大括号里面的范围使用，
        2.其他外部大括号范围的代码是不可用使用局部变量。
        3.被大范围所囊括住的小范围可以使用大范围的局部变量；
        注：如果有局部变量和全局变量同名了，那么在当前范围当中，优先使用局部变量。

数组：

定义：具有相同数据类型的一个或多个值的集合。
数组赋值：
    声明时赋值:var week= new Array ("星期日","星期一","");
    分别赋值:var week= new Array ( 7);
        week[0] = "星期日";
        week[1] = "星期一";
        week[2] = "星期二";
        week[3] = "星期三";
        ...
访问数组：
    week[1];    //数组的个数从零
    join():把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
    sort():对数组排序（按字母顺序或字符编码排序）
    push()：添加数据（向末尾添加）
    concat：合并数组

套用for循环的方式：

·分析循环条件和循环操作
·套用for语法写出代码
·检查循环是否能够退出

break语句:

·break语句用于终止某个循环，使程序跳到循环块外的下一条语句；
·在循环中位于break后的语句将不再执行；
·break 语句不仅可以用在for循环中，也可以用在while循环中；

continue语句:

·continue可用于for循环和while循环；
·continue退出本次循环，继续后面的循环；
·continue语句只能用在循环结构中；

chapter3-BOM

BOM模型介绍：

01)BOM：浏览器对象模型
02)BOM主要功能: 
    ·弹出新的浏览器窗口
    ·移动、关闭浏览器窗口及调整窗口大小
    ·实现页面的前进和后退功能

window对象的常用属性：

·history    有关客户访问过的URL的信息
·location   有关当前 URL 的信息
使用方式：（使用点操作符）
    window.属性名= "属性值" 
    window.location="http://www.baidu.com";

window对象的常用事件：

·onload 一个页面或一幅图像完成加载
·onmouseover    鼠标移到某元素之上
·onclick    当用户单击某个对象时调用的事件句柄
·onkeydown  某个键盘按键被按下
·onchange   域的内容被改变
事件使用方式：
对象.事件名称=匿名函数(){
}
window.onload=function(){
}

window对象的常用方法：

·prompt()   显示可提示用户输入的对话框
·alert()    显示带有一个提示信息和一个确定按钮的警示框
·confirm()  显示一个带有提示信息、确定和取消按钮的对话框
·close()    关闭浏览器窗口
·open() 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
·setTimeout()   在指定的毫秒数后调用函数或计算表达式
·setInterval()  按照指定的周期（以毫秒计）来调用函数或表达式

open()方法：

·height、width   窗口文档显示区的高度、宽度
·left、top   窗口的x坐标、y坐标
·toolbar    是否显示浏览器的工具栏，黙认值yes
·scrollbars 是否显示滚动条，黙认值yes
·location   是否显示地址地段，黙认值yes
·status 是否显示状态栏，黙认值yes
·menubar    是否显示菜单栏，黙认值yes
·resizable  是否显示菜单栏，黙认值yes
·titlebar   是否显示标题栏，黙认值yes
·fullscreen 是否使用全屏模式显示浏览器，黙认值no

history对象的常用方法：

·back() 加载 history 对象列表中的前一个url
·forward()  加载 history 对象列表中的下一个url
·go()   加载 history 对象列表中的某个具体url

location对象：

01)属性：
    ·host：设置或返回主机名和当前URL的端口号    （前提：在web服务器当中才奏效）
    ·hostname：设置或返回当前URL的主机名
    ·href设置或返回完整的URL
02)方法：
    ·reload()   重新加载当前文档
    ·replace()  新的文档替换当前文档
    例如：location.replace("a.html");

document对象常用方法：

·getElementById()   返回对拥有指定id的第一个对象的引用
·getElementsByName()    返回带有指定名称的对象的集合
·getElementsByTagName("input")  返回带有指定标签名的对象的集合
·getElementsByClassName()   返回带有指定类的对象的集合
·write()    向文档写文本、HTML表达式或JavaScript代码

JavaScript内置对象：

·Array：用于在单独的变量名中存储一系列的值
·Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
·Date：用于操作日期和时间
·String：用于支持对字符串的处理

Math对象：

·ceil() 对数进行上舍入
·floor()    对数进行下舍入
·round()    把数四舍五入为最接近的数
·random()   返回0~1之间的随机数

chapter4-DOM

DOM模型介绍：

·文档对象模型（Document Object Model）
·DOM是万维网联盟（W3C）的标准
·通过DOM可以动态改变文档内容

JavaScript控制文档：

通过操作对象模型，JavaScript就可以：
    ·改变页面中的HTML节点元素
    ·改变页面中的HTML内容属性
    ·改变页面中的CSS样式
    ·对页面中的事件做出反应

查找节点元素：

·getElementById() 返回一个节点对象
·getElementsByName() 返回多个（节点数组）
·getElementsByTagName() 返回多个（节点数组）
·getElementsByClassName() 返回多个（节点数组）

获得/修改属性节点：

·object.getAttribute("属性名") 
·object.setAttribute("属性名","属性值")

根据层次关系查找节点：

·parentNode  父节点
·firstElementChild  第一个子元素
·lastElementChild   最后一个子元素
·nextElementSibling     下一个兄弟节点

增加节点元素：

·createElement(tagName) 按照给定的标签名称创建一个新的元素节点
·appendChild(nodeName)  向已存在节点列表的末尾添加新的子节点
·insertBefore(newNode,oldNode)  向指定的节点之前插入一个新的子节点
·cloneNode(deep)    复制某个指定的节点，通过需要复制的对象.cloneNode(false);
    注：参数：deep可选。默认是 false。
        设置为 true，如果您需要克隆节点及其属性，以及后代
        设置为 false，如果您只需要克隆节点

chapter5-表单验证：

表单验证：

当输入的表单数据不符合要求时，如何进行提示？
    1.获得表单元素值
    2.使用jQuery的一些方法对数据进行判断
    3.触发事件，对获取的数据进行验证

JavaScript内置对象：

String：用于支持对字符串的处理。

String对象的属性：

length：字符串的长度。

String对象的方法：

·toLowerCase()  把字符串转化为小写
·toUpperCase()  把字符串转化为大写
·charAt(index)  返回在指定位置的字符
·indexOf(字符串，index) 查找某个指定的字符串值在字符串中首次出现的位置；
·index：可选的整数参数。规定在字符串中开始检索的位置。
·substring(index1,index2)   返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符

文本框特效：

事件：
    onblur      失去焦点，当光标离开某个文本框时触发
    onfocus     获得焦点，当光标进入某个文本框时触发
方法： 
    blur()      从文本域中移开焦点
    focus()     在文本域中设置焦点，即获得鼠标光标
    select()        选取文本域中的内容，突出显示输入区域的内容

chapter6-jQuery基础

语法结构：

$(selector).action();
    $() ：工厂函数
    selector : 支持多种选择器，基本跟CSS 选择器保持一致
    action()方法：
·click(function(){});       点击事件
·mouseover();           鼠标悬浮事件                          
·mouseout()         鼠标离开事件
·ready();

chapter7-JQuery选择器

JQuery选择器:

jQuery选择器类似于CSS选择器，用来选取网页中的元素。

属性选择器：

[attribute]         选中匹配属性的标签
[attribute=value]   选中匹配属性并且值相等
[attribute!=value]  匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]  匹配给定的属性是以某些值开始的元素
[attribute$=value]  匹配给定的属性是以某些值结尾的元素
[attribute*=value]  匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]  复合属性选择器，需要同时满足多个条件时使用

过滤选择器(基本筛选器)：

:first  获取第一个元素
:last   获取最后个元素
:not(selector)  去除所有与给定选择器匹配的元素
:even   匹配所有索引值为偶数的元素，从 0 开始计数
:odd    匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)  匹配一个给定索引值的元素
:gt(index)  匹配所有大于给定索引值的元素
:lt(index)  匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:focus  匹配当前获取焦点的元素

Jquery绑定多个事件的方式：

例：$(".top-m .on").bind({
        mouseover:function(){},mouseout:function(){}
     });

Jquery 取消绑定事件的方式：

例：
//  取消一个事件或多个事件
$("ul li:first").unbind("click mousemove");
// 取消最后一个li边去的所有事件
$("ul li:last").unbind();

chapter8-jQuery遍历和特效

遍历后代元素：

Children()  返回被选元素的所有直接子元素
Find()      返回被选元素的后代元素，一路向下直到最后一个后代

遍历同辈元素：

slibings( )     获取被选元素的所有同辈元素.  注 :自己不会被选中！
next( )     获取被选元素的下一个同辈元素，     
nextAll()       获取被选元素的所有跟随（之后）的同辈元素
prev( )     获取紧邻匹配元素之前的元素
prevAll()       获取被选元素的所有之前的同辈元素
带参数方式：
prevAll(选择器)；   满足遍历同辈元素后还需要满足选择器的匹配；

遍历前辈元素：

parent( )           父级元素
parents( )          所有祖先元素