zoukankan      html  css  js  c++  java
  • jQuery的学习笔记4

    JQuery学习笔记3

    2.9属性选择器

    属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素。属性选择器一般都以中括号作为起止分界符

    它的形式如下:

    [attribute]

    [attribute=value]

    [attribute!=value]

    [attribute^=value]作用:匹配给定的属性是以某些值开始的元素

    [attribute*=value]作用:匹配给定的属性是以包含某些值的元素

    [attribute$=value]作用:匹配给定的属性是以某些值结束的元素

    2.10JQuery选择器优化

    遵从以下的几个原则:
    1.多用ID选择器

    2.少用class选择器

    3.多用父子关系少用嵌套关系

    4.缓存JQuery对象

    Chapter three使用过滤器

    3.1过滤

    过滤的方法:
    类过滤:
    语法结构:
    hasClass(classname);

    作用:该方法用于判断操作,判断当前的JQuery对象是否包含指定的类名,如果包含就返回true,否则就返回false,因此它的返回值是一个布尔值

    下标过滤:

    语法结构:
    eq(index)

    作用:使用下标过滤就可以精确选取出JQuery对象中指定下标的元素

    参数index是由0开始的,用于指定元素在JQuery对象中的下标位置

    表达式过滤

    语法结构:
    1.filter(字符串/函数)

    该方法还可以带多个表达式,表达式之间通过逗号进行分割,这样就可以过滤更多的符合不同条件的元素。

    1. has(字符串/元素)

    作用:专门用来保留包含特定后代的元素,去掉那些不含有特定后代的元素。

    判断:
    语法结构:

    Is(字符串/元素)

    作用:用来检测JQuery对象中是否包含特定符合条件的元素

    3,映射

    语法结构:
    map(回调函数)

    作用:通过映射关系,把JQuery对象中每一个元素映射到一个数组之中,也就是说将一组元素转换成其他数组。

    4.清洗

    语法结构:not(expr)

    作用:能够从jquery对象中删除符合条件的元素

    5.截取

    语法结构:

    Slice(start,【end】)

    start和end都是整数,前者的作用是用来表示开始选取子集的位置,第一个元素是0,如果该参数是负数,表示从尾部开始选取,end是可选的,如果不定义的话就表示到子集的末尾,如果指定的话就要注意:它不包含所指定的那一位。

    3.2查找

    向下查找后代元素

    1.children()

    语法结构:
    children(【expr】)

    作用:查找当前元素的所有或者部分子元素

    2.contents()

    语法结构:

    Contents()

    注意:他不能够加表达式

    作用:和前者的作用差不多,区别在于他不能带参数,另外,不仅可以查找所有子元素还可以查找文本节点和注释节点

    3.find(expr)

    作用:能够查找所有的后代元素,而children()只能查找子元素,所以他的能力比它强;但是他的能力会比contents()弱一点,因为他不能查找文本节点和注释节点

    向上查找祖先元素

    1.parents()

    语法结构:

    Parents([expr])

    作用:查找所有匹配元素的祖先元素。如果省略了参数的话就会查找所有元素的祖先元素

    2.parent()

    语法结构:

    Parent([expr])

    作用:取得一个包含所有匹配元素的唯一的父元素

    3.parentUntil()

    语法结构:
    parentUntil([selector])

    作用:查找指定范围内的所有祖先元素,相当于在parents()所找的所有祖先元素截取一部分

    4.offsetparent()

    作用:能够定位到当前元素的第一个父元素

    5.closeset()

    作用:用来查找指定的父元素

    向上查找兄弟元素

    1.prev()

    语法结构:
    prev([expr])

    作用:匹配上一个相邻的元素

    2.prevall()

    语法结构:
    prev([expr])

    作用:匹配上面所有的同辈的子元素

    3.prevuntil()

    语法结构:

    Prevuntil([expr])

    作用:介于prev和prevall()之间,作用是用来选择指定范围之内的所有的同辈的子元素

    向下查找兄弟元素

    1.next()

    语法结构:
    next([expr])

    作用:只能匹配下一个相邻的元素,和prev刚好相反

    2.nextall()

    语法结构:

    Nextall([expr])

    作用:能够匹配下面所有的同辈的元素

    3.nextuntil()

    语法结构:

    Nextuntil([expr])

    作用:能够在指定的范围之内查找所有的同辈元素

    查找兄弟元素

    1.sibling()

    语法结构:

    Sibling([expr])

    作用:能够查找所有同辈的元素,不管是在下面还是上面的

    添加查找对象

    1.add(expr,[context])

    作用:向查找的结果添加新的查找内容

    3.3串联
    addself()

    作用:把前面的两个的JQuery对象链起来,变成一个对象,这时候设置的属性就能够够前面两者同时起作用,起到绑定的作用

    End()

    作用:返回前一个JQuery对象

    第四章 DOM操作

    4.1创建节点

    创建元素

    语法结构:
    document.creatElement(name)

    作用:
    创建了指定的对象,并返回新创建的元素对象,但是返回的对象只对js的上下文有效,要想让他能够在页面之中显示出来还需要调用element对象

    代码如下:
    <script>

    Window.Onload=function(){

    Var div=document.creatElement("div");

    Document.Body.Appendchild(div)

    </script>

    输入文本

    语法结构:
    var text=document.Create TextNode("teXt")

    注意:text不能单独存在,必须要包含在元素节点里面

    设置属性

    E.Setattribute(name,value)

    4.2插入内容

    内部插入

    1.Append();

    语法结构:
    append(content)

    Append(function(index,html))

    作用:讲参数指定的元素插入到指定节点内的尾部

    注意:
    append()不仅能够接收HTML语句还能够接收JQuery对象,但是这个时候要注意的是它不能形成新的jquery对象,只能把原来的jquery对象移动位置,这样他原来的位置的内容就会被删除

    2.Appendto()

    作用:他和append()唯一的不同之处就在于他的容器和添加者的位置的相反了,appendto()括号内容的指的是容器,append()括号内容的指的是添加者

    3.prepend()

    语法结构:
    prepand(content)

    Prepand(function(index,html))

    作用:能够把参数指定的内容插入到节点的最前面

    注意:append()一样,prepand()同样的有相对应的preapandto()用法和前者类似

    外部插入

    1.After()

     语法结构:
      after(content)

    After(function(index,HTML))

    作用:在每个匹配的元素后面插入内容

    2.Before()

     语法结构:

    Before(content)

    Before(function(index,html))

    作用:在每个匹配的元素前面插入内容

    3.insertAfter()

    和after的区别只在于主语的不一样

    4.insertBefore()

     和before的区别只在于主语的不一样

    4,3删除内容

    1.移出

     语法结构:
    remove([selector])

    作用:用来删除指定节点和他包含的子节点,另外更重要的是它能够同时移出元素内部的一切,包括绑定的事件和jquery数据

    2.清空

     语法结构:
      empty()

      作用:清空元素包含的内容,他和remove的区别在于remove能够把这个元素删除(顺便把内容删除),而empty只能够把内容清除并不能删除这个元素

    3.分离

     语法结构:

     Detach([expr])

    作用:将需要移出的元素从dom中过滤出来,和remove()的区别在于detach()能够保留所有的jquery数据,这样就能实现移走一个事件之后又能够把它移回来。

  • 相关阅读:
    MKMapVIew学习系列2 在地图上绘制出你运行的轨迹
    WPF SDK研究 Intro(6) WordGame1
    WPF SDK研究 Intro(3) QuickStart3
    WPF SDK研究 Layout(1) Grid
    WPF SDK研究 目录 前言
    WPF SDK研究 Intro(7) WordGame2
    WPF SDK研究 Layout(2) GridComplex
    对vs2005创建的WPF模板分析
    WPF SDK研究 Intro(4) QuickStart4
    《Programming WPF》翻译 第6章 资源
  • 原文地址:https://www.cnblogs.com/whatyouknow123/p/4932006.html
Copyright © 2011-2022 走看看