Jquery学习笔记——第二天

Jquery学习打卡

  • Jquery学习笔记---第二天
  • Jquery笔记 第二天
  • 1.Jquery的事件处理
    • a)Js中事件处理的2种方式
    • b)Jquery中通过编程式的方式加入事件处理
    • c)注意细节
      • i.this关键字
      • ii.event 事件
    • d)复合事件
      • i.toggle()
      • ii.hover()
    • e)事件处理的完整写法(了解)
    • f)特殊事件【了解】
    • g)事件委派
  • 2.Jquery中的DOM编程
    • a)Jquery创建新的HTML标签
      • i.创建标签
      • ii.决定放置的位置
    • b)Jquery删除现有的标签
      • i.清空标签内部的信息
      • ii.删除标签
    • c)Jquery替换
    • d)克隆clone()
    • e)一组关系方法
    • f)案例:级联菜单
  • 3.Jquery中对于Ajax的支持
    • a)学习$.ajax()函数的参数
    • b)补充细节:
      • i.建议不要选用JSON.parse()操作存在浏览器差异建议使用$.parseJSON();
      • ii.如果dataType指定为json化,那么jquery自动的把返回JSON字符串转换成js对象
      • iii.serialize() 函数
      • iv.$.trim(string) 去除空格了
      • v.Jquery中ajax函数的变种

Jquery学习笔记—第二天

Jquery笔记 第二天

1.Jquery的事件处理

a)Js中事件处理的2种方式

Jquery学习笔记——第二天_第1张图片

b)Jquery中通过编程式的方式加入事件处理

Jquery学习笔记——第二天_第2张图片

c)注意细节

i.this关键字

Jquery学习笔记——第二天_第3张图片

ii.event 事件

Jquery学习笔记——第二天_第4张图片

d)复合事件

i.toggle()

复合多个单击操作
toggle(fun1,fun2,fun3,fun4...)

ii.hover()

在这里插入图片描述

e)事件处理的完整写法(了解)

Jquery学习笔记——第二天_第5张图片

f)特殊事件【了解】

one函数 保证一个事件 只执行一次

g)事件委派

通过click() mouseover()…前面所学的方法 包括 on() 都只能为现有的元素增加事件,不能为通过DOM动态创建元素增加事件。
如何为所有的复合要求的标签(现有的,动态创建的)都加上事件?

.live(“click”,function(){

})

Jquery学习笔记——第二天_第6张图片

2.Jquery中的DOM编程

Jquery学习笔记——第二天_第7张图片

a)Jquery创建新的HTML标签

i.创建标签

   var div = $(<div>suns</div>);

ii.决定放置的位置

Jquery学习笔记——第二天_第8张图片

b)Jquery删除现有的标签

i.清空标签内部的信息

ii.删除标签

Jquery学习笔记——第二天_第9张图片

c)Jquery替换

Jquery学习笔记——第二天_第10张图片

d)克隆clone()

clone()不复制事件
clone(true) 复制事件

Jquery学习笔记——第二天_第11张图片

e)一组关系方法

Jquery学习笔记——第二天_第12张图片

f)案例:级联菜单

Jquery学习笔记——第二天_第13张图片

3.Jquery中对于Ajax的支持

Jquery学习笔记——第二天_第14张图片

a)学习$.ajax()函数的参数

$.ajax({
    url:xxxxx
    data:name=suns&password=123456, 向服务器传递的数据
     dataType: text|json  text代表纯文本信息,json自动封装js对象
    type:默认get post
     success:function(data){
          监听响应 data == xhr.responseText
          DOM方式进行程序的处理
      }
})

b)补充细节:

i.建议不要选用JSON.parse()操作存在浏览器差异建议使用$.parseJSON();

ii.如果dataType指定为json化,那么jquery自动的把返回JSON字符串转换成js对象

iii.serialize() 函数

Jquery学习笔记——第二天_第15张图片

iv.$.trim(string) 去除空格了

v.Jquery中ajax函数的变种

$.get(url, [data], [callback], [type]) 发送的ajax 应用get方式发送
$.get(/xxx/xx.do,”name=suns&password=111,function (data){
     等价success的操作
})
$.post(url, [data], [callback], [type]) 发送的ajax 应用post方式发送
$.post(/xxx/xx.do,”name=suns&password=111,function (data){
     等价success的操作
})
load(“url”);

异步的加载 局部的页面内容。

Jquery学习笔记——第二天_第16张图片

Jquery学习笔记——第二天_第17张图片

你可能感兴趣的:(Jquery)