[jquery备忘]

has :包含，找元素里面的子元素（单个）

<div><span>123</span></div>

$('div').has('span').css();

filter、not:找元素自身的

<ul>
    <li></li>
    <li class='a'></li>
    <li></li>
    <li class='a'></li>
    <li></li>
</ul>


$('li').filter('.a').css()

$('li').not('.a').css()

filter 与 not是相反的关系

find:查找，找元素中的子元素(多个子元素中选择),

<ul>
    <li></li>
    <li class='a'></li>
    <li></li>
    <li class='a'></li>
    <li></li>
</ul>


$('ul').find('li.a').css();

或者
$('ul li.a').css();

这种情况不要用has

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

eq() :从0开始

nth-child():从1开始

index(),索引，当前元素在所有兄弟元素中的位置，从0开始

　　用index()与eq()结合可以做出选项卡，即var index = $(this).index()，将索引数值保存起来，以便后续的eq(index)使用。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

获取宽度：

　　css('width') =>带单位

　　width() =>不带单位

　　innerWidth() =>不带单位,width+padding

　　outerWidth() =>不带单位,width+padding+border

　　outerWidth(true) => 不带单位,width+padding+border+margin

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

scrollTop() =>相当于document.documentElement.scrollTop || document.body.scrollTop

　　$(window).scrollTop()

$(window).width() =>可视区的宽度,相当于document.documentElement.clientWidth

$('<div>') =>创建div，相当于document.createElement('div')

$(window).on('scroll resize',function(){}) =>鼠标滚动和窗口缩放

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

事件ev =>ev = ev || event;

ev.pageX(相对于文档的) 鼠标坐标：clientX(相对于可视区)，即clientX+scrollLeft=pageX

ev.which 键盘或鼠标的键值：ev.keyCode 键盘的键值

ev.preventDefault()　　阻止默认事件

ev.stopPropagation() 阻止冒泡操作　　JS中ev.cancelBubble = true

return false 阻止默认事件+阻止冒泡操作 JS中阻止默认事件

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

offset().left 元素到屏幕的左距离 => offsetLeft(),如果没有定位，则跟JQ中的offset().left一样,如果有定位则是到定位的那个父级

position.left 到有定位父级的left值，把当前元素转换成类似定位的形式(不包括元素自身的margin，但包括元素自身定位的left)

parent() 获取父级 JS中parentNode

offsetParent().left 获取有定位的父级 JS中offsetParent

val()

size() //$('li').size() 像length

each() 循环

$('li').each(function(i,elem){   //一参：下标，二参：每个元素
   $(elem).html(i); 
})

hover(function(){},function(){}) =>移入和移出的一个集合操作

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

show() hide() =>显示隐藏

fadeOut() 淡出 =>从不透明到透明

fadeIn() 淡入 =>从透明到不透明

fadeTo(时间,透明度)

slideUp() =>向上

slideDown() =>向下

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

get() JS和JQ混用，将JQ转成原生JS，需要在括号中加下标，如果不加下标，表示是一组集合

　　$('div').innerHTML 错误X =>$('div').get(0).innerHTML 或者$('div')[0].innerHTML(可改成方括号的形式)

outWidth() offsetWidth的区别

相同点：width+padding+border,区别：outWidth(true)是width+padding+border+margin,在display:none时，offsetWidth获取不到隐藏元素的值，而outWidth可以

text()

对于大部分的元素，如html()：只能获取集合的第一个元素，赋值：可以对集合中的每一个元素赋值，只有text()是特例，可以获取集合每一个元素。

remove()　　detach() 的区别

两者都有返回值，返回值为当前删除的元素，区别：detach()保留删除之前元素的操作行为，例如：

$(function(){
   $('div').click(function(){
       alert(123); 
   }) 
  var oDiv = $('div').detach();
  $('body').append(oDiv);
})

//点击oDiv,会有点击事件，如果是remove则点击事件不存在

$() window.onload 区别

$(function(){}) = $(document).ready(function(){}) DOM加载完执行，可以写多个$()，会根据顺序执行

window.onload 页面加载完执行，写多个window.onlad,后面会覆盖前面的操作。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

parents() 获取祖先元素，带参数表示筛选，可以是一个集合

closest() 最近祖先元素（包括当前元素），必须要写参数，返回是一个元素

siblings() 兄弟

next() 下一个兄弟 nextAll() 下面的所有兄弟

prev() 上一个兄弟 prevAll() 前面的所有兄弟＝>带参数表示筛选

parentUntil()　　nextUntil()　　prevUntil()　　=>到XX元素截止，例如：nextUntil('h2'),到h2截止了,不包括h2

clone() 拷贝，要连事件一起拷贝，则是clone(true)

wrap()　　wrapAll()　　wrapInner()　打包

<span>1</span>
<span>2</span>
<span>3</span>

$('span').wrap('<div>')  

结果：
    <div><span>1</span></div>
    <div><span>2</span></div>
    <div><span>3</span></div>
    <div><span>4</span></div>

