//jQuery封装了自己的js方法，因此掩盖了js带来的兼容问题
var $div = $('#imooc');
$div.html('hello,bitch!').css('color','red');
//.get(index)方法可以将jQuery对象转化为DOM对象
var $p = $('p');
$p.get(1).style.color = 'red';
//$()操作符对DOM对象使用时可以将DOM对象转化为jQuery对象
var p = document.getElementsByTagName('p');
var $p = $(p);
$p.last().html('w qu bu qu !').css('color','#ddd');
//常见的层级选择器的使用
$('body > #imooc').html("I am body's son");
$('pre sub');
$(' #imooc + p').html("o sb");
$('.i1 ~ p').html("e sb");
//常见的筛选选择器的使用
$(':first'); //$('body:first');
$(':last');
$(':not(selector)');
$(':eq(index)');
$(':gt(index)');
$(':lt(index)');
$(':even');
$(':odd');
$(':header');
$(':lang(language)');
$(':root');
$(':animated');
//内容筛选选择器
$(":contains(text)");
$(':parent');
$(':empty');
$(":has(selector)")
//可见性筛选器
$(":visible");
$(":hidden");
//子元素筛选选择器
$(":first-child");
$(":last-child");
$(":only-child");
//表单元素选择器
$(':input')
$(':text')
$(':radio')
$(':checkbox')
$(':button')
$(':password')
$(':image')
$(':reset')
//表单对象属性筛选器
$(':checked')
$(':selected')
$(':enabled')
$(':disabled')
//this选择器
$('p.i1').click(function() { //p.i1注意这种选择方式
var $this = $(this);
$this.css('color','#ddd');
})
//.attr()和.removeAttr()
$('.i1').attr('class');
$('.i1').attr('title','p');
$('.i1').attr({'title':'p','name':'Eric'});
//.attr的函数方法，第一个参数书要操作的属性，第二个参数是回调函数
//回调函数接受两个参数，第一个是选择器的索引，第二个是索引对应的属性值。
$('p').attr('class',function(m,cla){
// alert(cla);
switch(m) {
case 0 :
return 'a';
break;
case 1:
return 'b';
break;
case 2:
return 'c';
}
})
//.html()和.text()
$('.i1').html();
$('.i1').html('w qu ni nainai');
$('p').html(function(index,oldHtml) {
switch(index) {
case 0:
return 'w qu ni baba';
break;
case 1:
return 'w qu ni yeye';
break;
case 2:
return "w qu ni da yi ma"
}
})
//.text()方法和html（）类似三种用法，但是只对文本内容处理，html是对整个html节点处理。
//.val()处理表单元素的value值，同样三种用法。
//.addClass()和.removeClass()
$('p').addClass(function( index,currentClass) {
switch(index) {
case 0:
return 'i9';
break;
case 1:
return 'i2';
break;
case 2:
return "i3"
}
});
$('.i9').addClass('i2');
//.toggleClass()切换样式
//.css()设置样式
//元素的数据存储
//1.静态方法
$('.i2').click(function() {
var ele = $(this);
$.data(ele,'a','a is babb');
var reset = $.data(ele,'a');
ele.text(reset);
});
$('.i3').click(function() {
var ele = $(this);
ele.data('b','b is your baba');
var reset = ele.data('b');
ele.html(reset);
})
//jQuery创建节点的方法
$('body').on('click',function() {
var ele = $('<div class="i5"> 我是jQuery创建的新节点</div>');
$(this).append(ele);
})
//.append()和.appendTo()内部尾部添加节点
//.prepend() .prependTo()内部首部添加节点
//.before()和.after()外部添加节点
//.insertBefore() .insertAfter() 与之前两个方法功能相同，单数相反。
//.empty()清除元素的子节点，但保留自身标记。
//.remove()会销毁绑定的事件，从而避免内存泄漏
//.remove()的有参用法可以进一步筛选。
// $('p').filter(":contains('yeye')").remove();
$('p').remove(":contains('yeye')");
//.detach() 将元素暂时性的去除，但保留所有的事件和属性数据。
var p = $('p').detach();
$('body').prepend(p);
//.clone()克隆元素整个节点
//.clone(true)复制整个节点以及绑定的事件和属性数据。但是属性数据中的对象和数组只复制引用。
//.repalceWith() 和.replaceAll()替换节点
//这两个方法返回的jQuery对象是替换前的节点，而不是新的节点。
//.wrap()，包裹当前元素，返回值为当前元素。
$('.i3')
.wrap(function() {
return '<div><div></div></div>';
})
.css('background-color','red');
//也可以把函数换成在.wrap（）的参数中写入html内容。
//.unwrap()方法删除父元素，没有参数，保留自身和兄弟元素。
//.wrapAll()可以将多个元素包裹父元素
//.wrapAll(function() {})可以在回调函数中对每个元素执行包裹操作。
//.wrapInner()将当前元素下的所有子元素用指定的元素包裹起来，作为当前元素的子元素。
//.children()遍历元素的一级子元素。
//.children('.selector')遍历元素的筛选之后的一级子元素。
//.find('.selector')查找后代
//.parent() 查找当前元素的父元素
//.parent()可以接受参数筛选器，例如
//$('div').parent(":last")
//.parents()
//.closest()
//.next()
//.prev()
//.siblings()
//.add() 将元素（jQuery对象或者DOM或者HTML片段）添加到jQuery合集中。
//.each() 对jQuery合集对象的遍历操作，each()中的回调函数有两个实参，索引和迭代元素。
