你的位置:首页 > Java教程

[Java教程]jQuery

一、jQuery介绍

  jQuery是一个轻量级的js库(一万多行代码),把一些复杂的功能用方法封装起来,实现快速开发

  jQuery是建立在js基础上的,jQuery能实现的功能,js一定都能实现,但是js能实现的功能,jQuery不一定能实现。

  jQuery的语法就一句:$(selector).action()

  首先我们要从官网下载jQuery

  下载好之后

  <script src="jquery-3.2.1.js"></script>

  或者,也可以不用下载,用网络上免费的资源  这或许也是开源精神的一个体现吧,你不用所用的东西都得自己写出来,完全可以在前人的基础上,创造出更好的东西

  jQuery和js一样,主要的操作就两个:寻找标签和操作标签,我们就从这两个方面介绍jQuery

二、寻找元素  

jQuery 与 js的一个很大的区别就是在批量寻找标签的时候

基本选择器$("*")   通配选择器$("#id")  ID选择器$(".class")  类选择器$("element") 标签名
层级选择器$(".outer div")   后代选择器$(".outer>div")  子代选择器$(".outer+div")  毗邻选择器$(".outer~div")  $("element,.class,#id") 选择多个
基本筛选器(找到的结果为多个标签时)$("li:first") 第一个li标签$("li:eq(2)") 拿到索引为2的li标签$("li:even") 索引为偶数的 $("li:odd") 索引为奇数的 $("li:gt(3)") 索引大于3的标签(不包括3)$("li:lt(3)") 索引小于3的标签(不包括3)
属性选择器,用到属性,都得放到中括号里$('[id="div1"]') $('["hello="world"][id]')找自定义属性的方法,和css一样,表示既有一个hello属性,属性值为world,又有一个id属性的标签

还有一种表单选择器,是专门用于表单标签的,对于input标签里的type属性,本质也是属性查找

但是$("[type='text']") 可以简写成 $(":text"),注意这是针对于input标签的

过滤筛选器(与基本筛选器的区别就是写法,一定是这个写法好,如果选择的是把一个变量,写到字符串里(基本筛选器的写法)就变成字符串了)$("li").eq(2) $("li").first() $("ul li").hasclass("test")

下面是查找筛选器,对应js中的导航选择器

查找子标签:  $("div").children(".test") 找所有子代 $("div").find(".test")  找所有后代 向下查找兄弟标签: $(".test").next()  下一个标签   $(".test").nextAll()  后面所有的标签$(".test").nextUntil(条件) 后面所有的标签直到符合条件,不包括符合条件的那个,相当于开区间,两边都取不到 向上查找兄弟标签: $("div").prev()     $("div").prevAll()$("div").prevUntil() 查找所有兄弟标签: $("div").siblings()  这个方法在js中是没有的 查找父标签:  $(".test").parent()  取父标签(只有一个)  $(".test").parents()  一直往上,直到body层$(".test").parentsUntil() 上面那个方法没意义,用这个指定一个条件

这里我发现一个小问题,其实parents()的括号里也可以写条件,但是和parentsUntil()的区别是:

第一种方式不仅会找到直系亲属,只要是长辈都会被选择,但是第二种方法就只会选择直系父类

三、操作元素

当我们找到标签后,我们就可以对这些标签做一些事了

1.事件绑定

先来说说事件绑定,jQuery和js的一个不同点是,jQuery是对批量的标签做处理,调用方法的可以是批量的标签,但是js中调用方法的一定是某一个标签

jQuery中事件的名字比js中少了一个on,比如点击事件就是click,function也不是写在等号后面了,而是写到事件后面的括号里,比如点击$(“.item”)触发弹窗,可以写成这样:

<body> <div >点击</div> <script>  $(".item").click(function () {   alert(1343)  }) </script></body>

还有一种事件委派的方法:想一个例子,我们对一个表格进行增删改操作,当我们给一个按钮绑定删除的事件后,再新增一个删除按钮,这个按钮是否能自动绑定我们之前写的那个删除事件呢,在上一篇博客中说过这个问题,可以去看一下

在jQuery中,这个问题解决起来就简单多了,有一个on方法实现事件委派。给父标签绑定on事件,通过父标签指派子标签

<div > <div >点击</div></div>  <script>  $(".outer").on("click",".item",function () {   alert(13242)     }) </script></body>

注意这个附标签要找不变的那个父标签

有事件委派,就有时间解除(off),谁绑定的,就谁解除,要对应好

$(".outer").off()

2.each循环

不同于js中的for循环,jQuery中的循环是用的each方法

在js中的this,指代的是当前触发事件的标签,在jQuery中用$(this)表示,获取索引值是$(this).index()

each 循环有两种方式:

(1)遍历数组或者字典

<script>  arr=[11,22,33,44];  $.each(arr,function (i,j) {   console.log(i);//i是索引   console.log(j);//j是索引对应的元素  }) </script>

(2)遍历标签

<body><div > <ul>  <li >123</li>  <li >123</li>  <li >123</li>  <li >123</li>  <li >123</li> </ul></div> <script>  $(".item").each(function () {   $(this).click(function () {    alert($(this).index())   })  }) </script></body>

ps,有循环,按说就有continue和break啊,有的。在jQuery中return就代表了continue,而return false就代表了break

3.属性操作

通过attr方法对属性进行操作,$("ele").attr(),括号里只放属性名,就是取属性值,如果属性名后面还有个值,就是给属性赋值

对于input标签里表示默认的那个checked属性,如果用attr方法取属性值的话,会发现,如果没有这个属性的话,取到的值是undefined,这个其实是不方便的 ,对于checked和selected这两个属性,还有一个更合适的方法prop,用法和attr一样,但是对于这两个属性,如果有值,返回的是true,没值的话返回的是false

4.文本操作

在jQuery中的文本操作是text()和html(),赋值就把值写到括号里

<script>  //取值操作  console.log($(".item").eq(1).html());  console.log($(".item").eq(2).text());  //赋值操作  $(".item").eq(3).html("<p>hello</p>");  $(".item").eq(4).text("<p>hello</p>");  console.log($(".item").eq(3));  console.log($(".item").eq(4)); </script>

还有一个val方法,是专门为value这个属性打造的,用法跟上面一样,但是必须是固有属性有value的,自定义的那种不算

5.节点操作

(1)创建标签:$("<标签名>"),用变量接收这个新创建的标签时,变量名最好带一个$

(2)添加标签:可以在父标签下添加,也可以在兄弟标签中添加,主要记住下面的常用的几个就行

  $(“  ”).append()父标签添加子标签

  $(“  ”).appendTo()子标签添加到父标签中

  $(“  ”).after()  添加到兄弟标签后面

  $(“  ”).before()  添加到兄弟标签后面

 <script>  $new_li=$("<li>");//新建标签  $new_li.text("hello");//对新建的标签添加文本  $("ul").append($new_li);//父标签添加//  $("li").eq(2).after($new_li);//兄弟标签添加 </script>

(3)删除节点

有两种方式:remove()和empty(),第一种是把整个标签都删除,第二种是清空标签内容,但是标签还在。

(4)替换节点 replaceWith()

  $(“  ”).replaceWith($ele) 用后面的节点替换前面的那个标签

(5)拷贝节点  clone()  

<script>  $new_li=$("li").eq(-1).clone();  $("li").eq(2).after($new_li); </script>

6.动画效果

(1)隐藏与显示

在js中我们隐藏一个标签都是先写一个hide类,然后想隐藏哪个标签就给他添加这类,显示就移除这个类,在jQuery中,不用我们自己写这个类了,直接就有这个方法,hide()和 show()

还有一个toggle(),这个会自动判断当前状态,如果目标标签是隐藏装态,调用这个方法就会显示,否则就隐藏

还有个有趣的操作,这三个方法括号里可以加时间(以毫秒为单位),实现渐变的效果,事实上下面的几个方法都有这个操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> </style> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style>  .outer{   width:200px;   height: 200px;   background: red;  } </style></head><body><div ></div><button >显示</button><button >隐藏</button><button > 反转</button><script> $(".show").click(function () {  $(".outer").show(1000) }) $(".hide").click(function () {  $(".outer").hide(2000) }) $(".toggle").click(function () {  $(".outer").toggle(3000) })</script></body></html>

(2)滑动

slideUp()收起

slideDown()展开

slideToggle()判断当前状态

(3)淡入淡出

fadeIn()淡入

fadeOut()淡出

fadeToggle()反转

 

7.css操作

(1)对css属性的操作  

 //操作单个属性 $("div").css("background","green"); //操作多个属性 $("div").css({"background":"green","width":"400px"})

(2)获取元素在屏幕上的位置 offset()

一个元素在屏幕上的位置,是以距离屏幕坐上角的高度(top)和宽度(left)两个值来定位的

可以通过这两个位置来移动元素的位置: $("div").offset({left:200,top:300})

我们通过这个方法来写一个拖动元素的例子,用mousedown和mousemove事件,其中拿到鼠标的位置的方法是:

$("div").click(function (e) {  console.log("x",e.clientX)  console.log("y",e.clientY) })

所以代码示例如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> </style> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style>  .box {   width: 200px;   height: 200px;   background: red;  } </style></head><body><div ></div><button >显示</button><button >隐藏</button><button > 反转</button><script> var mouse_x = 0; var mouse_y = 0; //加一个鼠标进入框中就变个样式的样式 $(".box").mouseover(function () {  $(this).css("cursor", "move") }) $(".box").mousedown(function (e) {  mouse_x = e.clientX;  mouse_y = e.clientY;  var $box_top = $(".box").offset().top;  var $box_left = $(".box").offset().left;//这两个值应该是在mousedown的时候定义  $(document).mousemove(function (e) {//这个地方应该是document,而不是this   var new_mouse_x = e.clientX;   var new_mouse_y = e.clientY;   $(".box").offset({left: $box_left + new_mouse_x - mouse_x, top: $box_top + new_mouse_y - mouse_y})  })  //给谁绑定,给谁解除  $(document).mouseup(function () {   $(document).off()  }) })</script></body></html>
View Code

(3)position()方法

这个也是用来获取元素位置,与offset()的区别是参照物不同,offset()的参照物是当前可视窗口,position的参照物是已定位的父级标签,如果找不到就一直往上找,直到body标签,用法上和offset()一样

(4)scrollTop()

括号里为空表示取滚动条的当前位置,有值的话为设置滚动条位置

如果是只整个窗口的滚动条,写法是$(window).scrollTop(),但是调用这个方法的不必须是window窗口,只要有滚动条的元素都可以,比如在css样式中设置overflow:scroll,如果内容超出盒子范围,就会有滚动条

我们可以写一个返回顶部的按钮,当屏幕到一个指定位置时,按钮出现,点击后返回顶部

<script> $(window).scroll(function () {  //监听进度条  if ($(window).scrollTop()>200){  $(".top").show()   }   else{   $(".top").hide()  } }) $(".top").click(function () {  $(window).scrollTop(0) })</script>

(5)取元素宽度和高度

对于一个元素占据的大小,有这么几个属性,首先是元素内容的大小,然后是加了内边距padding后的大小,然后就是加了边框border的大小,最后还有外边距margin

在jQuery中,可以用以下的方法分别取到这些值:

  取元素本身内容的高度和宽度:

  $(“  ”).height()

  $(“  ”).width()

  取元素加了padding之后的高度和宽度:

  $(“  ”).innerHeight()

  $(“  ”).innerWidth()

  取元素加了padding和border之后的高度和宽度:

  $(“  ”).outerHeight()

  $(“  ”).outerWidth()

  取元素加了padding,border和margin之后的高度和宽度:

  $(“  ”).outerHeight(true)

  $(“  ”).outerWidth(true)