jQuery主要功能简析

获取元素

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

$(document) 选择整个文档
$('#myId') 选择id为#id的网页元素
$('div.myClass') 选择class为myClass的选择器
$('input[name=mine]') 选择name属性等于mine的input元素

jQuery特有的表达式

$('a:firt') 选择网页第一个a元素
$('tr:odd') 选择表格的奇数行
$('#myForm :input')选择表单中的input元素
$('div:visible') 选择可见的div元素
$('div:gt(2)') 选择所有的div元素,除了前三个
$('div:animated') 选择当前处于动画状态的div的元素

链式操作

每一步的jQuery操作,返回的都是jQuery对象,所以可以连在一起

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

分解后

$('div') 找到div元素
      .find('h3') 选择其中的h3元素
      .eq(2) 选择第三个h3元素
      .html('h3') 将它的内容改成h3

jQuery提供了end(),可以后退一步

创建元素

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');

移动元素

$('div').insertAfter($('p')); 把div元素移动到p的后面
$('p').after($('div')); 在p元素的后面插入div元素

修改属性

attr() 设置或返回备选元素的属性值
removeAttr() 从每一个匹配的元素中删除一个属性
addClass() 为每个匹配的元素添加指定的类名。
removeClass() 从所有匹配的元素中删除全部或者指定的类
toggleClass() 如果存在(不存在)就删除(添加)一个类
html() 取得第一个匹配元素的html内容或设置html内容
text() 取得所有匹配元素的内容或设置text内容
val() 获得匹配元素的当前值
上一篇:Random color generator exercise


下一篇:003 Vue动画