jQuery总结

jQuery总结

• 目前jQuery最大的版本为3.4.1(使用过1.12.4), 1.x版本支持IE6/7/8, 2.x版本之后不再支持.
• jQuery是对javascript的封装,相比javascript而言,jQuery有更多的选择器,DOM操作更为简单,代码量更少,动画效果更加强大.

jQuery的入口函数

$(function(){})

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

1. $(function(){})
2. jQuery(function(){})
3. $(document).ready(function(){})
4. 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清空内容的方式

• $("xxx").html('')
• $("xxx").text('')
• $("xxx").empty()
• $("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属性操作

• 设置属性: $("xxx").attr(属性,属性值) 或者 $("xxx").prop(属性,属性值) 等价于js的setAttribute()
• 获取属性: $("xxx").attr(属性) 或者 $("xxx").prop(属性) 等价于js的getAttribute()
• 删除属性: $("xxx").removeAttr(属性) 等价于js的removeAttribute
  - selected,checked,disabled等动态属性的操作使用prop

jQuery的位置

• 原生js的offsetHeight获取的是自身的高度+border+padding
• jQuery的height()获取的是元素自身的高度,height()有参数时表示设置
• jQuery的offset()获取的是元素到body的距离,返回的是一个对象{left,top}, 有参数时表示设置
• 原生js的offsetLeft() 获取的是元素到最近带有定位的父级元素的距离, 如果父级元素都没有定位就是到body的距离
• 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");
        })

移动端简单手势

• touchstart
• touchend
• touchmove
• 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插件

插件必须在jquery之后引入

1. 编写成员方法使用: $.fn.extends
2. 编写工具方法,又称全局方法使用 : $.fnName || $.extends

jQuery的ajax方法

1. $.get(url,callback)
2. $.post(url,data,callback)
3. $.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{......},  //【不管请求成功还是错误，只要请求完成，可以执行的事件。】