$('span').wrapAll('<div>')  

结果：
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

$('span').wrapInner'<div>')  

结果：
        <span><div>1</div></span>
        <span><div>2</div></span>
        <span><div>3</div></span>

unwrap() 删除包裹的父级，如果父级是body元素则不删除

    <div id="div1">
        <div id="div2">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>                
        </div>
    </div>


$('span').unwrap();

结果：
        <div id="div1">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>                
    </div>

div2被删除掉了。

add() 增加，用于对元素的组合操作

slice() 截取元素同JS操作类似 slice(2,5) 截取从第2位到第5位（不包括第5位）

serialize() 数据串连操作，用于表单提交，如：a=1&b=2，是string

serializeArray() 返回的是数组

　　[

　　　　{'name':'a',value:'1'},

　　　　{'name':'b',value:'2'}

　　]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

animate()　　动画,第一个参数：属性和值{'width':'200px','height':'200px'},第二个参数：时间，默认400毫秒，第三个参数：swing(默认：缓冲运动慢快慢）、linear(匀速)，第四个参数：回调函数callback

delay()　　延迟时间

stop()　　停止当前动画，进行下一个动画（默认）

stop(true)　　停止动画

stop(false,true)　　当前动画直接到达末状态，继续下一个动画

stop(true,true)　　当前动画直接到达末状态，停止动画

finish()　　动画直接到达最后的末状态

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

delegate()　　事件委托，利用冒泡的原理，将事件加到父级上，从而提高性能和后续增加的元素也有事件

undelegate()　　取消事件委托

$('li').on('click',function(){

})
//改为事件委托
$('ul').delegate('li','click',function(){

})

trigger　　主动触发,自动触发事件而不需要人工干预（如人工干预click事件），对于用户自定义的事件也可以进行操作，因此更加灵活

$('div').on('show',function(){

})

//用户自定义了show事件

$('div').trigger('show')

ev.date　　ev中的数据

ev.target　　事件源

ev.type　　事件类型

        $('input').on('click',[1,2],function(ev){
            alert(ev.data[1]);   //2，数据是[1,2]，ev.data[1],数组中的第二个：2
            alert(ev.target);    //input元素
            alert(ev.type);    //click事件
        })

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

$:工具方法，可以给JQ用，也可以给JS用

$.type() 判断类型，可以判断引用类型（Array,null,RegExp,date) typeof　　无法判断引用类型，弹出的都是object对象

$.trim() 去除前后空格

$.inArray() 找数组出现的位置，类似indexOf(),例如：$.inArray('b',arr),字符'b'在数组arr中的位置，没有找到返回-1

$.proxy() 改变this的指向

function show(){
  alert(this)
}

show();  //this指向window

$.proxy(show,document)(); //this指向document

function show(n1,n2){
  alert(n1);
  alert(n2);
  alert(this);
}

$.proxy(show,document)(1,2);
$.proxy(show,document,1,2)();
$.proxy(show.document,1)(2);

//以上三种写法都可以

//$.proxy(show,document)(1,2)   会立刻执行
//$.proxy(show,document,1,2)    不会执行，可用在事件中，例如：

$(document).click($.proxy(show,document)(1,2))   //立刻执行了
$(document).click($.proxy(show,document,1,2))    //点击document后，再执行show函数

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

$.noConflict() 解决冲突，例如：

		var joya = $.noConflict();
		var $ = 5;
		joya(function(){
			joya('div').css('background','blue');
			console.log($);
		})


//使用noConflict解决冲突，joya相当于$;

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

$.parseJSON() =>变成json，比如：字符串变成json，这里的字符串必须是严格模式的json形式

var str = '{"name":"joya","age":"20"}';
console.log($.parseJSON(str).name)    //成json对象了

$.markArray() =>类数组转换成真正的数组

 var aDiv = document.getElementsByTagName('div');//类数组,只有length，不能进行数组的push()操作
 var arr = $.makeArray(aDiv);
 console.log($.type(arr))   //变成数组后，可以进行数组相关的操作了

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

on(),off()

//on 的好处：
//1、可以自定义的事件,见trigger操作
//2、可以对多个事件执行相同的操作，或者是不同的操作

//off的用法：可以关闭on的事件，例如：只需要点击一次
$(function(){
    //多个事件执行相同的操作，事件之间用空格分开
    $('div').on('click mouseover',function(){
        console.log(123);
    })
    //多个事件执行不同的操作，用json的形式
    $('div').on({
        'click':function(){
            console.log(123);
        },
        'mouseover':function(){
            console.log(456);
        }
    })

    //只点击一次
    $('div').on('click',function(){
        console.log(123);
        $(this).off();
    })

　　//只点击一次的另外一种方法是使用one()
　　$('div').one('click',function(){
　　　　console.log(123);
　　})

    //只关闭指定的事件
    $('div').on('click mouseover',function(){
        console.log(123);
        $(this).off('mouseover');
    })


})

posted @ 2014-03-20 13:08 joya 阅读(213) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

joya

[jquery备忘]

公告