jquery总结

最新推荐文章于 2022-03-17 16:41:49 发布

Serendipity19940910

最新推荐文章于 2022-03-17 16:41:49 发布

阅读量403

点赞数

分类专栏：前端关于前端的技术探讨文章标签： jquery 前端

本文链接：https://blog.youkuaiyun.com/Stay_Hungry_Stay/article/details/81182838

版权

关于前端的技术探讨同时被 2 个专栏收录

28 篇文章

订阅专栏

前端

19 篇文章

订阅专栏

jQuery by gxj

需要下载的插件(markdown-preview/sublime-server/jQuery/autofilename)

+ ctrl+shift+p

+ install package

+ 找你需要的插件点击安装

资源库

jQuery简介/特点

* jQuery其实就是原生js写的一个包含了丰富多彩的方法的一个js库

* 注意jQuery的版本支持，新版已经不兼容老的浏览器。

* 引入jquery.js

* write less,do more!

* 隐式迭代

* 非常出色容错功能

* 非常出色的兼容性

* 链式操作

* jQuery方法读写合体

jQuery入口函数

    $(function(){


    })   

    $(document).ready(function(){

            //jq代码

    })

注意原生load与jquery加载的区别

原生的加载事件：当你的页面当中的html,css,js全部加载完成之后在执行load事件处理函数里面的代码。  
一个页面当中只允许出现一次window.onload事件  

jQuery的加载:当页面的结构加载完就立马执行jq代码，一个页面可以出现多次

**jQuery判断一个元素是否存在:$(选择器).length是否为0**

jQuery选择器(所有的css选择器都可以用到jq里面)

jq选择器选择到的元素都以数组方式存储的

+ id选择器     $('#id名')      选中唯一的一个，也是数组

+ 类选择器      $('.类名')       选中的一组元素，数组

+ 标签选择器     $('标签名')       选中的一组元素，数组

选择器汇总

*               $("*")              所有元素
#id             $("#lastname")      id="lastname" 的元素
.class          $(".intro")         所有 class="intro" 的元素
element         $("p")              所有 <p> 元素
.class.class    $(".intro.demo")    所有 class="intro" 且 class="demo" 的元素

:first  $("p:first")    第一个 <p> 元素
:last   $("p:last")     最后一个 <p> 元素
:even   $("tr:even")    所有偶数 <tr> 元素
:odd    $("tr:odd")     所有奇数 <tr> 元素

:eq(index)      $("ul li:eq(3)")    列表中的第四个元素（index 从 0 开始）
:gt(no)         $("ul li:gt(3)")    列出 index 大于 3 的元素 greater than
:lt(no)         $("ul li:lt(3)")    列出 index 小于 3 的元素 less than
:not(selector)  $("input:not(:empty)")  所有不为空的 input 元素

:header         $(":header")        所有标题元素 <h1> - <h6>
:animated       所有动画元素

:contains(text)     $(":contains('W3cSchool')")  包含指定字符串的所有元素
:empty              $(":empty")                 无子（元素、文本）节点的所有元素
:hidden             $("p:hidden")               所有隐藏的 <p> 元素
:visible            $("table:visible")          所有可见的表格

s1,s2,s3            $("th,td,.intro")            所有带有匹配选择的元素

[attribute]         $("[href]")         所有带有 href 属性的元素
[attribute=value]   $("[href='#']")     所有 href 属性的值等于 "#" 的元素
[attribute!=value]  $("[href!='#']")    所有 href 属性的值不等于 "#" 的元素
[attribute$=value]  $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素

:input      $(":input")         所有 <input> 元素
:text       $(":text")          所有 type="text" 的 <input> 元素
:password   $(":password")      所有 type="password" 的 <input> 元素
:radio      $(":radio")         所有 type="radio" 的 <input> 元素
:checkbox   $(":checkbox")      所有 type="checkbox" 的 <input> 元素
:submit     $(":submit")        所有 type="submit" 的 <input> 元素
:reset      $(":reset")         所有 type="reset" 的 <input> 元素
:button     $(":button")        所有 type="button" 的 <input> 元素
:image      $(":image")         所有 type="image" 的 <input> 元素
:file       $(":file")          所有 type="file" 的 <input> 元素

:enabled    $(":enabled")   所有激活的 input 元素
:disabled   $(":disabled")  所有禁用的 input 元素
:selected   $(":selected")  所有被选取的 input 元素
:checked    $(":checked")   所有被选中的 input 元素

注意并且选择器$(‘li:gt(1):lt(3)’),自左向右依次读，每读完一次，索引重新计算

jQuery对象和DOM对象相互转化

+ jQuery对象转化成DOM对象: $(选择器)[index]/$(选择器).get(index)

+ DOM对象转成jQuery对象:$(DOM对象)

jQuery选择方法

获取父级元素

1. $(选择器).parent():找到父级元素，找到一个元素  

2. $(选择器).parents(过滤条件):找到祖先级,可以传递参数找到指定的祖先级元素  

3. $(选择器).closest(过滤条件):首先看自己是否满足条件，否则往上依次去找祖先级

4.$(选择器).offsetParent():获取定位父级  

5.$(选择器).parentsUntil():查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

获取子代和后代的元素

1. $(选择器).children(过滤条件):找到指定的直接的孩子

2. $(选择器).find(过滤条件):找到孩子们可以找到孙子辈8

获取同级的元素

1. 找到前面一个元素:$(选择器).prev();

2. 找到前面所有元素:$(选择器).prevAll(过滤条件);

3. 找到后面一个元素:$(选择器).next();

4. 找到后面所有元素:$(选择器).nextAll(过滤条件);

5. 找到所有同级元素:$(选择器).siblings(过滤条件);

6. 找到前面/后面同级元素直到过滤条件为止：$(选择器).prevUntil(过滤条件)/$(选择器).nextUntil(过滤条件);

过滤方法

1. $(选择器).eq(index):找到选择器选中的第index+1个元素  

2. $(选择器).filter(过滤条件):找到指定过滤条件的那些元素  

3. $(选择器).not(过滤条件):除了过滤条件之外那些元素  

4. $(选择器).has(过滤条件)：保留包含特定后代的元素，去掉那些不含有指定后代的元素。

特殊方法

add():把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。  

addBack(): $('div').find('span').addBack();span div都被选中  

end():$('div').find('span').end():又选中了div

jQuery获取大小/距离的方法

注意在jQuery读元素某些值的时候选中的是第一个元素,在给jquery对象写值的时候就是隐式迭代

1. $(选择器).width():元素的宽度

2. $(选择器).innerWidth():元素的宽度+padding左右

3. $(选择器).outerWidth():元素的宽度+padding左右+border左右

4. scrollTop() 滚动距离

5. offset():返回值是一个对象{left:*,top:*}获取元素相对文档边界的距离left top

6. position():返回值是一个对象{left:*,top:*}获取的是元素left top

以上方法可读可写

**获取可视区的大小:$(window).width()/height();文档的大小:$(document).width()/height();**

jQuery DOM操作

获取内容

1. 获取/设置元素内所有内容：$(选择器).html()

2. 获取/设置元素内的文本内容:$(选择器).text()

3. 读取/设置表单元素的value值:$(选择器).val();  

val()特殊用法 $('input[type=checkbox]').val(['val1','val2'])把value值为val1和val2的复选框选中,select也可以用

样式操作

$(选择器).css('background','red');$ (选择器).css({设置多个});

$(‘div’).css(‘width’,’+=10px’);实现累加

样式类操作尽量操作样式类，少直接操作css属性

addClass(一个或多个)：添加一个或多个类名  
removeClass(不给参数全部移除，给了会移除指定的类)：移除指定类名或者全部移除  
toggleClass(类名)：切换是否认加上类名  

hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true。

属性操作

attr():读写合体 读取或者设置元素的属性，不光可以操纵自定义属性，还可以操纵元素自带的属性。  

prop():用法同上，只是在做单选或者多选按钮的时候一般用prop。  

移除属性:removeAttr(attr)/removeProp(attr)  

例子：全选反选的案例

获取索引值

$(选择器).index('标签名/类名...'):如果没有参数,那么得到是选择器选中的元素在所有同级的元素中所处的索引位置  
如果有参数那么得到的结果就是在参数中所处的索引位置

jq遍历的方法

each

$(选择器).each(function(i,el){}):i代表遍历到jq对象对应的索引值，el代表dom对象，遍历到谁就是谁  

$.each(arr,function(i,val){}) i下标，val代表值

动态创建

创建节点/元素:$('<div>内容</div>');

