JQuery-笔记

eg:<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
在线引入AngularJS:<script src="https://cdn.staticfile.org/angular.js/1.5.8/angular.min.js"></script>
 
$是jQuery对象等同于jQuery, $.extend()用于将一个config.heads或多个对象合并到目标对象settings.headers, true表示是否进行深度合并
$.ajax()方法用于执行AJAX(异步HTTP)请求. 这里请求settings对应的数据. $.ajax().success(function(){}):若请求成功则执行success传入的回调函数
 
promise.then()方法根据promise是被任务执行成功与否选择执行回调函数(此处是否成功发送重置密码邮件). then()参数为多个回调函数, 根据promise返回状态选择执行这些回调函数.
 
 
arguments 是一个对应于传递给函数的参数的类数组对象。它可以被用作被调用对象的所有未指定的参数。 这样,你在使用apply函数的时候就不需要知道被调用对象的所有参数。 你可以使用arguments来把所有的参数传递给被调用对象。 被调用对象接下来就负责处理这些参数。
arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引0处。例如,如果一个函数传递了三个参数,你可以以如下方式引用他们:
arguments[0]
arguments[1]
arguments[2]
 
$('#name')是获取ID=name的DOM元素, .是class, #是id
 
在同一个button中通过$("id").on绑定事件会出现累加而不是覆盖; 对于绑定只执行一次的事件建议用one,或先解除再绑定
 
$.each遍历数组,对每个数组元素执行同一个函数
 
 
jQuery 还支持其他专有选择器:
$( ' tag :even ' )选择匹配元素集中的偶数个元素一一特别适合突出显示表格行!
$('tag:odd')选择匹配元素集中的奇数个元素;
$( ' tag :eq(0)' )和$(' tag :nth(0) ')选择匹配元素集中的第 n 个元素,如页面中第一个段落 z
$( 'tag:gt(n)' )选择匹配元素集中索引值大于 n 的所有元素;
$( 'tag : lt (n) , )选择匹配元素集中索引值小子 n 的所有元素 z
$( 'tag :first ' )等价于 :eq(O);
$( 'tag: last ' )选择匹配元素集中的最后一个元素 z
$( 'tag: parent ' )选择匹配元素集中包含子元素(文本节点也算)的所有元素 g
$('tag:contains('test')')选择匹配元素集中包含指定文本的所有元素 3
$ ( 'tag :visible ' )选择匹配元素集中所有可见的元素(包括出 splay 属性为 block 和 inline 、visibility 属性为 visible 以及 type 属性不是 hidden 的表单元素) ;
$( 'tag : hidden ' )选择匹配元素集中所有隐藏的元素(包括 display 属性为 none、 visibility属性为 hidden 以及 type 属性为 hidden 的表单元素)。
 
$(function(){
})    //表示页面加载完后执行匿名函数        ====>     等价于
$(document).ready(function(){
})        =====>     等价于js中的
window.onload = function(){
}
 
jQuery对象是dom对象的包装
jQuery对象转dom对象:$('#id')[0] 或 $('#id').get(0)
dom对象转jQuery对象:$(dom)
 
DOM对象的属性和方法:
DOM对象绑定事件的方法:
 
打印DOM元素所有属性和方法:
通常在chorm打印dom元素console(document.getElementById())输出的均是html代码. 解决办法:
方法1:console([document.getElementById()])    //放到数组里
方法2:console.log($('#id')        //jQuery默认就是放到数组里
 
获取dom元素、svg元素的外接矩形:
getBBox() 获得的为元素在当前SVG坐标中的数据,而 getBoundingClientRect 则是获取了了浏览器坐标中的数据(因为SVG标签中的ViewBox属性影响,实际渲染在浏览器中的大小及位置是经过偏移和缩放的)。
getBBox() 是获取未执行transform 的位置和大小,如果执行了transform 那么将不会匹配。
getBoundingClientRect(); //相对浏览器窗口的rect即clientRect, pageRect是相对浏览器窗口+滚动条的距离, screenRect是相对屏幕(x和y属性貌似就是left和top)
 
修改dom元素宽高:
$div.height(100);    $div.width(100);
 
jQuery.data向DOM元素添加数据:
 
jQuery向事件函数中传参:
 
获取dom元素的属性:
ele.getAttribute('attrName') ;    //若不存在返回null
$(ele).atrr('attrName');    //若不存在返回undefined
设置dom元素的属性:
ele.setAttribute(name,  value);
$(ele).attr(name, value);
 
element.offsetLeft和element.offsetTop是相对于父元素的偏移
element.offsetHeight 返回任何一个元素的高度包括边框和填充,但不是边距
element.offsetWidth 返回元素的宽度,包括边框和填充,但不是边距
//获取dom元素在文档中的位置(若不存在滚动条,则文档的位置和client浏览器窗口的位置相同)
const X= element.getBoundingClientRect().left+document.documentElement.scrollLeft;     //注意这里是docuemnt的scrollLeft
const Y =element.getBoundingClientRect().top+document.documentElement.scrollTop;
官方解释:

The SVGGraphicsElement.getBBox() allows us to determine the coordinates of the smallest rectangle in which the object fits. The coordinates returned are with respect to the current svg space, i.e. after the application of all geometry attributes on all the elements contained in the target element. 

Note: getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. It also neglects any transformation applied on the element or its parents.

getBBox returns different values than getBoundingClientRect, as the latter returns value relative to the viewport

 
文本基准线的高度:
 
 
事件类型:
阻止事件冒泡的两种方式:https://www.cnblogs.com/cag2050/p/6122953.html
 
设置属性与设置css样式:
    $('.tooltipText').css('left', offsetX);
    $('.tooltipText').css('top', offsetY);
    $('.tooltipText').attr('id', '100px');
    $('.tooltipText').attr('class', offsetY+'px');
 
 
原文地址:https://www.cnblogs.com/luckyboylch/p/12330314.html