大迪是小可爱大迪是小可爱04-16 09:22

JQuery之过滤器

/*
                过滤器,过滤选择器
       1.过滤器的作用,主要是通过特定的约束条件,来更加精确的晒选出目标DOM元素对象
       2.过滤器的基本语法类似于CSS中伪类语使用:号开头

                一基本过滤器
       $('li:first')  选取第一个元素
       $('li:last')   选取最后一个元素
       $('li:not(.red)')    选取class不是red的li元素
       $('li.even')    选取索引(0 开始)是偶数的所有元素
       $('li:odd')     选择索引(0 开始)是奇数的所有元素
       $('li:eq(2)')    选择索引(0 开始)等于index的元素
       $('li:gt(2)')    选择索引(0 开始)大于index的元素
       $('li:lt(2)')    选择索引(0 开始)小于index的元素
       $(':header')     选择标题元素,h1-h6
       $(':animated')    选择正在执行动画的元素
       $(':focus')       选择当前被焦点的元素
 */


 $(function(){
     //所有li中第一个元素
     $('li:first').css('color','red');
     //所有li中最后一个元素
     $('li:last').css('color','red');
     //ul的id为box的li的最后一个元素
     $('#box li:last').css('color','red');
     //得到第一个ul的 li的最后一个元素
     $('ul:first li:last').css('background','gray');
     //得到li的class部位red的li元素
     $('li:not(.red)').css('background','red');
     //得到所有偶数行li
     $('li.even').css('background','gray');
     //得到所有奇数行li
     $('li:odd').css('background','red');
     //得到第三个(下标为2)的元素
     $('li:eq(2)').css('background','red');
     //得到所有下标大于2的元素
     $('li:gt(2)').css('background','black');
     //得到所有下标小于2的元素
     $('li:lt(2)').css('backgroud','black');
     //得到h1-ht所有节点元素
     $(':header').css('color','red');
     //只得到h1节点元素
     $('h1:header').css('color','gray');
     //第一个div 为h1的header
     $('div:first h1:header').css('color','red');
     //得到焦点
     $('input').get(0).focus();
     //设置得到焦点文本框的字体颜色
     $(':focus').css('color','red');
 })
 /**
  *             二 内容过滤器
  *      主要是对子元素,以及问呗内容上进行操作,DOM元素对象
  *
  *   $(':contains("文本内容")')选取含有"文本内容的元素"
  *   $(':empty')   选取不包含子元素或空文本的元素
  *   $(':has(.red)')选取含有class是red的元素
  *   $(':parent')选取含有子元素或文本的元素
  *
  */
 $(function(){
     $('div:contains("文本内容1")').css('background','gray');
     //不含有任何标签的
     $('div:empty').css('background','gray').css('height','20px');
     //选取clss是red的父级元素
     $('ul:has(.red)').css('background','gray').css('height','20px');
     //选取含有子元素或文本元素的父元素
     $('div:parent').css('backgroud','gray').css('height','20px');

     //效果同上(使用方法的方式)
     $('ul').has('.red').css('background','gray');
     $('p').parent().css('backgroud','gray').css('height','20px');
     $('p').parent().css('backgroud','gray');
     //找父级元素知道body结束
     $('p').parentsUntil('body').css('backgroud','gray');

 })

/**
 *          三 子元素过虑器
 *
 *    通过父元素与子元素的关系获得目标DOM元素对象
 *
 *    $('li:first-child')获取每个父元素的第一个子元素
 *    $('li:last-child')获取每个父元素的最后个子元素
 *    $('li:only-child')获取只有一个子元素的父元素
 *    $('li:nth-child')获取每个自定义元素的元素
 */
$(function(){
    //得到所有第一个li
    $('li:first').css('background','gray');
    //得到每组第一个li
    $('li:first-child').css('backgroud','gray');
    //得到每组的最后一个
    $('li:last-child').css('backgroud','gray');
    //里面只包含一个子标签(目标元素自己)
    $('li:only-child').css('backgroud','gray');
    //给偶数行(evn),奇数行添加背景色(odd)用来自定义
    $('li:nth-child(odd)').css('backgroud','gray');
})
/**
 *                  四 常用的方法
 *    结合选择器与过滤器的一些常用方法
 *   $('.red').is('li');   传递选择器元素,DOM对象,jQuery对象
 *   $('li').eq(2).hasClass('red')  其实就是is("."+class)
 *   $('li').slice(0,2) 选择从start到end位置元素
 *   $('div').contents()    获取某元素下面所有元素节点,包括文本节点
 *   $('li').filter('.red') 匹配元素的子集构造一个新的jQuery对象
 */
