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

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

原文地址:https://www.cnblogs.com/xyzabc0004/p/2426201.html