jQuery基本用法二-白红宇

一、原生对象和jQuery对象的相互转换

jQuery封装的方法必须是jQuery对象才能用，把原生对象放在“$()”括号里面即可；

通过get()方法可以把jQuery对象转为原生对象。
有参数时，表示原jQuery对象是个集合，参数表示获取下标为几的元素对象。
无参数时，返回一个对象集合，原jQuery对象有几个元素，返回的就有几个元素。

二、text()方法

1、当有参数时，表示给元素添加内容。

结果页面显示内容为：

由结果可知把所有的div的内容都改为“ <h3>h3</h3>”，并且不会解析标签，无论里面是什么内容，都原封不动的显示出来。

2、当无参数时，表示获取标签的所有内容

输出结果为：

div1222div1222div1333div1

由结果可知：

当对象是一个集合时，html()获取的是集合的第一个元素的中间结构，当元素内容有标签元素时，会把标签全部带下来，即不会解析，保留原始结构和内容。

text()获取的是集合下全部元素的内容，当元素内有标签时，会把标签去掉后再返回。

注意：当jQuery对象是一个集合时，jQuery获取数据的方法一般只会获取第一个元素的内容，text()是个特例。

三、closest、parent、parents方法

closest():找到指定的最近的祖先节点（包括自身）必须接受一个参数（只能选择到唯一一个元素）.

parent():获取父级节点。

parents()：获取所有的祖先，可以接受参数，参数可以是css选择器，有参数的话，就表示获取符合要求的祖先节点。

四、创建节点

五、clone()克隆

元素对象下调用clone()，表示克隆这个对象，并返回这个新对象。参数传true时，表示把元素的操作行为也克隆给新对象，没参数不克隆行为。

这里写图片描述

六、jq中的运动方法animate()

1、参数介绍

第一个参数：对象 {}，去设置样式属性和属性值（目标点）；

第二个参数：过渡时间，默认400；

第三个参数：运动形式，只有两种 swing(默认值缓冲) linear （匀速）；

第四个参数：运动完成的回调；动画完成后要触发什么，就可以在这里做。

$('#input1').click(function(){
         $('#div1').animate({        width:400    },2000,'swing',function(){
             alert(123)    })})

另一种传参方式：

这种传参方式，把过渡时间、运动方式、回调方法都放在第二个对象中，并且还可以多写一个监听方法，用于监听变化过程，该方法有两个参数，

参数一：元素的属性变化都能被a捕获（即使多个属性在变化，a也会分别获取每个属性的变化），a获取到的是变化属性在捕获到的那一瞬的值。

参数二：表示动画完成的百分比。

$('#input1').click(function(){
         $('#div1').animate({        width:400    },{        duration:1000,        easing:'linear',        complete:function(){
                 alert(1)        },        step:function(a,b){
      // 检测定时器的每一次变化        //console.log(a)        console.log(b.pos) // 运动过程中的比例值 0-1        }    })})

2、补充：

如果想让元素连续做多个变化，可以多条语句分别写没个变化，这样会每个变化分别执行，也可以写成一条语句，前面的动画执行完就执行后面的，如果想在两个动画中间停留一段时间，可以调用delay方法，参数表示停留多少毫秒。

3、截止运动

stop():没有参数时，停止元素正在进行的运动，而进入下一个运动。

stop(true)：第一个参数true可以停止该元素所有运动。

stop(true,true)：第二个参数 true 可以停止到当前正在进行的运动的最后状态（当前的），其他运动会不会继续进行得看第一个参数。

finish()：停止运动，并直接到所有运动的最后的目标点。

七、常用的工具方法

1、$.proxy(函数)()

注意：后面加了括号就会马上调用。

这个工具方法有两种传递参数的方法，其中工具处理的函数this会指向这里的第一个参数。

传参方式一：

.proxy(函数，参数1，参数2…)，其中参数1传给函数的this，后面的参数与函数里面的参数对应。传参方式二：.proxy(函数)(参数1，参数2…)，这种调用方式会马上执行函数。

function show(a,b){
         alert(this);    alert(a);    alert(b);}$(document).click($.proxy(show,1,3,4));//show的this指向这里的1；

2、$.noConflict()

作用：防止$冲突,在jQuery中$是个很重要的变量，由于很多框架都有用到$这个符号，多个框架一起用的时候容易发生冲突，noConflict能给这个变量重命名。

var yuanshuo=$.noConflict();//把$对象传给yuanshuo，yuanshuo('body').css('background','red')//可以把yuanshuo当成$来用noConflict就可以很好的解决这种冲突。

3、$.makeArray(集合对象)

在js中很多时候获取到的集合不是数组对象，例如通过标签获取元素，但是又要用到数组的方法，这时我们就可以用$.makeArray()把获取到的集合转成数组；

例：

var aDiv=document.getElementsByTagName('div'); // 类数组$.makeArray(aDiv).push()

八、事件委托

1、什么是事件委托

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果，简单说就是把多个子元素相同的事件可以绑在父级身上。

2、delegate 事件委托方法

$('ul').delegate('li','click',function(ev){
         $(this).css('background','red');})

把li的点击事件委托给ul，点击li给该li的背景设置为红色。

$('#input1').click(function(){
         var $li=$('hello
');    $('ul').append($li)})

点击按钮新增的li也有这个点击事件，点击之后背景也会变红。

3、delegateTarget：找事件委托的元素

$('ul').delegate('li','click',function(ev){
         $(this).css('background','red');    console.log(ev.delegateTarget);})

点击li后会把ul元素打印出来。

4、undelegate：取消事件委托

在有绑定委托事件的元素对象（这个例子中是ul的对象）上调用undelegate()就能取消委托。

$('ul').delegate('li','click',function(ev){
         $(this).css('background','red');    $(ev.delegateTarget).undelegate()})

第一次点击任何一个li，改变背景后会取消委托，所有li的点击事件都会取消，再点击就不会有任何效果了。

注意：事件委托还会影响新增的节点，例如说如果通过delegate设置ul下的li的点击事件，那么如果后期在ul下动态添加li，那么这个新增的li也会有这个点击事件。

九、ajax

参数

1、url：查询数据的地址，请求接口路径。

2、data：是个对象，数据是发送请求的参数。

3、success：是一个回调方法，当数据被成功找到后调用，回调方法的参数是请求结果数据。

4、error：是一个回调方法，当请求出错的时候调用，参数是请求错误信息。

5、type：请求方式，有get和post两种方式。

6、dataType：返回的数据类型，如果声明为“json”，就会把返回json格式的字符串转换成对象，但是前提是请求结果的数据必须符合json格式。

$('#input1').on('input',function(){
         $.ajax({        url:'user.php,        type:'POST'        data:{user:$(this).val()},        // 'user'=$(this).val()，可以用“:”或“=”        success:function(data){
                 //形参data 就是后台返回来的数据  0 1            console.log(data)            if(data=='1'){                $('#div1').html('可以注册');            }else{                $('#div1').html('已经注册了，不能注册');            }        },        error:function(err){  //404   500以上服务器错误                console.log(err)        }    });})

补充：

如果dataType不是“json”，其他原因没有把请求结果转成对象的，通过$.parseJSON(data)；把data转成对象，前提也是data必须符合json格式。