jQuery1

jQuery是一个JavaScript库

作用：

1. 提供强大的选择器、简洁的API、优雅的链式、便捷的操作  

2. 核心理念 The Write Less,Do More（写更少，做更多）

  

3个大版本，N个小版本

         1字开头的:做了很多低版本IE兼容处理的

         2字开头的:基本抛弃了低版本IE（9以下）  移动先行

         3字开头的 :2开头的基础上加了些新的功能

 

匿名函数自执行

 好处

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

      2、把window做为参数传进来

              1、一是便于代码压缩，有时候关键字是没法被压缩的

              2、兼容模块化写法。在浏览器环境下，给factory传入的是window

              3、可以节省查找全局window的时间，提高性能

       3、noGlobal为undefined，确保undefined可以使用

             在低版本undefined会被修改的，函数不传参就是undefined

           global      typeof window !== "undefined" ? window : this

           factory     function(global,noGlobal){console.log('这里才是jquery的源码',global,noGlobal);}

页面加载问题 

参考链接

jQuery中的dom ready实现分析

domReady和 domLoad的区别：

1、Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；

2、Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；

页面中如果有获取元素的操作，这种操作一定要记得放到dom加载完之后，也就是dom加载完毕触发的事件

 

获取元素：

jQuery中获取元素

    $(selector);  //selector 表示css的选择器

返回值

      在jQuery中获取到的元素都是一个集合，我们称之为jQuery对象

      jQuery对象.length      获取到元素的数量

 

事件

 语法

     $(元素).click(callBack);

官网事件链接

css()，val()方法

css(一个或者两个参数)       关于样式的一些操作

           一个参数     获取属性的值

                  参数为一个对象的话，表示设置属性，可以同时设置多个属性的值

           两个参数     设置属性的值

                  第一个参数是属性名，第二个参数为属性名对应的值(不带单位也是可以的)

表单的value值

           val()       获取表单对应的value值 

           val(values)    设置表单的value值

attr()，data()方法

attr(一个或者两个参数)    关于标签属性的操作

           一个参数       获取元素的某个属性

             参数的值就是属性名字

           两个参数       设置元素的某个属性

             第一个参数为属性名字，第二个参数为属性要设置成的值

           

data()  给标签添加数据

             有参数的话，是添加数据（用对象的形式去表示）

             没参数的话，是获取数据

 

html(),text()方法

html()  取元素里的内容，与js中的innerHTML的效果是一样的

text()  取元素里的文字，不取标签

获取节点

.first()            获取结果集的第一个节点

.last()             获取结果集的最后一个节点

.slice(start,end)   截取部分子节点

       start          起始位置

       end            结束位置,不包含结束位置，第二个参数不写的话，截到最后一位

获取子节点

.children (selector)   获取到元素里的第一层子节点

     参数如果没有的话，获取到父级下的所有子节点

     有参数的话，参数是一个选择器，找到对应选择器的节点

.find(selector) 获取元素里的所有节点（从所有子元素，第二层第三层等等） 

父节点

       .parent()        元素的第一层父节点

       .parents()          元素的所有父节点，它会一直往上找，直到找到html

兄弟节点

上一个兄弟节点     .prev()

下一个兄弟节点  .next()

最近的节点

       .closest(选择器)        从自身开始找，一层一层往外找，找到最近满足条件的父元素，找到一个以后就不再找了

 

创建节点与插入节点

父级.append(要添加的元素)       把要添加的元素添加到父级的最后面

父级.prepend(要添加的元素)       把要添加的元素添加到父级的最前面

元素.before(要添加的元素)     把要添加的元素添加到一个指定的元素的前面

元素.after(要添加的元素)      把要添加的元素添加到一个指定的元素的后面

要添加的元素.appendTo(父级)      把要添加的元素添加到父级的最后面

要添加的元素.prependTo(父级)       把要添加的元素添加到父级的最前面

要添加的元素.insertBefore(元素)    把要添加的元素添加到一个指定的元素的前面

要添加的元素.insertAfter(元素)     把要添加的元素添加到一个指定的元素的后面  

移除节点与克隆节点

jQuery元素.remove();          删除元素

jQuery元素.clone(blooen)    克隆元素

       参数默认为空，表示只复制元素，不复制事件。如果参数为true，表示元素与事件都会被复制

索引

index()   

      没有参数

          第一个元素（获取到的这个元素，因为jquery获取到的是一组数据）在兄弟元素中的排行

      有参数

          代表前面的元素在参数的标签（所有标签，不分兄弟）里排行第几

 

循环

each(i,elem)          循环

          i             每个元素对应的下标（索引）

          elem             每个元素，原生的元素