jQuery学习笔记

元素控制相关

attributes和properties的区别

attributes 是 XML 结构中的属性节点概念范畴:

<body onload="prettyPrint()"></body>

上面的代码表示了 body 这个节点,有一个名为 onload 的 attributes 。

properties 则是对于 DOM 对象的,对象属性概念范畴。这一般就没有直观的表现,但是它总是可以被访问到的,比如:

$('body').get(0).tagName;
//BODY

虽然 attributes 与 properties 是不同的概念范畴,但是它们对于某些特殊的属性是有共同的访问属性名的,比如 id 。

类与属性控制

.addClass() .hasClass() .removeClass()
添加一个类,判断是否有指定类,删除类

$('body').addClass('test');
$('body').addClass(function(index, current){return current + 'new'});

$('body').removeClass('test');
$('body').removeClass(function(index, current){return current + ' ' + 'other'});

.toggleClass()
类的开关式转换,它的使用方法有多种:



$('img').toggleClass(); //对所有类的开关
$('img').toggleClass('test'); //对指定类的开关
$('img').toggleClass(isTrue); //根据isTrue判断所有类的开关
$('img').toggleClass('test', isTrue); //根据isTrue判断指定类的开关

//同 $('img').toggleClass('test') 只是类名由函数返回
$('img').toggleClass(function(index, class, isTrue){return 'name'});

//isTrue会作为函数的第三个参数传入
$('img').toggleClass(function(index, class, isTrue){return 'name'}, isTrue);

.attr()
获取或者设置一个属性值,它的使用方法有多种:

brush seller

$('#greatphoto').attr('alt'); //获取属性
$('#greatphoto').attr('alt', 'Beijing Brush Seller'); //设置属性

//同时设置多个属性
$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

//设置属性为函数返回值, 函数的上下文为当前元素
$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark';
});

.prop()
用法同 .attr() ,只是对象变成了 properties

.removeAttr() .removeProp()
删除属性

.val()
设置或获取元素的表单值,通常用于表单元素。



$('input').val();
$('input').val('other');
.html()

设置或获取元素的节点文件本值。

测试
$('div').html(); $('div').html('
测试
'); $('div').html(function(index, old){return old + '另外的内容'});

样式控制

.css()
获取或设置指定的 css 样式:

$('body').css('background-color');
$('body').css('background-color', 'red');
$('body').css('background-color', function(index, value){return value + '1'});
$('body').css({color: 'green', 'background-color': 'red'});

.width() .height()
获取或设置元素的宽和高

$('body').width();
$('body').width(50);
$('body').width(function(index, value){return value += 10});

.innerWidth() .innerHeight() .outerHeight() .outerWidth()
元素的其它尺寸值

.scrollLeft() .scrollTop()
获取或设置滚动条的位置

.offset() .position()
获取元素的坐标。 offset 是相对于 document , position 是相对于父级元素

结构控制

文本节点

.html() .text()
设置和获取节点的文值。设置时 .text() 会转义标签,获取时 .text() 会移除所有标签。

子节点

.append() .prepend()

Greetings

Hello
Goodbye
$('.inner').append('

Test

');

Greetings

Hello

Test

Goodbye

Test

参数可以有多种形式:

var $newdiv1 = $('
'), newdiv2 = document.createElement('div'), existingdiv1 = document.getElementById('foo'); $('body').append($newdiv1, [newdiv2, existingdiv1]);

兄弟节点

.after() .before()

Greetings

Hello
Goodbye
$('.inner').after('

Test

');

Greetings

Hello

Test

Goodbye

Test

父节点

.wrap() .wrapAll() .wrapInner()

Hello
Goodbye
$('.inner').wrap('
');
Hello
Goodbye
$('.inner').wrapAll('
');
Hello
Goodbye
$('.inner').wrapInner('
');
Hello
Goodbye

复制/删除/替换节点

.clone()
复制节点,可选参数表示是否处理已绑定的事件与数据

.clone(true)
处理当前节点的事件与数据
.clone(true, true)
处理当前节点及所有子节点的事件与数据

.detach()
暂时移除节点,之后可以再次恢复了指定位置。

.remove()
永久移除节点。

.empty()
清除一个节点的所有内部内容。

.unwrap()
移除节点的父节点。

上一篇: 下一篇: