jQuery功能概述

125 阅读1分钟

1. jQuery如何获取元素

jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。

使用jQuery时,先将选择表达式放进构造函数jQuery()中。

选择表达式可以使用CSS选择器或者是jQuery特有的表达式。

例如:

CSS选择器:
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
jQuery选择器:
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('div:visible') //选择可见的div元素

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

在选择网页元素后,对其进行某种操作,然而这种操作可以像链条一样连接起来。例如:

$('#test').find('.child').addClass('red')

每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。分解上面的操作就是:

$('#test')//找到id为test的元素
.find('.child')//选择其中名为child的class属性
.addClass('red')//将red加入class属性中

3. jQuery 如何创建元素

把新元素直接传入jQuery的构造函数,就可以创建元素。例如:

$('<p>Hello</p>')

4. jQuery 如何移动元素

jQuery提供了两种方法来操作元素在网页中的位置,一种是直接移动选中元素,另一种是通过移动其他的元素,来达到移动选中元素的目的。

方法一示例:

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

方法二示例:

$('p').after($('div'))//把p元素加到div元素前

注意:第一种方法返回div元素,第二种方法返回p元素。简单的说就是移谁返回谁。

有4对移动元素的操作方法:

    .insertAfter()和.after():在现存元素的外部,从后面插入元素   .insertBefore()和.before():在现存元素的外部,从前面插入元素  .appendTo()和.append():在现存元素的内部,从后面插入元素  .prependTo()和.prepend():在现存元素的内部,从前面插入元素

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

操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。jQuery使用了重载的设计模式,可以使用同一个函数来完成取值和赋值,由参数是否存在决定。

$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值

常见的函数有:

   .html() 取出或设置html内容  .text() 取出或设置text内容  .attr() 取出或设置某个属性的值  .width() 取出或设置某个元素的宽度  .height() 取出或设置某个元素的高度  .val() 取出某个表单元素的值