jQuery前端开发学习
来源:互联网 发布:手机4g数据连接不稳定 编辑:程序博客网 时间:2024/05/16 10:17
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设置或返回完整的URL02)方法: ·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( ) 所有祖先元素
阅读全文
1 0
- jQuery前端开发学习
- 前端开发学习随笔-------jquery.data()
- 前端开发学习之道:jQuery 1.7.1API手册
- JQuery前端学习
- Jquery前端验证学习
- 前端学习之jQuery
- 前端开发学习网站
- 前端开发学习书籍
- 前端开发学习笔记
- 前端开发学习--1
- 前端开发学习--2
- 前端开发-学习资料库
- 前端h5开发学习
- 学习前端开发
- 前端开发学习--01
- 前端开发学习路线
- 前端开发学习路线
- 前端开发学习网址
- 返回函数---(这个其实多个参的时候还是不太。。。。)
- linux进程通信2
- [js]身份证号码验证
- <UMENG_CHANNEL_VALUE> is provided.
- python中的递归函数
- jQuery前端开发学习
- SSM框架整合(IntelliJ IDEA + maven + Spring + SpringMVC + MyBatis)
- 多线程
- 【UE4 shader】横向撕裂
- Android自定义布局:ViewGroup
- photoshop修复老照片方法
- java文件相关
- 含有多个java程序的文件夹导入MyEclipes 出现错误的解决办法
- 【UE4 shader】溶解后更换材质