零JS筆記 | 記憶點二
取值，只會取第一位、賦值，則是全部改變
filter：過濾；not:排除
注意:filter与has的区别，filter是针对当前操作元素，has是针对当关操作元素里面的东西；包含的意思
//$('.box').filter('[title=one]')
//取值时：当集合，只会取到第一位
console.log($('li').html());
//赋值时，则是全部改变
$('li').html('aaa')
//filter not，相反
$('div').filter('.box').css('background','red')
$('div').not('.box').css('background','red')
//has 包含元素
$('div').has('span').css('background','red')next()與prev()：緊跟相鄰元素【必要條件】，如果帶參數，也必須是緊跟相鄰元素，如果操作下一個選擇類名，必須使用nextALl()/prevAll()
注意：index()：當前元素在所有兄弟節點的位置,不帶參數時與標籤或類id等無關
<h1></h1>
<h5></h5>
<h3 id='h'></h3>
<h2></h2>
$('#h').index() //2
width(): width
innerWidth():width+padding
outerWidth():width+padding+border
outerWidth(true):width+padding+border+margin
offsetLeft獲取不到隱藏的值 ；如果div.style.display = 'none'
$('div').get(0).offsetWidth //0
$('div').outerWidth() // 100，可獲取到隱藏元素insertBefore/insertAfter; appendTo,prependTo動詞
$('span').insertBefore('div') //操作span在div前面
$('span').insertAfter('div') //操作span在div後面before ,after, append ,preend，名詞
$('span').before('div') //span的前面必須是div
$('span').after('div') //span的後面必須是divoffset()獲取到屏幕的距離，注意與offsetleft的區別（offsetleft到有定位父級的元素，如果獲取到屏幕的距離 需）
function getPos(obj){
var pos = {left: 0, top:0};
while (obj) {
pos.left +=obj.offsetLeft;
pos.top +=obj.offsetTop;
obj = obj.offsetParent
}
return pos;
}position()，當使用position()時，相當於被操作元素加個定位，注意本身被操作元素的margin值不影響的，即到有定位的父級
console.log($('div').position().left);
//到有定位的父級的left值，把當前元素轉換為定位的形式，所以margin是不影響的，因為定位元素的left及top值 parent()：獲取父級(不管是否有定位)
offsetParent():獲取有定位的父級<br />對應 offsetNode</p>
jq寫drag
$(function () {
var disX = 0;
var disY = 0;
$('div').mousedown(function (e) {
disX = e.pageX - $(this).offset().left;
disY = e.pageY - $(this).offset().top;
$(document).mousemove(function (e) {
$('div').css({'left': e.pageX - disX});
$('div').css({'top': e.pageY - disY});
})
$(document).mouseup(function () {
$(document).off()
})
})
return false;
})fadeTo(時間，透明度)
get()，jq轉原生：$('#div1').get(0).innerHTML;get()如果不加參數，相當於轉成一組集合；
for(var i=0;i<$('li').length;i++){
$('li').get(i).style.background = 'red'
}更簡單的，加上[i]則自動轉為原生
for(var i=0;i<$('li').length;i++){
$('li')[i].style.background = 'red'
}text()，當選擇為一組元素集合時；會獲取到所有的內容，而html()只會獲取到集合中的第一個；
remove()，刪除的元素返回值即被刪元素；所以 var _div = $('div').remove()
detach()跟remove()一樣，但會保留事件；
parents()：获取当前元素的所有祖先节点，参数就是筛选功能
closest():获取最近的祖先节点，包括自身，必须写参数
Until()截止的意思：
nextUntil('h2')，当走到h2包括h2自身都不会走下去；
类似有：parentsUntil()、nextUntil()、prevUntil()
clone()
$('div').clone().appendTo( $('body') )wrap():包装方法
$('span').wrap('<b></b>')
//<b><span></span></b>
//<b><span></span></b>$('span').wrapAll('<b></b>')
//<b><span></span><span></span></b>wrapInner内部包装
$('span').wrapInner('<b></b>')
//<span><b></b></span><span><b></b></span>unwrap()：删除包装、删除父级；不包括body
<span></span>
<div><span></span></div>
====>>
$('span').unwrap()
//结果：把span的父级删除
<span></span>
<span></span>add():添加组合:使用两个不同标签或类的组合在一起可一次性设置相同的属性，如背景
//使用span 及div 的背景色都为yellow;
var elem = $('div')
var elem2 = elem.add('span')
elem.css('color','red')
elem2.css('background','yellow') //div及spanslice():截取一组元素的前几位；
$('li').slice(1,4).css('background','red')
//截止起始到终止的元素，不包括终止元素,即截取前3个；serialize():数据串连:序列化
<form>
<input type="text" name="a" id="" value="1"/>
<input type="text" name="b" id="" value="2"/>
<input type="text" name="c" id="" value="3"/>
</form>
console.log($('form').serialize());
//string: a=1&b=2&c=3数组形式：serializeArray()
console.log($('form').serializeArray());
[ { name="a", value="1"}, { name="b", value="2"}, { name="c", value="3"}]animate({},时间,运动形式,回调)
//先走宽再走高；
$(this).animate({width: 300}, 1000).animate({height: 300}, 2000)stop()：默认只会阻止当前运动；
stop(true):阻止后续运动；
stop(true,true):可以立即停止到指定的目标点；
finish():立即停止到所有目标点上；
//先走宽再走高；
$(this).animate({width: 300}, 1000).delay(1000).animate({height: 300}, 2000)事件委托，注意顺序区别,on要先写动作'click'，再写被点击元素，delegate则相反，顺序写反不能生效
取消分别为off(),undelegate()
$('ul').on('click','li',function(){ //on(动作，元素，函数)
this.style.background = 'red'
})
//或
$('ul').delegate('li','click',function(){ //delegate(元素，动作，函数)
this.style.background = 'red'
})trigger()主动触发; 当然主要用在自定义事件上；
$('box').trigger('click');
$('div').on('show',function(){
alert(1)
})
$('div').trigger('show')ev.data /ev.target / ev.type
//ev.data点击时传参；ev.data == json整体
$('#div1').on('click', {name: 'hello'}, function (ev) {
alert(ev.data.name)
})
//ev.target当前操作事件源；
$('#div1').on('click', function (ev) {
ev.target.style.background = 'red' //当前操作变红；
})
//ev.type
$('#div1').on('click', function (ev) {
alert(ev.type) //click
})
$.下的常用方法；工具方法
$.(),$().html(),$().val()等，只能给JQ对象用
$.xxx..不带括号；不仅可给JQ用，也可给原生用，工具方法；
$.type
var a = 'hello'
console.log(typeof a); //原生： string
console.log($.type(a)); //JQ： string 比原生可判断更多类型；
console.log($.type(new Date)); //data
console.log($.type({})); //obj
console.log($.type([])); //array
console.log($.type(null)); //null$.trim(str)，去前后空格；
$.inArray(),类似于indexOf
var arr = ['a','b','c','d']
console.log($.inArray('b', arr)); //1，b的位置第二位，如果找不到则返回-1$.proxy():改变this指向；$.proxy(函数名,要改的this指向位置)()最后再调用，否则不会运行；
function show(){
alert(this)
}
// show() //window
$.proxy(show,document)()
//传参的情况；
function show(n1,n2){
alert(n1)
alert(n2)
alert(this)
}
// show() //window
$.proxy(show,document)(3,4)
//$.proxy(show,document,3,4)()
//$.proxy(show,document,3)(4)
传参的位置都改；
//比如：
$(document).click(show) //默认是document
//更改为window
$(document).click($.proxy(show,window))
//事件的传参只能写在里面，写在外面则直接执行了（不需要点击执行，不是要的效果）
$(document).click($.proxy(show,window,3,4))$.noConflict()：防止冲突
var mm = $.noConflict();
var $ = 10; //被10占用时
mm(function () {
})$.parseJSON()：把字符串解析成JSON类型
var str = '{"name":"hello"}'
console.log($.parseJSON(str));
//所以：$.parseJSON(str).name即可找到'hello'
$.makeArray():把类数组转成真正的数组
//比如：
var _div = document.getElementsByTagName('div') //类数组
_div.push();
//虽然是集合，但并不是真正的数组，所以不能push
$.makeArray(_div).push('a')$.ajax({})
$.ajax({
type:'POST',
url:'xxx.php',
dataType:'json',
success: function (data) {
alert(data);
},
error:function(){
alert(2)
}
})$.get(url,{},成功的回调)
$.post(url,{},成功的回调)
$.getJSON(url,{},成功的回调)，支持JSONP形式：指定?callback=?; jsonp需要一个函数名；
$.getJSON('xxx.php?callback=show',function(){
});
show()
插件的使用
$.extend()://工具方法下的形式；
$.fn.extend()// 扩展到jq对象下的形式</p>
$.extend({
leftTrim: function (str) {
return str.replace(/^\s+/,'')
},
rightTrim:function(){},
aaa:function(){alert(1)},
bbb:function(){}
})
//调用
$.leftTrim(str)
$.aaa() //1$.fn.extend({
drag:function(){
var disX = 0;
var disY = 0;
var _this = this;
this.mousedown(function(e){
disX = e.pageX - $(this).offset().left;
disY = e.pageY - $(this).offset().top;
$(document).mousemove(function(e){
_this.css('left', e.pageX - disX);
_this.css('top', e.pageY - disY);
})
$(document).mouseup(function(){
$(this).off()
})
return false
})
},
aaa:function(){
alert(2)
}
})
//调用：$('#div1').drag()
//$().aaa(); //2超简单版vquery
$()类似于函数调用，即$是函数名；
1、$('div')===> function $(vArg){ } //vArg表示不定类型的参数；
2、$().css()，函数调用函数？ ===》类似于创建面面对像：var arr = [] ; arr.push();<br />对像.函数(),所以，要使用$()是一个对象；
function $(vArg){
return object;
}使用对象必须创建构造函数，所以架子是：
function Vquery(vArg){
var this.elements = [] //存的是$()里的东西
}
Vquery.prototype.css = function(){};
Vquery.prototype.html = function(){};
function $(vArg){
return new Vquery(vArg);
}
//必须传参才能使用，重点是返回对象；未作容错
function bindEvent(obj, events, fn) {
if (obj.addEventListener) {
obj.addEventListener(events, function (e) {
//fn() -- > false
//不写return false ===> undefined
//undefined == false == >返回false
if (fn() == false) {
e.preventDefault();
e.cancelBubble = true; //冒泡
}
}, false)
}
else {
obj.attachEvent('on' + events, function () { //IE下
if (fn() == false) {
window.event.cancelBubble = true; //IE下阻止冒泡
return false;//IE下阻止默认事件
}
})
}
}
function getByClass(_parent, sClass) {
var arr = [];
var elems = _parent.getElementsByTagName('*')
for (var i = 0; i < elems.length; i++) {
if (elems[i].className == sClass) {
arr.push(elems[i])
}
}
return arr;
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function toArray(elems) {
var arr = []
for (var i = 0; i < elems.length; i++) {
arr.push(elems[i])
}
return arr;
}
function Vquery(vArg) {
this.elements = []
switch (typeof vArg) {
case 'function':
bindEvent(window, 'load', vArg);
break;
case 'string':
switch (vArg.charAt(0)) {
case '#':
this.elements.push(document.getElementById(vArg.substring(1)));
break;
case '.':
this.elements = getByClass(document, vArg.substring(1));
break;
default :
this.elements = toArray(document.getElementsByTagName(vArg)) //类数组 ，所以类型改变了,to为了保持this.elements的类型；
break;
}
break;
case 'object' ://vArg.constructor == Array //注意不加引号
if (Object.prototype.toString.call(vArg) == '[object Array]') {
this.elements = vArg;
} //如果得到的object是数组，则再push变成复合数组[[]]，所以需要处理；
else {
this.elements.push(vArg);
}
break;
}
}
Vquery.prototype.html = function (str) {
if (str) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].innerHTML = str;
}
}
else {
return this.elements[0].innerHTML;
}
return this;
}
Vquery.prototype.click = function (fn) {
for (var i = 0; i < this.elements.length; i++) {
bindEvent(this.elements[i], 'click', fn)
}
//this.on('click',fn)
return this;
}
Vquery.prototype.mouseover = function (fn) {
for (var i = 0; i < this.elements.length; i++) {
bindEvent(this.elements[i], 'mouseover', fn)
}
//this.on('mouseover',fn)
return this;
}
Vquery.prototype.on = function (event, fn) {
for (var i = 0; i < this.elements.length; i++) {
bindEvent(this.elements[i], event, fn)
}
return this;
}
Vquery.prototype.hide = function () {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.display = 'none'
}
return this;
}
Vquery.prototype.show = function () {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.display = 'block'
}
return this;
}
Vquery.prototype.hover = function (fnIn, fnOut) {
this.on('mouseover', fnIn);
this.on('mouseout', fnOut)
return this;
}
Vquery.prototype.css = function (attr, value) {
if (arguments.length == 2) { //设置
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style[attr] = value;
}
}
else if (arguments.length == 1) { //获取
if (typeof attr == 'object') { //注意理解此处
for (var j in attr) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style[j] = attr[j];
}
}
}
else {
return getStyle(this.elements[0], attr)
}
}
return this;
}
Vquery.prototype.attr = function (attr, value) {
if (arguments.length == 2) { //设置
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].setAttribute(attr, value);
}
}
else if (arguments.length == 1) { //获取
return this.elements[0].getAttribute(attr);
}
}
Vquery.prototype.eq = function (num) {
//return this.elements[num]; //this.elements获取到的都是原生的；所以
return $(this.elements[num]) //转换对象；
}
Vquery.prototype.index = function () {
var elems = this.elements[0].parentNode.children; //先找当前选中的父节点，再找子节点可得出同辈所有；
for (var i = 0; i < elems.length; i++) {
if (elems[i] == this.elements[0]) {
return i;
}
}
}
Vquery.prototype.siblings = function () {
var arr = []
var elems = this.elements[0].parentNode.children; //先找当前选中的父节点，再找子节点可得出同辈所有；
for (var i = 0; i < elems.length; i++) {
if (!(elems[i] == this.elements[0])) {
arr.push(elems[i])
}
}
return $(arr)
}
Vquery.prototype.find = function (sel) {
var arr = [];
if (sel.charAt(0) == '.') { //.class
//这里的this.elements存的是$()里面的东西
for (var i = 0; i < this.elements.length; i++) { //循环每一个ul里
arr = arr.concat(getByClass(this.elements[i], sel.substring(1)));
//每一个ul --> this.elements下可能会有多个li，
//比如，第一次找个2个，第2次找到3个，所以需使用数组concat方法
//注意此次不能使用push,因为 getByClass方法得到的即为数组；
//2,也不能简单 = 因为比如第2次得到3个会覆盖第一次得到的2个，
//所以，使用arr.concat
}
}
else { //tag
for (var i = 0; i < this.elements.length; i++) {
arr = arr.concat(toArray(this.elements[i].getElementsByTagName(sel))) //类数组转
}
}
return $(arr); //同样是原生的，所以需要使用 $(arr)
}
function $(vArg) {
return new Vquery(vArg) //返回对象
}
$.trim = function (str) {
return str.replace(/^\s+|\s+$/g,'')
}
$.proxy = function(){}
$.makeArray = function(){}
$.inArray = function(){}
$.extend = function(json){
for(var attr in json){
$[attr] = json[attr]
}
}
$.fn = {}
$.fn.extend = function(json){
for(var attr in json){
Vquery.prototype[attr] = json[attr]
}
}插件扩展
工具写法：$.extend(); JQ对象写法：$.fn.extend()
$.extend({
aaa:function(){
alert(1)
},
bbb:function() {
alert(2)
}
})
$.aaa() //1
$.bbb() //2
//必须扩展到Vquery的原型下；
$.fn.extend({
aaa:function(){
alert(4)
return this;
},
bbb:function() {
alert(5)
return this;
}
})
//4
$().bbb().aaa() //5