Learning Notes

# jQuery基础

# 链式操作

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

$('div')          找到div元素
  .find('h3')     选择h3元素
  .eq(2)          选中第3个h3元素
  .html('hello')  将其内容改为hello

# 获取元素

$(document)     选择整个文档对象
$('#id')        id选择器
$('.class')     类选择器
$('element')    标签选择器

# 创建元素

把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>')

# 添加元素

$(".inner").append("<p>Test</p>")  在.inner尾部插入p标签

$('.inner').prepend('<p>Test</p>');   在.inner头部添加p标签

$('<p>Test</p>').appendTo('.inner');  把p标签插入到.inner尾部
	
$('<p>Test</p>').prependTo('.inner'); 把p标签插入到.inner头部

$( ".inner" ).before( "<p>Test</p>" );  在.inner前面插入元素p

$( ".inner" ).after( "<p>Test</p>" );   在.inner后面插入元素p

$( "<p>Test</p>" ).insertBefore(".inner");  把p插入到.inner之前

$( "<p>Test</p>" ).insertAfter( ".inner" ); 把元素p插入到.inner之后

# 删除元素

  • .remove() 将匹配元素集合从DOM中删除，同时移除元素上的事件及 jQuery 数据
  • .detach() 删除元素，但保存所有jQuery数据和被移走的元素相关联
  • .empty() 清空被选择元素内所有子元素（但是不删除该元素）
$("#div1").remove();   删除div1及其子元素
$('div').remove('.test');
$('body').empty();

# 查找元素

$('.test').next();   获取.test之后的同辈元素
$('.test').prev();  获取.test之前的同辈元素
$('li.third-item').siblings()   查找元素的兄弟元素

$('.test').nextAll();   获取.test元素所有后面的同辈元素
$('.test').prevAll();   获取.test元素所有前面的同辈元素

$('li.item-a').parent()     查找父元素
$('ul.level-2').children()  查找子元素
$('ul').find('.current');    查找符合ul里的.current

# 修改元素

$('div').html('123')    修改div内容为123
$('div').text('<p>This is a test.</p>')  操作DOM的innerText值

$('.box li').off('click')  移除事件处理函数

$( "p" ).addClass( "myClass yourClass" );  为元素添加class(追加)
$( "p" ).removeClass( "myClass yourClass" ); 移除class
$( "#mydiv" ).hasClass( "foo" )  检查是否包含class，返回true/false

← jQuery选择器 →