JQuery高级

Jquery操作标签样式

动态修改CSS样式:
	标签的Jquery对象.css("属性名","属性值");//修改属性
获取其css样式:
 var 属性值 = 标签的Jquery对象.css("属性名");

jQuery的Dom操作

尾部添加节点

append(添加的节点对象)
	父容器标签JQ对象.append(添加的)

插入节点


子标签.before(添加的子节点);//在子标签前插入要添加的节点
要添加的节点.insertBefore(子标签)//将添加的标签添加到子标签之前
子标签.after(要添加的子节点)//在子标签之后插入节点
要添加的子节点.insertAfter(子标签)将添加的标签添加到子标签之后
父标签.prepend(要添加的子节点);//头部插入

替换节点

子节点.replaceWith(替换后的节点)

删除节点

节点.remove();//删除某一节点
节点.empty();

节点包裹

node1.wrap(node2);用node2,包裹node1
node.unwrap();//删除node的父节点

Jquery事件


文档加载事件
	文档加载完成后出发
	$(decument).read(function(){}) 
获取焦点
		获取焦点时出发
	  语法:
	    $("选择器").focus(function(){})
失去焦点
      当输入框失去焦点
      $("选择器").blur(function(){})
点击事件
      $("选择器").click(function(){})
双击事件
      $("选择器").dblclick(function(){})
键盘按下事件
      $("选择器").keyDown(function(){})
鼠标移入
      当鼠标移入时
      $("选择器").mouseenter(function(){})
鼠标移出
      当鼠标移出时
      $("选择器").mouseleave(function(){})
内容改变事件
当输入框中内容发生改变,并失去焦点时出发
      $("选择器").change(function(){})

事件的打开与关闭

  $("选择器").off("事件名");
  
  $("选择器").on("事件名",function(ev){})

获取发生事件的标签对象

this:
	$(this)//谁发生事件,他就代表谁

Jquery动效

显示隐藏
    显示: show()
    隐藏: hide()
淡入淡出
    淡入: fadeIn(时间)
    淡出: fadeOut(时间)
滑入滑出
    滑入: slideDown()
    滑出: slideUp()

jQuery的Ajax

ajax函数

$.ajax({
    url:"请求url?param1=v1", //url ajax请求的目标服务器地址
    type:"get|post", //type 指定请求方式
    headers:{ //headers 设置请求头参数
      key1:"value1",
      key2:"value2"
    },
    data:{ //data 传递的参数
      key1:"v1",
      kye2:"v2"
    },
    contentType:"application/json", //contentType 请求上传的数据类型
    dataType:"application/json", //dataType 预期的服务器响应的数据类型
    processData:false, //processData 设置数据是否压缩传输
    success:function(res){ 
      //success ajax请求成功后执行,参数res就是服务器返回的数据
    },
    error:function(e){ 
      //error ajax请求出现错误执行,参数e表示异常信息对象
    }
});

get函数

$.get(url,data,success(response,status,xhr),dataType)
url:请求地址,必传
data:上传的参数,,可选
success:请求成功时运行的函数。可选
    response:响应的内容
    status:响应状态
    xhr:包含XMLHttpRequest对象
dataType:服务器响应的数据类型,默认执行智能判断.可以写json、text、html,xml等

post函数

$.post(url,data,success(response,status,xhr),dataType)
url:请求地址,必传
data:上传的参数,,可选
success:请求成功时运行的函数。可选
    response:响应的内容
    status:响应状态
    xhr:包含XMLHttpRequest对象
dataType:服务器响应的数据类型,默认执行智能判断.可以写json、text、html,xml等

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值