js/Jq快速复习

事件

通过在h5标签中指定响应事件，来在javascript中执行相应的函数。

• onclick()：单击事件
• onload():加载事件，当页面加载完毕后执行‘
• onUnload():离开该页面时执行
• onFocus():配合表单使用，获得焦点时触发
• onBlue():配合表单使用，失去焦点时触发
• onChange():配合表单使用，当内容发生改变是触发。
• onsubmit():提交表单时判断输入的数据是否有效，当单击提交按钮时触发
• onmouseover():当鼠标移动到上面时触发
• onmouseout():当鼠标离开时触发‘

计时器事件

settimeout(“javascript语句”, 时间)：
该语句表示延迟多长时间后执行javascript语句，1000=1s;
有返回值，该返回值用于清除计时器
该语句只能调用一次，如果想调用多次请使用setinterval()或着调用自己；
clearTimeout(名称)：清除计时器，即计时器的返回值。
setinterval(): 调用多次

DOM对象

获取HTML标签

• document.getElementById(“id名”)：通过id获取该元素
• document.getElementByTagName(标签名)：通过标签获取，通过加下标控制获取的哪一个。
• document.getElementByName(“name名”)：通过name属性来获取，通过指定下标获取指定。

方法

• cloneNode(true/false):克隆该元素节点，true克隆该元素的所有结点,false只对该节点进行克隆
• document.createElement(name)：创建元素，返回返回值为该元素，通过返回值可以设置该元素相关的属性，通常结合appendChild(元素)使用
• appendChild():用于在一个元素最后插入一个元素

var borad = document.getElementBuid("borad");
// 创建一个新节点
var input = document.createElement("input");
input.type = "button";
input.value = "按钮"；

// 将input加入borad中

var object = borad.appendChild(input);

• insertBefore(参数1,参数2):参数1为新节点，参数2为在该参数前插入

BOM

方法

• opne(url,打开方式):打开一个网页
• close():关闭窗口；
• location:返回url

history对象

• back():加载历史记录中的前一个页面
• forward():加载历史记录中的下一个页面
• go():加载指定页面

location对象

location.herf()：设置url地址
hostname()：返回web主机的域名
pathname():放回当前页面的路径和文件名
port():返回端口
portocol():返回协议类型

screen对象

• clientWidth():返回浏览器宽度
• clientHight():返回浏览器高度

JQuery

jQuery特性

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件操作
• DOM遍历操作

JQuery语法

使用$符来标记jq，
语法：
$(selector).action();
$:表示jq
(selector):查询和查找的元素。
action:对该元素的操作

JQuery事件

事件方法

• ready():当元素加载完成后才执行该事件
• blur()：失去焦点事件
• change():当元素中数据改变时触发
• click()：单击事件
• dbclick()：双击
• keydown():按下事件
• keyup()：松开事件
• keypress()：按下松开事件
• mouseup()：鼠标离开事件
• mousedown()：鼠标按下事件
• mouserover()：鼠标悬停事件
• resize()：

事件函数

• hide(speed, callback):将当前元素隐藏

• show(speed, callback)：将当前元素显示

• togle()：切换选择状态，该元素为显示则隐藏，为隐藏则显示

• fadeIn(speed, callback):如果该元素为隐藏，则将以淡入的形式显示元素

• fadeOut(speed, callback)：如果该元素为显示，则将该元素以淡出的形式隐藏
  speed：隐藏显示的时间，
  callback：执行完毕后要执行的函数

• fateto(speed,opacty,callback):设置元素的不透明度
  opacty:设置参数，在0~1之间，表示不透明度

• mouseenter():当指针穿过元素时出发

• mouseleave():当指针离开该元素时出发

JQuery HTML操作

• 返回元素内容
  html()方法；
  $().html:获取元素的内容

• 设置元素内容
  html(conten);
  conten：表示要设置的内容，他会覆盖原内容，可以是html标签

• 添加、删除元素
  append(conten)：向匹配元素中间添加内容,可包括标签
  prepend():向元素中每个结尾都添加内容
  after():向匹配元素之后添加内容
  addClass():为匹配元素添加类
  before()：向匹配元素之前添加内容
  insertAfter():将匹配的元素添加到指定元素的后面
  inserBefore():将匹配到的元素添加到指定元素之前
  remove():移除所有匹配到的元素
  removeAttr():在匹配到的元素中移除一定属性
  Attr():向匹配到的元素添加指定的属性
  removeClass():将匹配到的元素移除指定类
  val():设置或返回元素的值

• stop():停止当前动画

• parent():返回当元素的父元素

• next():返回当前元素的同胞元素

• find():返回匹配到的元素的后代

• animate(styles,options)

JQuery CSS操作

• $().css(name,value):用于将匹配到是元素，添加css样式
  $(‘p’).css(“background-color”,“red”):为p标签的背景设置为红色

• $().css(name:value,[name:value]):为匹配到的元素设置一系列样式

• $().css(name):用于获取该元素的该属性的值

JQuery Size操作

• height(value):设置匹配元素是高度
• width(value):设置匹配到的元素的宽度