zoukankan      html  css  js  c++  java
  • JQuery官方学习资料(译):操作元素

     

    • 获取和设置元素的信息
        有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性。JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置。
      • .html():获取或设置HTML的内容。
      • .text():获取或设置文本内容。
      • .attr():获取或设置指定属性的值。
      • .width():获取或设置选择器中第一个元素的宽度,值为整数,单位为像素点。
      • .height():获取或设置选择器中第一个元素的高度,值为整数,单位为像素点。
      • .position():获取选择器中第一个元素对象的位置信息,相对于其第一个定位的先祖,这是一个只读方法。
      • .val():获取或设置表单元素的值。
        需要注意的是,这样的改变可能会影响所有被选择的元素,如果只想改变其中的一个元素,那么你需要确认选择器是否只指定了你想要改变的那个元素。
    // 改变一个元素内的HTML
    $( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" );
    • 移动元素
        虽然有各种各样的方法可以移动DOM中的元素,但一般来说主要有两种方式。
      • 相对于其他元素来放置被选元素。
      • 相对于被选元素来放置其他元素。
        举例说明,JQuery提供了.insertAfter()和.after()两个方法。.insertAfter()方法将被选元素放置在作为方法参数的那个元素的后面。而.after()方法将作为方法参数的那个元素放置在被选元素的后面。还有类似的方法对,.insertBefore()和.before(), .appendTo()和 .append(),.prependTo()和.prepend()。
        使用哪类方法取决于被选中的元素是哪个,以及是否需要存储被添加到页面的元素的引用。如果你需要存储这个引用,那么你应该采取第一种方式,相对于其他元素来放置被选元素,它返回的元素是你放置的那个元素。
    // 使用不同的方法移动元素
    // 第一种方式
    var $li = $( "#myList li:first" ).appendTo( "#myList" );
    // 第二种方式
    $( "#myList" ).append( $( "#myList li:first" ) );
    • 克隆元素
        除了需要移动元素外,有时候拷贝元素也是需要的,拷贝元素我们可以使用.clone()方法。
    // 拷贝列表的第一个项到列表的末尾
    $( "#myList li:first" ).clone().appendTo( "#myList" );
        如果你需要拷贝相关的数据和事件,那么你需要传递true作为参数给.clone()方法。
    • 删除元素
        删除元素有两种方式,.remove()和.detach()。
        如果你想把元素从页面上永久的移除,那么使用.remove()方法,而且这个方法的返回值是被删除元素的选择器,这些被删除的元素将不再有相关的数据和事件。
        如果你需要数据和事件被保留,那么使用.detach()方法,这个方法返回的也是一个选择器,但是这个选择器保留了相关的数据和事件,删除之后你可以恢复这个被删除的选择器回到页面上去。
        如果你只想删除元素的内容,你可以使用.empty()方法来处理元素的内容。
    • 创建新元素
        JQuery提供了一个简单又优雅的方式来创建新元素,那就是使用$()方法。
    // 通过HTML字符串创建一个新元素。
    $( "<p>This is a new paragraph</p>" );
    $( "<li class="new">new list item</li>" );
    // 创建带有属性的新元素。
    $( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
    });
        需要注意的是属性对象在方法的第二个参数处,属性名称可以使用加引号的字符串也可以不加引号,一般来说属性的名称是不加引号的。
        当我们创建一个新的元素,它不会立即被添加到页面上,这有一些方法可以当元素被创建的时候将元素添加到页面上去。
    var $myNewElement = $( "<p>New element</p>" );
    $myNewElement.appendTo( "#content" );
    $myNewElement.insertAfter( "ul:last" ); //这将$myNewElement从#content中移除
    $( "ul" ).last().after( $myNewElement.clone() ); // 克隆一个新的元素,这样我们就有2个了
        被创建的元素并不需要保存在变量中,你可以直接在$()之后调用方法添加元素到页面上。但是大部分情况下你是需要这个被添加元素的引用的。
    // 这样创建元素你将无法获取这个元素的引用
    $( "ul" ).append( "<li>list item</li>" );
        这样添加新元素的语法是非常简单的,所以人们经常忘记反复这样的操作会对性能产生巨大的负面影响。如果你添加一些元素到相同的容器,你可以用一个字符串连接所有的HTML,然后一次添加到容器上,而不是一个个元素进行添加。
    var myItems = [];
    var $myList = $( "#myList" );
    for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>item " + i + "</li>" );
    }
    $myList.append( myItems.join( "" ) );
    • 操作属性
        JQuery的属性操作能力是很强的,除了基本的属性改变外,.attr()方法也允许更为复杂的操作。它可以设置一个明确的值或者设置一个函数的返回值,当使用函数时,函数有两个参数,第一个参数是被改变属性的元素的序号,第二个参数是被改变属性原本的值。
    // 操作一个属性
    $( "#myDiv a:first" ).attr( "href", "newDestination.html" );
    // 操作多个属性
    $( "#myDiv a:first" ).attr({
    href: "newDestination.html",
    rel: "super-special"
    });
    // 使用一个函数去确定一个属性的新值
    $( "#myDiv a:first" ).attr({
    rel: "super-special",
    href: function( idx, href ) {
    return "/new/" + href;
    }
    });
    $( "#myDiv a:first" ).attr( "href", function( idx, href ) {
    return "/new/" + href;
    });
  • 相关阅读:
    记录一次在 VirtualBox的添加共享windows文件后,发现没有共享文件的事
    linux 压缩解压缩命令
    关于erlang中的timer:tc/3
    python基础:while循环,for循环
    grep和正则表达式参数
    grep和正则表达式
    nginx反向代理三台web
    安装nginx包
    部署samba
    samba了解
  • 原文地址:https://www.cnblogs.com/liusuqi/p/3295850.html
Copyright © 2011-2022 走看看