文档章节

jQuery 02 选择器

fokYaland
 fokYaland
发布于 2015/06/04 17:27
字数 1263
阅读 7
收藏 0
CSS 选择器
标签选择器 以文档元素作为选择器 td{
width:120px
}
ID选择器 以元素的ID作为选择器 #note{
width:120px
}
类选择器 以元素的class作为选择器 .dream{
}
群组选择器 多个元素 应用相同的样式 td,p,div,a{
}
后代选择器   #link a{
}
通配符选择器 所有元素 *{
}

<p class="demo">jQuery Demo</p>
     <script type="text/javascript">
          $( ".demo"). click(function(){  // 给class为demo 的元素添加行为
             alert("jQuery demo!");
          })
     </script>


判断元素是否存在应该使用
if( $("#tt").length >0){
     //doing
}

基本选择器
通过元素id,class和标签名查找元素。
#id 根据ID查找元素 返回单个元素 $('#test')
.class 根据class查找 元素集合
$(' .test')
element 根据标签
元素集合
$(' p')
* 所有元素
元素集合
$(' *')
selector1,selector2 多个选择器合并
元素集合
$(' div,span,p.myclass')

<script type="text/javascript">
  $(document).ready(function(){
       //选择 id为 one 的元素
        $('#btn1').click(function(){
               $('#one').css("background","#bfb");
       });
    
       //选择 class 为 mini 的所有元素
       $('#btn2').click(function(){
            $(' .mini').css("background","#bfa");
       });
       //选择 元素名是 div 的所有元素
       $('#btn3').click(function(){
            $(' div').css("background","#bfa");
       });
       //选择 所有的元素
       $('#btn4').click(function(){
            $(' *').css("background","#bfa");
       });
       //选择 所有的span元素和id为two的div元素
       $('#btn5').click(function(){
            $(' span,#two').css("background","#bfa");
       });    
  });
  </script>

层次选择器
可以获得 后代元素,子元素,相邻元素,同辈元素
$('body div') 获得body中的所有DIV元素
$('body > div')
获得body 下一级的子DIV元素
$('.one + div') 获得下一个同辈元素
$('#two ~ div') 选择 id为two的元素后面的所有div兄弟元素

 <script type="text/javascript">
  $(document).ready(function(){  
        //选择 body内的所有div元素.
      $('#btn1').click(function(){
              $('body div').css("background","#bbffaa");
       })
       //在body内的选择 元素名是div 的子元素.
       $('#btn2').click(function(){
              $('body > div').css("background","#bbffaa");
       })
       //选择 所有class为one 的下一个div元素.
       $('#btn3').click(function(){
              $('.one + div').css("background","#bbffaa");
       })
       //选择 id为two的元素后面的所有div兄弟元素.
       $('#btn4').click(function(){
              $('#two ~ div').css("background","#bbffaa");
       })
  });
  </script>

可以用   $('.one').next('div');  代替 $('.one + div'),用 $('.one').nextALL('div')代替 $('.one ~ div')          

过滤选择器,主要是通过特定的过滤规则来筛选出所需的DOM元素。
$('div:first') 选取所有div元素中的第1个div元素
$(' div:last')
选取所有div元素中的最后1个div元素
$('div:not(.one)') 选择class不为one的 所有div元素
$('div:even') 选择 索引值为偶数 的div元素
$('div:odd') 选择 索引值为奇数 的div元素
$('div:eq(3)') 选择 索引等于 3 的元素
$('div:gt(3)') 选择 索引大于 3 的元素
$('div:lt(3)') 选择 索引小于 3 的元素
$(':header') 选择 所有的标题元素.比如h1, h2, h3等等
$(':animated') 选择 当前正在执行动画的所有元素.
$(':focus') 选择 当前获取焦点的所有元素.
$('div:contains(di)') 选取含有文本"di"的div元素.
$('div:empty') 选取不包含子元素(或者文本元素)的div空元素.
$("div:has('.mini')") 选取含有class为mini元素 的div元素
$('div:parent') 选取含有子元素(或者文本元素)的div元素
$('div:hidden') 选取所有不可见的元素
$('div:visible') 选取所有可见的元素
$('div[title]') 选取含有 属性title 的div元素
$('div[title=test]') 选取 属性title值等于 test 的div元素
$('div[title!=test]') 选取 属性title值不等于 test 的div元素
$('div[title^=te]') 选取 属性title值 以 te 开始 的div元素
$('div[title$=est]') 选取 属性title值 以 est 结束 的div元素
$("div[title*=es]") 取 属性title值 含有 es  的div元素
$("div[id][title*=es]") 组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素.
$('div[title|="en"]') 选取 属性title等于en或以en为前缀(该字符串后跟一个连字符'-')的元素
$('div[title~="uk"]') 选取 属性title用空格分隔的值中包含字符uk的元素
$('div.one :nth-child(2)')
$(' div.one :nth-child(even)')
$(' div.one :nth-child(odd)')
选取每个父元素下的第2个子元素
$('div.one :first-child') 选取每个父元素下的第一个子元素
$('div.one :last-child') 选取每个父元素下的最后一个子元素
$('div.one :only-child') 如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$("#form1 input:enabled") 对表单内 可用input 赋值操作
$("#form1 input:disabled") 对表单内 不可用input 赋值操作.
$("input:checked") 选中的元素
$("select:selected")
选中的元素
$("#form1 :text") 选择表单中的单行文本框
$("#form1 :password") 密码框
$("#form1 :radio") 单选框
$("#form1 :checkbox") 多选框
$("#form1 :submit") 提交按钮
$("#form1 :image") 图像按钮
$("#form1 :reset") 重置按钮
$("#form1 :button") 所有按钮<input type=button />  和 <button ></button>都可以匹配
$("#form1 :file")  
$("#form1 :hidden") <input type="hidden" />和<div style="display:none">test</div>都可以匹配
$("form").submit(function () { return false; }); return false;不能提交

转义字符
               var $id_right_a  = $('#id \\.a');//jQuery对象,对特殊字符,我们转义一下
               var $id_right_b  = $('#id \\#b');//jQuery对象,对特殊字符,我们转义一下
               var $id_right_c  = $('#id \\[1 \\]');                //对特殊字符,我们转义一下


本文转载自:http://blog.csdn.net/yanliang1/article/details/9396645

fokYaland
粉丝 4
博文 68
码字总数 3062
作品 0
东城
私信 提问
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
jQuery 3教程(二):jQuery选择器

原文地址:jQuery 3教程(二):jQuery选择器 Introduction jQuery最方便的地方便是各种选择器。jQuery选择器完美兼容CSS 3选择器,甚至还有更强大的功能。 $ 在jQuery程序中,最常见的就是$符...

aqv
09/29
0
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
59
0
jQuery零基础入门——(二)Selector选择器

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎回到我们的jQuery零基础...

JandenMa
2018/07/01
67
0
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
2018/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
8分钟前
2
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
8分钟前
3
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
33分钟前
4
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
36分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部