jQuery CDN和下载地址

jQuery CDN地址 : http://www.bootcdn.cn/jquery/;

jQuery对象与互换DOM对象之间的转换

$(function(){
  var jQueryObject = $('div');  //获取div的jquery对象
  var DOMObject = document.getElementsByTagName('div');  //获取一个DOM对象
  
  consloe.log(jQueryObject.get(0));  //jQuery对象转换为DOM对象
  consloe.log($(DOMObject));  //DOM对象转换为jQuery对象
});

jQuery的选择器

1.简单选择器

2.进阶选择器

jQuery还提供了效率相对于选择器稍高的方法

后代选择器

$('#box p').css('color', 'red'); //全兼容

jQuery 为后代选择器提供了一个等价 find()方法

$('#box').find('p').css('color', 'red'); //和后代选择器等价

子选择器，孙子后失效

$('#box > p').css('color', 'red'); //兼容 IE6

jQuery 为子选择器提供了一个等价 children()方法：

$('#box').children('p').css('color', 'red'); //和子选择器等价

next 选择器(下一个同级节点)

$('#box+p').css('color', 'red'); //兼容 IE6

jQuery 为 next 选择器提供了一个等价的方法 next()：

$('#box').next('p').css('color', 'red'); //和 next 选择器等价

nextAll 选择器(后面所有同级节点)

$('#box ~ p').css('color', 'red'); //兼容 IE6

jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll()：

$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价

3.属性选择器

jQuery的过滤器

1.基本过滤器

jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：

$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 为 red 的元素

2.内容过滤器

jQuery 提供了一个 has()方法来提高:has 过滤器的性能：

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止

3.可见性过滤器

4.子元素过滤器

下一篇: jQuery的基础DOM,CSS操作篇