jquery学习杂记

Jquery功能
1.像css那样访问和操作DOM
2.修改css控制页面外观
3.简化JavaScript代码操作
4.事件处理更加容易
5.让Ajax技术更加完美
6.让各种动画效果使用方便
7.基于Jquery大量插件
8.自行扩展功能插件

基本核心
1.$ 不管是页面元素的选择,内置的功能函数,都是"$"来起始的
2.连缀功能  $(‘#div‘).css(‘color‘,‘red‘).css(‘font-size‘,‘30px‘).css(‘font-weight‘,‘bold‘);
3.jQuery对象和DOM对象之间的互换
alert($(‘#div‘));  //返回jQuery对象
alert(document.getElementById(‘div‘));   //document.getElementById(‘div‘) 原生DOM对象
alert($(‘#div‘).get(0));  //[object HTMLDivElement]
alert($(document.getElementById(‘div‘)));  //返回Jquery对象
剔除Jquery的$所有权           JQuery.noConflict();

1.简单选择器  css添加样式,jQuery添加行为
id #
class .
标签 div
返回元素个数 size(); 或length
 #box > p
2.进阶选择器-简单选择器延伸
群组选择器
$(function(){
    $(‘div,p,strong‘).css(‘color‘,‘red‘);
});
后代选择器
$(function(){
    $(‘ul li p‘).css(‘color‘,‘red‘);
});
通配选择器 *
在全局范围使用*会极大地消耗资源所以不建议在全局使用
$(function(){
    $(‘ul li *‘).css(‘color‘,‘red‘);
});
3.高级选择器
层次选择器
//后代选择器
$(‘ul  li a‘)
find()方法
//子选择器 选择子节点 不选择孙子节点
$(‘div>p‘)
children()方法
//next选择器 只获取某节点后一个同级DOM对象
$(‘div+p‘)
next()方法
//nextAll选择器 获取某节点后面所有同级DOM对象
$(‘div~p‘)
nextAll()方法
//$(‘#box‘).prev(‘p‘).css(‘color‘,‘red‘);  //同级上一个元素
//$(‘#box‘).prevAll(‘p‘).css(‘color‘,‘red‘); //同级所有上面元素
//$(‘#box‘).prevUntil(‘p‘).css(‘color‘,‘red‘);  //同级上非指定元素选定,遇到则停止
//$(‘#box‘).nextUntil(‘p‘).css(‘color‘,‘red‘);  //同级下非指定元素选定,遇到则停止
//$(‘#box‘).siblings(‘p‘).css(‘color‘,‘red‘);  //同级上下所有元素选定
属性选择器
 $(‘a[title=xxx]‘).css(‘color‘,‘red‘);
  $(‘a[title^=xxx]‘).css(‘color‘,‘red‘);
 $(‘a[title$=xxx]‘).css(‘color‘,‘red‘);
 $(‘a[title|=xxx]‘).css(‘color‘,‘red‘);
 $(‘a[title!=xxx]‘).css(‘color‘,‘red‘);
 $(‘a[title*=xxx]‘).css(‘color‘,‘red‘); //包含子串
 $(‘a[title=xxx][alt=xxx]‘).css(‘color‘,‘red‘);  //多属性

过滤选择器
//.....

jquery学习杂记

原文：http://www.cnblogs.com/jeasonzuo/p/6364518.html