jQuery 的功能概述

730 阅读2分钟

1. jQuery 如何获取元素

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

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

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

  `$('h1').html('Hello');` //html()有参数Hello,表示对h1进行赋值
    `[.html()]`  取出或设置html内容

  `[.text()]`  取出或设置text内容

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

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

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

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

2. jQuery 的链式操作是怎样的

最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来:

$('div').find('h3').eq(2).html('Hello');

  • 分解开来,就是下面这样:
    $('div') //找到div元素

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

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

    .html('Hello'); //将它的内容改为Hello
  • jQuery还提供了[.end()]方法:
   $('div')

   .find('h3')

   .eq(2)

   .html('Hello')

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

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

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

3. jQuery 如何创建元素

  • 把新元素直接传入jQuery的构造函数就行:
    $('<p>Hello</p>');

  $('<li class="new">new list item</li>');

  $('ul').append('<li>list item</li>');

4. jQuery 如何移动元素

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

$('div').insertAfter($('p'));

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

$('p').after($('div'));

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

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

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

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

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

以上引自jQuery设计思想 - 阮一峰的网络日志 (ruanyifeng.com)

5. jQuery 如何修改元素的属性

  • jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写

  $(selector).attr(attribute) //attribute 规定要获取其值的属性。

  $(selector).attr(attribute,value)//attribute 规定属性的名称; value 规定属性的值。