根据可见性 属性 匹配元素

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery</title>

<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

$(function(){

    //选择器 内容

    $('ul li:contains(1)').css('color','red');//选中内容中含有1的元素

    $('ul li:empty').css('color','red');//选中空元素

    $('div:has(p)').css('color','red');//选中有指定子元素的元素

    $('ul li:parent').css('color','green');//匹配含有元素或文本的元素，与empty相反

    //可见性

    $('ul li:hidden');//匹配所有不可见元素

    $('ul li:visible');//匹配所有可见元素

    $('ul li[id]').css('color','yellow');//含有id属性的元素

    $('ul li[id="one"]');//匹配id是one的元素

    $('ul li[id!="one"]');//匹配id不是one的li元素

    $('ul li[id^="on"]');//匹配id以on开头的li元素one符合要求

    $('li[id$="ne"]');//匹配id以ne结尾的li元素

    $('li[id*="n"]');//匹配id包含n的li元素

    //以上功能可以重复写多个

})

</script>

</head>

<body>

<ul>

    <li>1</li>

    <li id="one">2</li>

    <li>3</li>

    <li>4</li>

    <li></li>

</ul>

<div>

    <p>我是div里的p标签</p>

</div>

<div>

    我是div标签

</div>    

</body>

</html>

aaarticlea/png;base64,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" alt="" />

jqery选择器的更多相关文章

  1. 19 01 13 JQery 加载 选择器 样式操作

    在Javascript   中应该用下方法经行编辑 <script type="text/javascript" src="js/jquery-1.12.4.min ...

  2. JS 与 jQery 的区别主要在于 DOM

    //目前正在学习前端阶段,把知识点整理.保存下来以便日后查看 首先引入jQery: 需要先引入css,再引入js: jQery需要在js前引入,再引入框架,最后才是js的引入:css也相同,先引入框架 ...

  3. jQuery学习之开篇

    吐槽 近期比較烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,假设没有掌握JS.JQ ...

  4. 表格可拖拉列改变列大小（使用的时候将youElement全部替换称你要添加这个效果的元素，需是jqery的选择器格式，如：$("table th/td")）

    $(function () { var isMouseDown = false; var currentTh = null; youElement.bind({ mousedown: function ...

  5. jQuery学习笔记（三）：选择器总结

    这一节详细的总结jQuery选择器. 一.基础选择器 $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素$('.infoC ...

  6. jQuery的选择器小总结

      这一节详细的总结jQuery选择器. 一.基础选择器 $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素 $('.in ...

  7. JQuery第一天——入门概述与选择器

    一.什么是JQuery 一个流行的js库 核心理念:write less , do more 优势:  轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏 ...

  8. jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

    this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(“”):获取元素   标 ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. Dell笔记本禁用触摸板的方法

    一·找到触摸板驱动所在的文件夹(其他型号 的本本,请自己探索一下,找到驱动在哪就行),一般 在 C:\program files\delltpad 中(若没有请下载安 装 ),如图: 二·双击 Del ...

  2. JVM内存模型及内存分配过程

    一.JVM内存模型 JVM主要管理两种类型内存:堆(Heap)和非堆(Permanent区域). 1.Heap是运行时数据区域,所有类实例和数组的内存均从此处分配.Heap区分两大块,一块是 Youn ...

  3. Android 开发性能优化之SparseArray(二)

    一.SparseIntArray API SparseIntArrays map integers to integers.  Unlike a normal array of integers, t ...

  4. 如何处理alert、confirm、prompt对话框

    import java.io.File; import org.openqa.selenium.Alert; import org.openqa.selenium.By; import org.ope ...

  5. Asm Shader Reference --- Shader Model 3.0 part

    ps部分 概览   Instruction Set                                       Name Description Instruction slots S ...

  6. C++类型引用浅析

    C++类型引用浅析 引言 从最早被Bjarne Stroustrup 发明,作为C语言的扩展,到广为人知C++98标准,再到最新的C++11.C++14和C++17标准,C++一直在不断地进步.演化. ...

  7. aix挂载centos 的nfs

    centos作为服务器,提供nfs文件系统,aix作为客户端,挂载centos的指定目录 (1)NFS的安装配置:centos 5 : yum -y install nfs-utils portmap ...

  8. vijosP1049 送给圣诞夜的礼品

    vijosP1049 送给圣诞夜的礼品 链接:https://vijos.org/p/1049 [思路] 快速幂+矩阵转换. 将m次矩阵的转换看作是一次快速幂中的乘法操作,这样可以用O(log(k/m ...

  9. 关于Windows Azure的常见问题-执行与维护FAQ

    执行与维护 使用虚拟机运行业务应用有什么需要注意的地方? Windows Azure 会周期性地更新主机环境,以确保平台上运行的所有应用程序和虚拟机始终处于安全的环境.此更新过程可能会导致您的虚拟机重 ...

  10. 自己动手Jquery插件

    最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候 ...