简单学习jQuery的常用功能

91 阅读1分钟

1. jQuery 如何获取元素

在 $()的括号中的表达式可以是css选择器,比如:
$('#mytest') 选择了id为mytest的元素
$('.one')选择了class为one的元素
$('p')选择了所有p标签
$('#two,div')选择了id是two和标签为div的元素 包括css中的子代选择器兄弟选择器等等都jQuery都可以使用;

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

jQuery的经典设计思想就是链式操作,选择元素后可以对该元素进行一些列的操作,并且所有操作可以连接在一起以链条的形式写出来比如:

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

上述操作获取了div元素,并选择其中div为h3的标签,eq(2)表示选择了第三个元素(0代表第一个所以2就是第三个),并且将内容修改为"hello";每一步操作都返回一个jQuery对象,因此不同的操作可以连接在一起。 当然他还提供了end()方法,可以后退一步

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

3. jQuery 如何创建元素

常见的是直接把这个节点的结构给通过HTML标记字符串描述出来,通过()函数处理,()函数处理,("html结构")比如

$("<div></div>")

4. jQuery 如何移动元素

方法有两种,一种是直接移动该元素,另一种是移动其他元素使目标元素达到我们想要的位置。 使用.insertAfter();将div移动到p元素的后面

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

使用.after();把p元素加到div的前面;

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

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

jQuery的设计思想之一,使用同一个函数来实现取值和赋值,到底是取值还是赋值由函数参数决定;

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

常见的取值和赋值API还有:
text();读取或者设置text的内容
attr();读取或者设置某个属性的值
width();读取或者设置宽度
height();读取或者设置高度
val()取出某个表单元素的值