JavaScript
一.数据类型
数据类型：number数字，String 字符串，Boolean 布尔，对象类型
Typeof（）：识别数据类型
parselnt():字符串转化为整数
ParseFloat：字符串转化为小数
二.js 系统的方法
DOM：页面文档对象模型（页面）
BOM：浏览器对象模型（浏览器）
（）：DOM输出在页面中
（）：BOM 的弹框
();Bom的输入框，返回字符串类型的值
(); BOM的确认框，返回Boolean类型的值
三.符号
逻辑判断
或：||
且：&&
非：！
不等于：！=
等于：==
四.流程控制语句
1.分支结构
if(){}
switch(){}
2.循坏结构
for(){}
while(){}
do{}while()
五.js的数组 Array：js的内置对象。
数组：把数据存储在一组中，同时操作很多数据。
js数组创建：
1.数组实例化：var ary=new Array（）；
数组通过下标添加元素，下标从0开始，按照下班顺序排列
ary[下标]=数据；
2.数组实例化创建，同时添加元素
var ary=new Array("用户名","密码","身份证号","手机号码")
3.直接赋值数组：通过[]直接创建数组，并且添加元素
var ary=[1,"用户名",.....]
六.方法
不需要方法名，就可以创建和使用
function（形参）{
//方法代码块
}
一般是创建匿名完成后直接使用
//匿名方法,直接使用
Eg: (function () {
("匿名方法被调用");
})();
var method=function () {
alert("匿名弹框");
}
//调用匿名方法，通过变量名调用
method();
七.js中常用的事件
事件：达到了临界条件，自动触发方法
onfocus:获取鼠标光标
onblur:失去鼠标光标
onclick：鼠标点击
onmouseover：鼠标悬停，与css中的hover效果一致
onmouseout：鼠标离开
onchange：标签的值发生该变
onsubmit：表单提交
onload：页面加载
onkeydown：按键按下
onkeyup：按键松开
八.DOM操作
--document object model 文档对象模型(表示页面对象)
2.在页面加载的时候,浏览器创建页面的文档对象模型;操作页面中的任何元素
对象操作作用
1).操作InnerHTML,改变页面中的标签内容
2).操作样式style,改变标签的样式
3).操作事件,对事件进行操作
4).操作属性,改变页面中标签的属性
操作标签,获取标签
1).通过id获取标签,返回一个标签
a.标签定义了id选择器
b.通过DOm的订单获取次标签
("id名字");
2).通过class获取标签,返回标签的数组
a.标签定义了class选择器
("类名");
3).通过标签名:tagName--获取标签,返回标签的数组
方法:("标签名");
4).通过name获取标签,返回的是一个标签的数组
a.先定义name的值
b.方法:("name");
九.BOM操作
BOM:browser object model:浏览器对象模型,为了操作浏览器而设置的对象
DOM文档对象模型,实际使用的是document;
BOM操作对象:window(核心对象),提供与浏览器窗口进行交互的对象
window核心对象的子对象
:窗口的文档对象(DOM),也就是页面;
;
:包含了浏览器的历史
方法:()--相对于浏览区中的后退按钮
()---前进按钮
---重定向跳转到新的页面
十.window核心对象中的常用方法
定时器
();//一次性的时间定时器
();//间隔性的时间定时器
//清除定时器
();//清除一次性的定时器
();//清除间隔性的定时器
//语法: var time1=setTimeout("方法()",毫秒);
//清除定时器:clearTimeout(time1);
//语法:var time2=setInterval("方法()",毫秒);
//清除定时器: clearInterval(time2);
十一.js内置对象 string
String:字符串 有很多方法供字符串类型的数据使用
"字符串".方法();
Eg:
var str="";
("字符串");通过实参:"字符串",查找str中是否包含次字符串,含有返回下标,不含有返回-1;---通过字符找下标
2. (下标);通过 实参:下标,查找str中此对应的字符,返回此字符;---通过下标找字符
("字符串");通过此实参"字符串",查找str中是否包含了此字符串最后出现的下标位子,含有返回下标,不含有返回-1;----通过字符找最后的下标
(数字);is not an number,不是数字就返回true,是数字返回false
jQuery
jQuery是JavaScript框架.
jQuery功能:HTML标签选取,标签操作,css操作,事件操作,动画设置,DOM操作,ajax等
jQuery是轻量级,核心思想:"写的少,做的多";
一.jQuery基本语法
$:表示jQuery框架的标识符
$(选择器或标签对象).方法();
jQuery封装 DOM获取标签的方式
$("#idname")----->("idname");
选择器
常用:
id选择器:$("#选择器名");
class选择器:$(".class名");
标签选择器:$("标签名");
通配符选择器:$("*");
分组选择器:$("div,h1");:选取div 和h1
派生:$("div h2");选取div中的h2
选取当前标签:$(this);
不常用:
$("p:first"):选取第一个p标签
$("ul li:first");选取 第一个ul的第一个li标签
$("ul li:first-child");选取每一个ul的第一个li标签
$("[属性]":选取带有此属性的标签);$("[href]"):选取带a标签
$("标签名[属性='值']"):选取此属性='值'的标签
比如:$("a[target='_blank']"):选取a标签,target的值是_blank
$("div:even"):偶数的位置的div标签;
$("div:odd"):奇数位置的div标签;
2.使用jQuery框架
1).导入jQuery框架的js文件
<script src="./jquery-2.1."></script>
2).使用jQuery方法
二 .jquery DOM操作
1.获取元素的方式
向#d1中添加内容:hello div
//("d1").innerHTML="hello div!";
$("#d1")获取#id的标签
2.样式操作
HTML(内容):想标签中添加内容
$("#d1").html("hello div!");
css(属性,属性值):设置css样式
Eg:
$(".c1").css("fontSize","36px");
$("div a").css("color","red");
三.jQuery常用方法
1).预加载方法
$(document).ready(function () {
//在添加事件---给#but1添加onclick事件
$("#but1").click();
});
相当于:onload,比onload更早
//在文档对象模型(DOM)加载完成后再加载js方法
可以简写成:
$(function (){
//js代码
});
目的:
1.代码是从上往下执行,防止提前运行jQuery方法,先加载document:DOM文文档对象模型,页面中的标签;
2.先加载页面中的标签,在加载或者运行jQuery方法
onload事件:<body οnlοad=""></body>
js中:window.οnlοad=function(){};
注意:
jQuery预加载的速度比onload速度更早
jQuery预加载:只要加载DOM标签之后,就会执行,
onload等所有的内容都加载完成,才会执行
2).标签绑定事件
获取绑定事件的标签.事件(触发的方法);
//添加事件,添加事件触发的方法
$("#but2").click(方法);
3).遍历的方法
遍历的对象.each(遍历要执行的方法);
//each():遍历此对象中的所有标签
$("div").each(function () {
$(this).html("Hello jquery!");
});
4).animate():动态效果的方法
animate()方法是transition属性的升级版
animate({样式},时间,速度方式,回调函数);
样式:必写,逐渐改变css属性值,形成动画效果
使用+=和-=累加出来形成css样式
时间:动画网的时间.单位:毫秒/"fast/"slow"
速度方式:"swing","linear"+
回调函数:执行完方法后在触发的方法
对列功能:
//可添加多个animate方法,按animate顺序执行
Eg: $(function () {
$("#but1").click(function () {
//让div动画效果,调用animate方法
$("div").animate({width:'2000px',height:'2000px'},1000,"swing",
function () {
//动画完成后在触发一个方法
$("div").animate({width:'200px',height:'200px'},1000,"swing");
});
});
关键字:
//toggle:从0-目前值的切换效果
//opacity:透明度 属性,值:0.0-1.0
window.οnlοad=dvMethod;
作用:在页面文档加载完成后,加载js的方法
5).滑动隐藏与显现
slidup():向上滑动隐藏
slidDown():向下滑动展示标签.
sliUp(时间,速度,回调函数);slidDown()一致
时间:动画网的时间.单位:毫秒/"fast/"slow"
速度方式:"swing":加速,"linear":匀速
回调函数:执行完方法后在触发的方法
6).jQuery版隐藏与显现
与css的属性display是一样的.
hide(时间,速度,回调函数);---隐藏
show();---显示
Toggle():在隐藏与显现之间切换
时间:动画网的时间.单位:毫秒/"fast/"slow"
速度方式:"swing":加速,"linear":匀速
回调函数:执行完方法后在触发的方法
7).淡入淡出
实现元素的淡入淡出的四种方法:
()淡入
淡出
()切换淡入,淡出
()渐变成给定的透明度
fadeln()淡入:淡入已隐藏的元素---->以透明度0变成1;
fadeOut():淡出:淡出已显示的元素---->以透明度1变成0;
fadein(时间,回调函数)
时间:毫秒,"fast","slow"
fadeTo("fast",0.5,"swing");;
fadeTo(时间,透明度值,回调函数);
实际调用animate({opcity:透明度值},时间,速度,回调函数)方法
8)停止动画
Stop()方法用于停止动画或者效果,用于所有jQuery效果
语法:$("").stop(Boolean,Boolean);
第一个Boolean:是否该清除动画队列,默认false,仅停止当前活动的动画,允许队列动画继续执行.true:停止所有队列动画
第二个Boolean:是否立即完成当前动画,默认是false
9)方法链
把方法链接在一起,在同一个元素上,按顺序执行链起来的方法
Eg:slideUp(1000).slideDown(1000).animate({opacity:"0.1"},1000).animate({opacity:"1"},1000);
四.jQuery事件
以JavaScript中的事件的on后面的动作作为jQuery事件的方法名
1.常用的jQuery事件
点击事件 click()
双击事件 dblclick();
鼠标悬停事件 mouseenter();
鼠标离开 mouseleave();
键盘事件:keydown();keyup()
表单事件:获取焦点focus(),失去焦点 blur(),表单提交submit(),值发生改变change();
2.使用事件的语法
制定绑定事件的对象:$(选择器)
绑定事件:$(选择器).事件名(function(){事件触发的方法})
hover()方法
/hover():组合模拟悬停事件
//hover(悬停的方法,离开的方法)
$("#p1").hover(function () {
alert("悬停");
},function () {
alert("离开");
});
五.DOM获取内容和属性
1. 获取内容:HTML(),text(),val()
html()--设置或返回所选元素的内容,内容包括HTML标签
text()--设置或者返回所选元素的文本内容
val()--设置 或者返回 所选的表单字段的value值
1.设置.2.返回值
2.回调函数 function(被选元素的下标,改变前的值(旧的值)){}
2.获取属性
attr()方法用于获取属性值
语法:
$("").attr("属性")---通过属性获取到此元素的属性值;
$("").attr("属性","属性值")---通过属性设置此元素的属性值
$("").attr({"属性":"属性值","属性":"属性值",...})---设置多个属性值
3.获取/设置样式
css()方法用于设置获取样式
语法:
css(样式属性)--通过样式属性返回属性值
css(样式属性,"属性值")--设置属性值
css({样式属性:"属性值",样式属性:"属性值",...})--设置多个样式
4.设置css类
AddClass()方法--向被选中的元素添加类
RemoveClass()方法---从被选中元素中删除类
ToggleClass()方法---对被选元素进行添加/删除类的切换操作
语法:
AddClass("类")--添加一个类
addClass("类1 类2 ....")---添加多个类,通过空格分隔开
RemoveClass("类")--移除类
ToggleClass("类")---添加/删除 类的切换操作