JQuery的介绍及其优势

1. JQuery的介绍

JQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器。

JQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。JQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可

2. JQuery的优势
  • 一款轻量级的js框架。JQuery核心js文件才几十kb,不会影响页面加载速度

  • 丰富的DOM选择器,JQuery的选择器用起来很方便,比如要找到某个dom对象的相邻元素,js可能要写好几行代码,而JQuery一行代码就搞定了,再比如要将一个表格的隔行变色,JQuery也是一行代码搞定

  • 链式表达式。JQuery的链式操作可以把多个操作写在一行代码里,更加简洁

  • 事件、样式、动画支持。JQuery还简化了js操作css的代码,并且代码的可读性也比js要强

  • Ajax操作支持。JQuery简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信

  • 跨浏览器兼容。JQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋

  • 插件扩展开发。JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用

选择器

1. id选择器:
$("#id")
2. class选择器:
$(".classname")
3. 标签选择器
$("tagname")
4. 组合选择器
$("#id, .classname, tagname")
5. 层级选择器
$("#id a") ----> 所有的后代a元素
$("#id > a")---> 第一个儿子元素
6. 基本选择器
:first :eq() :last
7. 属性选择器
<input type='text'>
<input type='checkbox'>
<input type='password'>

$("input[type='checkbox']")

实例:表格的全选和反选以及取消

####
筛选器
1. 下一个元素
$("#one").next()
$("#one").nextAll()
$("#one").nextUntil('#i2')
2. 上一个元素
$('#one').prev()
$('#one').prevAll()
$('#one').prevUntil('#ii1')
3. 父亲元素
$('#one').parent()
$('#one').parents()
$('#one').parentsUntil()
4. 儿子和兄弟元素
$('#one').children()
$('#one').siblings()
5. 查找元素
$('#one').find() 

案例:左侧菜单


样式操作

1. 添加整块样式
addClass()
2. 删除整块样式
removeClass()
3. 判断样式存不存在
hasClass()
4. 相当于开关,有这个样式则去掉,没有则添加
toggleClass()

文本操作

1. 对纯文本操作
$("#one").text(); --- 获取值
$("#one").text('fuck'); --- 设置值
2. 对HTML操作
$("xxx").html()
$("xxx").html('<a href=""></a>')    
3. 对val操作(针对input系列)
$("xxx").val()
$("xxx").val('123')

属性操作

1. 用于自定义属性
$('xxx').attr('n')
$('xxx').attr('n','v')
$('xxx').removeAttr('n')
2. 用于checkbox,radio
$('xxx').prop('checked')
$('xxx').prop('checked', true)

注意:

<input type='checkbox' id='i1' checked=checked />
此处选中复选框的时候,我们可以直接使用attr来进行赋值操作,但是在1以及2版本的jquery中会出错,在3版本的jquery中没有任何问题

因此,我们在处理checkbox,radio等标签的时候,我们尽量使用特定的prop,不要使用attr(“checked”,”checked”)


####
文档处理
1. 插入到指定元素”里面”的后面
$('xxx').append()
$('xxx').appendTo()
2. 插入到指定元素”里面”的前面
$('xxx').prepend()
$('xxx').prependTo()
3. 插入到指定元素”外面”的后面
$('xxx').after()
4. 插入到指定元素”外面”的前面
$('xxx').before()
5. 移除和清空元素
$('xxx').remove()
$('xxx').empty()
6. 替换元素
$('xxx').replaceWith()
$('xxx').replaceAll()

案例:两个框之间互相选择

动画效果

show()
hide()
toggle()

fadeIn()
fadeOut()
fadeToggle()

slideIn()
slideOut()
slideToggle()

案例:图片的淡入和淡出

事件

1. 常见的事件
$('xxx').click(function(){})
$('xxx').mouseout(function(){})
$('xxx').mouseover(function(){})
$('xxx').hover(function(){})
$('xxx').blur(function(){})          
$('xxx').focus(function(){})
2. 页面加载完成之后,执行函数体中的内容
$(function(){})
$(document).ready(function(){})

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="selectAll();" value="全选">
<input type="button" onclick="cancelAll();" value="取消">
<input type="button" onclick="reverseAll();" value="反选">
<table border="1px">
<tr>
<td>192.168.1.1</td>
<td>80</td>
<td>111111</td>
<td><input type="checkbox" class="check"></td>
</tr>
<tr>
<td>192.168.1.2</td>
<td>81</td>
<td>222222</td>
<td><input type="checkbox" class="check"></td>
</tr>
<tr>
<td>192.168.1.3</td>
<td>82</td>
<td>333333</td>
<td><input type="checkbox" class="check"></td>
</tr>
</table>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function selectAll(){
// 1. 找到所有的checkbox
var inpts = $('.check');
// console.log(inpts);

// 2. 对找到的checkbox进行打钩
for (var i = 0; i < inpts.length; i++){
// console.log(inpts[i].checked);
inpts[i].checked = true;
}
}

function cancelAll(){
// 1. 找到所有的checkbox
var inpts = $('.check');
// console.log(inpts);
// 2. 对找到的checkbox进行打钩
for (var i = 0; i < inpts.length; i++){
// console.log(inpts[i].checked);
inpts[i].checked = false;
}
}

function reverseAll(){
var inpts = $('.check');
// console.log(inpts);
// 2. 对找到的checkbox进行打钩
for (var i = 0; i < inpts.length; i++){
if (inpts[i].checked){
inpts[i].checked = false;
}else{
inpts[i].checked = true;
}

}
}
</script>

</html>