jquery 知识点总结

一、匿名函数自执行的优势

  • 使用匿名函数自执行,创建一个私有空间,这样内外部的命名空间就不会相互干扰了。可以避免变量全局污染;

  • 把window做为参数传进来:

    • 一是便于代码压缩,有时候关键字是没法被压缩的
    • 兼容模块化写法。在浏览器环境下,给factory传入的是window
    • 可以节省查找全局window的时间,提高性能
  • noGlobal为undefined,确保undefined可以使用;在低版本undefined会被修改的,函数不传参就是undefined;

(function(global,factory){
    factory(global);
})(typeof window !== "undefined" ? window : this,
    function(global,noGlobal){
        console.log('这里才是jquery源码',global,noGlobal);
    });
//

二、jQuery获取元素

jQuery中的window.onload;

  • $(callBack)
  • $(document).ready(callBack)
  • $().ready(callBack)
    以上的方法可以在页面中同时共存

jQuery中获取元素方法:

  • $(selector)
$(function(){
    console.log($('.list li'));    
    console.log($('.list span'));          //如果是一个获取不到的元素,那它不会报错。如果要做判断的话,可以判断它的length属性

    //var div3=$('#div2');
    var div2=document.getElementById("div2");       //用原生js获取到的元素不能使用jquery里的方法。如果想用的话,那就把原生js获取到的元素转成jquery的形式
    $(div2).css('background','red');       //把原生js的对象包装成jquery的对象
});

三、jQuery中的事件

  • 语法:$(selector).click(callBack)

    没有on

  • this的问题
    this的指向和原生中的指向是一样的,但是在jQuery中使用this的话,需要转成$(this)再使用;
    • 原生对象和jQuery对象相互转换:
      1.$(原生对象),这样就变成了jQuery对象了;
      2.$(selector).get(index)这样就把jQuery对象转成了原生对象;

四、jQuery中常用的方法

  • css( ) 关于样式的操作
    一个参数:获取属性的值;
    两个参数:设置属性的值;
$('#box').css('width')   //获取属性的值;
$('#box').css('width',“200px”)  //设置属性的值;
//设置属性的值有简单的方法如下:
$('#box').css({width:200,height:200,background:'green'});
  • 表单value的值

    $(selector).val 获取表单的值;
    $(selector).val(value)设置表单的值;

  • att( ) 关于标签属性的操作

    一个参数:获取属性的值;
    两个参数:设置属性的值;

  • data( ) 给标签添加数据;

    语法:$(p).data({这里面放一个对象})
    有参数的话是添加数据,数据用对象的方式去表示;
    没有参数的话是获取数据;

  • html( )

    取元素中的内容,相当于原生js当中的innerHTML;
    如果放参数的话,就是设置innerHTML;

  • text( )

    取元素里面的文字,不包括标签名;和上面的html()有区别;
    如果放参数的话,就是设置text;

五、节点DOM操作

  • 获取节点:
    • .first()
    • .last()
    • .slice(start,end)这个和字符串里面的slice的方法一样的,有两个参数的话,从第一个开始,不包括第二个;要是只有一个参数的话,就是从开始的到最后;
    • .find(selector)获取元素里面的所有的节点;选择器里面自由填写;
    • .children()获取元素的第一层子节点;这个里面是可以加参数的;
//上面的例子;
$('ul').children('.blue').css('color','blue');
//就是只是给ul下面的带有class=“blue”的节点添加属性;
  • 父节点与最近的节点
    • .parent()元素的第一层父节点;
    • .parents()元素所有的父节点;往上一直找到html;
    • .closest(condition)从自身开始一层一层往外找,找到最近一个的满足条件的元素;找到这一个就不找了;
  • 创建节点与插入节点
    • $(
    • green
    • )这样写就是创建节点了;
    • 父级.append(要添加的元素)添加到父级的最后;
    • 父级.prepend(要添加的元素)添加到父级的最前面;
    • 元素.before(要添加的元素)添加到指定的元素前面;
    • 元素.after(要添加的元素)添加到指定的元素后面;
