JQ实际项目中经常用到的知识点--总结

谁践踏了优雅 2022-07-12 08:47 99阅读 0赞

在实践项目中，使用JQ能够帮我在项目节约写插件的时间，但是jq跟原生相比，封装了很多自己的函数，以及语法形式，一开始学的总是很难适应起来，经过长时间的画葫芦之后，渐渐熟悉，现把经常用到的知识点撸一遍。

JQ的好处：

1.操作html元素

2.方便的处理各种事件

3.ajax操作更简单

4.产生动画效果

JQ版本的差异：

jq1.7性能较高

jq1.4.2兼容性和稳定性比较好

jq2.0不支持ie6/7/8

使用JQuery获取元素

1）通过id $("\#id名")；注意\#号

2）直接通过元素名$("input");

3）通过class属性$(".class名")

查看jq对象里面的内容：

function showall(obj){
    					var names="";
    					for(var name in obj){
    						names+=name+":"+obj[name]+",";
    					}
    					alert(names)
    				}

JQ获取元素的内容：$("xxxx").html()

js原生获取元素的内容：document.getxxxx.innerHtml();

$("div").length \#为2，并不是数组，而是对象的属性

$("div").get(0).innerHTML获得第二个元素的内容,get(index)获取的是原生态对象所以就有innerHTML没有html（）来获取

原生态对象放在$()里可以转换jq对象，可以使用jq封装的方法。

$(docuemtn).ready(function()\{

\})表示当document加载完成后就能执行的事件

比window.onload要先执行，且多的按顺序来执行，而后者则执行最后一个。

JQ中的事件操作

采用绑定的方式

$("xxxx").bind("click",'function()\{\}）

第二个参数：（必须要写data）表示参数

![Center][]

简化的写法：

![Center 1][]

JQ操作控件属性

获取属性内容

$("xxx").attr("属性名")

设置属性内容

$("xxx").attr("属性名"，"设置的值")

删除属性

$("xxx").removeAttr("属性名"，"设置的值")

JQ操作css

$("xxx").css("属性名","修改的值")

$("xxx").addclass("类名");

$("xxx").removeClass("类名");

$("xxx").animate(\{"width":200px\},1000);

JQ回调函数：就是把函数当成一个参数传进另外一个函数里面

使用回调的好处：可以避免网络不稳定时造成函数丢失

获取函数中的参数，使用argument对象

function aa()\{

alert(argument\[0\])

aa(1,2)

js继承：

![Center 2][]

ajax操作

get操作

$.get("url","参数"，回调函数function(re)\{\})

post操作

$.post("url","参数"，回调函数function(re)\{\})

两个方法的原始方法

$.ajax（\{

type="post",

url="",

success:function(data,state)\{\},

complete:function()\{\},

\}）

jq函数级插件

![Center 3][]

![Center 4][]

![Center 5][]

![Center 6][]

[Center]: /images/20220710/addd1988e0e04e0a9b6e083df6eca01f.png
[Center 1]: /images/20220710/b7a0040aee554559951952e9a5044aa5.png
[Center 2]: /images/20220710/b7ba11e782a547e98be81bbd5d47bbf0.png
[Center 3]: /images/20220710/bddfd4cf0def4daaadfa8a34f172c2f3.png
[Center 4]: /images/20220710/e9fa0af6640e42499b8184b25df374e2.png
[Center 5]: /images/20220710/7c74f09999024c51a3942c39271d8d63.png
[Center 6]: /images/20220710/5e1b0c87627840649c3c923500c3ecc2.png