jquery完全总结

开始写博客啦,准备一点一点将云笔记上面的总结转移到这个上面来.本菜鸟希望大家多多监督我.

什么是jquery?
JQ就是一个js库,里面封装好了很多的方法,我们学习JQ,就是学习里面的方法.
为什么要学习jquery?
JQ不需要考虑兼容性，而且更简单。底层也是封装的DOM.
JQuery的版本问题.
1. 1/2/3版本的问题:
  1.x的版本考虑兼容性
  2.x的版本不考虑兼容性.
  3.x现在1.x与2.x版本已经停止更新了,仅仅更新3.x。也不考虑兼容性.
  需要注意的是jq插件的最低支持版本,例如bootstrap最低支持1.9.1.
2. 压缩版与压缩版本的问题:
  压缩版本:后面带有min的后缀，利于工作环境
  不压缩版本:条例清晰，利于学习与阅读
隐式迭代
JQ在设置属性的时候，会自动给所有的元素设置相同的值。
JQ在获取属性的时候，会获取第一个元素的值。
要给每一个元素设置不同的值时，就必须需要手动遍历。
链式编程
1. ：JQuery在设置属性时，返回的是jquery对象，因此可以一直点下去。
2. ：JQuery在获取属性时，返回的是具体的值，而不是JQuery对象。因此不能再点下去
3. ：能否一直点下去，就要看返回的值是不是JQ对象.在源码中是return this.
使用JQ的步骤
1. ：引入JQ文件
2. ：入口函数
  $（document）.ready ( function () {} );
  $(function(){});
3. :JQ/JS入口函数的区别:
    JS中的入口函数要等到页面中的所有资源（文件，图片）均加载完才会执行。
    JQ的入口函数仅仅会等待文档树的加载完成就会开始执行，不会等待图片、文件的加载
    JQ的加载时间会早于JS的加载.
JQ对象与JS对象
1. ：JQ对象是指用JQ方法获取的；DOM对象是指用JS方法获取的。是两个不同的对象。因此里面的方法并不能混用。
2. ：JQ是个伪数组，里面装得是DOM对象。
3. ：JQ对象→DOM对象
  $("li")[index]
  $("li").get(index)
4. :DOM对象→JQ对象
  $(domObj)
选择器
1. 基础选择器
  ID选择器 $(“#id”)
  类选择器 $(“.class”)
  标签选择器 $(“div”)
  并集选择器 $(“div,p,li”)
  交集选择器 $(“div.redClass”)
2. 层级选择器
  子代选择器 $(“ul>li”)
  后代选择器 $(“ul li”)
  +后面的一个元素 $(“ul+li”) ul的下一个li
  ~ 后面所有元素 $(“ul~li”) ul的后面所有li
3. 过滤选择器（属性）
  :even :odd 索引值伪偶数/奇数 $("li:odd")
  :eq(index) 具体索引值的数 $("li:eq(2)") 索引值从0开始
  :selected :checked 下拉列表/单选框被选中
  :first :last $("li:first") $("li:last")
  :gt(index) 从索引值大于index的元素开始索引值从0开始
4. 筛选选择器
  children find parent siblings next nextAll prev eq(index)
  $对象.children(selector) 相当于$(“ul>li”)，子类选择器
  $对象.find(selector) 相当于$(“ul li”),后代选择器
  $对象.siblings( ) 查找兄弟节点，不包括自己本身。
  $对象.parent() 查找父亲
  eq(index) 相当于$(“li:eq(2)”),index从0开始
  .next() 找下一个兄弟类似于+
  .nextAll( ) 后面所有, 类似于~
  .prev() 找上一次兄弟
  .prevAll 前面的所有兄弟元素
  $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
5. 属性选择器
  $form[name=tc_name] name为tc_name的form表单
样式操作(行内样式)
1. css样式
  1.1. 设置样式
  $("li").css(name, value)
  $("li").css(obj)
  1.2. 获取样式
  $("div").css(name);
  获取得是第一个元素对应的值
2. class样式
  2.1 添加类名
  $(“div”).addClass(“one”);
  再原来的类名上添加一个类,不会覆盖原来的类名,但是要注意权重问题
  2.2 移除类名
  $(“div”).removeClass(“one”);
  2.3 判断类名
  $(“div”).hasClass(“one”);
  返回值为true或者false
  2.3 切换类名
  $(“div”).toggleClass(“one”);
  有就移除,没有就添加
属性操作(标签的自定义属性)
1. 设置属性
  1.1. 设置单个属性
  attr(name, value)
  1.2. 设置多个属性
  attr(obj)
2. 获取属性
  attr(name)
3. 移除属性
  removeAttr(name)
4. 设置/获取标签的自定义属性
  标签的自定义属性 data-msrc:"abc"
  获取标签的自定义属性 JQ标签对象.data("msrc")
  设置标签的自定义属性 JQ标签对象.data("属性",属性值)
动画
普通动画
1.1. 显示(show())与隐藏(hide())
改变了width height opacity
1.2. 滑入(slideUp( ))与滑出(slideDown( ))与切换(slideToggle( ))
改变了 height
1.3. 淡入(fadeIn( ))与淡出(fadeOut( ))与切换(fadeToggle( ))
改变了 opacity
1.4. slideToggle( )与fadeToggle( )切换的就是show( )/hide( )
1.5. 动画队列
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
1.6. 停止动画
stop方法：停止当前正在执行的动画效果,开始下一个.在动画前面调用stop方法
节点的操作
1. 创建节点
  $(htmlStr) $(“<span>这是一个span元素</span>”)
  添加节点
  A.append( B ) 将B添加到A的子元素的最后面
  A.appendTo( B ) 将A添加到B的子元素的最后面
  A.prepend( B ) 将B添加到A的子元素的最前面
  A.prependTo( B ) 将A添加到B的子元素的最前面
  A.before(B) 将B添加到A前面
  A.after(B) 将B添加到A后面
2. 清空节点
  A.empty()：清空指定A节点的所有元素，A保留(倒掉瓶子里面的水)
  删除节点
  remove()：相比于empty，自身也删除（直接丢掉瓶子）
  克隆节点
  clone() 默认为false,不会复制事件. 传true时复制事件
  $对象.html(对象)是覆盖而$对象.append(对象)是累加
特殊属性的操作(标签的属性)
里面不传参数就是获取,传参数就是设置(除prop()外)
1.prop()方法
checked、selected、disabled这类boolean类型的属性来说，只能用prop方法。
设置属性 $(“:checked”).prop(“checked”,true);
获取属性 $(“:checked”).prop(“checked”);
清除属性: $(“:checked”).removeProp(“checked”)
1. val()方法
  value属性是指输入框的默认值.
  val()方法用于设置和获取表单元素的值，例如input、textarea的值
2. html()/text() 方法
  就是表示文字的设置
  html()识别标签/text()不识别标签
3. width()/height()方法
  $(window).width(); 获取页面的可视区的宽高
4. scrollTop()与scrollLeft()方法
  $(window).scrollTop();获取页面滚动条的高度
5. offset()/position()方法
  offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
  获取元素距离document的位置,返回值为对象：{left:100, top:100}
  $(selector).offset();
  获取相对于其最近的有定位的父元素的位置。
  $(selector).position();
事件
1. :最普通的注册事件
  $("li").click(function(){//具体的逻辑})
2. :on注册事件
  $(selector).on(events[,selector][,data],handler);
  第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
  第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
  第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
  第四个参数：handler，事件处理函数
  2.1. 注册简单事件
  表示给$(selector)绑定事件，并且由自己触发，自己执行.不写selector参数
  不支持动态绑定。
  $(selector).on( "click", function() {});
  2.2. 注册委托事件
  表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，且子元素是执行者
  支持动态绑定,且$(this)指向执行者
  $(selector).on( "click",“span”, function() {});
  2.3. off移除事件
  off不传参数：清除所有的事件 $("div").off();
  清除所有的点击事件$("div").off("click");
  只清除委托事件$("div").off("click", "p");
  清除某一个点击事件$("div").off("click", fn);
  2.3. :trigger触发事件
  setInterval(function () {
  //触发事件
  //$("#btn").click();
  // trigger:触发
  // toggle:切换
  $("#btn").trigger("dblclick");
  }, 2000);
  })
  
  2.4. 特殊的事件
  1. submit() 表单的提交事件
    只要点击表单里面的按钮,表单就会提交/回车也会触发
    $form.submit(function(){
    //功能型的代码
    return false;
    })
事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
screenX和screenY 对应屏幕最左上角的值
clientX和clientY 距离页面左上角的位置（忽视滚动条）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.keyCode 按下的键盘代码
event.data 存储绑定事件时传递的附加数据
event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
each
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
参数一表示当前元素在所有匹配元素中的索引号
参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});