JQuery简介以及常用的方法
作者：互联网
简介：jquery是JavaScript框架库中的一种，写的少，做的多，链式编程，隐式迭代等。可以解决js的兼容性问题。
JQuery中常用的方法
1、获取对象的值和设置对象中的值
1. $(对象).val();//获取对象中的值
2. $(对象).html();//设置标签中间显示其他标签及内容,类似于innerHTML
3. $(对象).text();//设置标签中间显示的文本内容，类似于innerText
4. $(对象).css();//设置元素的样式，类似于style
$(对象).css()该方法有三种写法：
1:$("对象名").css("属性名","属性值")
2:$("对象名").css({"属性名":"属性值","属性名":"属性值","属性名":"属性值"});//键值对方法
3:$("对象名").css("属性名","属性值").css("属性名","属性值").....;//该方法是链式编程
注意：
如果小括号中写内容,就是设置文字内容 如果小括号什么也不写,表示的是获取这个元素中的文字内容
如果一个方法在执行结束后，返回的是同一个对象，就可以使用链式编程
如果一个方法返回的对象跟调用这个方法时的对象不一致的时候，此时就会发生断链。修复的方法使用end()方法
JQuery中常用的选择器
5. $("#id的值");//id选择器 一次只能获取一个
6. $("标签的名字");//标签选择器 一次可以获取多个
7. $(".类样式的名字");//类名选择器 一次可以获取多个
8. $("标签名.类名");//标签+类名选择器
9. $("标签名,标签名,标签名,标签名");//多条件选择器
JQuery中常用的层次选择器
10. $("#dv p");//获取的是id为dv的元素中所有的p标签元素
11. $("#dv>p");//获取的是id为dv的元素中直接的子元素p标签元素
12. $("#dv+p");//获取的是id为dv的元素后面的第一个p标签元素
13. $("#dv~p");//获取的是id为dv的元素后面所有的直接的兄弟元素p标签
注意：常用的层次选择器中的奇偶
对象:even;//偶数
对象:odd;//奇数
JQuery中操作类样式的方法
添加类样式：addClass() //方法
14. addClass("类样式名字");//添加一个类样式
15. addClass('类样式名字1 类样式名字2');//添加多个样式
移除类样式：removeClass() //方法
16. removeClass("类样式名字");//移除类样式
17. removeClass();//移除的是当前元素中所有的类样式
判断当前元素是否应用了某个类样式：hasClass()
切换元素的类样式：toggleClass()
JQuery中获取兄弟元素的方法
18. 元素对象.next();//获取的是当前元素的下一个兄弟元素
19. 元素对象.nextAll();//获取的是当前元素的后面的所有的兄弟元素
20. 元素对象.prev();//获取的是当前元素的前一个兄弟元素
21. 元素对象.prevAll();//获取的是当前元素的前面的所有的兄弟元素
22. 元素对象.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
JQuery中动漫方法
23. 对象.hide();//隐藏
24. 对象.show();//显示
25. 对象.slideUp();//滑入（隐藏）
26. 对象.slideDown();//滑出（显示）
27. 对象.slideToggle();//切换滑入和滑出的状态
28. 对象.fadeIn();//淡入
29. 对象.fadeOut();//淡出
30. 对象.fadeToggle();//切换
31. 对象.fadeTo();//透明度
注意：以上方法中可以写参数，参数类型:
1、数字类型：1000表示的是毫秒 ---1秒
2、字符串类型："slow" "normal" "fast"
32. 对象.animate();//移动动画
注意：animate中的参数：
键值对 ------对象（css样式对象）
时间 ------1000毫秒 ----1秒
匿名函数 ----------回调函数
33. 对象.stop();//停止动画
JQuery中动态创建元素的方法
DOM中创建元素：
34. document.write("标签代码");//缺点：页面加载完成后创建元素会把页面中的原有的内容全部干掉
35. innerHTML //效率低
36. document.createElement("标签名字")
jquery中创建元素的方法：
37. $("标签的代码")
38. 对象.html("标签的代码")
向元素中添加元素的方法：
39. $(当前元素).append(创建的元素);//把创建的元素追加到当前元素中。
注意：append();方法把一个元素添加到另一个元素中的时候有一种剪切的效果
40. $(当前元素).prepend(创建的元素);//把创建的元素追加到当前元素的前边
41. $(当前元素).after(创建的元素);//把创建元素添加到当前元素的后边（添加兄弟元素）
42. $(当前元素).before(创建的元素);//把创建的元素添加到当前元素的前边（添加兄弟元素）
JQuery中常见的清空元素的方法
43. $(对象).html("");//清空元素中的内容
44. $(对象).empty("");//清空元素中的内容
45. $(对象).remove("");//移除元素自身----自杀
JQuery中的克隆元素
46. $(对象).clone();//克隆，赋值了这个元素
JQuery中的自定义属性
47. $(对象).attr();
注意：
1、括号中写两个参数：参数1代表属性名、参数2代表属性值
2、只写一个参数，获取该元素的这个属性的值
获取复选框的选中状态
48. $(对象).prop();//可以真正的获取元素是否选中的状态
注意：attr();//该方法不能获取到复选框的选中状态
为元素绑定事件和解绑事件
bind绑定事件和unbind解绑：
49. bind绑定事件：$(对象).bind(参数1，参数2);
注意：参数1：绑定事件的名称参数，2：事件的处理函数（匿名函数）可以为同一个元素同 时绑定多个事件。例如：
//第一种写法
$("#btn").bind({"click":function(){
alert("我被点了");
},"mouseover":function(){
$(this).css("backgroundColor","red");
},"mouseout":function(){
$(this).css("backgroundColor","");
}
});
//第二种写法
$("#btn").bind("mouseover mouseout",function () { 函数要执行的内容；});
50. 解除bind绑定事件：$(对象).unbind(参数);//解绑方法， 参数：需要解绑的名称
注意：
1、该方法移除了父级元素和子元素的所有的事件
2、如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
3、如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑
delegate绑定和undelegate解绑事件
51. delegate绑定事件：$(对象).delegate(参数1，参数2，参数3)
注意：
参数1：要绑定事件的元素 （标签等）
参数2：要绑定的事件的名称 （例如：click）
参数3：绑定事件的处理函数（匿名函数）
例如：
$("#dv").delegate("p","click",function () {
alert("我被点了");
});
52. undelegate解绑事件：$(对象).undelegate(参数1，参数2);//解绑方法 参数1：需要解绑的元素 参数2：需要解绑的事件名称
on绑定事件和off解绑事件
53. on绑定事件有两种写法：
第一种写法：$(对象).on(参数1，参数2); //参数1：事件的名称 参数2：事件的处理函数
第二种写法：$(对象).on(参数1，参数2，参数3); //参数1：事件的名字 参数2：要绑定的事件的元素 参数3：事件处理函数 此时on是父级元素调用的，为子元素绑定事件（利用事件委托）
54. off解绑事件：$(对象).off(参数);//参数：需要解绑的事件的名称
总结：三者的区别
bind：可以为同一个元素同时绑定多个事件，语法：参数:{"事件的类型":事件处理函数,....}
delegate: 语法：参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
on: 语法：参数:父级元素.on("事件类型","子级元素",事件处理函数);
标签：JQuery,常用,绑定,对象,简介,元素,参数,事件,解绑 来源： https://blog.csdn.net/weixin_45290022/article/details/112562903