jQuery

定义

什么是jQuery

jQuery其实就是一堆的js函数（js库），也是普通的js而已，主要还是操作web api的一个封装框架

为什么要用jQuery

• jQuery面向用户良好的设计是的在使用的过程中彻底解放了你记忆原声操作DOM的借口
• jQuery中包含多个可重用的函数，用来辅助我们简化JavaScript开发
• jQuery在半数以上并没有复杂交互的网站中得以大面积使用，因为他们需要的仅仅死一些兼容低级浏览器而又呈现酷炫效果动画的页面。（jQuery出到3.但大公司pc端依然用1x版本
• jQuery改变了数百万人编写JavaScript的方式

学习jQuery的注意点

• jQuery只是辅助工具，不能完全替代js，二者并存当方式出现在项目中
• jQuery很庞杂，先学使用再学思想
• jQuery方法很多，按需学习，把常用的有价值的学会
• jQuery API可以现查现用

选择器方法

基本选择器方法

• #id 根据给定的ID来选择元素。
• element 根据给定的元素名匹配所有元素
• .class 根据给定的class来选择元素
• * 匹配所有元素
• selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一- 结果内。

层次选择器方法

• A B 再给定的祖先元素下匹配所有的后代元素
• A>B 再给定的父元素下匹配的所有的子元素
• A +B 匹配所有紧接在在A元素后的B元素
• A~B 匹配后一堆满足条件的兄弟元素的节点

基本选择器方法

• ：first 获取第一个元素
• ：not(selector) 匹配除了selector以外所有的元素
• ：even 匹配索引值为偶数的元素
• ：odd 匹配索引值为奇数的元素
• ：eq(index) 匹配索引值为index的元素
• ：gt(index) 匹配索所有引值大于index的元素
• ：lt(index) 匹配所有索引值小于index的元素
• :lang 选择给定的语言
• ：header 匹配如h1;h2;h3之类的标题元素
• ：animated 匹配所有执行动画效果的元素
• ：focus 匹配当前获取焦点的元素
• ：foot 选择该文档的根目录
• ：target 选择由文档URL的格式化识别码表示的目标元素

内容选择器

• ：contains(txet) 匹配包含文本的元素
• ：empty 匹配所有不含子元素或则文本的空元素
• ：has（selector） 匹配含有选择器所匹配的元素的元素
• ：parent 匹配含有子元素或者文本的元素

可见性

• ：hideen 匹配所有不可见元素，或者type为hideen的元素
• : visible 匹配所有可见元素

属性选择器

• [attribute] 匹配包含给定的元素
• [attribute = value] 匹配给定的属性是某个特定值的元素
• [attribute != value] 匹配所有不含有指定属性的，或者属性不等于特定值得元素
• [attribute ^=value] 匹配给定属性是一某些值开始的元素
• [attribute$=value] 匹配给定的属性是以某些值结尾的元素
• [attribute*=value] 匹配某些属性是已包含某些值得元素
• [selector1][selector2][selectorN] 复合型选择器，需要同时满足多个条件使用

子元素筛选选择器

• ：frist-child 匹配第一个子元素
• ：first-of-type 选择所有相同的元素名称的第一个兄弟元素
• ：last-child 匹配最后一个元素
• ：last-of-type 选择所有元素之间具有相同元素的名称的最后一个兄弟元素
• ：nth 匹配其父元素下的第N个奇或者偶元素
• ：nth-last-child(n) 选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个
• ：nth-last-of-type(n|even|odd|formula) 选择的所有他们的父级元素的第N个子元素，计数从最后一个到第一个
• ：nth-of-type(n|even|odd|formula) 选择同属于一个父元素下的，并且标签名相同的子元素中的第N位
• ：only-child 如果某个元素是父元素中唯一一个的子元素，则匹配
• ：only-of-type 选择所有没有兄弟元素，且具有相同元素名称的元素

表单筛选器

• ：input 匹配所有 input, textarea, select 和 button 元素
• ：text 匹配所有单行文本框
• ：password 匹配所有密码框
• ：radio 匹配所有单选按钮
• ：CheckBox 匹配所欲复选框
• ：submit 匹配所有提交按钮
• ：image 匹配所有的图像域
• ：rest 匹配所有重置按钮
• ：button 匹配所有按钮
• :file 匹配所有文件域
• ：hideen 匹配所有不可见元素

表单对象筛选选择器

• ：enable 匹配所有可用元素
• ：disabled 匹配所有不可用元素
• ：checked 匹配所有选中的被选中元素
• ：selected 匹配所有选中的option元素

DOM操作的相关方法

