JQuery之基本操作

jQuery介绍
1.jQuery是一个轻量的、兼容多浏览器的javaScript库。
2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化javaScript编程。它的宗旨就是：'Write less,do more.'

jQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$('#i1').html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对象
var variable = DOM对象
$variable[0]  //jQuery对象转成DOM对象

拿上面的例子，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

查找标签
1、选择器
id选择器：
$('#id')

标签选择器：
$('tagName')

class选择器：
$('.className')

配合使用：
$('div.c1') //找到c1 class类的div标签

所以元素选择器：
$('*')

组和选择器：
$('#id,.className,tagName')

层级选择器：

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器：

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单常用筛选：

:text
:password
:file
:radio
:checkbox:submit
:reset
:button$(':checkbox')   //找到所有的checkbox

:enabled
:disabled
:checked
:selected

例子：

找到可用的input标签

<form><input name="email" disabled="disabled" /><input name="id" />
</form>$("input:enabled")  // 找到可用的input标签

找到被选中的option：

<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">广州市</option><option value="shenzhen">深圳市</option>
</select>$(":selected")  // 找到所有被选中的option

筛选器

下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

操作标签

样式操作

样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

CSS

css("color","red")//DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置：

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

<!DOCTYPE html>
<html lang="zh-CN">
<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><style>.c1 {width: 100px;height: 200px;background-color: red;}.c2 {height: 50px;width: 50px;position: fixed;bottom: 15px;right: 15px;background-color: #2b669a;
    }.hide {display: none;}.c3 {height: 100px;}</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div><button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.3.1.min.js"></script>
<script>$(window).scroll(function () {if ($(window).scrollTop() > 100) {$("#b2").removeClass("hide");}else {$("#b2").addClass("hide");}});$("#b2").on("click", function () {$(window).scrollTop(0);})
</script>
</body>
</html>

返回顶部示例

尺寸：

height()   //获取内容的高度
width()    //获取内容的宽度
innerHeight()     //内容+内填充
innerHeigh()      //内容+padding+边框

文本操作
文本值：

text()         //获取值
text('val')    //写参数就是在改原来的参数

HTML代码:

$("#d1").html()     //"<h1>注释是代码之母</h1>"$("#d1").html("<h1>永远不要高估自己！</h1>")

值：

$("input[name='username']").val()   //获取值
$("input[name='username']").val('egon')   //设置值

示例：

获取被选中的checkbox或radio的值：<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用：
$("input[name='gender']:checked").val()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录zhc</title><style>.error {color: red;}</style></head>
<body>
<form action=""><p><label for="username">用户名</label><input type="text" id="username" name="username"><span class="error"></span></p><p><label for="pwd">密码</label><input type="password" id="pwd" name="pwd"><span class="error"></span></p><p><input type="submit" id="b1" value="登录"></p>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>$("#b1").click(function () {var flag = true;$(".error").text("");var $username = $("#username");var $pwd = $("#pwd");if ($username.val().length === 0){$username.next().text('用户名不能为空！');flag = false;}if ($pwd.val().length === 0){$pwd.next().text('密码不能为空！');flag = false;}return flag})
</script>
</body>
</html>

自定义登录校验示例

属性操作
用于ID等或自定义属性：

attr(attrName)            //获取属性值（适用于文本）
attr(attrName,attrValue)  //为所有匹配元素设置一个属性值
attr({k1:v1, k2:v2})     //为匹配的元素设置多个值
removeAttr()                //从每一个匹配的元素中删除一个属性用于checkbox和radio
prop()                //获取属性  （选中与否）
removePorp()     //移除属性

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true);
</script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全选反选取消练习</title></head>
<body>
<button id="b1">全选</button>
<button id="b2">取消</button>
<button id="b3">反选</button>
<table border="1"><thead><tr><th>#</th><th>姓名</th><th>爱好</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>Egon</td><td>唱歌</td></tr><tr><td><input type="checkbox"></td><td>Alex</td><td>吹牛逼</td></tr><tr><td><input type="checkbox"></td><td>Yuan</td><td>上课</td></tr></tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>$("#b1").click(function () {$("table :checkbox").prop("checked",true)});$("#b2").click(function () {$("table :checkbox").prop("checked",false)});$("#b3").click(function () {var $checkboxs = $("table input:checkbox");for (let i=0;i<$checkboxs.length;i++) {var $currentCheckbox = $($checkboxs[i]);var flag = $currentCheckbox.prop("checked");$currentCheckbox.prop("checked", !flag)}})
</script>
</body>
</html>

示例：全选、反选、取消

文档处理
要先用js来创建一个标签

