jQuery的一些小结

jQuery的一些小结

1.jquery简介

jquery是一个javaScript函数库,极大地简化了javaScript编程。
jquery库包含以下特性:

html元素选取
html元素操作
css操作
html事件函数
js特效和动画
ajax

在页面中添加jquery库
1.下载好的jquery包
<head>
	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
2.使用cdn引入(例如百度cdn)
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

通过jquery,您可以选取(查询,query) HTML元素,并对他们执行"操作"(actions)。
语法格式:$(selector).action()
使用美元符号定义jquery
选择符(selector)查询和查找HTML元素
jquery的action()执行对元素的操作。

例如文档就绪函数:
 $(document).ready(function(){
      ==要执行的内容==
    })
这是为了防止文档在完全加载(就绪)之前运行jquery代码。

2.选择器

2.1 jquery元素选择器

jquery使用css选择器来选择HTML元素。
$("p") 选择<p>元素
$(".nav")  选取所有class="nav"的元素
$("#nav")  选取所有id="nav"的元素
$("p.nav")选取所有class="nav"的<p>元素

2.2 jquery属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

2.3jquery css选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
例如:把所有的p元素的背景颜色更改为红色
$("p").css("background-color","red");

2.4一些选择器实例

语法描述
$(this)当前 HTML 元素
$(“p”)所有 <p>元素
$(“p.intro”)所有 class=“intro” 的 <p>元素
$(".intro")所有 class=“intro” 的元素
$("#intro")id=“intro” 的元素
$(“ul li:first”)每个<ul>的第一个<li>元素
$("[href$='.jpg']")所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)id=“intro” 的<div>元素中的所有 class=“head” 的元素

3.jquery事件函数

例如:当被点击的时候会触发调用一个函数
$("button").click(function() {..some code... } )

例如:隐藏所有的<p>元素
$("p").hide();

jq代码也可以和js代码一样放在一个单独的文件中,易于维护,引入即可
引入方式同jq包一样

<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="myFunctions.js"></script>
</head>

jq名称冲突
如果js库中的一些函数也使用$符号,可以使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict() 来代替$符号
例如:
$(document).ready(function(){
     var jq = jQuery.noConflict();
     jq("p").css("background-color","red");
 })

jquery事件方法例子

函数绑定函数至
$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

4.效果

4.1 隐藏、显示

隐藏使用 hide()
显示使用 show()
切换显示隐藏 toggle()


语法:
$(selector).hide(speed,callback);  相当于 style="display: none;"
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的speed参数规定隐藏/显示的速度,可以取以下值:"slow","fast"或毫秒
可选的callback参数是隐藏或显示完成后所执行的函数名称。

可以用来显示或隐藏HTML元素:
$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
切换显示或隐藏
$("button").click(function(){
  $("p").toggle();
});

4.2淡入、淡出

通过jquery,您可以实现元素的淡入淡出效果。
有四种fade方法:
fadeIn();  淡入显示
语法:
		$(selector).fadeIn(speed,callback);
		可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
        可选的 callback 参数是 fading 完成后所执行的函数名称。
        
fadeOut();淡出隐藏
语法:
		$(selector).fadeOut(speed,callback);
		可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
        可选的 callback 参数是 fading 完成后所执行的函数名称。
        
fadeToggle();淡入淡出切换
语法:
		$(selector).fadeToggle(speed,callback);
		可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
        可选的 callback 参数是 fading 完成后所执行的函数名称。
        
fadeTo();允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
		$(selector).fadeTo(speed,opacity,callback);
		必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
		必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
		可选的 callback 参数是该函数完成后所执行的函数名称。

fadeIn()
		$("#swap").fadeIn();
fadeOut()方法
		$("#swap").fadeOut("slow");
fadeToggle()方法
		$("#swap").fadeToggle(1000);
        $("#swap2").fadeToggle(2000);
fadeTo()方法
		$("#swap").fadeTo(2000,0.15)
		$("#swap").fadeTo(2000,0.8)

4.3滑动

