zoukankan      html  css  js  c++  java
  • jQuery让页面生动起来(操作页面里面的元素)

    操作元素的属性,看下面的例子:  

    把每一个img的alt的值都改为abc

    下面是两代码,each里面的函数是遍历所选择的元素集,对每个元素做你想要的处理。

    一个代码是每一个元素的alt的值设置成abc,

    第二个代码是把取每个元素的alt的值,加到数组里面,可以视为对其(所选择的元素集)的自定义处理。

    1 <script type="text/javascript">
    2 $(document).ready(
    3 function(){
    4 $("img").each(
    5 function(){this.alt="abc";}
    6 );
    7 }
    8 );
    9 </script>
     1 <script type="text/javascript">
    2 $(document).ready(
    3 function(){
    4 var allAlts=new Array();
    5 $("img").each(
    6 function(){
    7 //this.alt="abc";
    8 allAlts.push(this.alt);
    9 }
    10 );
    11 alert(allAlts);
    12 alert($("img")[0].alt);
    13 }
    14 );
    15 </script>

    下面,再看对其特性的处理。

    1、 alert($("#def").attr("alt"));

      为取得元素的特性值,一般为取一个元素才有意义。

     2、$("img").attr('alt',function(index){return "这是第"+index+"个元素"});          

      对所选元素集添加特性。

     3、$("img").attr(

      {value:'',title:'please enter a value'}

      );对所选元素加一组特性。

    此可以看作为元素集attr的三个重载,对象都是元素集合,一个参数为取得特性的值,二个参数为添加元素集的特性值。第三个有{}为给元素集设定一组特性值。

    下面,再看对元素样式类的处理。

    1、$("button#abc").addClass("sss");

      給所选的元素集添加类   

    2、$("button#abc").removeClass("sss");

      给所选的元素集删除类   

    3、$("button#abc").toggleClass("sss"); 

      如果匹配元素集合中元素没有使用样式‘class’则对该元素加入样式‘class’;如果已经使用该样式,则从该元素中删除该样式。

    4、$("p:first").hasClass("srupriseMe")

      $("p:first").is(".surpriseMe")

      此两写法结果完全一样。

    下面,看看对样式的处理:

    1、$("div.sss").css("width",function(){return $(this).width()+200+"px"});

      设置有sss类的元素,在原来的宽上面+200px

    2、alert($("div.sss").css("width"));

      取有sss样式的div元素的样式,中with的值

    3、$("div.sss").css("width","100px");

      $("div.sss").width("100px");

      此两写法一样,对宽高都适用。

    对元素内容的处理

    1、alert($("div#display").html());

    2、$("div#display").html("<a>bbbb</a>");

    3、alert($("div#display").text());

    4、$("div#display").text("ccccc");

    5、$("div#display").append("<img width='50' id='def' alt='aaaa' height='50' />");

      追加

    6、("div#display").appendTo($("div#display2"));

      移动

    7、remove()

    8、empty()

    对表单的处理

    1、val()

      取值  

    2、val(value)

      设置

     这里,

    对元素特性的操作用一个函数,attr,有几个重载。

    对元素样式的操作用一个函数,css,有几个重载

     对元素html的操作用一个函数,html,有几个重载

     对元素text的操作用一个函数,text,有几个重载

    对表单的值的操作,有val,也是有几个重载。

    另加上一些别的方法,这样,就基本上有了解。

  • 相关阅读:
    SCI写作经典替换词,瞬间高大上!(转)
    最佳化常用测试函数 Optimization Test functions
    算法复杂度速查表
    VS 代码行统计
    CPLEX IDE 菜单栏语言设置( 中文 英文 韩文 等多国语言 设置)
    如何从PDF文件中提取矢量图
    Matlab无法打开M文件的错误( Undefined function or method 'uiopen' for input arguments of type 'char)
    visual studio 资源视图 空白 解决方案
    MFC DialogBar 按钮灰色不响应
    嗨翻C语言笔记(二)
  • 原文地址:https://www.cnblogs.com/xyzabc0004/p/2426201.html
Copyright © 2011-2022 走看看