var A=document.createElement('p');  //创建标签p
pEle.innerText = 'qqqqqqqqqq'        //为标签p添加文档添加到指定元素内部的后面
$("B").append(A)          // 追加在$("#d1")标签内的最后
$(A).appendTo($("B")添加到指定元素内部的前面
$("B").prepend(A)        //追加在内部的前面
$(A).prependTo(B)       // 把A前置到B添加到指定元素外部的后面
$(A).after(B)               // 把B放到A的后面
$(A).insertAfter(B)       // 把A放到B的后面添加到指定元素外部的前面
$(A).before(B)             // 把B放到A的前面
$(A).insertBefore(B)     // 把A放到B的前面移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>克隆</title><style>.b1 {height: 50px;width: 100px;background-color: blue;color: white;}</style>
</head>
<body><button class="b1">屠龙宝刀，点击就送</button><script src="jquery-3.3.1.min.js"></script>
<script>$(".b1").click(function () {console.log(this);$(this).clone(true).insertAfter(this);})
</script>
</body>
</html>

克隆示例

事件

常用事件

click(function(){...})
hover(function(){...})
bulur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

keydown和keyup事件组合示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>批量操作</title>
</head>
<body>
<table border="1"><thead><tr><th>#</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>Egon</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>Alex</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>Yuan</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>EvaJ</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>Gold</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr></tbody>
</table><input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选"><script src="jquery-3.3.1.min.js"></script>
<script>let flag = false;$(window).on("keydown",function (e) {console.log(e.keyCode);if (e.keyCode === 16){flag = true;}});$(windown).on("keyup",function (e) {console.log(e.keyCode);if (e.keyCode === 16){flag = false;}});$("select").on("change",function () {let v = $(this).val();let isCheck = $(this).parent().parent().find("input:checkbox").prop("checked");if (flag && isCheck){let $allChecked = $("input:checked");for (let i=0;i<$allChecked.length;i++){$($allChecked[i].parent().parent().find("select").val(v);}使用eack循环$("input:checked").each(function ()$(this).parent().parent().find("select").val(v);})}});
</body>
</html>

按住shift键批量操作

hover事件示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hover事件示例</title><style>body {margin: 0;}.nav {height: 40px;background-color: #3d3d3d;width: 100%;}ul {list-style-type: none;padding: 0;margin: 0;}a {text-decoration: none;}.nav a {color: #999;
        }.nav a:hover {color: white;}.nav li {float: left;height: 40px;line-height: 40px;margin-right: 15px;padding: 0 10px;}.nav li:hover {background-color: black;}.father {position: relative;}.son {height: 100px;width: 200px;background-color: blue;color: white;position: absolute;left: 0;top: 40px;margin: 0;display: none;}.show {display: block;}</style>
</head>
<body><div class="nav"><ul><li><a href="">登录</a></li><li><a href="">注册</a></li><li class="father"><a href="">购物车</a><p class="son">空空如也~</p></li></ul>
</div><script src="jquery-3.3.1.min.js"></script>
<script>// 鼠标移到 .father 上时 让 .son 添加一个 .show $(".father").hover(function () {$(this).find(".son").addClass("show");},function () {$(this).find(".son").removeClass("show");})
</script>
</body>
</html>

hover事件

事件的绑定
1、 .on(events [, selector ],function(){})
1、events ：事件
2、selector ：选择器（可选的）
3、function ：事件处理函数

移除事件
1、 .off(events [, selector ][,function(){})
off()方法移除用 .on() 绑定的事件处理程序。
1、 events ：事件
2、 selector ：选择器（可选的）
3、 function ：事件处理函数

阻止后续事件执行

return false; // 常见阻止表单提交等

注意：

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件$(this).removeClass('hover');
});

页面加载
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，这是事件模块中最重要的一个函数，因为它极大地提高web应用程序的响应速度
两种写法：

$(document).ready(function(){
//在这里写你的JS代码...
}）

简写：

$(function(){
//你在这里写你的代码
})

事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件
表格中的每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click","delete",function () {
//删除按钮绑定的事件}）；

动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

<!DOCTYPE html>
<html lang="zh-CN">
<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><style>div {position: relative;display: inline-block;}div>i {display: inline-block;color: red;position: absolute;right: -16px;top: -5px;opacity: 1;}</style>
</head>
<body><div id="d1">点赞</div>
<script src="jquery-3.3.1.min.js"></script>
<script>$("#d1").on("click", function () {var newI = document.createElement("i");newI.innerText = "+1";$(this).append(newI);$(this).children("i").animate({opacity: 0}, 1000)})
</script>
</body>
</html>

点赞示例

补充
each
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出：

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){$(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false；

伏笔...

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

转载于:https://www.cnblogs.com/gaobei/articles/9135288.html