通过 jQuery,您可以在元素上创建滑动效果。
拥有三种slide滑动方法:
slideDown() 向下滑动
语法:
		$(selector).slideDown(speed,callback);
		可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
        可选的 callback 参数是滑动完成后所执行的函数名称。
        
slideUp()向上滑动
语法:
		$(selector).slideUp(speed,callback);
		可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
        可选的 callback 参数是滑动完成后所执行的函数名称。

slideToggle() 可以在 slideDown() 与 slideUp() 方法之间进行切换。
语法:
		$(selector).slideToggle(speed,callback);
		可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
		可选的 callback 参数是滑动完成后所执行的函数名称。
		
slideDown()
		$("#swap").slideDown(2000);
        $("#swap2").slideDown("slow")
slideUp()
 		$("#swap").slideToggle("fast")
        $("#swap2").slideToggle("slow")
slideToggle()
		 $("#swap").slideUp("fast")
         $("#swap2").slideUp("slow")

4.4动画

默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

jQuery animate() 方法允许您创建自定义的动画。
animate() 方法用于创建自定义动画。
语法:
		$(selector).animate({params},speed,callback);
		必需的 params 参数定义形成动画的 CSS 属性。
		可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
		可选的 callback 参数是动画完成后所执行的函数名称。

 $("#swap").animate({
         left:"500px",
         color:"red",
},2000);
您也可以把属性的动画值设置为 "show"、"hide" 或 "toggle":	
 $("#swap").animate({
         left:"500px",
         color:"red",
         height:"hide"//隐藏高度
},2000);	

jquery 提供针对动画的队列功能
例如
$("#btn3").on("click",function(){
    let div = $("#swap");
    div.animate({height:"500px",opacity:"0.4"},"slow");
    div.animate({width:"500px",opacity:"0.8"},"slow");
    div.animate({height:"200px",opacity:"0.4"},"slow");
    div.animate({width:"200px",opacity:"0.8"},"slow");
})

4.5停止动画

jQuery stop() 方法
语法:
		$(selector).stop(stopAll,goToEnd);
		jQuery stop() 方法用于停止动画或效果,在它们完成之前。
		stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

 $("#swap").stop();
 stop()
 如果动画是队列的情况,在点击事件中停止,一次只能停止一个动画。
 
 stopAll
 语法:
 		$(selector).stop(stopAll,goToEnd);
 		可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
		可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
	 $("#swap").stop(); // 停止当前动画,继续下一个动画
     $("#swap").stop(true);// 停止当前动画,清空队列(停止全部)[清除元素的所有动画]
     $("#swap").stop(false,true);// 让当前动画直接到达末状态 ,继续下一个
     $("#swap").stop(true,true);// 清空队列,直接完成当前动画

4.6Callback 回调函数

由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加 Callback 函数。

4.7Chainning

通过 jQuery,您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。
例如
$("#swap").css("color","red").slideUp(2000).slideDown(2000);

5 HTML DOM操作

5.1获取、添加

获取内容
	text()	设置或返回所选择元素的文本内容
	html()  设置或返回所选择元素的内容(包括html标记)
	val() 设置或返回表单字段的值

$("#swap").text();
$("#swap").html();
$("#in").val()

设置内容
$("#in").val("胡桃里") //设置表单字段值
$("#swap").text("胡桃里");
$("#swap").html(`<span>胡桃里</span>`);

设置属性
		attr() 也用于设置/改变属性值/或返回被选元素的属性值
返回被选元素的属性值。语法:$(selector).attr(attribute)
设置被选元素的属性和值。语法:$(selector).attr(attribute,value)
设置多个属性/值对。语法:$(selector).attr({attribute:value, attribute:value ...})

 $("img").attr("width","180");//设置被选元素的属性和值。
 $("img").attr("width")//返回被选元素的属性值。

5.2添加

通过jquery,可以很容易地添加新元素/内容。

添加新的html内容:
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append() 被选元素结尾
	$("#swap").append("hello world");
prepend() 被选元素开头
	$("#swap").prepend("hello world");
after() 被选元素之后
	$("#swap").after("hello world");
before()
	$("#swap").before("hello world");

