在复习过程中，对js和DOM稍微有一点了解之后，我觉得使用监听器来一个一个监听每一个DOM元素实在是太麻烦了，有一大堆的回调和指令要写，所以我开始接触JQuery库
为什么要用JQuery？
简单来说Jquery集成了许多API并且可以使用JQuery做到和js一样的效果，但是却要比js要精简许多，总结来说就是写的少但是做的多。
使用JQuery
如果是本地使用的话，需要下载JQuery并在项目中引用
<script src="./jQuery.min.js"></script>下面使用jquery实现一个简单的元素隐藏效果：
<!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.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
$("div").hide();
</script>
</body>
</html>这样我们就把div元素隐藏了，是不是非常方便！！（超大声）
如何使用
在如上的代码中可以看到，并没有使用监听器监听节点，但是却还是能操作DOM元素，这是为啥？
下面就要说一下jquery的核心部分了：
jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。
jquery核心函数
>选择器
在此不多赘述基本选择器和层级选择器，与CSS选择器基本相同：
标签选择器、id选择器、通配符选择器、并集选择器、交集选择器、子代选择器、后代选择器等
着重介绍一下过滤选择器&表单选择器：
过滤选择器
$('tr:even').css('background', 'red'); -> 让偶数行背景变红
$('tr:odd').css('background', 'red');-> 让奇数行背景变红
$('tr:first').css('background', 'red'); ->首行tr背景变红
$('tr:last').css('background', 'red'); ->末行tr背景变红
$('tr:lt(2)').css('background', 'red');
$('tr:gt(2)').css('background', 'red');
👆这两个比较有意思，lt是小于号，gt是大于号，相信大家如果没接触过icon图标库都会用这两个符号代表前进后退吧（比如我）
$('tr:eq(2)').css('background', 'red');
这个也是一样eq是equal的缩写，代表等于，这个就是等于第二行的行变红
可以发现jquery一个很有意思的地方，就是基本上所有的东西都是用缩写来代表其效果，向jquery顶级对象就会被缩写成$ 非常简便，也很容易理解，我认为这个方法能让初学者轻松入门，这也是我喜欢这个库的原因（跑题了抱歉...）
其他的选择器就不多说了，官网上都有，常见的过滤选择器也就这么多...
表单选择器
$('input:text').css('background', 'red');
$('input:password').css('background', 'red');
$('input:file').css('background', 'red');
$('input:button').css('background', 'red');
$('input:submit').css('background', 'red');
$('input:reset').css('background', 'red');
表单状态选择器
console.log($(':focus')[0]);
console.log($(':checked')[0]);
console.log($(':disabled')[0]);
console.log($(':selected')[0]);
//[0]直接输出
工具
jquery源于js，是对js的一种轻量级封装，我是这么理解的，所以js能做到的事情，jquery基本都封装了，下面介绍一下他们的方法：（功能一样，就是换了个名字）
$.each
var arr = [1,2,3,4,5,6,7,8,9];
$.each(arr, function (index, element) {
console.log(index, element);
});
index是索引下标，element是索引对应的元素
$.trim
去掉前后空格的方法，不多说了，学过input输入框的绝对知道(狗头doge)
$.type
类似js中typeof用来判定对象类型
这里可以讨论一下，$type对于引用数据类型的输出是什么呢？
之所以问出这个问题，有js基础的都知道typeof的一点点小毛病 如下图
var num = 3
var str = '3'
var bol = true
var udf = undefined
var nul = null
console.log(typeof num);
console.log(typeof str);
console.log(typeof bol);
console.log(typeof udf);
console.log(typeof nul);
var arr = [1]
var obj = {a:1}
var fun = ()=>{
return 1
}
console.log(typeof arr);
console.log(typeof obj);
console.log(typeof fun);输出的形式是这样的：
typeof对于引用类型的判断并不是很准确
那么$type是否也和typeof有一样的毛病呢？
测试一下：
var num = 3
var str = '3'
var bol = true
var udf = undefined
var nul = null
console.log($.type(num));
console.log($.type(str));
console.log($.type(bol));
console.log($.type(udf));
console.log($.type(nul));
var arr = [1]
var obj = {a:1}
var fun = ()=>{
return 1
}
console.log($.type(arr));
console.log($.type(obj));
console.log($.type(fun));
我们可以看到，并不一样，也就是说$.type并不是js中的typeof，jquery对原生的方法进行了重写，可以让$.type可以更精准的匹配到引用数据类型
$.isArray&$.isFunction
这个大家看到方法名字就知道他是干啥的了吧 啊没错，就是判断传入对象是否是数组/对象的
ajax
下面就到了非常非常重要的部分了，也就是通信部分ajax
你是不是在学习js中非常讨厌小黄人(XHR)？你是否在为发送请求是的麻烦操作而困扰？
axios勿扰(狗头doge)
jquery听到了你的心声，将XMLHttpRequest请求进行简化辣~
我们在使用jquery发送ajax请求时不再需要创建小黄人对象了，直接使用$.ajax直接就可以发送请求
如下图：
$.ajax({
url: '/user/login',
type: 'get',
data: {
username: 'zhangsan',
password: '123456'
},
dataType: 'text',
success: function (response) {
alert(response);
},
error: function (response) {
alert(response);
}
});
我们可以在$.ajax中直接书写请求地址和请求发那个是以及请求回来的回调等一系列配置，是不是非常方便！！
还有更方便的👇
$.get('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
alert(response);
});
直接写请求方式，也可以实现。
其他请求方式同理，再此不多赘述...
jquery核心对象
attr()
我们可以通过attr方法来操作DOM元素上的属性
举个栗子：
<div id="root"></div>
<script>
$('#root').attr('name','xxx')
</script>我们通过$顶级对象来获取我们所需要的节点，然后对其进行操作
可以看到这个节点上被我们设置了name属性，属性名为xxx
当然，都说是可以对DOM上的属性进行操作了，不仅能够设置，也能读取辣~
<div id="root" name="xxx"></div>
<script>
console.log($('#root').attr('name'));
</script> 
获取到了name喽！
prop()
这个方法也是操作DOM上属性的，但是只能操作布尔(boolean)类型
<input type="radio" >单选
<script>
console.log($(':radio').prop('checked'));
</script>
设置和上面差不多，但是还是演示一下：
<input type="radio" >单选
<script>
$(':radio').prop('checked', 'true')
</script>这样就会默认选中辣
val()
获取input输入框的值
<input type="text" >
<script>
$(':text').val(666)
</script>把输入框的value值置为666，所以即使我们不向输入框输入值，默认也是666
读取value值就不进行演示了
下面是重点了哦，认真看哦
我们在使用js的时候，经常会根据DOM元素的大小和位置做动效，现在jquery封装了一种更简单的属性来供我们使用：
直接演示了，写起来太麻烦了..
样式部分：
.box {
margin: 30px;
padding: 20px;
border: 10px;
width: 100px;
height: 100px;
background:pink;
}结构部分：
<div class="box">
</div>js部分：
var boxDemo = $('.box');
console.log(boxDemo.width(), boxDemo.height());// 100 100
console.log(boxDemo.innerWidth(), boxDemo.innerHeight());// 140 140
console.log(boxDemo.outerWidth(), boxDemo.outerHeight());// 160 160
console.log(boxDemo.outerWidth(true), boxDemo.outerHeight(true));// 220 220上面是描述元素大小的属性👆
下面是描述元素位置的属性👇
1.offset()
//样式从上面粘下来的
.box {
margin: 30px;
padding: 20px;
border: 10px;
width: 100px;
height: 100px;
background: pink;
}
//js
var offset = $('.box').offset();
console.log(offset.left, offset.top);
2.position
相对于父元素左上角的坐标
//辛辛苦苦粘来的样式
<style>
.father_box {
width: 300px;
height: 300px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box {
width: 100px;
height: 100px;
background: coral;
position: absolute;
left: 20px;
top: 20px;
}
</style>
//辛辛苦苦写的两个父盒子
<div class="father_box">
<div class="box">
</div>
</div>
//仔仔细细写的js //总之什么都没做 真是辛苦我了^_^
<script>
var offset = $('.box').position();
console.log(offset.left, offset.top);
</script>
3.scrollLeft&scrollTop
设置滚动条的X&Y坐标
只演示纵轴了，横轴不是很明显
$('body').css('height', '2000px');
$('html,body').scrollTop(300);一定要设置长/宽哦，不然scrollLeft/scrollTop不会生效的
操作
也就是要操作DOM元素了
DOM元素内部插入
text()、html()、append()、prepend()
👇
innerText、innerHtml、appendChild、这个是像前面添加内容，可以理解为数组的unshift()
不多解释了
DOM元素外部插入
after()、before()
在匹配元素的前面/后面插入元素
DOM移除
empty()、remove()
其中：empty是删除所有匹配元素的子元素，但是匹配元素不会删除
remove是删除所有匹配元素，并将其绑定的事件也一并移除
DOM遍历
parent()获取每一个匹配元素的父元素
children()获取每一个匹配元素的子元素
prev()获取每一个匹配元素的前一个紧邻兄弟节点
prevAll()获取每一个匹配元素的前面所有兄弟节点
next()获取匹配元素的紧邻的后一个兄弟节点
nextAll()获取匹配元素的后面的所有兄弟节点
siblings()获取匹配元素的所有兄弟节点
事件
浏览器事件
$(window).resize(function () {
console.log('浏览器尺寸改变了');
});body {
height: 2000px;
}
$(window).scroll(function () {
console.log('浏览器滚动条改变了');
})事件绑定&事件移除
$('button').on('click',function () {
console.log('按钮被单击了');
});
$('button').off('click');
事件委托&移除事件委托
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
// 设置事件委托
$('ul').delegate('li', 'click', function () {
this.style.background = 'red';
});
// 移除事件委托
$('ul').undelegate('click');
事件对象
对象属性名称 对象属性描述
event.currentTarget 当前执行的DOM元素。
event.target 触发事件的DOM元素。
event.pageX 相对于页面的左上角。
event.pageY 相对于页面的顶部。
event.clientX 相对于视口的左上角。
event.clientY 相对于视口的顶部。
event.offsetX 相对于事件元素左上角。
event.offsetY 相对于事件元素顶部。
event.key 键盘的按键信息。
event.preventDefault() 阻止事件默认行为。
event.stopPropagation() 防止事件向外冒泡。
表单事件
focus、blur、change、select、submit
在js中出现过甚至名字都没改，实在没有什么演示的必要...
//focus
$(':text').focus(function () {
$(this).css('background', 'red');
});
//blur
$(':text').focus(function () {
$(this).css('background', 'red');
});
$(':text').blur(function () {
$(this).css('background', 'green');
});
//change
$(':text').change(function () {
console.log($(this).val());
});
//select
$('select').change(function () {
console.log($(this).val());
});
鼠标事件
click、dbclick、mousedown、mouseup、mouseenter、mouseleave、mouseover、mouseout、mousemove、hover
上面值得一提的是两个组合：mouseenter&mouserleave mouseover&mouseout
这两个都是鼠标进入目标元素/脱离目标元素所触发的事件
不同的是他们的冒泡方式mouseenter&mouseleave事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。
简单来说，mouseenter&mouseleave不会触发冒泡
键盘事件
keydown、keyup、keypress
动画
在此不介绍动画...
以上就是我对JQuery的基础学习，以后的道路如果能够再次用到jquery去操作DOM，我还会去进行跟深层次的研究
比如把我看了就脑袋痛的动画补上...
968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
