jQuery基础

最新推荐文章于 2021-06-22 11:06:54 发布

shadow_tian1

最新推荐文章于 2021-06-22 11:06:54 发布

阅读量232

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/tian_98/article/details/109121036

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

jQuery

介绍：jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了JavaScript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。jQuery强调的理念是以最少的代码，实现最多的功能。
优势：轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的ajax、出色的浏览器兼容、链式操作方法、隐式迭代、行为层和结构层的分离、丰富的插件支持、完善的文档、开源
引入方式：
- 引入CDN服务
  < script src=“http://code.jquery.com/jquery-migrate-1.2.1.min.js”> </ script>
- 引用本地文件
  < script src="./jquery-3.0.0.js"></ script>
文档加载
- $(document).ready(function() { })
- $(function() { })
- 原生的和jq的区别：
  - ①执行时机不同，window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行，而 $(document).ready()是网页中所有DOM结构绘制完毕就执行，可能DOM元素关联的东西并没有加载完
  - ②window.onload只能写一个，多个时后面的会覆盖掉前面的，而 $(document).ready()可以写多个，不会覆盖
jquery对象
- 通过jQuery包装DOM对象后产生的对象 jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jquery里的方法
- 获取方式：var li = $(‘li’)

      var jLi = $('li')
      console.log(jLi)//jQuery.fn.init(4) [li, li, li, li, prevObject: jQuery.fn.init(1)]
      console.log(jLi[0])//<li>1</li>

互转
- jquery转原生：
  - ①jquery对象.get()
    - 如果不传参数，返回一个数组，数组里的元素即原生的DOM元素
    - 如果传参数，返回具体某一个DOM元素
  - ②jquery对象[下标]
    - 返回具体某一个DOM元素
- 原生转jquery：用 $() 包起来

    //jQuery转原生js  get()  get(索引)  [索引]
    var oLi = jLi.get()
    console.log(oLi)//[li, li, li, li]
    console.log(jLi.get(0))//<li>1</li>
    var bLi = jLi[0]
    console.log(bLi)//<li>1</li>
    //原生js原生jQuery  $()
    var newJli = $(oLi)
    console.log(newJli)//jQuery.fn.init(4) [li, li, li, li]