$(function () {
    //返回true或false
    //$('.red').is('li');

    //使用jQuery对象
    alert($('.red').is('li'));
    //得到第一个li元素返回true或false
    alert($('.red').is('li').get(0));
    //不用加参数,是否有class返回true或false
    $('li').eq(2).hasClass();
    //选中0-4,参数(开始位置,结束位置)
    $('li').slice(0,4).css('background','gray');
    //获取元素下面所有的元素节点,不包括文本节点
    $('div').children().size();
    //包含文本节点
    $('div').contents().size();


})

官场书屋二维码

000
评论
欢迎投稿

热搜标签

神评线程池RStudioPyinstallerNavicatMATLABEclipseARMR语言C语言FCNIpynbplustokenTensorflowword2vecRNNFasterRCNNHTTPrequestsCDNHadoopwget元字符DubboOSSDBAurllibRAC子网掩码子网划分朴素贝叶斯达观杯opencv蓝桥杯多线程IPv4IPv6VLSMOSIIP地址堆栈溢出二分查找哈希表哈希算法线程假死MYSQLJNI分布式中间件热更新同步调用异步调用异步执行JSONThinkPHPplus币scratchHystrixMQ消息队列RabbitMQ消息中间件AOPsqlserverInnoDBMODDLLTomcatAPIReactReduxOAuthStreamWebFluxNSObjecthashcodeHaproxyhttpclienthybridappSpringBoot大数据变现并行计算TeamviewerwebstormPycharmIDEAJetBrainsAjaxXpathbeautifulsoupJDK爬虫华为阿里巴巴腾讯百度滴滴美团字节跳动今日头条抖音SQL360一致性UMLReadWriteLock读写锁HTML数据解析bs4deepinGPUreactnativeRedis小米京东fiddler抓包numpy搜索引擎推荐引擎Scrapy网易搜狐负载均衡新浪ndarrayAndroid安卓iOS苹果亚马逊谷歌Chrome微软区块链软件测试架构师ACMHDU校赛单片机CNN卷积神经网络Dialog建造者模式反向代理量子编程BuildergolangJavaBeanAndroidSutido知识库知识图谱sublimeemmetVim微服务Brackets测序平台IonTorrent数据分析Unix基因检测链表单链表GradlepluginsynchronizedDialogFragmentmybatis算法一元运算符并行接口串行接口串口serial以太口以太币Csharp线性表存储结构数据结构GitLabPackageControl面试题ParallelPATReact割韭菜VueVuejsmui编程函数数据挖掘视频教程层次聚类PandasAtom文本检索少儿编程检索系统MCUProcessing数据结构RFIDARouter强引用软引用弱引用生成器人工智能创建型模式KotlinDSLA星算法A*算法强化学习马氏过程ndarrayleetcode阿里云捡尸云计算chardet抖音jupyterpysparkOpenStackhotfix蚂蚁金服继承变量构造函数scp命令程序员ShadowrocketutilsDbutils耦合vmtoolsThreadPoolsocket中台textareaACE正则表达式TokenSolr布隆过滤器布隆996马云马化腾李彦宏刘强东周鸿祎小程序雷军张一鸣王兴程维任正非李笑来源码资本红杉资本LogicmonitorSaaS高可用目标检测CIO阿博茨科技东皇太一每日优鲜用友裁员神评局编程猫记忆承载5GGA-RPN苏明哲堆栈队列董明珠torrent渡边太太余额宝gc算法B站分布式前端面试戴卫国thinkeyANR计算机编程儿童编程木易杨快手神回复最毒神评论Nodejs蔡徐坤edge方舟支付宝AWS乔布斯比尔盖茨贝索斯扎克伯格公众号敏捷开发Bittorrent三表龙门阵商务范邓潍倪大红DOSDDOS科创板纪源资本GGV源代码Lambda表达式抖音小程序元器件PCB摩尔定律IPO融资CVSIBMHDFSMapReduce川口耕介Flutter产品经理码农程序猿PMCTOCEO套接字UDP编程语言csvJVMjsondemo字符串chartjsDevOps持续交付运维HiveFlinkApache物联网DataSetNetflix数据交互JSPAPP虚函数AIOpsLDAPTkinterseleniumICOPUAListViewNotification戴卫国GridViewDataGridPopupWindowContentProvider贪心算法动态规划算法周志华比特币监督学习吴恩达半监督学习无监督学习训练样本没有免费午餐定理迁移学习概念学习归纳偏好假设空间线性模型贝叶斯六边形架构自然语言处理MinGWPthreadUIButtonCLion黑客菜鸟小白BIOCVPR合鲸资本霍中彦赵胜工业40AzureERP软件工程Web应用OpenMVG软件架构linuxbisectlsofRPCsonar代码质量管理持续集成项目管理虚拟化Mahout推荐算法hibernate搜索算法性能指标POSA视频中间件NVRPACJVM调优web性能优化DB性能优化InfluxDBzookeeper 数据库调优海思芯片何庭波CPU半导体inteloracle商汤科技代码编辑器聂云宸CSS高通开源iSCSI数组排序二叉树以太网ARPOSI分层模型TopKelasticsearch三次握手四次挥手客户端服务器希尔排序冒泡排序TensorBoard近邻传播算法APAP聚类算法JavaScript聚类算法算法JuliaIEEEregex正则小说编程ROS散列树kali散列算法Metaspace推荐系统回溯算法遍历集合迭代器全局函数锁死H5ServletWindowsequals互斥锁条件变量数据流转工业相机高效编程抓包丘成桐哈佛信号量python控制输出QtBATCAMVTChain通证公链以太坊私有链联盟链Jquery公有链无人驾驶bugArduino旋转矩阵存储引擎自学引擎引擎LayaAir开发者社区session问答社区MFC免费教程安装教程测试教程pdf电子书USB装饰器单例模式cookiemakefileluceneMyISAM存储sqldatasourcePartition分区降序索引索引数据库索引聚簇索引matlab单向HttpRunner微信微博网红内存模型JMM底层实现原理io同步异步调用机器学习异步阻塞注入攻击游戏编程小游戏手游桌游B站OpenJDK谷子帝嵌入式王志会神点评SPOSEOSGC垃圾回收代码重构代码LambdaSVG比特币pcc教程cdn局域网依赖注入类加载机制排序算法序列化构建工具闭包FPGA外包私活网站MapReduceHTML5接口接口回调解耦anchornms操作系统非极大值抑制gcc编译器静态库动态库yumcmakerpmLVM安装命令Ubuntu监控告警ELK部署软件仓库仓库软件TeamTalk二次开发devtoolsetGNUVuex桌面环境deepfakes换脸RedditMIDIH2数据库BugkuCTF代码审计源码回文数ArchLinux数素数华为软件精英挑战赛虚拟机虚拟化管理虚拟化反向传播反向传播算法ZabbixkuduimpalaVMware分区表文本情感分析意见挖掘倾向性分析kerasMaskRCNN图像增强DeepMaskSharpMaskMultiPathNetredhat全栈工程师全栈yoloSSD可视化pytorch相似度算法矩阵分解svd奇异值分解mavenALS徐刚博士热修复插件化SSMRecyclerViewcheckBox购物车ijkplayerionicDagger2junitOkhttpRecyclerRecyclerView生成式对抗网络天猫精灵语音控制语音识别知乎Win10杀毒软件Docker杀毒ACMday02valueOftoStringIntent深度学习LaTeXcaffejmeterSDKchmodRWX面试JoomlaCMSTinyOSGitGitHubCentOSXshellgormWebSocketRaft神评论共识算法vectorJAVAOOObeliskUTXOGo语言POWPaxosPBFTSpark

聊骚我们

神评微信公众号 关注神评公众号