jQuery

• ​用法

  • ​初始化 引入jQuery插件 通过script src =

  • ​$(function{}) $符号可以换成jQuery  jq里开头必须有$ 否则无法实现

  • ​选择器  jq选择元素很方便 通过 $('类名') 或者$('ID') 或者$('标签')可以直接获取

  • ​jq的下标选择 用 obj.eq（index）来选择

  • ​添加行内样式 使用obj.css()   

  • ​点击事件 去除原来的on便可以  obj.click（function{}） bind||on  用于事件绑定 ，  

• ​dom用法

  • ​创建元素 $('<ul>bb</ul>')

    var ul=$('<ul>bb</ul>');

    创建元素,然后填加内容：$('<ul></ul>').text('bb')

     text() 获取纯文字内容，原生方法: textContent

    console.log($('#div1').text());

    html() 获取的是带html标签内容 原生方法: innerHTML

     append() 原生:appendChild()

    $('#div1').append(ul)

     prepend ：追加到内部前面

    $('#div1').prepend(ol)

    同级元素前面与尾部

    同级元素前面:原生 obj.insertBefore(新的，老的)

    $('#div1').before(p) //jq也有 新的.insertBefore(老的)

    同级元素后面 .after()

    $('#div1').after(p2)

    删除元素remove()

    元素替换 .replaceWith()

    // $('.li3').replaceWith('<li class="li2">li2</li>') //把老的.replaceWith(新的内容) 

• ​ajax

  • ​参数

    • ​options： 类型为object  

    • ​data： 类型 string  发送到服务器的数据。将自动转换为请求字符串格式。

    • ​dataType：            类型string                                                                     "xml": 返回 XML 文档，可用 jQuery 处理。

      "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。

      "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）

      "json": 返回 JSON 数据 。

      "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

      "text": 返回纯文本字符串 

    • ​type：默认值为get  可给参数post

    • ​url  给路径地址 或者接口网址 来进行请求

    • ​success：请求成功数据后的回调函数 

    • ​failure:访问不成功的情况下  function (data) {

      console.log(data.status);打印一下 404为找不到改路径

      }

• ​集成动画

  • ​隐藏元素 hide（） 显示元素 show（）    slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

    parent() 方法返回被选元素的直接父元素。

    next() 方法返回被选元素的后一个同级元素。

    toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

    该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

    children() 方法返回返回被选元素的所有直接子元素

    delay() 方法对队列中的下一项的执行设置延迟。

    fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）

    fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）

    siblings() 方法返回被选元素的所有同级元素。  

• ​组件开发 

  • ​自己写     ：与js写法雷同  方法使用jq的便可

  • ​网上找插件 ：  先实验一遍每个配置的效果  在调用