AYABALA博客

【jq】进阶

get() //把jq转成原生
$(‘div’).get().innerHTML;
$(‘li’).get(2) == $(‘li’)[2]

offsetWidth //原生获取不到隐藏的元素宽度
outerWidth(); //可以获取隐藏的元素宽度

<div>div1<span>span</span></div>
text(); //div1span
html(); //div1<span>span</span>

var oDiv=$(‘div’).remove();
$(‘body’).append(oDiv); //之前div绑定的事件都不存在了
detach(); //跟remove()一样,但是会保留div绑定的事件

$(function(){
}) //等DOM加载完就可以执行了
$(document).ready(function(){
}) //等DOM加载完就可以执行了,同上
DOMContentLoaded//原生等DOM加载完

parents()//元素的所有祖先节点
parents(‘body’) parents(‘.box’)//筛选出body节点
closest(‘body’)//获取最近的指定的祖先节点(包括元素自身),必须要写筛选参数,只能找到一个元素

siblings() //获取所有兄弟节点(除了自身),可以参数筛选
nextAll() //后面所有兄弟节点,可以参数筛选
prevAll() //前面所有兄弟节点,可以参数筛选
nextUntil() //向后截止到
prevUntil() //向前截止到
parentsUntil()//向上截止到

clone()//克隆节点,相当于复制,不会保留事件
clone(true)//会保留事件

$(‘span’).wrap(‘<div></div>’);
wrap()//span外嵌套div
wrapAll()//整体包装,注意不连续的标签会改变文档结构
wrapInner()//内部包装
unwrap()//删除包装(删除父级,不包括body)

add() //添加节点操作
slice() //截取指定节点
$(‘li’).slice(1,4) //选中从1到3

$(‘form’).serialize();//’a=1&b=2&c=3′
serialize()//数据串联化
$(‘form’).serializeArray();//
[
{name:’a’,value:’1′};
{name:’b’,value:’2′};
{name:’c’,value:’3′};
]

运动
animate({width:300,height:300},1000,linear)
//1.{}运动的值和属性
//2.时间:默认400ms
//3.运动形式:swing(慢快慢) linear(匀速)
//4.回调函数,也可以使用链式操作
stop()//默认阻止当前运动,后续运动不会阻止
stop(true)//阻止所有运动
stop(true,true)//阻止所有运动并且当前运动停止到目标点
finish()//阻止所有运动并且所有运动停止到目标点
delay()//延时

事件委托
$(‘li’).on(‘click’,function(){
$(this).css(‘background’,red);
}); ==
$(‘ul’).delegeta(‘li’,’click’,function(){
$(this).css(‘background’,red);
});
delegeta() //事件委托,对提高性能有帮助
undelegeta() //取消时间委托

$(‘#div1’).trigger(‘click’)//页面加载完就触发
trigger()//主动触发,特别适合自定义事件
$(‘div’).on(‘click’,{name:’hello’},function(){
alert(ev.data.name); //’hello’
alert(ev.target); //当前操作的元素
alert(ev.type); //’click’
});
ev.data
ev.target//当前操作的元素
ev.type//事件类型

$下的常用方法(工具方法,可以给原生js用)
var a=new Date;
$.type(a) //Date,可是识别各种类型
alert(‘ ‘+$.trim(str)+’ ‘);//去前后空格

var arr=[‘a’,’b’,’c’]
$.inArray(‘b’,arr) //1
$.inArray()//类似indexOf

function show(n1,n2){}
$.proxy(show,document)(3,4)==$.proxy(show,document,3,4)()==$.proxy(show,document,3)(4)//必须加括号自动执行
$(document).click($.proxy(show,document,3,4))
$.proxy()//改变this指向

var a=$.noConflict();
var $=10;
a(‘body’).css(‘width’,’100px’);
$.noConflict()//防止冲突

$.parseJSON(str);//解析json

var a=getElementsByTagName(‘li’);
$.makeArray(a).push();
$.makeArray();//类数组转成数组

ajax
$.ajax({
url:’xxx.php’,
data:’name=hello&age=20′,
type:’POST’, //默认’GET’
success:function(data){
alert(data);//返回数据
},
error:function(){
alert(‘失败’);
}
});
$.get(‘xxx.php’,{name:’hello’,age:20},function(){});
$.post(‘xxx.php’,{name:’hello’,age:20},function(){});
$.getJSON(‘xxx.php?callback=?’,function(data){
data
});//跨域

插件(修改jq库)
$.extend//扩展工具方式下的插件形式
$.extend({
leftTrim:function(str){
return str.replace(/^\s+/,”);
}
});//去除左空格
$.fn.extend//扩展到jq队形下的插件形式
$.fn.extend({
drag:function(){ //this指向被调用的对象

}
});

分类: jquery, 前端开发

【js】面向对象 » « 【jq】基础

1条评论

  1. 你好,看了你的博客,觉得我们学的东西很多重合的,留个联系方式有问题可以一起解决

发表评论

Your email address will not be published.

*

Copyright © 2020 AYABALA博客

Theme by Anders NorenUp ↑