jQuery(2-6)属性过滤选择器

最新推荐文章于 2011-12-28 21:52:25 发布
置顶 最新推荐文章于 2011-12-28 21:52:25 发布
阅读量372 收藏
点赞数
分类专栏： jQuery 文章标签： jquery div class function stylesheet html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a6613459/article/details/7081046
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>属性过滤选择器.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <script type="text/javascript" src="../jquery-1.7.1.js"></script>
  </head>
 
 <style type="text/css">
div,span,p{
width: 170px;
height:170px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-family: cursive;
font-size: 17px;
}
   div.mini{
   width: 60px;
   height:60px;
   background-color:#aaa;
   font-size: 12px;
   }
   div.hide{
   display: none;
   }

</style>

  此处是css样式
 
  <body>
 
  <div class ="one" id = "one">
  id 为one ,class为one 的div
   <div class = "mini">class为mini</div>
 </div>
 
  <div class = "one" id = "two" title="test">
  id 为one ,class为one 的div
  <div class = "mini" title="other">class为mini,title为other</div>
  <div class = "mini" title="test">class为mini,title为test</div>
  </div>
 
   <div class = "one">
   <div class = "mini"> class为mini</div>
   <div class = "mini"> class为mini</div>
   <div class = "mini"> class为mini</div>
   <div class = "mini"> </div>
   </div>
 
  <div style="display: none;" class="none">
  style的dispaly为none, class为none
   </div>
  
 
 <div class = "hide">class为hide</div>
 <div>
 包含input的type为“hidden”的div
 <input type = "hidden" size = "8" >
 
 </div>
 
 <span id = "move" > 正在执行动画的span元素</span>
  </body>

 <script type="text/javascript">
/*  $(function(){
     $('div[title]').css("background","#bbffaa");  //:attribute 选取拥有此属性的元素
                        //改变含有 属性title<div>的背景颜色  整个 div 内 全部 都 换色 了
  });*/
 
   /*$(function(){
     $('div[title=test]').css("background","#fff"); //[attribute=value]  选取属性值为new的元素
     //改变 属性值 title值等于test的<div>元素的颜色
 
  });*/
 
  /*  $(function(){
     $('div[title!=test]').css("background","#fff"); //[attribute!=value] 选取不拥有此属性的元素
  //改变 属性值 title值不 等于 test的<div>元素的颜色
  });       */                
 
   /* $(function(){
     $('div[title ^=te]').css("background","#fff"); //[attribute ^=value] 选取属性以 te开始的元素
    // 改变 属性值 以 te的开始 <div>元素的颜色
  });*/
 
 /*   $(function(){
     $('div[title $=est]').css("background","#fff"); //[attribute $=value] 选取属性 以est 结束的元素
  // 改变 属性值 以 est结束  <div>元素的颜色
  });*/
 
  /*
    $(function(){
     $('div[title *=es]').css("background","#fff");//[attribute *=value] 选取属性带有es的元素
   // 改变 属性值 含有  es的   <div>元素的颜色
  });*/
 
 
  /*$(function(){
  $('div[id][title *=es]').css("background","#fff");//[selector1][selector2] ....用属性选择器 合拼成一个 复合
           //选择器 每合一次范围缩小一次
   // 改变 属性值 含有 id的  并且 属性值 含有  es的 <div>元素的颜色
  });*/
 
 </script>
</html>

 