选择器
- 基本选择器：通过元素id、class和标签名来查找元素。例：$(’.class’)、 $(’#id’)、 $(‘标签名’)

     $('#first').css('font-size',40)
     $('.item').css('fontSize','12px')
     $('li').css('color','red')
     $('*').css('padding',0)
     $('#first,.item').css('background','pink')

层次选择器：
- 子孙节点：空格
- 子节点：>
- ③下一个兄弟节点：+/next()
- ④下面所有的兄弟节点：~/nextAll()

     //后代节点
     $('ul span').css('fontSize', '30px')
     //子节点
     $('ul>span').css('color', 'red')
     //下一个兄弟节点
     $('#first + li').css('background', 'pink')
     $('#first').next('li').css('color','white')
     $('#first').nextAll('li').css('fontWeight','bold')

过滤选择器：通过特定的过滤规则来筛选出所需要的dom元素，过滤规则与css中的伪类选择器语法相同
- 基本过滤
  - $(‘li:first’) //第一个
  - $(‘li:last’) //最后一个
  - $(‘li:not(.box)’) //排除class名为box
  - $(‘li:even’) //索引为偶数
  - $(‘li:odd’) //索引为奇数
  - $(‘li:eq(3)’) //索引为3的元素
  - $(‘li:gt(3)’) //索引大于3的元素
  - $(‘li:lt(3)’) //索引小于3的元素
- 内容过滤
  - $(‘li:contains(非)’) //选取文本中包含’非’的li元素
  - $(‘li:empty’) //选取不包含子元素或文本的空元素
  - $(‘li:has§’) //选取包含选择器匹配元素的元素
  - $(‘li:parent’) //选取含有子元素或文本的元素
- 可见性过滤
  - $(‘li:hidden’).show(2000)//选取所有不可见li
  - $(‘li:visible’).css(‘background’,‘red’)//选取所有可见的li
  - 注意：不仅包括display为none的元素，也包括< input type=“hidden” />和 visibility:hidden之类
- 属性过滤
  - $(‘li[title]’) //有title属性的
  - $(‘li[title=优就业]’) //属性是优就业的
  - $(‘li[title!=优就业]’) //属性不是优就业的
  - $(‘li[title^=a]’) //属性以a开头
  - $(‘li[title $=业]’) //属性以’业’结尾
  - $(‘li[title*=b]’) //属性包含b的
- 子元素过滤
  - $(‘ul :nth-child(1)’) //匹配ul下面的第n个子元素
  - $(‘ul :nth-child(even)’) //偶数
  - $(‘ul :nth-child(odd)’) //奇数
  - $(‘ul :first-child’) //每一个父元素下面第一个子元素
  - $(‘ul :last-child’) //每一个父元素下面的最后一个子元素
  - $(‘ul :nth-child(n+2)’) //-n+2选中前两个，n+2选中从2开始
- 表单对象过滤
  - $(‘input:enabled’) //选取所有可用元素
  - $(‘input:disabled’) //选取所有不可用元素
  - $(’:checkbox:checked’) //选取所有被选中的元素(单选框/复选框)
  - $(‘select :selected’) //获取下拉框选中的元素
表单选择器
- $(’:input’) //选取所有input
- $(’:text’) //获取所有单行文本框
- $(’:password’) //密码框
- $(’:file’) //上传域
遍历节点
- $(’#box’).children() //当前元素的子节点，而不考虑其孙级节点
- $(’.title’).next() //当前元素的下一个兄弟节点
- $(’.title’).nextAll() //当前元素的下面所有兄弟节点
- $(’.title’).prev() //当前元素的上一个兄弟节点
- $(’.title’).prevAll() //当前元素的上面所有兄弟节点
- $(’.title’).siblings() //当前元素的所有兄弟节点
遍历节点——父级
- $(’.box3’).parent() //获取当前元素的父级
- $(’.box3’).parents() //获取当前元素的所有父级，一直到html
遍历节点——过滤
- find()
  $(‘ul’).find(‘li’) //先找到ul，再查找ul下面的li
- filter()
  $(‘li’).filter(’.box’) //先找到所有li，再找到名为box的元素
- not()
  $(‘li’).not(’.box’) //先找到所有li，再排除名为box的元素
属性操作
- attr()
  获取：jquery对象.attr(属性名)
  设置：jquery对象.attr(属性名,属性值)
  删除：jquery对象.removeAttr(属性名)
- prop()
  获取：jquery对象.prop(属性名)
  设置：jquery对象.prop(属性名,属性值)
  删除：jquery对象.removeProp(属性名)
- 什么时候该使用prop：
  只存在true/false属性，应该使用prop

   $('button').click(function () {
      console.log($('input').attr('checked')); //undefined
      console.log($('input').prop('checked')); //true/false
      //获取当前的状态
      var aaa = $('input').prop('checked')
      $('input').prop('checked', !aaa)

    })

class操作

    $('div').addClass('box active') //添加class，可以同时添加多个
    $('div').removeClass('active') //删除class

    console.log($('div').hasClass('box')); //是否有box，返回布尔值
    console.log($('div').is('.box')); //同上，但是调用的时候必须打点

    $('div').toggleClass('box') //如果box就删除，如果没有就添加

css操作
- jQuery对象.css(‘样式名’) //获取
- jQuery对象.css(‘样式名’,‘值’) //设置单个
- jQuery对象.css({ ‘样式名’:‘值’, ‘样式名’:‘值’ })//设置多个

    $('.box').css('font-size', 50)

    $('.box').css({ //设置多个
      'width': 300, //默认是px，如果你要写100px，那么就要写成字符串格式
      'height': '500px',
      'background': 'pink'
    })


    console.log($('.box').css('width')); //300px
    console.log($('.box').css(
    'background')); //rgb(255, 192, 203) none repeat scroll 0% 0% / auto padding-box border-box

获取内容
jQuery对象.html() ：获取
jQuery对象.html(值) ：设置
jQuery对象.text() ：获取
jQuery对象.text(值) ：设置
jQuery对象.val() ：获取
jQuery对象.val(值) ：设置

    console.log($('p').html()); //哈哈哈哈，我是一个p标签
    console.log($('p').text()); //哈哈哈哈，我是一个p标签

    $('p').html('你好：<strong>我是加粗</strong>') //可以识别标签
    $('p').text('你好：<strong>我是加粗</strong>') //不可以识别标签

    //文本框
    console.log($('input').val());
    // $('input').val('通过val()改变的值')
    console.log($('input').val());
    //下拉框
    console.log($('select').val());
    $('select').val('b')
    $('select').val(['b', 'c'])
    //复选框
    $(':checkbox').val(['check1','check2','check3'])

$ .each()
语法： $.each(对象,function(下标,当前项){ })
作用：可以循环jQuery对象，也可以用于循环原生数组及对象
注意：在循环jQuery对象时，函数中的this就是item

    var arr = ['西瓜', '哈密瓜', '苹果', '鸭梨']
    $.each(arr, function (index, item) {
      console.log(index + '-----' + item);
    })

    //二维数组
    var arr = [
      ['西瓜', '哈密瓜', '苹果', '鸭梨'],
      ['web', 'java', 'python', 'ui'],
      ['保时泰', '飞度', '五菱宏光', '宝骏']
    ]
    $.each(arr, function (index, item) {
      console.log(index + '----' + item);
    })

    //对象
    var obj = {
      'name': 'zhangSan',
      'age': 18,
      'city': 'guangZhou',
      'sex': '男'
    }
    $.each(obj, function (key, val) {
      console.log(key + '----' + val);
    })

    //数组套对象
    var arr = [{
      'name': 'zhangSan',
      'age': 18,
      'city': 'guangZhou',
      'sex': '男'
    }, {
      'name': 'liSi',
      'age': 28,
      'city': 'nanSha',
      'sex': '女'
    }, {
      'name': 'wangWu',
      'age': 38,
      'city': 'beiJing',
      'sex': '男'
    }]
    $.each(arr, function (index, item) {
      // console.log(index + '---' + item);
      console.log(item.name);
    })

    //遍历jQuery对象
    $.each($('li'), function (index, item) {
      console.log(index + '----' + item);
      console.log(this);
      console.log(item === this);
      $(item).css('background', 'pink')
    })

jQuery对象.each()
语法： jQuery对象.each(function(下标,当前项){ })
作用：该方法专门用来循环jQuery对象

    $('li').each(function (index, item) {
      console.log(index + '----' + item);
      console.log(this);
      console.log(item === this);
    })

注意：函数中的this就是当前遍历的这一项

$ .map()
语法：$ .map(数组,function(当前项,下标){})
作用：通过回调函数的处理，返回一个新的数组

    var arr = ['a', 'b', 'c', 'd', 'e']
    var arr1 = $.map(arr, function (item, index) {
      console.log(index, item);   /*0 "a"
                                    1 "b"
                                    2 "c"
                                    3 "d"
                                    4 "e" */
      //把每一项item转换成大写
      return item.toUpperCase()
    })
    console.log(arr1);/*0: "A"
                        1: "B"
                        2: "C"
                        3: "D"
                        4: "E" */

$.map和 $.each区别：
①：函数中形参的位置是相反的
②：map通过回调函数处理返回一个新数组，each仅仅是用来遍历

$ .extend()
介绍：该方法用于将一个或多个对象的内容合并到目标对象
语法： $ .extend(目标对象,要合并的对象,要合并的对象……)
解释：它的含义就是将要和并的对象….合并到目标对象中，返回值为合并后的目标对象
注意：该方法还常用于对象的深度拷贝， $.extend(true,{},obj)

    var obj1 = {
      'name': 'zhangSan'
    }
    var obj2 = {
      'age': 18
    }
    var obj3 = {
      'city': 'guangZhou'
    }
    var obj = {}
    $.extend(obj, obj1, obj2, obj3)
    console.log(obj);


    //假设没有目标对象接收
    var newObj = $.extend({}, obj1, obj2, obj3)
    console.log(newObj);

    //该方法常用于对象的深度克隆(对象里面套对象)，第一个参数为true，则为深度拷贝
    var obj4 = {
      a: {
        name: '张三'
      }
    }
    var obj5 = $.extend(true, {}, obj4)
    obj5.a.name = '李四'
    console.log(obj5);

    console.log(obj4);

day 02

BOM

获取元素宽高
- 获取元素的宽
  - $ (’.box’).width() -->width
  - $ (’.box’).innerWidth() -->width+padding
  - $ (’.box’).outerWidth() -->width+padding+border
  - $ (’.box’).outerWidth(true) -->width+padding+border+margin
- 获取高度同上
获取可视区的宽高
- $ (window).width()
- $ (window).height()
获取文档宽高
- $ (document).width()
- $ (document).height()
offset()
- 语法：jQuery对象.offset()
- 概念：返回元素相对于文档的距离
滚动条
- 语法：
  - ①jQuery对象.scrollTop()：页面被卷去的高，上下滚动时滚动条的位置
  - ②jQuery对象.scrollLeft()：页面被卷去的宽，左右滚动时滚动条的位置
- 概念：返回元素的滚动条距离，既可以获取，也可以设置（传参）

        //元素宽高
        console.log($('div').width())//200 width
        console.log($('div').innerWidth())//230 width+padding
        console.log($('div').outerWidth())//234 width+padding+border
        console.log($('div').outerWidth(true))//264 width+padding+border+margin
        console.log($('div').outerHeight(true))//1024 height+padding+border+margin
        //可视区宽高
        console.log($(window).width())//913
        console.log($(window).height())//625
        //文档宽高
        console.log($(document).width())//913
        console.log($(document).height())//1024 height+padding+border+margin
        //元素相对于文档距离
        console.log($('p').offset())//{top: 504, left: 649}
        console.log($('p').offset().top)//504
        console.log($('p').offset().left)//649
        //滚动条位置
        console.log($(window).scrollTop())//111
        console.log($(window).scrollLeft())//0
        $(document).scroll(function(){
            //获取
            console.log($(window).scrollTop())
        })
        $('p').click(function(){
            //设置
            $(window).scrollTop(0)
        })

DOM

创建节点
- 语法：$ (html片段)
添加节点
- 在父元素末尾添加
  - 父元素.append(子元素)
  - $ (要添加的元素).appendTo(父元素)
- 在父元素开头添加
  - 父元素.prepend(子元素)
  - $ (要添加的元素).prependTo(父元素)
- 在某个元素前面添加
  - 参考节点.before(新节点)
  - 新节点.insertBefore(参考节点)
- 在某个元素后面添加
  - 参考节点.after(新节点)
  - 新节点.insertAfter(参考节点)
删除节点
- jQuery对象.remove()：删除元素，返回被删除元素的引用，不会保留元素绑定的事件
- jQuery对象.detach()：删除元素，返回被删除元素的引用，但会保留元素绑定的事件
- jQuery对象.empty()：清空元素的节点
克隆节点
- jQuery对象.clone()：如果参数为true，则可以克隆元素的操作行为
替换节点
- jQuery对象.replaceAll(被替换的元素) ：前面的替换后面的
- 被替换的元素.replaceWith(jQuery对象) ：后面的替换前面的
包裹节点
- $(‘span’).wrap(’< div>’) ：每一个span外面包裹一个div
- $(‘span’).wrapAll(’< div>’) ：所有span外面包裹一个div
- $(‘span’).wrapInner(’< div>’) ：每一个span的里面包裹一个div
- $(‘span’).unwrap() ：删除外面的父级，如果父级是body，则不能删除

        //创建节点
        //插入节点
        //在某个元素前面插入节点
        $('script').eq(0).before($('<div>我是创建的DIV</div>'))
        $('<em>em</em>').insertBefore($('div'))
        //在某个元素后面插入节点
        $('em').after($('<b>b</b>'))
        $('<em>em2</em>').insertAfter($('b'))
        //在父元素末尾添加节点
        $('<p>p1</p>').appendTo($('div'))
        $('div').append($('<p>p2</p>'))
        //在父元素头部添加节点
        $('<span>我是span</span>').prependTo($('div'))
        $('div').prepend($('<div>我是inner_div</div>'))
        //删除节点
        $('div').find('p').click(function(){
            console.log($(this).html())
        })
        //remove() 不保留之前绑定的事件
        $('button').eq(0).click(function(){
            var jP = $('div').eq(0).find('p').remove()
            console.log(jP)//接收返回值（jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(2)]）
            setTimeout(function(){
                jP.appendTo($('div').eq(0))
            },2000)
        })
        //detach() 保留之前绑定的事件
        $('button').eq(1).click(function(){
            var jP = $('div').eq(0).find('p').detach()
            console.log(jP)//接收返回值（jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(2)]）
            setTimeout(function(){
                jP.appendTo($('div').eq(0))
            },2000)
        })
        //empty()
        $('button').eq(2).click(function(){
            $('div').eq(0).find('p').empty()
        })
        //克隆节点 clone()  如果参数为true，则可以克隆元素的操作行为
        $('button').eq(3).click(function(){
            $('h1').eq(0).clone().insertAfter($('h1').eq(0))
        })
        //替换节点
        $('<h6>h6</h6>').replaceAll($('h1'))
        $('h1').replaceWith($('<h6>h6</h6>'))
        //包裹节点
        $('em').wrap('<div>')//每一个em外面包裹一个div
        $('em').wrapAll('<div>')//所有的em外面包裹一个div
        $('p').wrapInner('<span>')//每个p的里面包裹一个span，会把p的内容一起包裹起来
        $('p').unwrap()//删除外面的父元素，如果父级是body，则不能删除

事件对象
- $(‘div’).click(function (ev) {
  ev ：jQuery的事件对象
  ev.clientX, ev.clientY ：鼠标相对于可视区的距离
  ev.delegateTarget ：事件绑定的对象
  ev.offsetX, ev.offsetY ：鼠标相对于触发事件的元素的左上角的距离
  ev.originalEvent ：返回原生的事件对象
  ev.pageX, ev.pageY ：鼠标相对于文档的距离
  ev.screenX, ev.screenY ：鼠标相对于屏幕的距离
  ev.target ：事件源
  ev.type：事件类型
  ev.which ：相当于keyCode，比keyCode强大，还可以记录鼠标的键值，123(左中右)
  ev.altKey ：相应的功能键是否按下
  ev.ctrlKey
  ev.shiftKey
  ev.preventDefault()：阻止默认事件
  ev.stopPropagation()：阻止冒泡的操作
  return false：阻止默认事件 + 阻止冒泡的操作 })
事件绑定
- 语法：
  - jQuery对象.on(事件类型, function(){ })
- 优点：
  - ①可以给同一个元素的同一个事件添加不同的处理函数
  - ②可以给同一个元素的不同事件添加同一个处理函数
  - ③可以同时添加多个事件
  - ④事件可以发生在未来
事件委托
- 语法：
  - jQuery对象.on(事件类型,子级, function(){ })
- 优点：后来新添加的元素，也能保持之前的事件
- 事件绑定在父级上，触发事件的是子级。利用冒泡的原理实现
取消事件
- 语法：
  - jQuery对象.off(事件类型)
- 注意：如果不传参数，则取消所有的事件
命名空间
- 语法：
  - jQuery对象.on(事件类型.命名, function(){ })
one()
- 语法：
  - jQuery对象.one(事件类型, function(){ })
- 概念：只允许执行一次
合成事件hover()
- 语法：
  - jQuery对象.hover(移入执行的函数, 移出执行的函数)
- 类似于原生的mouseenter和mouseleave，他们没有冒泡。而不同于mouseover和mouseout

        //事件对象
        $('div').click(function (ev) {
            console.log(ev)
            console.log(ev.clientX, ev.clientY)//34 22鼠标相对于可视区的距离
            console.log(ev.delegateTarget)//<div>div</div>事件绑定的对象
            console.log(ev.offsetX, ev.offsetY)//14 12鼠标相对于触发事件的元素的左上角距离
            console.log(ev.originalEvent)//返回原生的事件对象
            console.log(ev.pageX, ev.pageY)//34 22鼠标相对于文档的距离
            console.log(ev.screenX, ev.screenY)//124 222 鼠标相对于屏幕的距离
            console.log(ev.target)
            console.log(ev.type)
            console.log(ev.which)//相当于keycode，比keycode强大很多，还可以记录鼠标的键值，123(左中右)
            console.log(ev.altKey)
            console.log(ev.ctrlKey)
            console.log(ev.shiftKey)
            //阻止默认事件
            ev.preventDefault()
            //阻止冒泡操作
            ev.stopPropagation()
            //阻止默认事件+阻止冒泡操作
            return false
        })

        //事件绑定

        //同一元素同一事件，多个处理函数
        $('div').on('click',function(){
            console.log(111)
        })
        $('div').on('click',function(){
            console.log(222)
        })

        //同一元素同一处理函数多个事件
        $('div').on('click mouseenter',function(){
            console.log(111)
        })

        //同一元素不同事件对应不同处理函数(对象格式)
        $('div').on({
            click:function(){
                console.log(111)
            },
            mouseenter:function(){
                console.log(222)
            }
        })

        //绑定自定义事件，在需要的时候触发
        $('div').on({
            click:function(){
                $('div').trigger('aaa')//在点击div时触发自定义事件
            },
            aaa:function(){
                console.log('我是自定义事件')
            }
        })

        //事件委托
        $('ul').on('click','li',function(){
            $(this).css('background','pink')
        })
        //事件可以发生在未来
        $('<li>5</li>').appendTo($('ul'))

        //取消事件
        $('li').on('click mouseleave',function(){
            console.log(111)
        })
        $('li').off()//取消所有
        $('li').off('mouseleave')//取消特定

        //命名空间
        $('div').on('click.aaa',function(){
            console.log(111)
        })
        $('div').on('click.bbb',function(){
            console.log(222)
        })
        $('div').off('click.bbb')

        //one事件 只触发一次
        $('div').one('click.aaa',function(){
            console.log(111)
        })

        //hover事件 合并移入移出事件
        $('div').hover(function(){
            console.log(111)
        },function(){
            console.log(222)
        })

token

Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

https比http安全系数更高

DOM树种消失（display:none）

0.5px的线：width:500px;height:0.5px;background:pink;

动画

显示隐藏(同时改变宽高透明度)
- 语法：
  - jquery对象.show(时间,速度,回调) -->显示
  - jquery对象.hide(时间,速度,回调) -->隐藏
  - jquery对象.toggle(时间,速度,回调) -->显示/隐藏（切换）
    - 时间关键字：fast 200ms ；normal 400ms ；slow 600ms
    - 速度关键字：swing 慢快慢（默认）；linear

        $('button:eq(0)').on('click',function(){
            // $('div').show()//直接显示
            // $('div').show(2000)
            $('div').show(2000,function(){
                console.log('我已经完全显示出来了')
            })
        })
        $('button:eq(1)').on('click',function(){
            // $('div').hide()//直接隐藏
            // $('div').hide(2000)
            $('div').hide(2000,function(){
                console.log('我已经完全隐藏了')
            })
        })
        $('button:eq(2)').on('click',function(){
            // $('div').toggle()//直接显示/隐藏
            // $('div').toggle(2000)
            $('div').toggle(2000,function(){
                console.log('我已经完全切换了')
            })
        })

显示隐藏（先block,再改变透明度；先none,再改变透明度）
- 语法：
  - jquery对象.fadeIn(时间,回调) -->显示
  - jquery对象.fadeOut(时间,回调) -->隐藏
  - jquery对象.fadeTo(时间,透明度,回调) -->透明度到多少
  - jquery对象.fadeToggle(时间,回调) -->显示/隐藏

        $('button').eq(3).on('click',function(){
            // $('div').fadeIn()//直接显示
            // $('div').fadeIn(2000)
            $('div').fadeIn(2000,function(){
                console.log('我已经完全显示出来了')
            })
        })
        $('button').eq(4).on('click',function(){
            // $('div').fadeOut()//直接隐藏
            // $('div').fadeOut(2000)
            $('div').fadeOut(2000,function(){
                console.log('我已经完全隐藏了')
            })
        })
        $('button').eq(5).on('click',function(){
            // $('div').fadeTo(2000,0.5)//2秒显示到0.5透明度
            $('div').fadeTo(2000,0.8,function(){
                console.log('我已经完全显示出来了')
            })
        })
        $('button').eq(6).on('click',function(){
            // $('div').fadeToggle()//直接切换
            // $('div').fadeToggle(2000)
            $('div').fadeToggle(2000,function(){
                console.log('我已经完全切换了')
            })
        })

显示隐藏(改变高度)
- 语法：
  - jquery对象.slideDown(时间,回调) -->显示
  - jquery对象.slideUp(时间,回调) -->隐藏
  - jquery对象.slideToggle(时间,回调) -->显示/隐藏（切换）

        $('button:eq(7)').on('click',function(){
            // $('div').slideDown()//直接显示
            // $('div').slideDown(2000)
            $('div').slideDown(2000,function(){
                console.log('我已经完全显示出来了')
            })
        })
        $('button:eq(8)').on('click',function(){
            // $('div').slideUp()//直接隐藏
            // $('div').slideUp(2000)
            $('div').slideUp(2000,function(){
                console.log('我已经完全隐藏了')
            })
        })
        $('button:eq(9)').on('click',function(){
            // $('div').slideToggle()//直接显示/隐藏
            // $('div').slideToggle(2000)
            $('div').slideToggle(2000,function(){
                console.log('我已经完全切换了')
            })
        })

注意：该方法都是根据元素的display属性来改变的。
animate动画
语法：
- jQuery对象.animate({动画的参数},时间,运动形式,回调)
  - 第一个参数：{ } 运动的属性和值 {width:300,height:300}
  - 第二个参数：时间默认：400ms
  - 第三个参数：只有两种运动形式默认：swing(慢快慢)(默认) linear(匀速)
  - 第四个参数：回调函数
动画列队：每一个animate都是队列中的一员，前一个动画运动完了，后一个动画才会运动

        //普通动画
        //jq对象.animate({要改变的},时间,速度,回调函数)可传四个参数
        //延迟：jq对象.delay(时间).animate(参数)
        //链式运动（动画列队）(只能传两个参数)
        $('div').animate({
            'width': 500
        }, 2000).delay(3000).animate({
            'width': 50,
            'left': 500
        }, 2000)

停止动画
- stop()
  - 语法：jquery对象.stop(clearQueue,gotoEnd)
    - clearQueue：是否要清空未执行完的动画列队
    - gotoEnd：是否直接将正在执行的动画跳转到结束状态
  - jQuery对象.stop() ：没有参数，停止当前正在进行的运动，后续运动继续
  - jQuery对象.stop(true) ：停止当前的，同时清空后面的动画
  - jQuery对象.stop(true,true) ：当前动画到达完成状态，同时停止后面的动画
- finish()
  - 语法：jQuery对象.finish()：所有动画全都到完成状态
延迟动画
- 语法：jQuery对象.delay(时间).animate({}, ,)

    $('div').delay(1000).animate({
      'width': 600
    }, 2000).delay(3000).animate({
      'height': 600
    }, 2000)

递归
- 概念：一个函数在其定义域说明中有直接或间接调用自身的一种方法

       //共10个li
       $('li:first').slideDown(500, function fn() {
            if ($(this).next().index() <= 9) {
                $(this).next().slideDown(500, fn)
            }
        })

ajax
- 优势：
  - ①不需要插件支持
  - ②优秀的用户体验
  - ③提高web程序性能
  - ④减轻服务器和带宽的负担
- 不足：
  - ①破坏了浏览器的前进、后退按钮的正常功能
  - ②对搜索引擎支持不足
- 格式：

      $.ajax()    是jquery中ajax的最底层实现，他的参数只有一个，是一个对象
      
      格式：
      $.ajax({
        url:'', //请求的地址
        type:'',  //请求方式(get/post) 默认为get
        async:'', //是否为异步请求，默认true异步
        timeout:'', //设置请求超时时间，单位ms
        data:{ },  //发送到后端的数据
        dataType:'',  //预期服务器返回的数据类型，有xml/html/script/json/jsonp/text
        success:function(res){ }, //成功的回调函数
        error:function(err){ }, //失败的回调函数
        complete:function(){ }  //请求完毕后调用的函数，请求成功或失败均调用
      })

跨域
- 为什么出现跨域
  - 出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。可以说web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互。所谓同源就是两个页面具有相同的协议、域名、端口号

     http://127.0.0.1:5501/day23/ajax/04跨域.html
     http:                     协议
     127.0.0.1                 域名
     5501                      端口号

什么是跨域
跨域的解决方法(JSONP)
- 理解：JSONP是服务器与客户端跨域通信的常用方式。最大的特点就是简单适用，兼容性好(兼容低版本IE)，缺点就是只支持get请求，不支持post请求。
- 核心思想：网页通过添加一个 < script>标签，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。动态创建一个< script>标签
数据串连化
- jq表单对象.serialize()：转化为字符串格式
- jq表单对象.serializeArray()：数组里套对象格式

  <form action="">
    <input type="text" name="userName">
    <input type="password" name="pwd">
  </form>
  <button>点击获取</button>
  <script src="../jquery-3.0.0.js"></script>
  <script>
    $('button').eq(0).on('click', function () {

      console.log($('form').serialize()); //userName=admin&pwd=123456
      
      console.log($('form').serializeArray()); //[{name: "userName", value: "admin"},{name: "pwd", value: "123456"}]
    })

难点

闭包模拟私有属性

       function Stu(name,age){
            var name = name
            var age = age
            return {"getName":function(){ return name},
                    "setName":function(n){name = n},
                    "setAge":function(a){age = a},
                    "getAge":function(){return age}
                   }
        }
        var stu = new Stu('张三',18)
        console.log(stu)//{getName: ƒ, setName: ƒ, setAge: ƒ, getAge: ƒ}
        console.log(stu.getAge())//18
        console.log(stu.getName())//张三
        stu.setName('李四')
        console.log(stu.getName())//李四
        stu.setAge('20')
        console.log(stu.getAge())//20

字符串去重排列

        //去重，去特殊字符，数字在前，字母在后
        var str = "1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs";
        var str1 = str.split('&').join('')
        console.log(str1)//1233fddfd3434fdsaff4545454545444rfdsfds545gdsgs
        console.log(str1.charAt(0))//1
        console.log(str1[0])//1
        var strNum = ''
        var strWord = ''
        /* //法一
        for (var i = 0; i < str1.length; i++) {
            if (str1[i] >= 0 || str1[i] <= 9) {
                if (strNum.indexOf(str1[i]) == -1) {
                    strNum += str1[i]
                }
            } else {
                if (strWord.indexOf(str1[i]) == -1) {
                    strWord += str1[i]
                }
            }
        } */
        //法二
        for (var i = 0; i < str1.length; i++) {
            if (!isNaN(str1[i])) {
                if (strNum.indexOf(str1[i]) == -1) {
                    strNum += str1[i]
                }
            } else {
                if (strWord.indexOf(str1[i]) == -1) {
                    strWord += str1[i]
                }

            }
        }
        //法三 acsii码
        var newStr = strNum + strWord
        console.log(newStr)

叫唤的狗

      function Dog(){
            this.wow = function(){
                alert('wow!')
            }
            this.yelp = function(){
                this.wow()
            }
        }
        function MadDog(){
            console.log(this)//MadDog {}
            Dog.apply(this)
            console.log(this)//MadDog {wow: ƒ, yelp: ƒ}
            var newThis = this
            this.yelp = function(){
                setInterval(function(){
                    newThis.wow()
                },500)
            }
        }
        new MadDog()

闭包验证邮箱

     var inp = document.getElementsByTagName('input')[0]
        var oSpan = document.getElementsByTagName('span')[0]
        inp.oninput = function () {
            var val = inp.value
            var teg = /^[1-9a-zA-Z]\w+@[0-9a-zA-Z]{2,}\.(com|cn|edu|org|gov)$/ig
            if (!teg.test(val)){
                oSpan.innerHTML = '*邮箱格式不正确！'
                oSpan.style.color = 'red'
            }else{
                oSpan.innerHTML = '通过'
                oSpan.style.color = 'green'
            }
        }

（扩展）

聚合函数（css效果）、百度地图开发者文档、 jq插件库、bootstrap插件（浮上提示文字）、百度商桥（聊天系统）、基于Threejs

插件

概念：本身我们不直接对jq代码进行操作，而是间接的对jq代码进行修改
- 类级别的插件
  - 创建：$ .extend 扩展工具方法的插件
  - 调用：$ .插件名()

    $.extend({
      //去除左边空格
      leftTrim: function (str) {
        return str.replace(/^\s+/, '')
      },
      //去除右边空格
      rightTrim: function (str) {
        return str.replace(/\s+$/, '')
      }
    })

    var str = '      优就业      '
    //最终调用leftTrim这个方法
    console.log('%' + $.leftTrim(str) + '%'); //%优就业      %
    console.log('%' + $.rightTrim(str) + '%'); //%      优就业%

对象级插件
- 创建：$.fn.extend 扩展到jquery对象下的插件形式
- 调用：$().插件名()

   $.fn.extend({
      aaa: function () {
        console.log(this);
        //get()获取的是页面中所有匹配的DOM元素集合
        // return $(this).eq(0)     //返回jquery对象
        return this.get(0)       //返回原生对象
      },
      bbb:function(){
        // return $(this).eq(this.length-1)    //返回jquery对象
        return this.get(this.length-1)      //返回原生对象
      }
    })


    var firstLi = $('li').aaa()
    console.log(firstLi);


    var endLi = $('li').bbb()
    console.log(endLi);

Zepto.js
- Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api，针对于移动端。

    console.log($('div').width());  //对隐藏元素获取到的是0
    console.log($('div').offset()); //{left: 8, top: 8, width: 100, height: 100}
    // console.log($('div').innerWidth()); //zepto没有此方法
    // console.log($('div').outerWidth()); //zepto没有此方法

  <script src="./js/zepto.min.js"></script>
  <script src="./js/touch.js"></script>
  <script>
    //单击
    $('div').tap(function () {
      console.log('tap');
    })
    //单击
    $('div').singleTap(function () {
      console.log('singleTap');
    })
    //双击
    $('div').doubleTap(function () {
      console.log('doubleTap');
    })
    //长按   当一个元素按住超过750ms触发
    $('div').longTap(function () {
      console.log('longTap');
    })
    //滑动
    $('div').swipe(function () {
      console.log('swipe');
    })
    //左滑
    $('div').swipeLeft(function () {
      console.log('swipeLeft');
    })
    //右滑
    $('div').swipeRight(function () {
      console.log('swipeRight');
    })
    //上滑
    $('div').swipeUp(function () {
      console.log('swipeUp');
    })
    //下滑
    $('div').swipeDown(function () {
      console.log('swipeDown');
    })
  </script>

shadow_tian1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

day 01jQuery介绍：jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了JavaScript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。jQuery强调的理念是以最少的代码，实现最多的功能。优势：轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的ajax、出色的浏览器兼容、链式操作方法、隐式迭代、行为层和结构层的分离、丰富的插件支持、完善的文档、开源引入方式：引入CDN服务< script src=“http:/
复制链接

扫一扫