阅读 60

jQuery 设计思想

1. 选择网页元素

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

$(document) //选择整个文档对象
$('#box') //选择 id 为 box 的网页元素
$('div.myClass') //选择 class 为 myClass 的 div 元素
$('input[name=first]') //选择 name 属性等于 first 的 inpu 元素
复制代码

可以看到,jQuery 中选择元素只需要在$()里放入一个 CSS 选择器,比 JavaScript 原生的 DOM 操作简单许多。

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
复制代码

jQuery 还提供了一些特有的表达式。

2. jQuery 的链式操作

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

$('.box').find('.child').addClass('red')
复制代码

链式操作的原理在于每一步的 jQuery 操作,返回的都是一个 jQuery 对象,所以不同操作可以连在一起。

3. jQuery 如何创建元素

$('body') //获取 document.body
$('body').append('<div>1</div>') //添加小儿子
$('body').prepend(div或$div) //添加大儿子
复制代码

4. jQuery 如何移动元素

$('div').insertAfter($('p'));
$('p').after($('div'));
复制代码

第一种方法返回 div 元素,第二章方法返回 p 元素。

jQuery 提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。

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

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

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

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

$(div).attr('title',?)
$(div).css({color:'red'})
$(div).addClass('blue')
$(div).removeClass('blue')
复制代码
文章分类
前端
文章标签