jquery常用方法使用(一)

首先来了解一下jq的安装，在官网上https://www.w3school.com.cn/jquery/jquery_install.asp可以了解到那么在这里我主要是想说在jq下载的安装包中有两个文件需要注意一个是jquery.js  另外一个是jquery.min.js这两个文件的区别在于，后者是前者代码的压缩，在你的项目中你只需要引入其中的一个文件即可使用jq中的方法。但是通常情况下我们都会使用后者，因为后者封装的代码量相对于前者来说少了很多。如果你想去了解jq源码那么就安装第一种。在项目开发的过程中使用压缩版会更好。

接下来就是对于整个jq常用的使用方式进行说明：

1.$()此方法表示的是获取dom节点等，只需要在其内部传入像css选择器那样的形式来选择元素即可。例如：$(‘.name’) ，$(‘#id’)等。

2.attr()方法，当直接调用这个方法并传入一个参数时，参数为属性名称，此时表示的获取到此属性的值，当在内部传入两个参数即属性名称与属性值时，表示将改变此时的属性值为当前设置的属性值。prop()其使用与attr()代表的意思相同，只不过其返回的结果为false与true

3.html()与原生中得innerHTML()作用相同，都是强制性将内部的字符串中的内容进行强制转化，同上面attr()方法所说参数一致，当之间调用时，就是获取到当前属性值，在其内部添加内容时就是将节点上的内容进行转换成内部的参数值。text()与原生的innderTEXT方法类似不能强制的去转化标签中的元素而是将js中的字符串输出打印到页面上。

4.css()方法，如果向其内部传入两个参数例如css(‘color’,‘red’)表示的意思是就是改变调用该方法节点的样式，如果是多个的样式进行设置就像css()内部传入一个对象css({‘color’ : ‘red’, ‘background-color’ : ‘black’})如同实例一样即可

5.removeClass()去移除掉节点中的class属性名称,如果向其内部传入属性的名称，就只删除掉对应的class属性名称,如果不向其内部传入任何一个参数，调用该方法，表示去删除掉该节点中的所有class属性。  addClass()，向节点中去设置属性的名称      在removeClass()和addClass()中，可以向这个方法的内部传入参数，只不过最后返回的内部必须是一个字符串，用于来当做class名     toggleClass()检查节点中是否含有该参数中的属性名，如果有就删除，如果没有就添加。

6.eq()，在其内部传入参数为index时，就能找到相应节点的位置。其用法有两种${(}^{\prime }li:eq(0{)}^{\prime }).css{(}^{\prime }colo{r}^{\prime }{,}^{\prime }re{d}^{\prime })$(‘li’).eq(2).css(‘color’,‘blue’)这两种方式表示的就是选取到具体的dom元素并对其样式进行设置。

7.A.insertBefore(B)将A插入到B之前，具有剪切的功能；A.before(B)表示的意思是B在A的前面，可以理解成A后面的节点是B              ${(}^{\prime }l{i}^{\prime }).eq(4).insertBefore($(‘li:eq(0)’)).css(‘color’,‘blue’)//在此时操作的是li中的索引值为4的li                            $(‘li:eq(0)’).before( $(‘li’).eq(4)).css(‘color’,‘red’)//此时操作的是li中的索引值为0的li

8.${(}^{\prime }{p}^{\prime }).appendTo{(}^{\prime }.wrappe{r}^{\prime })//表示将A中的节点插入到B之后的最后一个节点$(‘.wrapper’).append(${(}^{\prime }{p}^{\prime }))表示在A之后添加一个新的节点$(‘button’).click(function()  {$(‘.wrapper’).append(item1).append(item2) })

9.这里所有说的就是remove()与detach()的区别，两者的不同就是remove()方法去移除时，会取消掉这个事件的绑定，而detach不会，两者的作用是把元素删除后返回$(‘.item1’).click(function(){item1 = $(this).remove()})            $(‘.item2’).click(function(){item2 = $(this).detach()})

10.on()，用于时间的绑定里面有四个参数   下面这种方式是on()方法中传入两个参数时的使用方法${(}^{\prime }.item{1}^{\prime }).on{(}^{\prime }clic{k}^{\prime },function(e)console.log{(}^{\prime }item{1}^{\prime }))当on()传入三个参数时,当第二个参数为数组或者是对象时，在回调函数中去传入参数e，然后使用e.data去调用时能够输出打印出第二个参数；当第二个参数是字符串是，其就会被理解为事件源，只有点击该事件源时，才会有点击事件$(‘.item1’).on(‘click’, {name: ‘123’} ,function(e){console.log(e.data.name)})

最后

==
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。