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,也是有几个重载。

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

  • 相关阅读:
    SolarWinds Orion API 远程代码执行漏洞(CVE-2020-10148)
    Lanproxy 路径遍历漏洞 (CVE-2021-3019)
    公众号文章集合-2020整理回顾
    PHPMailer远程命令执行漏洞复现
    SaltStack Shell 注入 (CVE-2020-16846)漏洞
    (CVE-2020-7961)Liferay Portal RCE 反序列化命令执行漏洞
    (CVE-2020-17530)Struts2 S2-061 远程命令执行漏洞复现
    ora-01722 无效数字
    公开课平台推荐
    PL/SQL Developer如何导出数据成sql的insert语句
  • 原文地址:https://www.cnblogs.com/xyzabc0004/p/2426201.html
Copyright © 2011-2022 走看看