5.3删除

如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素

remove() 删除本身以及子元素
	$("#swap").remove();
empty() 删除被选元素的子元素。
	$("#swap").empty();

 $("input").remove("#in");   删除id=“in”的所有input元素

5.4 CSS类

获取并设置css类

通过 jQuery,可以很容易地对 CSS 元素进行操作。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

addClass() 添加类
	 $("#swap").addClass("blue");
removeClass() 删除类
	 $("#swap").removeClass("red");
toggleClass()  添加、删除切换
 	$("#swap").toggleClass("red");

css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。

返回css属性
语法:css("propertyname");
$("#swap").css("background-color");

设置css属性
语法:css("propertyname","value");
$("#swap").css("background-color","yellow");
 $("#swap").css({"background-color":"yellow"});
 
设置多个css属性
css({"propertyname":"value","propertyname":"value",...});

5.5尺寸

通过 jQuery,很容易处理元素和浏览器窗口的尺寸。

jQuery 提供多个处理尺寸的重要方法:

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

6遍历

祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

6.1祖先

通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。

向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
parent()  方法返回被选元素的直接父元素。
parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil()  方法返回介于两个给定元素之间的所有祖先元素。

parent()
		$("span").parent().css({"color":"red","border":"2px solid red"});
parentsUntil()
		$("span").parentsUntil("body").css({"color":"red","border":"2px solid red"});//不包含body

6.2后代

后代是子、孙、曾孙等等。
通过 jQuery,能够向下遍历 DOM 树,以查找元素的后代。

向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
children()  方法返回被选元素的所有直接子元素。
find()  方法返回被选元素的后代元素,一路向下直到最后一个后代。

children()
		 $("#swap2").children().css({"color":"red","border":"2px solid red"});
find()
        $("#swap2").find("*").css({"color":"red","border":"2px solid red"});

children()
在这里插入图片描述

find()
在这里插入图片描述

6.3同胞

同胞拥有相同的父元素。
通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素。

在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
siblings()  方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll()  方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev() 方法返回被选元素的前一个同胞元素。
prevAll() 方法返回被选元素的所有前面的同胞元素。
prevUntil() 方法返回介于两个给定参数之间的所有前面的同胞元素。

6.4过滤

缩小搜索元素的范围

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first()方法返回被选元素的首个元素。
   $("div p").first();选取首个 <div> 元素内部的第一个 <p> 元素
last()方法返回被选元素的最后一个元素。
 	$("div p").last();选择最后一个 <div> 元素中的最后一个 <p> 元素
eq()方法返回被选元素中带有指定索引号的元素。
    $("p").eq(1);选取第二个 <p> 元素(索引号 1):

filter()方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
	 $("p").filter(".intro").css("background-color","yellow");返回带有类名 "intro" 的所有 <p> 元素
not()方法 返回不匹配标准的所有元素。
	 $("p").not(".intro").css("background-color","yellow");返回不带有类名 "intro" 的所有 <p> 元素

7.AJAX

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用ajax发送传统请求get/post

 $.ajax({
            url:'http://localhost:8080/web/user/deleteUserCon',
            type:'get',
            dataType:"text",
            data:{id:24},
            success: function(data){
                alert("返回数据成功:"+data);
            },
            error: function(){
                alert('fail');
            }
})

使用ajax发送rest风格请求
一般参数:

$.ajax({
            url:'http://localhost:8080/web/user/deleteUser/23',
            type:'DELETE',
            dataType:"text",
            success: function(data){
                alert("返回数据成功:"+data);
            },
            error: function(){
                alert('fail');
            }
})

参数为对象时:contentType:“application/json”,对象为json字符串

 let user = {id:"24"}
 $.ajax({
      url:'http://localhost:8080/web/user/deleteUserBy',
      type:'DELETE',
      contentType:"application/json",
      data:JSON.stringify(user),
      success: function(data){
          alert("返回数据成功:"+data);
      },
      error: function(){
          alert('fail');
     }
})

jquery中的ajax方法参数介绍:
https://www.cnblogs.com/tyblwmbs/p/10811631.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值