往元素末尾插入节点/元素:  

主动插入：$(选择器).append(创建的节点/'<div></div>'):选择器选中的元素末尾插入  

被动插入:创建的节点.appendTo($(选择器)):结果同上  

往元素头部插入节点/元素:  

主动插入：$(选择器).prepend(创建的节点/'<div></div>'):选择器选中的元素头部插入  

被动插入:创建的节点.prependTo($(选择器)):结果同上  

兄弟元素之后插入节点  

主动插入: $(选择器).after(节点):往选择器选中元素之后插入节点  

被动插入:节点.insertAfter($(选择器)) 结果同上  

兄弟元素之前插入节点  

主动插入: $(选择器).before(节点):往选择器选中元素之前插入节点  

被动插入:节点.insertBefore($(选择器)) 结果同上

移除元素:$(选择器).remove();  

清空元素:$(选择器).empty();

替换节点:$(选择器).replaceWith($(选择器)):相当于剪切粘贴。  

$(选择器).replaceAll($(选择器)):结果同上，调用顺序相反

克隆节点:$(选择器).clone():只克隆内容，不克隆事件，否则不光克隆内容,克隆事件  
原生js:dom对象.cloneNode(true/'deep');如果不加参数，只克隆标签，否则里面内容也克隆

包裹节点：被包裹的.wrap(节点、jq对象)  

被包裹的.wrapInner(节点、jq对象)  

被包裹的.wrapAll(节点、jq对象)  

被包裹的.unWrap()  

data=[

{

    proName:'华为',

    price:2000,

    num:1000

},{

    proName:'苹果',

    price:4999,

    num:99

},{


    proName:'三星',

    price:2000,

    num:1
}

]

**动态创建表格,删除行**

事件处理

原生的JS的所有的事件名称在jq里都有对应的方法

click() mouseover() mouseout() focus() blur()..... $(选择器).click(匿名函数体/有名函数名);

on 绑定事件

$(选择器).on(evName,fn);  

$(选择器).on({

    click:function(){},

    mouseover:function(){}
})  

$(选择器).off():可以所有事件绑定的方式。如果不写参数，那么所有事件全部移除，否则就移除指定的off('click mouseover');  

事件委托:$(选择器).on(evName,function(e){});

+ one 只执行一次事件

$(选择器).one(evname,fn)

jQuery的事件对象

e.type:获取事件类型  

e.target:事件源  

e.currentTarget:相当于this  

e.keyCode/e.which：获取键盘的键值  

e.pageX/e.pageY:获取鼠标的坐标  

e.preventDefault():阻止默认行为  

e.cancelBubble=true/e.stopPropagation()：阻止冒泡

return false;既阻止冒泡又阻止了默认行为

动画

slideUp('fast/slow'/毫秒数,callBack)/slideDown()/slideToggle():上拉下拉

show(参数)/hide(参数)/toggle(参数):显示隐藏

fadeIn()/fadeOut()/fadeTo()/fadeToggle():淡入淡出

animate动画

params:一组包含作为动画属性和终值的样式属性和及其值的集合  

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)  

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".  

fn:在动画完成时执行的函数，每个元素执行一次。  

$(选择器).animate({width:300,opacity:1...},2000,'linear/swing',callBack)  

运动形式扩展：easing.js,如果用了扩展，那么animate的参数至少要传3个   

$(选择器).animate({},time,运动形式);这三个缺一不可

stop(参数)

插件扩展

**extend():$.extend/$.fn.extend()**

扩展jQuery的工具方法:  

$.extend({

    sum:function(arr){

        var n=0;

        $.each(arr,function(index,val){

            n+=val;

        })

        return n;

    }


});

扩展jQuery对象的方法:

$.fn.extend({

    gh:function(arr){

        var arr=arr || ['red','blue'];

        var children=this.children();

        children.filter(':odd').css('background',arr[0]);

        children.filter(':even').css('background',arr[1]);

    },

    zoom:function(){


    }


})

ajax

$.ajax()/$.post()/$.get()

$.post('请求地址','json',function(){});

$.ajax({

    url:请求的地址,

    data:发送到后台的数据,"name=John&location=Boston"/{name:'John',location:'Boston'}

    dataType:'xml/text/json/jsonp/script/html',

    type:get/post,

    success:function(msg){msg就是后台返回的数据},

    error:function(){}

})