星蓝之夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery表单对象属性过滤选择器实例分析
10-24
在本例中，我们关注的是jQuery中的表单对象属性过滤选择器，这些选择器专门用于筛选表单元素，如输入(input)、复选框(checkbox)、单选按钮(radio)以及下拉列表(select)的选项(option)。以下是对这些选择器的详细说明...
JQuery中属性过滤选择器用法实例分析
10-24
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
jquery选择器之属性过滤选择器详解
10-26
本篇文章主要是对jquery选择器之属性过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
jQuery表单对象属性过滤选择器实例详解
10-21
本篇将详细讲解jQuery表单对象属性过滤选择器的使用方法，通过实例分析如何高效地对表单元素进行属性过滤操作。 1. **`:reset` 选择器** `:reset`选择器用于选取所有类型的重置按钮，例如 `<input type="reset">`...
jQuery(3-10)遍历,兄弟,子,closest(),节点
蓝╭☆叶的专栏
12-28 1422
遍历节点.html                       -->            .wid{   width: 150px ;   color: purple ;  font-weight: bold;;    }   .hei{   height: 150px;   }   .another{   font-style: i
jQuery(3-9)设置或获取HTML、文本和值
蓝╭☆叶的专栏
12-24 1308
设置取值.html                       -->             .wid{   width: 150px ;   color: purple ;  font-weight: bold;;    }   .hei{   height: 150px;   }   .another{   font-style:
jQuery(3-6)复制节点替换节点包裹节点
蓝╭☆叶的专栏
12-20 982
复制节点替换节点包裹节点.html                       -->                水果      老鼠掉进大米缸      正好大米缸里面有只猫··哎····   你喜欢的水果是？     苹果   橘子   菠萝   香蕉   梨子               /*$(fu
jQuery(3-8)样式操作
蓝╭☆叶的专栏
12-22 759
样式操作.html                       -->         .wid{   width: 150px ;   color: purple ;  font-weight: bold;;    }   .hei{   height: 150px;   }   .another{   font-style: italic
jQuery(2-4)内容过滤选择器
蓝╭☆叶的专栏
12-17 747
基本选择器.html                       -->         div,span,p{ width: 170px; height:170px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-family: cursive;
jQuery(3-7)属性操作
蓝╭☆叶的专栏
12-22 657
属性操作.html                       -->         .wid{   width: 150px ;   color: purple ;  font-weight: bold;;    }   .hei{   height: 150px;   }   .another{   font-style: italic
jQuery(3-4)插入节点
蓝╭☆叶的专栏
12-18 629
example.html                       -->                   水果   你喜欢的水果是？   你喜欢的水果是？     苹果   橘子   菠萝   香蕉   梨子     /* $('p').append('你好 ');  //向每个匹配的元素后面追加 类
jQuery(2-8)表单对象过滤属性选择器
蓝╭☆叶的专栏
12-18 582
表单对象属性过滤选择器.html                   -->     可用元素 : 不可用元素 : 可用元素 : 不可用元素 : 多选框: test1 test2 test3 test4 test5 下拉列表1: 浙江 湖南 北京 天津 广州 湖北 下拉列表2: 浙江 湖南
jQuery(3-3)创建节点
蓝╭☆叶的专栏
12-18 569
example.html                       -->                   水果   你喜欢的水果是？   你喜欢的水果是？     苹果   橘子   菠萝   香蕉   梨子     /* var $li_1 = $(" 西瓜 "); //创建文本节点  var $li_
jQuery(3-2)jQueryDOM中的操作
蓝╭☆叶的专栏
12-18 538
example.html                       -->                   水果   你喜欢的水果是？   你喜欢的水果是？     苹果   橘子   菠萝   香蕉   梨子        //查找节点  查找元素节点   /*  $(function(){ var $
jQuery(3-5)删除节点
蓝╭☆叶的专栏
12-20 535
删除节点.html                       -->               水果   你喜欢的水果是？     苹果   橘子   菠萝   香蕉   梨子       /*  $(function(){   $('ul li:eq(1)').remove();  // remove()获取 u
jQuery(3-1)DOM操作的分类
蓝╭☆叶的专栏
12-18 524
jQuery(3-10)css-DOM操作
蓝╭☆叶的专栏
12-28 491
css-DOM操作.html                       -->               //opacity 透明效果   $(function(){   $('#photo').css('opacity','0.5');   var $aa =   $('#photo').css('height');  //得到p元
jQuery(2-9)表单选择器(这章我偷下懒)
蓝╭☆叶的专栏
12-18 472
表单选择器.html                   -->
jQuery(2-7)子元素过滤选择器
蓝╭☆叶的专栏
12-18 429
基本选择器.html                       -->         div,span,p{ width: 170px; height:170px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-family: cursive;
"jQuery开发宝典：属性过滤选择器示例
总的来说，属性过滤选择器是jQuery中非常实用和强大的选择器之一，开发人员可以利用它们来精确地选择页面中的元素，并对它们进行各种操作。通过本文的示例和说明，读者可以更加深入地了解属性过滤选择器的用法和原理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值