jQuery总结

jQuery总结

  目前jQuery最大的版本为3.5.1(使用过1.12.4), 1.x版本支持IE6/7/8, 2.x版本之后不再支持.

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

  jQuery是对javascript的封装,相比javascript而言,jQuery有更多的选择器,DOM操作更为简单,代码量更少,动画效果更加强大.

jQuery的入口函数

$(function(){})

  又叫jQuery的生命周期函数,相当于window.onload,一个html页面可以写多个jQuery入口函数,但只能写一个window.onload函数,而且jQuery入口函数比window.onload加载更快.
jQuery入口函数的4种写法

$(function(){})
jQuery(function(){})
$(document).ready(function(){})
jQuery(document).ready(function(){})

jQuery的基本选择器
（1）id选择器 (#)
（2）类选择器 (.)
（3）标签选择器 (div)
（4）层级选择器 (空格表示所有后代,>表示所有子元素)
（5）基本过滤选择器 (:first, :last, :eq(index), :contain(text), :gt(index), :lt(index), :not(), :even, :odd, :header, [attribute=value] , :input(匹配所有 input, textarea, select 和 button 元素)),
（6）筛选方法
parent() 找亲爹
parents() 找祖先(包含亲爹)
siblings() 除了自己以外的兄弟
next() 后面一个兄弟
prev() 前一个兄弟
nextAll() 后面所有的
prevAll() 前面所有的
children() 找亲儿子
find() 查找
index() 获取下标
jQuery对象和dom对象之间的转换
dom对象转换为jquery对象使用

$(dom)

jquery对象转换为dom对象

 $("xxx")[index] 或者 $("xxx").get(index)

样式操作
（1）设置样式 $("xxx").css(key,value) 或者 $("xxx").css({})
（2）获取样式 $("xxx").css("attr")
（3）$("xxx").addClass("x") 添加指定类样式
（4）$("xxx").removeClass('x') 移除指定类样式,如果没有参数,则移除所有类样式
（5）$("xxx").hasClass('x') 判断是否拥有指定的类样式
（6）$("xxx").toggleClass("x") 一键切换类样式
jQuery动画

show(speed,callback)
hide(speed,callback)  //speed时间 callback回调函数
sildeDown(speed,callback) //滑下
sildeUp(speed,callback)   //滑上
slideToggle(speed,callback)
fadeIn(speed,callback) //淡入
fadeOut(speed,callback)  //淡出
fadeToggle(speed,callback)
fadeTo()

自定义动画:

animate(参与动画的属性,时长,callback)
$(".box").animate({
                        left: 500
                    }, 1000,function(){}).animate({
                        top: 500
                    }, 1000).animate({
                        left: 8
                    }, 1000)
                    .animate({
                        top: 30
                    }, 1000)
 //stop 默认参数都是 false
            // 第一个参数,是否清空动画队列
            // 第二个参数,快速完成当前动画
            $("button").eq(1).click(function () {
                $(".box").stop(true, true)
            })

dom节点操作
（1）在父节点的最后追加一个子元素 父.append(子) 或者 子.appendTo(父)
（2）在父节点的前面追加一个子元素 父.prepend(子) 或者 子.prependTo(父)
（3）在兄弟节点前插入一个元素 兄弟.before(节点)
（4）在兄弟节点后面插入一个元素 兄弟.after(节点)
html和text
html() 如果有参数,表示设置
如果没有参数,表示获取,会把标签页获取到
如果内容是一个空字符串,等价于删除内容
等价于js innerHTML
text()
等价于js的 innerText
html会把标签渲染到页面
text会把标签原封不动的显示

jQuery清空内容的方式
（1）$("xxx").html('')
（2）$("xxx").text('')
（3）$("xxx").empty()
（4）$("xxx").remove() //删除元素,自杀
jQuery克隆
深克隆 $("xxx").clone(true) 不仅会克隆自身结构,还会克隆子节点

浅克隆 $("xxx").clone(false) 克隆自身结构和子节点,还会克隆事件

 //js的浅克隆只会克隆自身的结构,不会克隆子节点
 //js的深克隆会克隆自身的结构,还会克隆子节点

jquery表单操作
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有的密码框
:radio 匹配所有的单选按钮 // : radio:checked
:checkbox 匹配所有的复选框 // :checkbox:checked

$("xxx").val() 拿到表单的值

jQuery属性操作
（1）设置属性: $("xxx").attr(属性,属性值) 或者 $("xxx").prop(属性,属性值) 等价于js的setAttribute()
（2）获取属性: $("xxx").attr(属性) 或者 $("xxx").prop(属性) 等价于js的getAttribute()
（3）删除属性: $("xxx").removeAttr(属性) 等价于js的removeAttribute

• selected,checked,disabled等动态属性的操作使用prop
  jQuery的位置
  （1）原生js的offsetHeight获取的是自身的高度+border+padding
  （2）jQuery的height()获取的是元素自身的高度,height()有参数时表示设置
  （3）jQuery的offset()获取的是元素到body的距离,返回的是一个对象{left,top}, 有参数时表示设置
  （4）原生js的offsetLeft() 获取的是元素到最近带有定位的父级元素的距离, 如果父级元素都没有定位就是到body的距离
  （5）jQuery的position(), 只能做获取,不能做设置, 获取的是到最近的带有定位的父级元素的距离, 等价于原生js的offsetLeft()
  jQuery事件
  （1）简单事件 click , mouseenter ,mouseleave…
  （2）绑定事件 $("xxx").bind("click mouseenter",function(){}) //一次绑定多个事件使用bind或者on
  （3）事件委托 $("body").delegate(".box","click",function(){}) || $("body").on("click",".box",function(){})
  （4）事件解绑 off()解绑所有事件 || off(“事件类型”,“指定子元素||**”)
  （5）只触发一次事件

// once 一次
        //原生js值触发一次事件
        var oBox = document.querySelector(".box");
         oBox.addEventListener('click', function () {
         console.log("1111"
        }, {
           once: true
         })
//jq
       $(function () {
           // 只触发一次
            $(".box").one("click", function () {
                console.log("2222")
            })  
        })

e.currentTarget 等价于this

$(“button”).on(“click”, (e) => {
// e.currentTarget 等价于this ,使用场景,当箭头函数里面拿不到this的时候
$(e.currentTarget).css(‘backgroundColor’, “green”);
})

移动端简单手势
（1）touchstart
（2）touchend
（3）touchmove
（4）console.log(e.originalEvent)
遍历(迭代)
手动迭代

 $("li").map(function (index, el) {
                console.log(index, el)
            })
  $("li").each(function (index, el) {
                console.log(index, el)
            })

工具方法

var arr = ["a", "b", "c", "d"];
            var res = $.map(arr, function (el, index) {
                return el + "1"
            })
            console.log(res)

            var res = $.each(arr, function (el, index) {
                return el + "1"
            })
            console.log(res)

查看jQuery版本

$.fn.jquery //查看版本 $.noConflict(true) //不同版本共存时,交换版本

jQuery的ajax方法

$.get(url,callback)
$.post(url,data,callback)
$.ajax()

$.ajax({
    type: "post", //【以POST或GET的方式请求。默认GET。PUT和DELETE也可以用，有的浏览器不支持】
    url: url,   //【请求的目的地址，须是一个字符串。】
    contentType: "application/json",       //【以哪种数据类型发送请求】
    data: data,    //【请求的数据】
    dataType: "json",  //【想从服务器得到的数据类型。html,json,jsonp,text】
    async:false,//【默认为true异步请求，设置为false时为同步请求】
    beforeSend:function{......},  //【传递异步请求之前的事件】
    success:function{......},  //【请求成功之后的回调】
    error:function{......},    //【请求失败之后的回调】
    complete(function{......},  //【不管请求成功还是错误，只要请求完成，可以执行的事件。】