一、jQuery介绍
jQuery是一个轻量级的js库(一万多行代码),把一些复杂的功能用方法封装起来,实现快速开发
jQuery是建立在js基础上的,jQuery能实现的功能,js一定都能实现,但是js能实现的功能,jQuery不一定能实现。
jQuery的语法就一句:$(selector).action()
首先我们要从官网下载jQuery
下载好之后
<script src="jquery-3.2.1.js"></script>
或者,也可以不用下载,用网络上免费的资源,http://www.bootcdn.cn/,然后找到jQuery,复制script代码,直接粘贴到你的代码中就ok了
这或许也是开源精神的一个体现吧,你不用所用的东西都得自己写出来,完全可以在前人的基础上,创造出更好的东西
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 class="item">点击</div> <script> $(".item").click(function () { alert(1343) }) </script> </body>
还有一种事件委派的方法:想一个例子,我们对一个表格进行增删改操作,当我们给一个按钮绑定删除的事件后,再新增一个删除按钮,这个按钮是否能自动绑定我们之前写的那个删除事件呢,在上一篇博客中说过这个问题,可以去看一下
在jQuery中,这个问题解决起来就简单多了,有一个on方法实现事件委派。给父标签绑定on事件,通过父标签指派子标签
<div class="outer"> <div class="item">点击</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 class="outer"> <ul> <li class="item">123</li> <li class="item">123</li> <li class="item">123</li> <li class="item">123</li> <li class="item">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 class="outer"></div> <button class="show">显示</button> <button class="hide">隐藏</button> <button class="toggle"> 反转</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) })
所以代码示例如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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 class="box"></div> <button class="show">显示</button> <button class="hide">隐藏</button> <button class="toggle"> 反转</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>
(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)
扩展方法 (插件机制)
jQuery.extend(object)
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
<script> jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)
增加两个插件方法:
<body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script src="jquery.min.js"></script> <script> jQuery.fn.extend({ check: function() { $(this).attr("checked",true); }, uncheck: function() { $(this).attr("checked",false); } }); $(":checkbox:gt(0)").check() </script> </body>