• 【学习笔记】锋利的jQuery(一)选择器


    一、要点阐述

    1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右。、

    2,jQuery里的方法都被设计程自动操作对象集合,而非单独的对象。

    3,jq对象是jq对DOM对象进行包装后产生的对象,是一个类似数组的对象,可用[0]get(0)方法转成DOM对象。

    二、jQuery和其他js库的冲突解决

    //jq库在其他库之前导入时需调用noConflict()
    方式1(jQuery代替$):
    jQuery.noConflict();  //把$的控制权交给其他库。
    jQuery(function(){...});
    
    方式2($xhh代替$):
    var $xhh = jQuery.noConflict();
    $xhh(function(){...});
    
    方式3(仍用$):
    jQuery.noConflict();
    jQuery(function($){...});
    
    方式4(仍用$):
    jQuery.noConflict();
    (function($){
        $(function(){...});
    }){jQuery};
    
    //jq库在其他库之后导入,用jQuery代替$
    jQuery(function(){...});

    三、jQuery选择器

    1,基本选择器和层次选择器

    //基本选择器
    $("#id")
    $(".classname")
    $("p")
    $("*")  //选取所有
    $("#id,.classname,p") //选取多个
    
    //层次选择器
    $("div span")  //div的所有span后代
    $("div>span")  //div的子元素span
    $("div+span")  //等同于$("div").next("span")
    $("div~span")  //等同于$("div").nextAll("span"),注意区分.siblings()

    2,过滤选择器

    //基本过滤
    :first/:last  //等同于:eq(0)/:eq(len-1)
    :not(selector)/:has(selector)
    :even/:odd  
    :eq(index)/:gt(index)/:lt(index) //index从0开始
    
    //子元素过滤,需和父级元素空格开使用
    :nth-child(index/even/odd)
    :first-child/:last-child
    :only-child   //选取其唯一的子元素
    
    //内容过滤
    :contains("xxx") //包含有“xxx”的文本内容的元素
    :empty/:parent   //包括子元素的、不包括子元素的
    
    //表现形式过滤
    :header   //h1,h2,h3...标签
    :animated 
    :focus    //当前获取焦点的元素
    :hidden   //包括<input type="hidden">,"display:none","visibility:hidden"
    :visible    
    
    //属性过滤
    div[id] 
    div[class=classname]
    div[class!=classname]
    div[title^=value]       //属性以value开始的div
    div[title$=value]       //属性以value结束的div
    div[title*=value]       //属性中含有value的div
    div[attribute1][attribute2]...  //多个属性过滤

    3,表单选择器和对应的过滤

    表单选择器
    :input  //所有表单的元素,包括input,select,button...
    //以下是选择对应type属性的表单元素 :text :password :radio :checkbox :submit :image :reset :button :file :hidden //比较特殊,选择的是包括表单外的所有不可见元素 表单过滤 :enabled/:disabled :checked :selected

    4,jq常用的选择方法

    filter(selector) //对本身进行筛选
    find(selector)   //在后代中筛选
  • 相关阅读:
    图片的存储
    【已解决】如图,说我磁盘不够,看到var目录下有的个隐藏文件夹占了46G,不知道怎么删除
    Java 中时间处理SimpleDateFormat 中HH和hh的区别
    api的日志
    网页报警提示 This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see https://goo.gl/zmWq3m.
    Springboot项目中的favicon
    页面Header自适应屏幕
    Vue 日期下拉框
    VUE 单选下拉框Select中动态加载 默认选中第一个
    Vue 循环 [Vue warn]: Avoid using non-primitive value as key
  • 原文地址:https://www.cnblogs.com/xinghh/p/3978189.html
Copyright © 2020-2023  润新知