插件_JQuery

1 简单概念

1 作用: 辅助JS开发的类库 

2 优点: 轻量级, 强大的选择器, 出色的DOM操作, 可靠的事件处理机制

3 JQ 插件库  https://www.jq22.com/

2 JQ -> Ajax请求

1 请求 json文件数据  
------------------------------------------------------------------------------------
$.ajax({
    url: "./data/hh.json",
    type: get,
    data: "abc=123&www=baidu",    //字符串或对象
    dataType: json,
    cache: false,     //不读取缓存, true默认缓存, post请求不存在
    success: function(json) {
        x.html(json.title);   //jquery内部帮转, 直接写入数据
    }
})
------------------------------------------------------------------------------------

2 请求后端数据
------------------------------------------------------------------------------------
$.ajax({
    url: "./data/a1.php",
    type: get,
    data: "abc=123&www=baidu",    //字符 串或对象
    dataType: json,
        timeout: 3000,    //表示3秒没有响应就请求失败, 执行下面请求失败的回调
    success: function(json) {
        x.html(json.title);   //jquery内部帮转可直接操作 
    },
    error: function() {
        console.log("请求失败")
    }
})
------------------------------------------------------------------------------------

3 跨域请求jsonp
------------------------------------------------------------------------------------
$.ajax({
    url: "http://baidu.com...",
    type: get,
    data: {
        hh: 999,
    }
    dataType: json,   //要写
    json:"cd",
    //jsonpCallback: "macallback",    //这一步可以省略, JQ 内部会自动命名
    success: function(json) {
        console.log(json); 
    }
})
------------------------------------------------------------------------------------

3 JQ选择器

除了 ID 选择器, 其他 CSS选择器, 选取的都是集合的形式
$(document) / $(window) / $(this) / $(e.target)  ...不用加引号

$("#test")  ---单个元素
$(".test")  ---元素集合
$("div")    ---元素集合
$("div span")  div 所有的 span 后代---元素集合
$("div span:eq(1)")    可通过索引指向某一个元素
$(“div:first”)  选取所有<div>元素中第1个<div>元素---单个元素
$(“div:last”)  选取所有<div>元素中最后一个<div>元素---单个元素
$(“input:even”)  选取索引(索引从0开始,0算为偶数)是偶数的<input>元素---元素集合
$(“input:odd”)  选取索引(索引从0开始)是奇数的<input>元素---元素集合
$(“div[title=test]”)  选取属性title为“test”的<div>元素---元素集合
$(“div:nth-child(1)”)  选取所有div中，是其父标签的第一个子元素的div元素---元素集合

4 JQ 节点操作

1 创建节点:
  var span = '<span> 新建的节点 </span>';   

2 插入节点:
  $e.append(span);   //元素$e内部的末尾添加 span,   有其他方式
  $e.prepend(span);   //元素$e内部的前面添加 span,  有其他方式
  $e.before(span);   //元素$e前面添加 span
  $e.after(span);   //元素$e后面添加 span

3 删除节点:
  $e.remove();   //删除$e元素
  $e.empty();   //清空$e内部节点
  var hh = $e.detach();   //删除并返回被删除的元素, 方便需要的时候添加

4 替换节点:
  $("<i>哈哈哈</i>").replaceAll(".span");   
  //前面的替换后面选中的, 如果后面选中的是集合, 那么就会替换每一个集合的内容

5 复制节点:
  var xx = a.clone();     //浅
  var xx = a.clone(true);  //深复制包括事件处理程序

5 获取节点的方法

注意: x本身就是个集合, JQ方法会设置x的每一个子元素

1 x.children()  //指向x的所有子元素
2 x.next()    //指向x的下一个兄弟元素
3 x.prev()    //指向x的上一个兄弟元素
4 x.parent()    //指向x的父元素
5 x.closest("body")   //指向x最近的符合条件的祖先元素 -> body
6 x.find(child:eq(1))   //指向某一个子元素
7 x.siblings()    //指向除x之外的所有同辈元素; x.siblings("span") -> 同辈中的所有 span元素
8 x.eq(1)    //指向JQ对象x的集合中的某个具体的元素

6 常用方法

 $.extend()   //对象拷贝
    $.extend(obj1)    //将 obj1 的属性拷贝到 jQuery 上
    $.extend(obj1, obj2);   //把obj2上面的属性方法拷贝到, obj1对象内, 拷贝的是对象内容的地址 -- 浅拷贝
    $.extend(true, obj1, obj2);    //拷贝的不是对象内容的地址  --深拷贝
    var obj3 = JSON.parse(JSON.stringify(obj2));   --深拷贝

 $e.index()   //方法返回指定元素相对于其他指定元素的 index 位置
  $e.end()   //将匹配的元素变为前一次的状态
  $e.each()   //循环，为每个匹配的元素执行函数
  $e.is()   //根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果有元素匹配给定的参数，则返回 true
  $e.addClass()   //为每个匹配的元素添加指定的类名
  $e.removeClass()   //从匹配的元素中删除全部或者指定的类
  $e.toggleClass()   //从匹配的元素中添加或删除一个类
  $e.hasClass()   //检查元素是否含有某个特定的类，有则返回true
.attr() 设置或返回被选元素的属性和值, 自定义吧应该
.prop() 设置或返回被选元素的属性和值
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
.removeAttr() 从每一个匹配的元素中删除一个属性
.html() 设置或取得第一个匹配元素的html内容
.text() 设置或取得第一个匹配元素的文本内容
.val() 设置或返回匹配元素的值(表单元素)
.css() 设置或返回匹配元素的样式属性
.width() 设置或返回匹配元素的宽度
.height() 设置或返回匹配元素的高度
.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移
.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移
.position() 获取匹配元素相对于定位父元素的偏移  {left: 40,  top: 50}
.offset() 获取或设置匹配元素在当前视口的相对偏移  {left: 40,  top: 50}
. wrap() 使用指定的 HTML 元素来包裹每个被选元素
$("p").wrap("<div></div>"); // 给每个P元素包裹一个div元素
......
$.trim( str ) 函数会移除字符串开始和末尾处的所有空白字符
$.each() 遍历数组
$.each(data,function (index,value) {
    console.log('数组当前元素的索引' + index);
    console.log('数组当前元素的值' + value);
});