最近在做项目的过程中，前端的部分做起来很吃力，很大一部分原因就是jquery部分知识不够熟练，会的太少
所以我决定从头再学一遍。。。
这一篇随笔先用于写jquery的基础，我会在下一篇写jquery'的应用，比如调用ajax，遍历表格等等
首先，什么是jquery？[・_・?]
jquery 是一个javascript库，jquery极大地简化了javascript编程
要使用jquery，我们必须要向页面引用jquery库，一般写法：
我要评论1 <script type= "text/javascript" src="你要引的jquery文件名"><script>
2 <script>
3 jquery初始化方法{
4 你要写的jquery代码
5 });
6 </script>
jquery有三种初始化方法：
1 第一种：
2 $(document).ready(function(){
3 xxxxxxxxxxxxxxxxxx;
4 });
5
6 第二种：
7 $(function(){
8 xxxxxxxxxxxxxxxxxx;
9 });
10
11 第三种：
12 jquery(function($){
13 xxxxxxxxxxxxxxxxxx;
14 });
这三种方法效果是一样的，选任意一种使用都可以，但是千万不能忘记写。
jquery选择器
jquery代码简便的很大原因就是可以直接选中你想要操作的对象，太方便了有没有！φ(>ω<*)
jquery的选择器有三种，元素选择器、属性选择器和css选择器
下面举几个栗子：
元素选择器栗子：
1 $("p") 选取所有<p>标签元素
2 $("p.skr") 选取所有class为"skr"的<p>标签元素
3 $("p#skrskr") 选取所有id为"skrskr"<p>标签元素
4 $("p:first") 第一个<p>标签元素
5 $("p:last") 最后一个<p>标签元素
6 $("tr:even") 所有奇数<tr>元素
7 $("tr:odd")所有偶数<tr>元素
8
9
10 $(this) 选中当前元素
11 $(ul li:first) 每个<ul> 第一个<li>元素
12 $("[href$='.jpg']") 所有以jsp结尾的href属性
属性选择器栗子：
1 $("[href]") 选取所有带href属性的元素
2 $("[href = 'xxx']") 选取所有带href属性且值为xxx的元素
3 $("[href != 'xxx']") 选取所有带href属性且值不为xxx的元素
4 $("[href$='.jpg']") 选取所有带href值以jsp结尾的元素
css选择器栗子：
$("p").css("background-color","red");
jquery事件
既然已经选中了这些标签，接下来当然就是对他们搞事情啦~
以点击按钮事件为例：
1 <script type="text/javascript" src = "jquery.js"></script>
2 <script>
3 $(document).ready(function(){
4 $("button").click(function(){
5 alert("啊啊啊啊啊啊啊啊啊啊啊啊!")
6 });
7 });
8 </script>
9
10 <button>xxx</button>
11
在实际开发中，由于有很多重复的标签，所以用class或者id多一点（因为我们可以给指定标签赋奇怪的名字以免重复）
接下来列举一些基础的事件触发方法：
1 change（） 触发、或将函数绑定到指定元素的onchange 事件（改变） 2 click（） 触发、或将函数绑定到指定元素的cllick 事件（点击） 3 dblclick（） 触发、或将函数绑定到指定元素的declick 事件（双击） 4 keydown（）按下按键 5 keyup（）按钮被松开时 6 该事件适用于任何带有url的元素（改变事件） 7 mousedown（）按下鼠标按钮时 8 mouseenter（）当鼠标指针进入（穿过）元素时，改变 9 mouseleave（）当鼠标指针离开元素时，改变 10 mousemove（）获得鼠标指针在页面中位置 11 mouseout（）当鼠标从元素上移开时，改变 12 mouseover（）当鼠标指针位于元素上方时，改变 13 mouseup（）当松开鼠标按钮时 14 submit（）提交表单 15 toggle（）方法将切换所有元素 16 unload（）当用户点击链接离开本页时，只应用于window对象
jquery效果：
主要是hide(),show(),toggle().下面还是举几个栗子
1 假装有个<img id="hide">
2 下面用于控制这个图片的显示或是淡出
3 $("#hide").hide()
4 $("#hide").show()
5 我们也可以向 hide() 和 show()添加参数，来控制它如何显示，淡出：
6 $（selector）.hide（speed，callback）；
7 $（selector）.show（speed，callback）；
8 可选的speed参数规定隐藏/显示的速度，可以取："slow","fast"或毫秒
9 可选的callback参数是隐藏或显示完成后所执行的函数名称
10
11 toggle（）：
12 toggle（）方法来切换hide（）和show（）方法（状态）
13 显示被隐藏元素，并隐藏已经显示的元素
14 $("button").click(function(){
15 $("p").toggle();
16 });
17
18 语法：
19 $（selector）.toggle（speed，callback）；
20 可选的speed参数规定隐藏/显示的速度，可以取"slow","fast"或毫秒
21 可选的callback参数是toggle（）方法完成后所执行的函数名称
22
23 还有fadein（），fadeout（）让元素逐渐消失，用法与上面类似
jquery html
（1）获取内容和属性：
text() --> 设置或返回所选元素文本内容
html() --> 设置或返回所选元素内容(包括html标记)
val() --> 设置或返回所选元素的值
栗子：
1 $("#btn1").click(function(){
2 alert("text:"+$("#text").text());
3 });
4 $("#btn2").click(function(){
5 alert("html:"+$("#text").html());
6 });
7 $("#btn1").click(function(){
8 alert("value:"+$("#text").val());
9 });
在开发时，时常会用到选中元素的val()进行判断，在进行下一步操作
（2）获取属性 - attr()
attr()用于获取标签的属性值或是给标签的属性赋值
栗子：
$("#btn1").click(function(){
alert("text:"+$("#text").text(“aaaa”));
});
$("#btn2").click(function(){
alert("html:"+$("#text").html(“aaaa”));
});
$("#btn1").click(function(){
alert("value:"+$("#text").val(“aaaa”));
});
$("#btn1").click(function(){
$("#text").attr("id","xxx"));
//使用attr给属性赋值时要考虑标签是否有想要添加的属性（html5中很多属性失效了，造成报错）
});
（3）添加元素
append（） - 在被选元素的结尾插入内容 $（"p"）.append（"aaaaaaaaaa"）； prepend（） - 在被选元素开头插入内容 $（"p"）.prepend（"aaaaaaaaaa"）；
after（） - 在被选元素之后插入内容 $（"img"）.after（"aaaaaaaa"）； before（） - 在被选元素之后插入内容 $（"img"）.before（"aaaaaaaa"）；
after和before较为常用，所以只有这两个的栗子
1 function aftertext(){
2 var txt1 = "<p>text</p>"; 以html创建新元素
3 var txt2 = $("<p></p>").text("text."); 以jquery创建新元素
4 var txt3 = document.createelement("p"); 以dom创建新元素
5 txt3.innerhtml"text.";
6 $("p").after(txt1,txt2,txt3); p之后插入新元素
7 }
除此之外还有each()方法用于循环，$.ajax{}用于异步传值，select动态选取等等
这部分真的是一言难尽，而且对目前的我还是有点难度的，所以就决定写在下一篇随笔了！
以上就是个人总结的jquery基础部分，希望能带给你帮助~
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论