jQuery 基本使用

256 阅读2分钟

jQuery获取元素

  • $(document) //选择整个文档对象

  • $('#test') //选择ID为tes的网页元素

  • $('div.className') // 选择class为className的div元素

  • $('input[name=password]') // 选择name属性等于password的input元素

  • $('a:first') //选择网页中第一个a元素

  • $('tr:odd') //选择表格的奇数行

  • $('#myForm :input') // 选择表单中的input元素

  • $('div:visible') //选择可见的div元素

  • $('div:gt(2)') // 选择所有的div元素,除了前三个

  • $('div:animated') // 选择当前处于动画状态的div元素

  • $('div').next('p') //选择div元素后面的第一个p元素

  • $('div').parent() //选择div元素的父元素

  • $('div').closest('form') //选择离div最近的那个form父元素

  • $('div').children() //选择div的所有子元素

  • $('div').siblings() //选择div的同级元素

jQuery 的链式操作是怎样的

jQuery的链式操作如下:

  $('div') //找到div元素

   .find('h3') //选择其中的h3元素

   .eq(2) //选择第3个h3元素

   .html('Hello'); //将它的内容改为Hello

能够实现链式操作的原因是每一次对jQuery的调用,都会返回一个jQuery对象,所以每次使用一个方法后,后面可以直接.加上方法名

jQuery 如何创建元素

直接将想要创建的元素传给jQuery构造器就可以了,例如:

   $('<h2>Hello</h2>');

  $('<div id="test"> test </div>');

jQuery 如何移动元素

直接上例子

  • $('div').insertAfter($('p')); //把div移动到p元素后面

  • $('p').after($('div')); //把div移动到p元素后面

他们的效果都是把div移动到p元素后面,不同的地方是返回的元素,第一个方法返回div元素,第二个方法返回p元素

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

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

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

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

jQuery 如何修改元素的属性

以下函数在设计时,采用了将gettersetter结合的方式,若是传入参数,则为setter,无参调用,则为getter

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

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

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

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

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

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