zoukankan      html  css  js  c++  java
  • 锋利的jquery

    认识jquery

    • $对象与dom对象

    jq对象是数组对象(选择的元素可以不用遍历就可以操作);
    使用$()制作jq对象;
    jq转DOM--> var $x=$('x') var x=$x[0]或者 var x=$x.get(0);
    DOM转jq--> var x=document.getElementId('id'); var $x=$(x);

    • 与其他库的冲突

    $.noConflict()将$放弃 然后其他库就可以使用
    如果要继续使用,可以 jQuery(function($)){};在其中使用;
    或者 var jq=$.noConflict();使用其他别名代替;

    选择器

    jq选择选择生成的是对象,即使目标不存在,也不会报错;
    原生的会返回null;
    所以判断是否选择目标存在,用if($x[0])--返回undefined)或者if($x.length-返回0)来判断;

    • 基础
    id    '#id'
    类    '.class'
    元素    'element'
    群组    'element,#id'
    
    • 层级
    后代    'a b'
    直系后代    'a>b'
    a之后的兄弟中第一个为xx的元素    'a+xx'
    a之后的所有为xx的兄弟元素     ' a~b'
    
    • 基本过滤
      选择一个群组,然后用:后面的过滤
    :first 
    :last
    :not(xx)    群组中剔除xx的  xx不用引号
    :even       群组中索引为偶数的
    :odd        群组中索引为奇数的
    :eq(x) 
    :gt(x)      索引大于x的
    :lt(x)      索引小于x的
    
    • 内容过滤
      元素内部包含的-子元素或文本
    :contains(text) 包含文本为text的 (子元素中包含)(包含,不是匹配)
    :empty      为空的
    :parent     有子元素(包括文本) 不为空放
    :has(x)     拥有x的
    
    • 属性
    :hidden
    :visible
    
    [attr]               选择带有attr属性的元素  eg:[id]
    [attr=value]        匹配
    [attr!=value]       不匹配
    [attr^=value]       开始
    [attr$=value]       结束
    [attr*=value]       包含
    [][]                复合过滤
    
    • 层级
    :first-child Selector
    选择所有父级元素下的第一个子元素。
    
    :first-of-type Selector
    选择所有相同的元素名称的第一个兄弟元素。
    
    :last-child Selector
    选择所有父级元素下的最后一个子元素。
    
    :last-of-type Selector
    选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
    
    :nth-child() Selector
    选择的他们所有父元素的第n个子元素。
    
    :nth-last-child() Selector
    选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
    
    :nth-last-of-type() Selector
    选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个。
    
    :nth-of-type() Selector
    选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。(感谢@caikan提供的翻译)
    
    :only-child Selector
    如果某个元素是其父元素的唯一子元素,那么它就会被选中。
    
    :only-of-type Selector
    选择所有没有兄弟元素,且具有相同的元素名称的元素。
    
    • 表单
    :enable
    :disable
    :checked    单选,复选被选中的
    :selected   被选中的选项元素
    
    :input
    :text
    :password
    :radio
    :checkbox
    :submit
    :image
    :reset
    :button
    :file
    

    DOM操作

    • DOM属性
      标签内的属性操作
    类
    1.addClass
    2.toggleClass
    3.hasClass
    4.removeClass
    5.css
    属性
    1.attr
    2.prop
    3.removeAttr
    4.removeProp
    基本属性
    1.html
    2.val
    3.text
    高宽
    1.height
    2.innerHeight---不计算border
    3.width
    4.innerWidth
    5.outerHeigth---包括border,参数true设置是否包括margin
    6.outerWidth
    坐标类
    1.offset---元素相对于文档的坐标
    2.position
    3.scrollTop
    4.scrollLeft--当前元素的滚动条的坐标(需要此元素能滚动,如body)
    
    

    1.attrprop的分别---对于固有属性-使用prop,对于自定义的属性--使用attr;(实际中需要验证)
    2.visible=hiddendisplay:none是不同的--第一种是在页面隐藏,第二种是在页面不存在(无高宽之类属性)

    属性操作有三个不同的用法
    1.得到值 $(xx).html()
    2.直接设置值 $(xx).html(<br>)
    3.通过函数返回值设置 $(xx).attr(function(){ })
    4.注意这些的返回值
    5.js定时器setInterval()与setTimeout()
    6.注意回调函数中this所指的对象

    • DOM元素操作
    1.外部
    wrap
    wrapAll
    unwrap---删除所有包裹它的元素
    wrapInner---将直接子元素外部包裹
    2.同级
    after---后面插入元素-作为兄弟节点,相当于移动
    before
    insertAfter
    insertBefore
    3.内部
    append--每个匹配元素里面的末尾插入
    appendTo
    prepend---每个匹配元素内部头部插入
    prependTo
    4.其他
    clone---克隆
    detach---移除(不包括元素的事件和数据)(仿佛没差别!!)
    empty---移除子元素
    remove---移除一切
    replaceAll--替换
    replaceWith--替换
    

    1.插入操作中 insertTO都只是改变插入被插入的语句顺序
    2.xxxxAll,一个匹配第一个元素,一个匹配所有元素

    遍历

    add---添加进被选中的集合中(`$('p').add('a').css()` 设置p和a的css值 )
    addBack---
        jq中,选择,过滤产生的集合放在一个堆栈中,addBack用于返回前一个集合,
        $('.b>.b').siblings().find('.a1').addBack().css()中-有三个集合,
        '.b>.b' /其兄弟元素/其兄弟元素中为a1的---addBack返回倒数第二匹配的,和最后匹配的组合成新集合
    end---退回上一个堆栈状态,返回的是倒数第二选择的对象
    
    后代选择:
    children---直接子元素
    contents---直接子元素,包括文本节点
    filter---过滤filter(':even')
    find---选择
    has
    is--- eg:is('li') is(':visible') 返回布尔值 
    not---从集合中移除匹配的元素
    
    父元素
    closest---向上匹配,直到找到,返回一个或0个
    parents---向上匹配,直到根元素,可以返回多个
    parent
    parentsUnitil
    
    同级
    first
    last
    next
    nextAll
    nextUnitl
    prev
    prevAll
    prevUnitil
    siblings
    
    
    each---遍历一个jquery对象
    map---
        map()方法主要用来遍历操作数组和对象,each()主要用于遍历jquery对象。
        each()返回的是原来的数组,并不会新创建一个数组。
        map()方法会返回一个新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。
        
    eq---通过-index,可以倒数开始
    slice--通过下标范围来选择元素
    

    parent,parents,closest,has区别
    filter和find区别
    map,each区别

    css,事件和特效

    • 事件处理器
    绑定事件
    通过bind on one 
    bind(event [,date],fn)
    event--事件名称-- 任何的 如 click() focus() load--下方的事件 都是这种的简写
    自定义事件--通过trigger触发
    自定义命名空间的事件--'event.xx'
    event.type可以判断类型;
    one()---一次性的事件;
    on和bind基本一致,最好使用on和off代替bind与unbind
    ************************************************
    
    模拟操作
    trigger--执行事件
    不需要用户触发直接执行,可以用
    $('xx').bind('myclick',function(event,x1,x2){ })
    $('xx').trigger('myclick',['x1','x2']);
    $('xx').click();
    $('xx').triggerHandler('click')--执行绑定的事件,取消默认事件
    执行自定义的事件,只能使用trigger
    
    ************************************************
    
    移除事件:
    1.事件冒泡---一个动作触发子元素和父元素的事件-由里向外冒泡进行;
    2.移除绑定事件-停止冒泡:function(event){;event.stopPropagation()};
    3.移除默认事件,如:当表单内文字长度不够,让submit本身的事件移除,不提交.event.preventDefault();
    4.return false;将移除所有事件;
    5.unbind()
    $('a').bind('click.xx',f1=function(){})
    $('a').unbind('click',f1/'.xx')--通过定义变量或命名空间
    $('a').bind('click',f1)
    再次添加(只有通过变量名添加,命名空间不能添加),事件会被排到事件列的最后
    
    ************************************************
    
    事件对象的属性
    type
    stopPropagation()
    preventDefault()
    target--
    target获取当前触发的DOM元素,通过$()可转换成$(this);
    pageX/Y
    which--获取鼠标按钮(1,2,3)
    
    
    • 事件
    浏览器事件
    error---$('#img').error(function(){$(this).hide();})
    resize---只用于窗口大小? $(window)
    scroll---在元素内滚动触发
    
    鼠标事件
    mouse--enter/over/down/up/move/out/leave
    click,dbclick,hover
    
    键盘--window和document是全屏,除此,需要有输入的才能触发
    keydown
    keyup
    keypree
    
    文档加载事件
    ready
    
    • 特效
    animate
    hide
    show
    toggle
    slideDown
    slideUp
    slideToggle
    fadeIn
    fadeOut
    fadeTo
    fadeToggle
    
    animate({
         ['toggle', 'swing'],
        opacity: 'toggle'
      }, 5000, 'linear', function(){ });
      animate({属性变化},时间,缓动函数,fn)
      jq自带两个缓动函数 swing和linear.
      toggle可以作为值.
      
    delay--延迟
    finish--结束
    stop--停止队列--(停止队列,停止当前动画)
    
    $(a).animate(动作1);
    $(a).animate(动作2);
    执行一次,stop(false,true)-当前动作1直接完成,动作2继续
    stop(true,false)-当前动作停止,队列动作不进行
    finish().动作全部直接完成.
    
    jQuery.fx.interval=数字
    动画的帧数--全局性的,无动画时才能更改
    
    

    表单表格与其他操作

    • 表单
    事件
    blur--失去焦点
    focus
    focusin--支持冒泡事件的focus--会去检测子元素
    focusout---冒泡的blur
    change--value值改变(!!表单元素触发事件的快慢不同)
    select--input>type=text和textarea的文本被选择时触发
    submit-只能绑定from,另外要注意enter键
    
    • 其他
    data--在对象上以键值对的形式添加额外的数据 $().data('foo','xx')
          和获取data-xxx=''中的值;
    removeData
    
    type()
    $.contains(a,b)--检测a是否是b的祖先元素
    
    now()--当前时间戳
    var time=new Date();
    var local_time=time.toLocaleString()
    
    $.fn.extend({
    xx: function(){},
    xxx: funtion(){}
    })---将方法添加到jq原型$.fn上.
    可以通过$('').xx(),或者$.fn.xx;调用.
    
    $.extend
    1.$.extend({
    深度拷贝,   ---  true/false,可以将数组中的页合并,不然只会是拷贝共同存在的和后面的
    {},         --- 空的对象,第一个元素来接收,但是会将元素改变,所以用空元素
    obj1,       --- 这才是第一个元素,值不会改变
    opj2
    })
    

    性能优化

    • 关于选择器的使用

    ID>标签>class>:xxx
    尽量用ID确认最近的元素,然后在find();

    • 当某个元素调用多次--避免相同选择器的使用

    转换为变量
    尽量使用链式操作
    当在别的函数中也要调用时-window.$xx={};将它设置为全局变量

    • 循环时减少选择器,DOM操作
    ul插入多个标签,每个里面的字符串放在数组中
    var $list=[...];
    for(var i=0,l=$list.length;i<l;i++){
    $('ul').append("<li>"+$list[i]+"</li>");
    }
    ---每次循环都要选择和DOM操作
    改进: var $list=[...];
    $li="";
    for(var i=0 ,l=$list.length;i<l;i++){
    $li+="<li>"+$list[i]+"</li>";
    }
    $("ul").html($li);
    
  • 相关阅读:
    虚函数和纯虚函数
    MS CRM 2011中PartyList类型字段的实例化
    MS CRM 2011的自定义与开发(12)——表单脚本扩展开发(4)
    MS CRM 2011的自定义与开发(12)——表单脚本扩展开发(2)
    MS CRM 2011的自定义和开发(10)——CRM web服务介绍(第二部分)——IOrganizationService(二)
    MS CRM 2011 SDK 5.08已经发布
    MS CRM 2011 Q2的一些更新
    最近很忙
    Microsoft Dynamics CRM 2011最近的一些更新
    补一篇,Update Rollup 12 终于发布了
  • 原文地址:https://www.cnblogs.com/LiangHuang/p/6413924.html
Copyright © 2011-2022 走看看