黑马程序员技术交流社区

标题: Web前端 [打印本页]

作者: 王文海520 时间: 2017-11-18 21:47
标题: Web前端
JS的事件

onfocus 获得焦点
onblur 失去焦点
onsubmit 提交的时候

JS的事件总结:

onload
onclick
onsubmit
onfocus
onblur
onchange 下拉列表改变事件
ondblclick 双击事件

键盘操作事件

onkeydown:
onkeyup
onkeypress

鼠标操作事件

onmousemove
onmouseout
onmouseover
onmousedown
onmouseup

C:/Users/Administrator/AppData/Local/YNote/data/qqEBE2595FAFE14C48C5D01E8533D8810E/7a0fcbe662844b8492b72a8c50ed3858/clipboard.png

C:/Users/Administrator/AppData/Local/YNote/data/qqEBE2595FAFE14C48C5D01E8533D8810E/a46a931676e24d1f8b91806c70a8fce3/ae8b0eca403a413988141bdf4b5e8f69.jpg
DOM Document Object Model 文档对象模型

将一个html的文档加载到内存形成一个树形结构从而操作树形结构就可以改变HTML的样子

C:/Users/Administrator/AppData/Local/YNote/data/qqEBE2595FAFE14C48C5D01E8533D8810E/b8a85039119240c2acc43dadbe4ac405/e872a966631b419d8142e146c2bfb3fb.jpg

JS的全局函数

parseInt()
parseFloat()
decodeURI() 解码
decodeURIComponent() 解码
encodeURI() 编码
encodeURIComponent() 编码
eval 将一段内容当成是JS的代码来执行
- 例如 var sss = "alert('aaaa')" eval(sss)

JQuery

JQuery  DOM树加载完毕后加载
Load  DOM树和图片等资源全部执行完毕后加载
table>tr*5>td*5 快捷键创建一个5行5列表格
JS对象和JQuery对象的转化
jquery => dom $("div")[0]
dom  =>  jquery $(dom对象)
C:/Users/Administrator/AppData/Local/YNote/data/qqEBE2595FAFE14C48C5D01E8533D8810E/f2620dc5cc044a568cfa38c88eda7c5f/9d27ee263e784ac28f82f8fdad9a4f23.jpg
JQ的效果函数

show() 显示
- JQ对象.show()
- JQ对象.show(" "); //slow normal fast 显示速度
- JQ对象.show(毫秒值); // 显示多长时间
- JQ对象.show(毫秒值 , function( ) { } );
hide() 隐藏
- JQ对象.hide()
- JQ对象.hide(" "); //slow normal fast 显示速度
- JQ对象.hide(毫秒值); // 显示多长时间
- JQ对象.hide(毫秒值 , function( ) { } );
slideDown)() 向下滑动
slideUp() 向上滑动
fadeIn() 淡入
fadeOut() 淡出
animate() 自定义动画
toggle() 单击切换函数
- JQ对象.toggle(fn1, fn2...) 单击第一下执行fn1 第二下执行fn2..

JQ的选择器

基本选择器
- id选择器
  - 用法 $("#id")
- 类选择器
  - 用法 $(".类名")
- 元素选择器
  - 用法 $("元素名称")
- 通配符选择器
  - 用法 $(" * ")
- 并列选择器
  - 用法 $("选择器, 选择器, 选择器")
层级选择器
- 后代选择器
  - 使用空格
- 子元素选择器
  - 使用 >
- 同级下一个元素
  - 使用+
- 之后的同级兄弟元素
  - 使用~
基本过滤选择器
:first 第一个
:last 最后一个
:eq(index) index索引处
:even 偶数行奇数索引
:dd 奇数行偶数索引
:contains() 内容中包含()的
属性选择器
- Input[type=" "] 焯去属性名为..的
表单选择器
- :input 所有input元素
- :text 所有文本框
- :checked 所有被选中的

JQuery对属性的操作的方法
attr():  操作的是自定义属性
removeAttr()
prop():  操作的是非自定义属性
removeProp():
addClass():
removeClass()

文档处理
   append()  添加
   appendTo() 添加到
   replaceAll()  替换
   remove() 移除
   html()  覆盖
   $().each(function(index,DOM对象){})  遍历

JQuery的遍历
$.each(objects,function(index,element){})

当用append添加一个已有的元素时 append会造成移动的效果

JQuery事件处理

trigger和triggerHandler的区别
- trigger 会触发浏览器默认同名函数执行事件冒泡
- triggerHandler 会触发自定义函数执行

JQuery的基本总结
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
* JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
* 引入JQuery的JS.
* window.onload和$(document).ready(function(){});区别?
      * onload页面加载完成后才会执行.执行一次
      * ready在页面的DOM树绘制完成就会执行.执行多次.
* JS对象与JQuery对象的转换.
      * JS-->JQuery: $(JS的对象)
      * JQuery-->JS: JQ对象.get(0), JQ对象[0]
* JQuery的选择器：(*****)
* 基本选择器：
      * ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
* 层级选择器：
      * 空格 ,> ,+ ,~
* 过滤:
      * :first,:last,:eq(),:even,:odd...
* 属性选择器:
      * [属性名],[属性名=’属性值’]...
* 表单选择器:
      * :input,:text,:password,:radio...
* 可见性:
      *
* 表单对象属性：
      * :checked,:selected,:enable,:disable
* JQuery实现效果:
* show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate()
* JQuery样式操作:
* css();
* JQuery属性操作的方法:
* attr(),removeAttr(),prop(),removeProp(),html(),text(),val(),addClass(),removeClass()
* JQuery文档处理:
* append(),appendTo(),insertBefore(),insertAfter(),remove(),clone(),replaceAll()
* JQuery的事件:
* click(),change(),submit(),dblclick(),keyUp(),keyDown()...
* toggler(),hover()  ---进行事件的切换.

9D27EE263E784AC28F82F8FDAD9A4F23.jpg (47.85 KB, 下载次数: 0)