jQurey
Posted 江子川
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQurey相关的知识，希望对你有一定的参考价值。
一、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)
})
所以代码示例如下：
<!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）