• .get（） 获得标签的值与内容
• .eq（index） 匹配索引值为index的元素
• .find（） $(“p”).find(“span”).css(‘color’,‘red’); 搜索所有p标签中的后代 span 元素，并将其颜色设置为红色：
• .filter（） （过滤） $(“p”).filter(“.intro”) 返回带有类名 “intro” 的所有 <p> 元素：
• .not(index) 选择不含有index的元素
• .is(index） 判断元素是否含有index
• .has() $(“p”).has(“span”) 返回拥有一个 <span> 元素在其内的所有 <p> 元素
• .add() $(“h1”).add(“p”).add(“span”).css(“background-color”,“yellow”); 现有的H1元素添加相同的CSS样式为p和span元素。
• .end() (回退为上级标签) $(“p”).find(“span”).end().css(“border”, “2px red solid”); 选择所有段落，找到这些段落中的 span 元素，然后将它们恢复为段落，并把段落设置为两像素的红色边框

取赋值相关的方法

• .html()
  • $(“p”).html(“Hello world!”);
  • 改变p标签的内容
• .text()
  • $(“p”).text(“Hello world!”);
  • 改变p标签的文本内容
• .val() (设置input子段这种value的值)
  • $(“input:text”).val(“Glenn Quagmire”);
  • 用在没有value属性的标签上面，是往jQuery这个对象上面赋值 t+ ype=“text”,会有异同，但不影响正常使用
• $(“N”).size（） （输出N元素的数量）
• .addclass() 给标签添加class属性
• .removeclass() 删除标签中的class属性
• .hasclass() 判断标签是否含有class属性或者是class属性是否含有所给定的值
• .css() 设置的行内样式，尽量少用，避免层次的冲突
• .attr（） （基于setAttribute getAttribute）----设置标签的属性与属性值
• .prop() —设置并返回被选中元素的属性和值
• .removeProp()----y移除被选中元素的属性
• prop关注的是一种状态，只能控制本身的属性；如果增加一个系统不承认的属性，增加到jQuery对象上去了（对于HTML元素我们本身就带有的固有属性（w3c承认的属性），在处理时，使用prop方法）
• .serialize()
  • (“div”).text((“div”).text((“form”).serialize())
  • 输出序列化表单值的结果
• .serializeArray()
  • $(“form”).serializeArray();
  • 输出以数组形式序列化表单值的结果]
• attr()关注的是属性（可以是自定义的属性）—对于HTML元素我们自定义的DOM属性，在处理时，使用attr方法

基于jQuery对象增删改查相关方法

• .$(“li”).next() 返回li标签后的每个同级标签
• .$(“li”).prev() 返回li标签前的每个同级标签
• .prevAll() 返回li标签前的所有同级标签
• .nextAll() 返回li标签后的所有同级标签
• .nextUntil() 返回 selector 与 stop 之间的每个元素之后的所有同级元素
• .prevUntil() 返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,
• .siblings() 返回被选元素的所有同级元素
• .parents() 返回被选元素的所有祖先元素
• .closest() 方法返回被选元素的第一个祖先元素。
• .offsetParent() 方法返回第一个被定位的父元素。
• .slice() 方法选取基于索引的元素的子集
• .insertAfter() 方法在被选元素后插入 HTML 元素
  • $(“<span>Hello world!</span>”).insertAfter(“p”);
  • 在每个 <p> 元素后插入一个 <span> 元素：
• .insertBefore()方法在被选元素前插入 HTML 元素
  • $(“<span>Hello world!</span>”).insertBefore(“p”);
  • 在每个 <p> 元素前插入一个 <span> 元素：
• after() 方法在被选元素后插入指定的内容
  • $(“p”).after(“<p>Hello world!</p>”);
  • 在每个 <p> 元素后插入内容
• .before()方法在被选元素前插入指定的内容
  • $(“p”).before(“<p>Hello world!</p>”);
  • 在每个 <p> 元素前插入内容
• .appendTo() 方法在被选元素的结尾插入 HTML 元素。
  • $(“<span>Hello World!</span>”).appendTo(“p”);
  • 在每个 <p> 元素的结尾插入 <span> 元素：
• .prependTo()方法在被选元素的开头插入 HTML 元素。
• .prepend() 方法在被选元素的开头插入指定内容。
• .remove() 方法移除被选元素，包括所有的文本和子节点
• .empty() 方法从被选元素所有子节点和内容。

注意：该方法不会移除元素本身，或它的属性。

提示：如需移除元素，但保留数据和事件，请使用 detach() 方法。

提示：如需移除元素及它的数据和事件，请使用 remove() 方法。

• .detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
• .wrap() 方法使用指定的 HTML 元素来包裹每个被选元素
  • $(“p”).wrap(“<div></div>”);
  • 在 <div> 元素中包裹每个 <p> 元素
• .wrapInner() 方法使用指定的和HTML元素包裹每个备选元素的内容
• .wrapAll()方法 wrapAll() 方法使用指定的 HTML 元素来包裹所有被选元素
  • $(“p”).wrapAll(“<div></div>”);
  • 用 <div> 元素来包裹所有 <p> 元素
• .unWrap() 方法移除被选元素的父元素
• .clone()–（clone() 方法生成被选元素的副本，包含子节点、文本和属性）
  • $(“p”).clone()
  • 克隆所有的 <p> 元素

jQuery的事件绑定方法

• .on()—给备选元素绑定一个事件绑定属性

• .one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。

  $("p").one("click",function(){
    // 当点击 <p> 元素时，增加该元素的文本大小（每个 <p> 元素只能触发一次事件）
    $(this).animate({fontSize:"+=6px"});
  });
  

• .off() 没有参数时；该方法移除被选元素的所有事件属性；当有参数时则移除被选元素的指定的事件属性

• .trigger（）自定义事件----（自己去执行事件）

  • $(“input”).trigger(“select”);
  • （触发input元素的select事件）

• ：hover（）伪类 （当鼠标移到啊、指定元素上触发；移开返回原来的样式）

• .click（）鼠标点击事件

• .keydown()键盘点击事件

• .mouseenter（）鼠标移动事件

• event.pageX;event.pageY(返回鼠标指针的位置，通常与event.pageY使用)–相对于文档的距离

• e.clienX （返回指针的坐标的位置，通常与e.clienY使用）—相对于窗口的距离

• jQuery中阻止默认行为与冒泡的方法：retuen:false

• 兼容的事件对象：全都封装好了的，不需要想原生dom考虑兼容性的问题

jQuery动画的相关的方法

• .hide() 隐藏动画效果
• .show（）显示动画效果
• .toggle（） 如果状态的样式为显示则转换为隐藏；如果为隐藏则转换为显示
• .fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）
• .fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏
• .fadeTo() 方法逐渐改变被选元素的不透明度为指定的值
• .fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换
• .slideDown() 被压缩的元素往下拉伸还原
• .slideUp() 被选中的元素往上压缩知道看不见
• .slideToggle（） 如果一个元素是隐藏的，则将他显示；如果一个元素是显示的则将他隐
• .animate（） 参数：(target duration easing callback）
• .stop（） 停止当前运动的状态，直接进入下一个阶段
• .finish（） 停止所有的动画的效果，直接进入最终位置
• .delay（） 延迟
• .jQuery.fx.off=true 运动的开关 参数：null或 （duration, [opacity], easing, callblack）

jQuery位置坐标图形大小相关的方法

• .offset（） 给所选元素一个参照文档的定位
• .position（） 返回一个定位的对象
• .scrollTOP() 设置或者返回被选元素的垂直滚动条位置（提示：当滚动条位于最顶部时，位置为0）
• .scrollLeft 设置或者返回被选元素的水平滚动条的位置（提示：当滚动条位于最左侧时，位置为0）
• .width（） 显示被选元素的宽度
• .height（） 显示被选元素的宽度
• .innerWidth（） 显示被选元的宽度（元素宽度与内边距）content.width+padding
• .outerwidth（） 显示被选元素（外层）宽度（元素宽度与内边距加上边框距离）content.width+padding2+border2
• .innerheight（） 显示被选元素（元素高度与内边距）高度conten.height+padding*2
• .outerHeight（） 显示被选元素（外层）高度（元素高度与内边距加上边框距离）content.height+padding2+border2
• 补充方法（遍历索引）
  • .each（）遍历循环数组
    • （参数：function回调函数：函数参数为index，ele—dom元素）
    • 作用：循环遍历JQ数组
  • .children（） 获取所选元素的子元素
    • 参数（selector字符串）
    • 作用：获取被选元素的子元素
    • 说明：1.无参数时：获取所有子元素 2.有参数时：获取满足选择器的子元素
  • .index（） 获取指定元素的索引值
    • 参数：jq对象
    • 作用：获取指定元素在兄弟元素中的索引值
    • 说明：如果没有指定元素返回-1
• 通过改变滚动条的坐标可以更改滚动条的位置

jQuery工具方法

• $.type() 判断数据类型

• $.isArray() 判断是否为数组类型

• $.isFunction() 判断是否为函数

• $.isWindow() 判断指定参数是否是一个window窗口

• $.trim() 消除空格（去除字符串两端的空白字符）

• $.proxy() 改变this的指向

• $.noConflict() 防止冲突

• $.each() 遍历循环数组

• $.map() 用回调函数循环遍历

  // 回调函数  function（ele,index）{}
        // 遍历输出元素下表和内容
  //用法一：
  $(arr).map(function(elem元素,index索引){
    console.log(elem + "=" + index);
  });
  //用法二：
  $.map(arr,function(elem元素,index索引){
    console.log(elem + "=" + index);
  });
  

• $.parseJSON()严格json字符串转换成对象–原生JSON.parse（）

  1. 该函数转换时，要求字符串必须符合严格的JSON格式（例如：“属性名”：“字符串值”）。
  2. 如果转入一个不完整的json字符串，比如“{error：0，ID：33，time：1491487757}”，将会报错。

• $.makeArray() 类数组转换成数组

• $.extend() 插件扩展 （工具方法） 将一个或者多个对象内容合并到目标对象

• $.fn.extend() 插件扩展 （实例扩展） 是拓展jQuery对象的方法

  • jQuery.fn = jQuery.prototype
  • jQuery.prototype.val = function() { return this.value }