var li1=$(
  • red
  • ); $("ul").append(li1); $("ul").prepend(li1); var div1=$(
    black
    ); $("ul").before(div1); $("ul").after(div1);
    • 另外一种写法:把要添加的元素放在前面
    li1.appendTo($("ul"));      //添加到父级的最前面
    li1.prependTo($("ul"));     //添加到父级的最后面     
    div1.insertBefore($("ul")); //添加到元素的前面
    div1.insertAfter($("ul"));  //添加到元素的后面
    • 移除、克隆、上一个、下一个节点

      • 元素.remove()删除节点;
      • 元素.clone(Blooen)克隆元素;
        • 不填参数的话,默认为false;
        • false代表只复制元素,不复制自带的事件;
        • true代表不仅复制元素,还复制身上的事件;
      • .prev()上一个兄弟节点;
      • .next()下一个兄弟节点;
    • 索引:.index()

      • 不带参数:获取到的元素当中的第一个元素在兄弟元素中的排行;
      • 带参数:代表前面的元素在标签(不是兄弟元素,是所有的和参数一样的标签的元素)里面的排行;

      这个概念比较饶人,例子好好演示一下

        <body>
            <p>pp>
            <div>divdiv>
            <div>divdiv>
            
            <div>
                <div id="div1">div>
            div>
            <span>span>
            <span>span>
            <div class="box">
                <span id="s1">s1span>
                <span>span>
                <span>span>
            div>
            <div><span id="s2">s2span>div>
        body>
    
        <script>
        $(function(){
            console.log($("#div1").index())     //0
            //因为它在它的兄弟元素中排一个;
            console.log($("div").index())      //1
            //在它的兄弟元素中排第二个,索引为1;
            console.log($("#s1").index("span"));//2
            //获取到#s1之后,index里的参数为span,那么就在所有的sapn标签中找,看#s1的位置;
            console.log($("#s1").index("div"));//-1
            //因为div里面没有id=“#s1”的元素,返回-1;
        })
        script>

    通过索引找对应的元素:
    eq(index);参数是索引值;

    • 循环.each( function(i,element){} )
      • i代表每个元素对应的下标(索引);
      • element每个元素,注意这是原生的元素;
      • 在循环中可以设置一个跳出条件:return或者return false;

    六、元素与可视区的尺寸

    • 元素的尺寸

      • width()获取元素的宽度(值不带单位);有参数的话,代表设置宽度,参数不用带单位;
      • height()获取元素的高度;有参数的话,代表设置高度,参数不用带单位;
      • innerWidth() width+padding
      • innerHeight() height+padding
      • outerWidth() width+padding+border
      • outerHeight() height+padding+border
    • 可视区的尺寸

      • 页面的宽高
        • $(document).width()页面的宽
        • $(document).height()页面的高
      • 可视区的宽高
        • $(window).width()可视区的宽
        • $(window).height()可视区的高
    • 元素的距离

      • 元素相对于文档的距离
        • offSet().left
        • offSet().top
      • 元素相对于父级的距离
        • position().left
        • position().top

      positon的值是不受margin的影响的;

  • offSetParent找到最近的有定位的父级;
  • 滚动条的距离
    • scrollTop();
    • scrollLeft();
      如果有参数,就代表设置滚动条的位置
  • 七、事件以及事件对象

    • jQuery添加事件的方法:
    //第一种:不用on;
    $('div').click(function{
        console.log(1);
    })
    //第二种:
    $('div').on("click",function{
        console.log(2);
    })
    //这种用on的方式,事件可以叠加;
    $('div').on("click mousemove",function{
        console.log(2);
    })
    • 移除事件的方法:

      $(this).off()这种方法会只让以上的this指向相同的事件函数只运行一次,之后就会被移除了;

    • 事件对象

      jQuery中的事件对象(ev)和原生的差不多,少许不同

      • clientX鼠标不带滚动条到左边的距离;
      • pageX鼠标带滚动条到左边的距离;
      • return false相当于原生中的ev.preventDefaultev.stopPropogation;
    • jQuery中的事件委托
    <ul>
    <li>111li>
    <li>111li>
    <li>111li>
    ul>
    
    <script>
        $("ul").on("click","li",function(){
            console.log(1);
        });
    script>

    1.只能用on来添加事件,js代码的意思是把ul身上的事件委托给了li去执行;当点击li的时候才会执行click事件;
    2.这里面的this指向的是第二个参数;

    • 自定义事件
      也很简单,都已经封装好了;
      on是添加; trigger是调用;
    //示例代码;
    $("ul").on("点击",function(){
            console.log(1);
        });
    $("ul").click(function(){
        $(this).trigger("点击");
    })

    八、工具方法

    • $(选择器).css() $(选择器).html()以上这些都是jquery里的方法,原生的不能直接用;
    • $.xxx(),$.yyy()这些方法是jquery里的方法,原生的也可以直接用;
      • $.type()检测参数的类型;
      • $.isFunction()
      • $.isNumeric()
      • $.isArray()
      • $.isWindow()
      • $.isEmptyObject()检测是不是空对象;
      • $.isPlainObject()检测是不是纯对象;

    九、jQuery中的运动

    • show()和hide();
      • show(duration,easing,complate);
      • hide(时间,运动方式,回调函数);
      • toggle(duration,easing,complate);

        1.让元素在显示隐藏之间转换,会默认修改宽高和透明度等等;
        2.比show和hide有优势,不要去做判断了

    • fadeOut()和fadeIn();
      • fadeOut();隐藏;
      • fadeIn();显示;
      • fadeToggle();

        用法和show和hide差不多;只不过不改变宽高,只改变透明度;

    • slideUp()和slideDown();

      • slideUp(duration,easing,complate)收缩;
      • slideDown(duration,easing,complate)展开;
      • slideToggle();
        jquery 知识点总结_第1张图片
    • animate()

      • animate(property,duration,easing,complate)
        • property:要运动的属性;它是一个对象;
      • $(?).animate({width:'toggle',height:"toggle"},500,'linear');
        jquery 知识点总结_第2张图片
      • $('#div3').animate({width:'+=100'},500,'linear');

      这里面的+=表示每次运动宽度都增加一段;

  • 延迟与停止动画

    • 延迟动画delay(time);
    • 停止动画
      • stop()只停止当前的运动,后面的继续走;
        jquery 知识点总结_第3张图片
      • stop(true)所有的运动都会停止;
        jquery 知识点总结_第4张图片
      • stop(true,true)当前的运动到目标点,后面不走;
      • finishi()所有的运动都立刻到目标点,没有运动;
  • 十、jQuery中的插件


    • 网上多得是,要注意看它们的api文件;
    • 拓展插件的方法:

    1. $.extend()扩展工具方法下的插件;
    2. $().fn.extend()扩展jQuery对象下的插件 $().extend()
    //extent里面传的是一个对象;
    $.extend({
        leftTrim:function(str){
                     return str.replace(/^\s+/,'');
                 },
        rightTrim:function(str){
                     return str.replace(/\s+$/,'');
                 }
    });
    //上面��写的是工具方法;          
        var str=' kaivon ';
        console.log(str);
        console.log($.leftTrim(str));
        console.log($.rightTrim(str));

    你可能感兴趣的:(jquery 知识点总结)