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()  ---进行事件的切换.

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()  ---进行事件的切换.