• 跟着Jquery API学Jquery之一 选择器


    Jquery 选择器是最基本的操作了,当我们用原生的javascript的时候,我们为了选择一个对象不得不花费九头二虎之力,

    有了Jquery的选择器,吃饭饭饭香,身体倍棒……

    1.基本

        我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法

    css样式也有几种情况:1.类样式 2.id样式 3.标签样式,

    1. 如果有一个aa的类 ,那么我们定义aa的样式就要写成  .aa{}
    2. 如果有一个bb的id,那么我们定义bb的样式就要写成 #bb{}
    3. 如果有标签<div></div>,那么我们定义的样式就写成 div{}
    4. 如果我们要定义所有的标签样式,那我们就写成 *{} (当然这样简写不太好)
    5. 如果我们要定义多个标签之类的就用分号来分开 比如 .aa,#bb,div{} 就定义了 class为aa,id为bb,标签为div的样式了。

    我们看到上面5个如果 ,在和jquery的5个基本的选择器对比一下

    1. 如果我们要选择一个aa的类就写成 $(“.aa”)
    2. 如果我们要选择一个bb的id就写成$(“#bb”)
    3. 如果我们要选择div的标签就写成$(“div”)
    4. 如果我们要选择所有就写成 $(“*”)
    5. 如果我们要选择多个对象就写成 $ (“.aa,#bb,div”)

     对比一下,发现基本的选择器完全是按在css的语法在操作,是不是很容易呢

    2层次

      我们现在知道了上面5个选择器的写法之后,现在我们来考虑如果对层次做选择器,

    先想一下什么是层次,其实说的就是 HTML的DOM结构 一层一层的,或者说XML的结构层次

      那我们就打开jquery的Api ,发现有4个关于层次的选择器。

     归纳一下就是  a空格b,a>b ,a+b,a~b 当然我这里只是为了少打几个字而已,

      比如有如下的一个结构

    <div>
    <div class="bb">

    <span>1<span><span>2<span>
    </div>

    <span>3<span>

    <div class=”cc” ></div>

    <span>4<span>

    </div>

    1. 我们现在想选择id为aa节点下所有的span节点 ,就用 $(“#aa span”)
    2. 我们现在想选择id为aa节点下第一层的span 就是span中文本为 3,4的两个,就用 $(“#aa >span”)
    3. 我们现在想得到跟在class为bb后的那个span 就是span中文本为3的那个,就用$(“.bb+span”)
    4. 现在我们想得到class为bb后所有的span 就用$(“.bb~span”)

    总结一下:第一个的写法还是css样式的写法一样 用空格表示节点下的元素

              第二个用>来表示子节点,和空格不同的是它只作用在第一层

              第三个第四个都是用来表示跟随节点,只不过不同的是用+号表示紧接着的用~表示所有跟随的 我们是需要记住 (空格 > + ~ )四个符号就可以了

    3简单

      我们知道了基本的选择器和层次的选择器,有时候我们选择出的是多个比如

    <ul>

    <li id=’aa’>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    </ul>


          我们想得到ul li的第一个(first) ,最后一个(last),基数行(odd),偶数行(even)匹配第三个(eq(2)),匹配大于2行(gt(1)),匹配小于第三行(lt(2)),这里说了7个那么我们要怎么来写这个选择器呢,比如匹配第一个$(“ul li:first”) ,匹配第三个$(“ul li:eq(2)”)  ,其他的就不写了

    这里我们想一下css中 a链接的几种样式的的写法 a:hover a:link ……是不是一样呢

          好了 这里我们看了7种,在看看api 还有3种是什么呢,

    1 :not 去除所有与给定选择器匹配的元素 语法一样 $(“ul li:not(#aa)”) 意思是去掉在ul li里面的含有id为aa的元素元素 我们用$(“ul li”)能够得到4个li 用      $(“ul li:not(#aa)”)就去掉了第一个li 只得到了三个

    2:header 只是用来选择h1 h2 h3 ……这样的标题

    3:animated匹配执行动画的元素

    还是总结一下,上面的这几个其实就是对已经选择出来的在一次的做筛选。建立在基础和层次上面。

    4 文本 可见性

     继续往下看api,文本中有4个函数,当然功能还是对已经选择出来的内容做再次的筛选

     上面是对节点的筛选,现在我们要对内容筛选

    1 <div><a>xxiu</a> </div>
    2  <div>xxiu zhang </div>
    3  <div>zhang </div>
    4  <div></div>
    5  
    1. 包含指定文本 $("div:contains(xxiu)") 我们希望我们所选择的div的文本中含有xxiu这个字符串
    2. 匹配空文本  $("div:empty") 第四个div节点下什么都没有,就匹配它了
    3. 匹配含有某个节点的元素 匹配含有a节点的div $(“div:has(a)”)
    4. 匹配不为空文本的和2刚好相反 $(“div:parent”) 就匹配了前三个div

     总结一下 文本匹配主要是做了 文本(1)和节点匹配(3) ,和匹配无文本或节点(2) 匹配有文本节点(4),两句话:有没有文本或节点,有什么文本和节点

         然后我们在看一下可见性,可见性很容易理解就两种情况 可见:hidden选择可见节点或不可见:visible选择不可见节点,没什么好说的

    5 属性选择器

      我们先看看最基本的属性选择器

    <div id=”aa” name=”zhang”>zhang </div>

    <div name=”zhangxxiu”>asdf</div>

    <div id=”bb” name=”xxiu”>xxiu </div>

          如上面的节点,我们想选择含有id的节点,我们如果用以前的方法要怎么做呢。

    用多选择方式 $(“#aa,#bb”) 得到了我们想要的,但是如果有N个,那不是要跟很长吗,我们都是很懒的,于是就有了属性选择器  $(“div[id]”)就得到了我们想要的结果,对name做选择$(“div[name]”) 但是我们只想得到name为xxiu的 那我们就用$(“div[name =’zhang’]”)

    得到不为zhang的$(“div[name !=’zhang’]”),得到以zh开始的$(“div[name ^=’zh’]”)

    以xxiu结尾的$(“div[name $=’zhang’]”),包含ang的$(“div[name *=’ang’]”)

    或者是有id且包含xxiu的$(“div[id][name *=’xxiu’]”)

          好,看了上面一对东西,肯定是有点晕了,总结一下

    1 有什么[id] 等于什么[id=’aa’] 不等于什么[id!=’aa’]

    2  以什么开始 ^= 以什么结束$= 匹配什么 *=  (完全是正则表达式的语法吗)

    3 多属性选择  $(“div[id][name *=’xxiu’]”)

    6 子元素

       1匹配子元素中的第一个$("ul li:first-child")  最后一个$("ul li:last-child")

       2 匹配在子元素中是唯一的$("ul li:only-child")

       3匹配对于的元素$("ul li:nth-child(2)") 和$(“ul li:eq(1)”)一样,前者是从1开始计数,后者是从0开始计数

    7表单

      看看就知道是input中几种表单 $(“:text”) 得到文本表单 $(“:checkbox”) 得到复选表单等等 看看API就知道是怎么个回事了

      我们用前面的选择方式 可以这样写$(“input[type=’text’]”) 但是少打几个字总比多大几个要好,$(“:text”)这样写是不是清爽的多呢

    8 表单属性

      1 可用 enabled和不可用 disabled

    找出

      2 被选中checked 和选择selected

    好到这里 所有的API都过了一遍,对选择器基本上就差不多了,差的就是自己去写几句代码玩玩。本文中没有代码,只是对API归纳一下,如果要看代码,看Jquery文档就可以了

  • 相关阅读:
    gnats配置文件
    在Mac中安装python,配置python环境
    利用git bash和git gui向git远程仓库提交文件
    os模块
    django中的locale()函数
    django配置静态文件
    sso单点登录
    django get_object_or_404
    关于token
    Django的CSRF机制
  • 原文地址:https://www.cnblogs.com/ac1985482/p/1705959.html
Copyright © 2020-2023  润新知