jQuery使用

导入jQuery

1. 本地导入
   <script src="jquery-3.4.1.min.js"></script>
2. 网络导入
   • 百度:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
   • 新浪:<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

jQuery语法

基础语法

$(匿名函数) :页面加载完毕即执行

<script>$(function(){alert("欢迎使用jQuery")})
</script>

$(selector).action()通过选取HTML元素,并对选取的元素执行某些操作

	$("div").hide();//隐藏<div>元素

选择器

//元素选择器$("div").hide();//隐藏<div>元素
//class选择器$(".div").hide();//隐藏clss=div的元素
//id选择器	$("#div").hide();//隐藏id=div的元素

常用事件

• 鼠标事件
  • 点击: click
  • 双击: dblclick
  • 鼠标移入: mouseenter
  • 鼠标移出:mouseleave
• 键盘事件
  • 键按下的过程 keydown
  • 键被按下 keypress
  • 键被松开 keyup
• 表单事件
  • 提交表单 submit
  • 表单被改变 change
  • 获得焦点 focus
  • 失去焦点: blur

jQuery特效

默认的隐藏/显示

$(元素).hide() //隐藏
$(元素).show()//显示
$(元素).toggle()//显示/隐藏

			$("#btn1").click(function(){//当按钮被点击时隐藏$("#d1").hide();});$("#btn2").click(function(){//当按钮被点击时显示$("#d1").show();});$("#btn3").click(function(){//当按钮被点击时隐藏/显示$("#d1").toggle();});

淡入淡出的隐藏显示

		<button id="btn4">淡入</button><button id="btn5">淡出</button><button id="btn6">淡入/淡出</button><div id="d2" style=" height:100px;width:200px;border: 1px solid red;"></div><script>$("#btn4").click(function(){//当按钮被点击时淡入$("#d2").fadeIn(slow);});$("#btn5").click(function(){//当按钮被点击时淡出$("#d2").fadeOut(fast);});$("#btn6").click(function(){//当按钮被点击时淡入/淡出$("#d2").fadeToggle();});</script>

向上向下的隐藏显示

		<button id="btn7">向上滑动</button><button id="btn8">向下滑动</button><button id="btn9">向上/向下</button><div id="d3" style=" height:100px;width:200px;border: 1px solid red;"></div><script>$("#btn7").click(function(){//当按钮被点击时向上隐藏$("#d3").slideUp();});$("#btn8").click(function(){//当按钮被点击时向下展示$("#d3").slideDown();});$("#btn9").click(function(){//当按钮被点击时向上/向下$("#d3").slideToggle();});</script>

动画:animate()

		<button id="btn1">开启动画</button><button id="btn2">停止动画</button><div id="d1" style=" height:100px;width:200px;border: 1px solid red;"></div><script>$("#btn1").click(function(){//当按钮被点击时启动动画$("#d1").animate({width:'150px',height:'50px',borderWidth:'3px'},3000);});$("#btn2").click(function(){//当按钮被点击时,停止动画$("#d1").stop();});</script>

jQuery操作DOM

获取值

• text() 返回所选元素的文本内容
• html()返回所选元素的内容,包括html标记
• val()返回表单字段的值

		<button id="btn1">获取Text</button><span id="s1">Span标签</span><br /><button id="btn2">获取html</button><div id="d1">div标签</div><br /><button id="btn3">获取val</button><input type="text" id="i1" value="input1"><br /><script>$("#btn1").click(function(){alert($("#s1").text());})$("#btn2").click(function(){alert($("#d1").html());})$("#btn3").click(function(){alert($("#i1").val());})</script>

• 获取某一个属性值:$(元素).attr(属性名)
  var href = $("a").attr("href");

设置值

• text(新值) 设置所选元素的文本内容
• html(新值)设置所选元素的内容,包括html标记
• val(新值)设置表单字段的值
• 给某一个属性赋值:$(元素).attr(属性名,新值)
• $("a").attr("href","demo1.html");//修改地址

添加元素

• append():在元素的结尾插入内容
• preoend():在元素开头插入内容
• after():在被选玄素之后插入内容
• brfore()在被选元素之前插入内容

删除元素

• remove()删除被选元素和其子元素(可过滤删除元素)
• empty()从被选元素中删除子元素

//删除所有id=d1的p元素
$("p").remove("#d1");

CSS类

• addClass() 向被选元素添加一个或多个类

	$("#d1").addClass("blue")

• removeClass()从被选元素删除一个或多个类

	$("#d1").removeClass("blue")

• toggleClass()对备选元素进行添加删除类的切换操作

	$("#d1").toggleClass("blue")

• css() 设置或返回样式属性

//设置样式
$("#d1").css("width","200px")$("#d1").css({"width":"200px","height":"200px"});
//获取样式
$("#d1").css("width");

尺寸

jQuery遍历

父元素

• parent()返回当前元素的直接父元素

• parents()返回当前原色的所有祖先元素,直到根元素为止

• parents("元素/类/id")过滤查找父元素

• parentsUntil()返回介于两个给定元素之间的所有祖先元素

子元素

• children()返回被选元素的所有直接子元素
  -children( "元素/类/id")筛选直接子元素
• find()可以查找所有子孙

同胞元素

• siblings()返回所有同袍元素
• siblings( "元素/类/id")筛选同胞元素
• next()返回下一个同胞元素
• nextAll()返回被选元素以后的所有同胞元素
• nextUntil()返回介于两个元素之间的所有同胞元素
• prev()返回上一个
• prevAll()返回之前所有
• prevUntil()返回介于两个元素之间的所有同胞元素

过滤方法

• first() 返回被选元素的首个元素
• last() 返回被选元素的最后一个元素
• eq() 返回被选元素的指定索引号的元素,首个为0
• filter("元素/类/id") 返回匹配标准的元素
• not("元素/类/id")返回不匹配标准的元素

jQuery AJAX

Get和Post方法

• $.get(URL,callback)使用get请求从服务器请求数据

  	$(function () {//页面加载完成时启动$("#btn").click(function () {//当按钮被点击时启动$.get("url",function (data) {//AJAX从后台发送get请求,请求地址,回传数据$("#res").html(data);})})})

• $.post(URL,value,callback)使用get请求从服务器请求数据

	$(function () {//页面加载完成时启动$("#btn").click(function () {//当按钮被点击时启动$.post("url",{name='zs'},function (data) {//AJAX从后台发送post请求,请求地址,携带数据,回传数据,回传数据类型$("#res").html(data);})})})

ajax方法

$.ajax({ });使用更方便

 $.ajax({url:"请求地址",data:{"数据"},type:"请求方式",success://响应操作dataType:"json";})