jQuery内容筛选选择器实例代码

本文实例为大家分享了jQuery内容筛选选择器的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>内容筛选器</h2>
  <h3>:contains/:has</h3>
  <div class="left">
    <div class="div">
      <p>:contains</p>
    </div>
    <div class="div">
      <p>:contains</p>
    </div>
    <div class="div">
      <p>
        <span>:has</span>
      </p>
    </div>
    <div class="div">
      <p>:contains</p>
    </div>
  </div>

  <script type="text/javascript">
    //查找所有class='div'中DOM元素中包含"contains"的元素节点
    //并且设置颜色
    $(".div:contains(':contains')").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
    //查找所有class='div'中DOM元素中包含"span"的元素节点
    //并且设置颜色
    $(".div:has(span)").css("color", "blue");
  </script>

  <h3>:parent/:empty</h3>
  <div class="left">
    <div class="aaron">
      <a>:parent</a>
    </div>
    <div class="aaron">
      <a>:parent</a>
    </div>
    <div class="aaron">
      <a>:parent</a>
    </div>
    <div class="aaron">
      <a></a>
    </div>
  </div>
  <script type="text/javascript">
    //选择所有包含子元素或者文本的a元素
    //增加一个蓝色的边框
    $("a:parent").css("border", "3px groove blue");
  </script>

  <script type="text/javascript">
    //找到a元素下面的所有空节点(没有子元素)
    //增加一段文本与边框
    $("a:empty").text(":empty").css("border", "3px groove red");
  </script>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery基本筛选选择器实例代码

    本文实例为大家分享了jQuery基本筛选选择器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href=

  • jQuery选择器之属性筛选选择器用法详解

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • 基于jQuery选择器之表单对象属性筛选选择器的实例

    基于jQuery选择器之表单对象属性筛选选择器的实例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" rel="external n

  • jQuery内容筛选选择器实例代码

    本文实例为大家分享了jQuery内容筛选选择器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href=

  • 使用jQuery内容过滤选择器选择元素实例讲解

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.

  • jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    本文实例讲述了jQuery内容过滤选择器与子元素过滤选择器用法.分享给大家供大家参考,具体如下: jQuery的内容过滤选择器 一.:contains(text) 选择器::contains(text) 描述:匹配包含给定文本的元素 返回值:元素集合 示例: $("div.mini:contains('div')") //div.mini是DOM元素集合,:contains('div')是过滤条件 二.:has(selector) 选择器::has(selector) 描述:匹配含有选

  • jQuery内容过滤选择器用法分析

    本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考.具体分析如下: 在HTML文档中,元素的内容可以是文本或者子元素,如果将某个选择器或者内容过滤选择器一起使用,就可以从查询到的元素中进一步筛选出具有给定 文本或者子元素的元素 1. :contains()选择器 用于选择包含给定文本的所有元素,格式: 复制代码 代码如下: $("selector1:contains(text)") 如: 复制代码 代码如下: $("p:contains('text')&quo

  • jQuery内容过滤选择器用法示例

    jQuery内容过滤选择器用法示例

    本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex

  • jQuery 表单序列化实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象 dataType: "json"

  • 基于jQuery实现返回顶部实例代码

    基于jQuery实现返回顶部实例代码

    效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

  • Java发送带html标签内容的邮件实例代码

    如下所示: package test; import javax.mail.internet.InternetAddress; import javax.mail.internet.MimeMessage; import javax.mail.internet.MimeUtility; import javax.mail.Session; import javax.mail.MessagingException; import javax.mail.Transport; public class

  • Android 日期选择器实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: //出生年月设置 private void birthSetting() { Calendar calendar = Calendar.getInstance(); calendar.add(Calendar.DAY_OF_YEAR, 1); new DatePickerDialog(mContext, new DatePickerDialog.OnDateSetListener() { @Override public void onDat

随机推荐