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


Posted in Javascript onFebruary 06, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript错误的认识不用关心内存管理
Dec 15 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
jQuery基本筛选选择器实例代码
Feb 06 #Javascript
jQuery层级选择器实例代码
Feb 06 #Javascript
jQuery元素选择器实例代码
Feb 06 #Javascript
对称加密与非对称加密优缺点详解
Feb 06 #Javascript
jquery实现input框获取焦点的方法
Feb 06 #Javascript
jQuery表单元素选择器代码实例
Feb 06 #Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
php 删除cookie方法详解
2014/12/01 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
php和nginx交互实例讲解
2019/09/24 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
理解AngularJs指令
2015/12/10 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
python实现多进程通信实例分析
2019/09/01 Python
快速创建python 虚拟环境
2020/11/28 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
上课打牌的检讨书
2014/02/15 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL