jquery 知识点总结_noglobal-CSDN博客

本文链接：https://blog.csdn.net/weixin_38330741/article/details/80046330

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

使用匿名函数自执行，创建一个私有空间，这样内外部的命名空间就不会相互干扰了。可以避免变量全局污染；
把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)从自身开始一层一层往外找，找到最近一个的满足条件的元素；找到这一个就不找了；
创建节点与插入节点
- $(<li>green</li>)这样写就是创建节点了；
- 父级.append(要添加的元素)添加到父级的最后；
- 父级.prepend(要添加的元素)添加到父级的最前面；
- 元素.before(要添加的元素)添加到指定的元素前面；
- 元素.after(要添加的元素)添加到指定的元素后面；

var li1=$(<li>red</li>);
$("ul").append(li1);
$("ul").prepend(li1);
var div1=$(<div>black</div>);
$("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>p</p>
        <div>div</div>
        <div>div</div>
        <!--<div id="div1"></div>-->
        <div>
            <div id="div1"></div>
        </div>
        <span></span>
        <span></span>
        <div class="box">
            <span id="s1">s1</span>
            <span></span>
            <span></span>
        </div>
        <div><span id="s2">s2</span></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.preventDefault和ev.stopPropogation;
- jQuery中的事件委托
```
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</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();
- animate()
  - animate(property,duration,easing,complate)
    - property：要运动的属性；它是一个对象；
  - $(?).animate({width:'toggle',height:"toggle"},500,'linear');
  - $('#div3').animate({width:'+=100'},500,'linear');
  这里面的+=表示每次运动宽度都增加一段；
延迟与停止动画
- 延迟动画delay(time);
- 停止动画
  - stop()只停止当前的运动，后面的继续走；
  - stop(true)所有的运动都会停止；
  - 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));