zoukankan      html  css  js  c++  java
  • jquery快速常用技能

    jQuery入口函数与js入口函数

    (window.onload = function(){})的对比:

    1、JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。

    2、jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

    jquery可以设置多个入口函数,按照顺序执行

    jquery手册

    jquery和js对象的区别

    选择器

    基础选择器

    名称 用法 描述
    ID选择器 $(“#id”); 获取指定ID的元素
    类选择器 $(“.class”); 获取同一类class的元素
    标签选择器 $(“div”); 获取同一类标签的所有元素
    并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。
    交集选择器 $(“div.redClass”); 获取class为redClass的div元素

    层次选择器

    名称 用法 描述
    后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
    子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
    同级选择器 $(“p+span ”); 匹配紧接在 所有prev 元素后的 next(下一个) 元素
    同级选择器 $(“p ~ span ”); 匹配 prev 元素之后的所有 siblings 元素.

    过滤选择器

    名称 用法 描述
    :first $(”li:first”) 单个元素的组成的集合匹配找到的第一个元素
    :last $(”li:last”) 匹配找到的最后一个元素
    :not(selector) $("li:not(.intro)") 去除所有与给定选择器匹配的元素
    :even $(“li:even”) 匹配所有索引值为偶数的元素,从 0 开始计数
    :odd $(“li:odd”) 匹配所有索引值为奇数的元素,从 0 开始计数
    :eq(index) $(“li:eq(2)”) 匹配一个给定索引值的元素,从 0 开始计数
    :gt(index) $(“li:gt(2)”) 匹配所有大于给定索引值的元素,从 0 开始计数
    :lt(index) $(“li:lt(2)”) 匹配所有小于给定索引值的元素,从 0 开始计数

    筛选选择器

    名称 用法 描述
    children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器
    find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
    siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。
    parent() $(“#first”).parent(); 查找父亲
    eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
    next() $(“li”).next() 找下一个兄弟
    prev() $(“li”).prev() 找上一个兄弟

    表单选择器

    方法

    $.css()

    $.css('color', 'red');
    $.css({backgroundColor:'red',});
    
    $.height([val]);
    $.width([val]);
    

    $.attr()

    $.attr('name');
    $.attr('name', 'admin');
    $.removeAttr('name');
    

    操作class属性

    $.addClass()
    $.removeClass()
    $.toggleClass()
    

    html,text,val

    $.html()
    $.text()
    $.val()       // value
    

    DOM操作

    • append
    append(content) 
    	向每个匹配的元素内部后置追加内容。
    prepend(content)
    	向每个匹配的元素内部前置追加内容 
    appendTo(selector)
    	把所有匹配的元素后置追加到另一个、指定的元素元素集合中 
    prependTo(selector)
    	把所有匹配的元素前置追加到另一个、指定的元素集合中 
        
    after(content)
    	在每个匹配的元素之后插入内容 before(content)
    	在每个匹配的元素之前插入内容 
    insertAfter(selector)
    	把所有匹配的元素插入到另一个、指定的元素集合的后面
    insertBefore(selector)
    	把所有匹配的元素插入到另一个、指定的元素集合的前面
    
    
    
    • 删除
    $.empty()
    $.remove()
    

    判断元素是否可见

    $.is(':visiable')
    

    动画

    // hide show
    show(speed, [callback]) 
    	显示隐藏的匹配元素 
    hide(speed, [callback]) 
    	隐藏显示的元素
    toggle() 
    	切换元素的可见状态
    toggle(switch)  
    	根据switch参数切换元素的可见状态
    	(ture为可见,false为隐藏)。
    toggle(speed,  [callback])
    	以优雅的动画切换所有匹配的元素可见状态 
    slideDown(speed, [callback]) 
    	显示元素 
    slideUp(speed, [callback])  
    	隐藏元素
    slideToggle(speed, [callback]) 
    	切换所有匹配元素的可见性  
    
    
    • fade
    fadeIn(speed, [callback]) 
    	不透明度的变化来实现所有匹配元素的淡入效果 (显示)
    fadeOut(speed, [callback]) 
    	通过不透明度的变化来实现所有匹配元素的淡出效果 (隐藏)
    fadeTo(speed, opacity, [callback]) 
    	把所有匹配元素的透明度以渐进方式调整到指定的不透明度 
    fadeToggle(speed,  [callback])
    	通过不透明度的变化来开关所有匹配元素的淡入和淡出效果 
    
    

    事件

    • 动态绑定
    $(父选择器).on('click', 子选择器, function(){})
    $('document.body').on('click', '.div',function(){})
    
    • bind
    $('.div').bind('click[,mounseenter]', function(){});
    $('.div').bind({
        click:function(){},
        mouseenter:function(){}
    })
    
    • delegate
    $('.div').delegate('.btn','click', function(){});
    $('.div').delegate('.btn','click', {
        click:function(){}
        mouseenter:()=>{}
    });
    
    • 解除绑定
    $('.div').off()  // 
    $('.div').off('click');  // all click
    
  • 相关阅读:
    Working with WordprocessingML documents (Open XML SDK)
    How to Choose the Best Way to Pass Multiple Models in ASP.NET MVC
    Azure:Manage anonymous read access to containers and blobs
    Convert HTML to PDF with New Plugin
    location.replace() keeps the history under control
    On the nightmare that is JSON Dates. Plus, JSON.NET and ASP.NET Web API
    HTTP Modules versus ASP.NET MVC Action Filters
    解读ASP.NET 5 & MVC6系列(6):Middleware详解
    Content Negotiation in ASP.NET Web API
    Action Results in Web API 2
  • 原文地址:https://www.cnblogs.com/zhuxiang1633/p/11692826.html
Copyright © 2011-2022 走看看