jQuery设计思想完整篇

2020-05-23 06:17:23易采站长站整理


   .end() //退回到选中所有的h3元素的那一步


   .eq(0) //选中第一个h3元素


   .html(‘World’); //将它的内容改为World


四、元素的操作:取值和赋值


操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。


jQuery使用同一个函数,来完成取值(getter)和赋值(setter)。到底是取值还是赋值,由函数的参数决定。



  $(‘h1’).html(); //html()没有参数,表示取出h1的值


  $(‘h1’).html(‘Hello’); //html()有参数Hello,表示对h1进行赋值


常见的取值和赋值函数如下:



  .html() 取出或设置html内容


  .text() 取出或设置text内容


  .attr() 取出或设置某个属性的值


  .width() 取出或设置某个元素的宽度


  .height() 取出或设置某个元素的高度


  .val() 取出某个表单元素的值


需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。


五、元素的操作:移动


如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。


假定我们选中了一个div元素,需要把它移动到p元素后面。


第一种方法是使用.insertAfter(),把div元素移动p元素后面:



  $(‘div’).insertAfter(‘p’);


第二种方法是使用.after(),把p元素加到div元素前面:



  $(‘p’).after(‘div’);


表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。


使用这种模式的操作方法,一共有四对:



  .insertAfter()和.after():在现存元素的外部,从后面插入元素


  .insertBefore()和.before():在现存元素的外部,从前面插入元素


  .appendTo()和.append():在现存元素的内部,从后面插入元素


  .prependTo()和.prepend():在现存元素的内部,从前面插入元素


六、元素的操作:复制、删除和创建


复制元素使用.clone()。