• jQueryInAction Reading Note 3.


    属性和特性

    操作元素属性

    jQuery没有用于获取或者修改元素属性的命令。需要利用javascript,首先需要做的就是获得元素的引用。

    each(function)

      对包装集中的各个元素,进行function操作,function有默认的参数为当前元素的位置,function具有当前对象this的引用。

    $("img").each(function(n){
        this.alt = "this is " + n+1 + "th img, id is " + this.id;
    });

    获取元素特性

    attr(name)

      返回当前包装集中第一个元素的name属性的值,如果没有设定该属性返回值为undefined。其中name不区分大小写

    $('div').attr("name")

    this.id vs. $('#id').attr('id')

    this.id 返回值为DOM中的值,如果没有设定id,那么id为空"";

    $('#id').attr('id'),它的返回值为html中指定的id的值,如果没有指定的话,返回值为undefined。

    属性和特性的区别

    属性是与生俱来的,即使用户没有设定值他也是有默认值的,能够通过javascript直接改变或者获取;

    特性是用户设定的,标准的特性能够通过javascript获取,非标准的只能通过attr(name)来获取。

     

    设置元素特性

    attr(name, value)

      这个方法的作用是把value的值设定

      name跟上面一样;

      value可以是一个字符串,这很简单

      value可以是一个函数,这能够理解,就是把返回值作为值

    attr(attributes)

      attributes是一个对象,而这个对象是一个属性<->值所组成的对象,如{id:"some", value:"0"}。

    以上两个方法会把包装集中所有的元素的属性都进行修改。

    IE中input元素的name属性是不能够进行修改的,如果想要达到相同的效果的话,需要移除原来的input,再追加一个新的input。

    删除特性

    removeAttr(name)

      移除包装集元素中的name特性。特性是能够被删除的,但是属性还是存在的,只不过值发生变化了。

    元素样式修改

    元素样式,属性为className,特性为class。

    对它的修改或者操作不使用className属性或者attr(name)命令,jQuery提供了更加优雅的方式。

    追加样式

    addClass(names)

      给所有的包装集元素追加names样式类。

      names可以是一个classs样式,也可以是以空格分隔的多个class样式。

    删除样式

    removeClass(names)

      把指定的样式从包装集元素的样式中移除。

      names可以是一个classs样式,也可以是以空格分隔的多个class样式。

    样式更迭

    toggleClass(name)

      对于包装集元素,如果有name指定的样式类,那么删除这个样式类,如果没有这个样式类的话,追加这个样式类。

            function swap() {
                $('tr').toggleClass("bg-blue");
            }

    直接操作css

    css(name, value)

    css(properties)

      这两个跟attr很像,相当直接了。

    css(name)

      返回包装集中第一个元素的css中name属性的值。

    width(value) / width

    height(value) / height

    用来设定和获取元素的高度或高度,单位为px

     

    hasClass(name)

    name是一个样式类的名称,不带"."。

     is(selector) vs. hasClass(name)

    他俩在样式判断这方面可以替换,只不过is的参数是一个jQuery选择器,而hasClass的参数是一个样式类;

    selector的基本样式为:.className

    name的基本样式为className

     

    操作HTML

    html()  // 获取包装集第一个元素的html

    html(text)  // 设定包装集元素的html

    text()  // 获取包装集里元素的所有文本(连不连接起来,不知道。。。)

    text(content)  // 设定包装集元素的内容,会把<翻译成&lt;。。。

    append(content)

      content可以是html片段或者是元素(需要用$("")选择出来,,,)

      会把content追加到包装集元素内,所有的既有元素之后。

      $('table').append("<h1>some</h1>");  // 生成的h1会存在于table里面,这里需要注意

    appendTo(target)

      target是一个jQuery选择器,或DOM元素

      该方法会把包装集里的所有元素追加到target获得的所有的元素内,既有元素之后。

    $("source selector").appendTo("target selector")

    如果target有一个的话,那么source会被移动;

    如果target有多个的话,那么source会被复制。

    与append和appendTo相似的有

    prepend和prependTo

      在目标元素内,所有元素之前插入;

    before和insertBefore

      在目标元素之外,前面插入;

    after和insertAfter

      在目标元素值外,后面插入。

    A.append(B), A.prepend(B), A.before(B), A.after(B) : 在A中处理B,A是目标,B是处理对象;

    A.appendTo(B), A.prependTo(B), A.innertBefore(B), A.innertAfter(B): 把A处理到B中,A是处理对象,B是目标。

    包裹元素

    实在不知道这个东西的用途。。。

      ...可以实现全文搜索,将搜索结果用某种特殊的样式表现出来。。。

    wrap(wrapper)

      wrapper是包装器,用来包装包装集元素的

      包装集中的每一个元素都会被包装器包装

    wrapAll(wrapper)

      包装集中的每一个元素都会被包装在一个包装器中

    wrapInner(wrapper)

      把包装集中的每一个元素的内容用包装器包装起来

    <ul>
      <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
    </ul>
    
    $('li')wrap("<div></div>")
    -----------------------------------------
    <ul>
      <div><li title="苹果">苹果</li></div>
      <div><li title="橘子">橘子</li></div>
      <div><li title="菠萝">菠萝</li></div>
    </ul>
    
    $('li')wrapAll("<div></div>")
    -----------------------------------------
    <ul>
      <div>
        <li title="苹果">苹果</li>
        <li title="橘子">橘子</li>
        <li title="菠萝">菠萝</li>
      </div>
    </ul>
    
    $('li')wrapInner("<div></div>")
    -----------------------------------------
    <ul>
        <li title="苹果"><div>苹果</div></li>
        <li title="橘子"><div>橘子</div></li>
        <li title="菠萝"><div>菠萝</div></li>
    </ul>

    删除元素

    remove()

      将DOM中的包装集元素删除

      这个方法仍然对包装集元素具有引用,这些元素可以进行其它操作,如insertAfter等。

      $("div.elementToReplace").after("<p>New Element!</p>").remove();// 新建的p,放到div.elementToReplace后,然后把div.elementToReplace删除;

      $("div.elementToReplace").remove().after("<p>New Element!</p>");// 先把div.elementToReplace删除了,又把它放到了新建的p之后。。。

    empty()

      将包装集元素的内部节点都删除

    克隆元素

    clone(copyHandlers)

      将包装集中的元素进行克隆,进而进行其它的操作。

      copyHandlers是一个boolean型的值,是否将节点上的事件一起克隆,一起克隆的话,true,反之,false。

    表单元素

    val()

      获取包装集中第一个元素的value的值,注意,如果第一个元素不存在value属性的话,会抛出javascript错误。

      对radio不友好,因为它总会获得第一个radio的value值,但是可以这么获取:$('input[type=radio, name=some]:checked').val();

      如果radis一个也没有选择的话,上述代码返回值为undefined。

      

    val(value)

      把value的值设定给包装集中的每一个元素,需要注意!!!

      设置的貌似只限于输入型的

    val(values)

      values是一个数组,数组中提供多个值[a, b, c]

      这个方法会作用于各种类型的input,select等。但是结果挺乱的

    输入型的input:会把值a, b, c输入到文本框内

    select的话,会把value相匹配的选项选中

    radio的话,没有找到什么规律,不敢乱讲

    checkbox的话,会把value相匹配的选项选中

  • 相关阅读:
    Cesium原理篇:4Web Workers剖析(2)
    Cesium原理篇:4Web Workers剖析
    Cesium原理篇:3最长的一帧之地形(1)
    Cesium原理篇:2最长的一帧之网格划分
    Cesium原理篇:1最长的一帧之渲染调度
    CSS3火焰文字特效制作教程
    一款非常棒的纯CSS3 3D菜单演示及制作教程
    jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程
    CSS3 3D立方体翻转菜单实现教程
    强大!HTML5 3D美女图片旋转实现教程
  • 原文地址:https://www.cnblogs.com/voctrals/p/3872100.html
Copyright © 2020-2023  润新知