JavaScript
#JavaScript概述:
JS:网页上动态效果
JS:运行在浏览器上的脚本语言 :写在<script></script>中
三个组成:ECMAScript DOM BOM
基本语法:
区分大小写
弱变量类型(声明):(与Java不同int String...) var i =3;var s = "abd";
数据类型:
原始类型:undefined,boolean,string,number,null
引用类型:
运算符:基本一致 "===" 类型和值全一致才相等
----
##JS开发套路:
- JS通常由一个事件触发;
- 触发一个函数,定义一个函数;
- 获得操作对象的控制权;
- 修改要操作的对象的属性或值;
- 获取某个标签的属性:
1. 对于sytle外面的直接`.属性`获取
2. style里面的`.style.属性`获取
- 修改:
- `=`重新赋值修改
1. 注册页表单校验:
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
JS校验正则表达式
onsubmit:此事件 依赖于返回值
2. 图片轮播的效果(设置定时)
- setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 均会返回一个ID,使下面两个方法可以通过此ID清除定时效果
- clearInterval() 取消由 setInterval() 设置的 timeout。
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
3. 定时弹出广告定时隐藏(无法修改图片属性)
- 利用style里面的display属性:
- block:显示
- none:隐藏
##JS中的BOM对象:
BOM:浏览器对象模型
Browser:
- Window :
window中的方法可以直接用,可以通过window获得以下四个对象中的方法
- Navigator
- Screen
- History
- Location
window对象:
- 方法 描述
* `alert() 显示带有一段消息和一个确认按钮的警告框。`
- blur() 把键盘焦点从顶层窗口移开。
* `clearInterval() 取消由 setInterval() 设置的 timeout。`
* `clearTimeout() 取消由 setTimeout() 方法设置的 timeout。`
- close() 关闭浏览器窗口。
* `confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。`
确认:返回true 取消:返回false
- createPopup() 创建一个 pop-up 窗口。
- focus() 把键盘焦点给予一个窗口。
- moveBy() 可相对窗口的当前坐标把它移动指定的像素。
- moveTo() 把窗口的左上角移动到一个指定的坐标。
* `open() 打开一个新的浏览器窗口或查找一个已命名的窗口。`
- print() 打印当前窗口的内容。
*` prompt() 显示可提示用户输入的对话框。 `
返回值:对话框输入的内容
- resizeBy() 按照指定的像素调整窗口的大小。
- resizeTo() 把窗口的大小调整到指定的宽度和高度。
- scrollBy() 按照指定的像素值来滚动内容。
- scrollTo() 把内容滚动到指定的坐标。
* `setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 `
* `setTimeout() 在指定的毫秒数后调用函数或计算表达式。`
Navigator :包含的是浏览器的信息.
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器,但其他实现了 JavaScript 的浏览器也支持这个对象。
Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。
- appCodeName 返回浏览器的代码名。
- appMinorVersion 返回浏览器的次级版本。
- appName 返回浏览器的名称。
- appVersion 返回浏览器的平台和版本信息。
- browserLanguage 返回当前浏览器的语言。
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
- cpuClass 返回浏览器系统的 CPU 等级。
- onLine 返回指明系统是否处于脱机模式的布尔值。
- platform 返回运行浏览器的操作系统平台。
- systemLanguage 返回 OS 使用的默认语言。
- userAgent 返回由客户机发送服务器的 user-agent 头部的值。
- userLanguage 返回 OS 的自然语言设置。
Screen:用来获得屏幕信息:
- availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
- availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
- bufferDepth 设置或返回调色板的比特深度。
- colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
- deviceXDPI 返回显示屏幕的每英寸水平点数。
- deviceYDPI 返回显示屏幕的每英寸垂直点数。
- fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
- height 返回显示屏幕的高度。
- logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。
- logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。
- pixelDepth 返回显示屏幕的颜色分辨率(比特每像素)。
- updateInterval 设置或返回屏幕的刷新率。
- width 返回显示器屏幕的宽度。
###History:
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go() 加载 history 列表中的某个具体页面。
###Location:把用户带到一个新的地址
- href:跳转到链接
#DOM模型:
##DOM的概述:
什么是DOM
DOM:Document Object Model:文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
* 节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
##DOM的使用:
知道document,element,attribute中的属性和方法
##DOM的常用的操作(增删改查):
获得元素:
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素:
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
添加节点:
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
删除节点:
* element.removeChild(); -- 删除元素
【使用DOM完成对ul中添加一个li元素】
function addElement(){
var city = document.getElementById("city");
// 创建一个元素:
var liEl = document.createElement("li");
// 创建一个文本节点:
var text = document.createTextNode("深圳");
// 添加子节点:
liEl.appendChild(text);
city.appendChild(liEl);
}
**省市联动**
标签值是什么:
(单选框,复选框,下拉列表...)
`单选框标签的值`:被选中的value值,只有一个
`复选框标签的值`:被选中的value值,有多个
`下拉列表标签的值`:被选中的value值,只有一个
JQuery
#JQuery
##JQuery概述:
- JQuery是一个JS的框架(JS的类库).对传统的JS进行了封装,提供方法
- 现在企业的开发中往往不会使用传统的JS进行开发,通常都会使用JS框架进行开发.
- JS的常用框架:
JQuery,ExtJS,DWR,Prototype,angular js...angular js和Java后台思想比较对等
##JQuery入门:
- 引入JQuery的js文件:<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
- JQuery的核心函数:$();
- JQuery的入口函数:$( function(){} );
* window.onload 和`S();`区别:window.onload需要等页面加载完成,S();只需等到DOM树绘制完成,节点完成
##JQ对象和JS对象的转换:
***JQ方法只能由JQ对象调用,JQ方法只能由JQ对象调用***
- JS-->JQ:$(d)(利用核心函数)
- JQ-->JS:
1. $d1[0].innerHTML = "将JQ的对象转成JS对象"
2. $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
##JQ的效果(显示隐藏)
JQ的效果操作:
* show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){});
* hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
##JQ的选择器(获得符合条件的所有节点,并封装成JQ对象):
基础选择器:
- id选择器
用法:$(“#id”)
- 类选择器
用法:$(“.类名”)
- 元素选择器
用法:$(“元素名称”)
- 通配符选择器(基本不用)
用法:$(“*”)
- 并列选择器
用法:$(“选择器,选择器,选择器”)
层级选择器:
- 后代选择器:使用空格` `所有后代包含孙子及以下的元素
- 子元素选择器:使用`>`第一层的元素(儿子)
- 下一个元素:使用`+`下一个同辈元素
- 兄弟元素:使用`~`后面所有的同辈元素
基本过滤选择器:
(选择器组合多种多样很灵活,edg:`$(".table tr:even")`)
- :first
- :not(selector)
- :even
- :odd
- :eq(index)
- :gt(index)
- :lang1.9+
- :last
- :lt(index)
- :header
- :animated
- :focus
- :root1.9+
- :target1.9+
内容选择器:
- :contains(text)
- :empty
- :has(selector)
属性
- [attribute]
- [attribute=value]
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
- [attrSel1][attrSel2][attrSelN]
可见性选择器:
- :hidden
- :visible
表单选择器:
- :input
- :text
- :password
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
- :hidden
表单对象属性选择器:
- :checked `用于单选/复选框,获得所有被选中的元素`
- :selected `用于下拉列表,获得被选中的元素`
##JQuery文档处理:
内部插入:
- append(content|fn) (元素内部向后插入)
- appendTo(content)
- prepend(content|fn) (元素内部向前插入)
- prependTo(content)
外部插入:
- after(content|fn) (元素外部向后插入)
- insertAfter(content)
- before(content|fn) (元素外部向前插入)
- insertBefore(content)
删除:
- empty() (不包括自己)
- remove([expr]) (包括自己)
##JQuery修改样式:
1.通过css()函数:适用于样式代码比较少的情况
2.addClass()/removeClass()/toggleClass():适用于样式事先定义好的情况
##JQuery操作元素属性:
- $("#id").prop("src") 获得属性的值
- $("#id").prop("src","da") 修改属性的值
- $("#id").prop({"":"","":""}) 一次性修改多个属性
##html()/text()/val()
- $("#id").html();获取元素里面的html代码
- $("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容,可以在里面写html标签
-
- $("#id").text();获取元素里面的文本
- $("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容,如果写了html标签不会被识别为html
-
- $("#id").val():获取元素value属性的值
- $("#id").val("afda") 用括号里面的内容去设置元素value属性
##遍历:
$("img").each(function(i,n){
i:遍历的下表
n:遍历出来的每一个
});
- $.each(object,function(i,n){
- object:待遍历的数组
- i:遍历的下表
- n:遍历出来的每一个
- });
##查找过滤:
- 1.parent()
- 2.find()
- 3.is()
##JQuery常用事件:
事件处理:
- on(eve,[sel],[data],fn)1.7+
在选择元素上绑定一个或多个方法。
- bind(type,[data],fn)
- one(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个一次性的方法。
- trigger(type,[data])
在每一个匹配的元素上触发某类事件。 (事件单独绑定方法,某类事件为this绑定的事件).这个函数也会导致浏览器同名的默认行为的执行,比如触发 `blur`事件,浏览器也会将光标从该元素上移除
- triggerHandler(type, [data])
用法与trigger相同,有下列三个不同:
* 第一,他不会触发浏览器默认事件。
* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三, 这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象
- unbind(t,[d|f])
事件委派:
delegate(selector,[type],[data],fn)
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
事件切换
hover(over,out)
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数(over)。当鼠标移出这个元素时,会触发指定的第二个函数(out)。
事件:
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- dblclick([[data],fn])
- focus([[data],fn])
-
- focusin([data],fn) `当元素获得焦点时触发 focusin 事件。focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。`
- focusout([data],fn) `当元素失去焦点时,触发 focusout 事件。focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。`
- keyup([[data],fn])
- mousedown([[data],fn]) `当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。不需要松开`
- mouseup([[data],fn]) `当在元素上放松鼠标按钮时,会发生 mouseup 事件。`
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- resize([[data],fn]) `当调整浏览器窗口的大小时,发生 resize 事件。`
- scroll([[data],fn]) `当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。`
- select([[data],fn]) `当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。`
- submit([[data],fn]) `当提交表单时,会发生 submit 事件。该事件只适用于表单元素。`
|