jQuery

一、jQuery的安装

• 本地引入
  <script src="jquery.js"></script>
• CDN引入(自由选择CDN源)
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

二、使用

$(document).ready(function () {
    $('#id1').click(function () {
           alert("test")
    })
})

$(document).ready(function(){});可以确保在html没有加载到客户浏览器之前不会执行jQuery代码，因为不这样做，可能会导致意想不到的副作用，javascript可能会修改还未呈现的页面元素。

三、元素选取、元素操作

在被选元素的结尾插入内容

$("p").append("追加文本");

在被选元素的开头插入内容

$('p').prepend('test');

追加元素

var txt1="<p>文本。</p>"
var txt2 = $('<p></p>').text("test");
var p = document.createElement('p');
p.innerHTML = 'test';
$('p').append(p，txt1,txt2);

删除被选元素的子元素

$('p').empty();

设置

$('p').text('test');
$('a').attr('href','');

text() - 设置或返回所选元素的文本内容

text()

设置或返回所选元素的内容（包括 HTML 标记）

html()

设置或返回表单字段的值

val()

选取所有元素

$('*')

选取当前 HTML 元素

$(this);

选取带有 href 属性的元素

$('[href]');

选取所有 target 属性值等于 "_blank" 的 <a> 元素

$('a[target="_blank"]');

选取所有 target 属性值不等于 "_blank" 的 <a> 元素

$('a[target!="_blank"]');

选取所有 type="button" 的 <input> 元素 和 <button> 元素

$(':button');

选取偶数位置的 <tr> 元素

$('tr:even');

取奇数位置的 <tr> 元素

$('tr:odd');

修改页面元素用html()方法

$('#id1').html('123)

统计项目符号的个数

$('#id1').size;

得到与类关联的图像的src值

$('#id1').html();

选择整个文档对象

$(document)

选择ID为myId的网页元素

$('#myId')

选择class为myClass的div元素

$('div.myClass')

选择name属性等于first的input元素

$('input[name=name1]').val('test');

选择网页中第一个a元素

$('a:first').html();

选择表格的奇数行

$('tr:odd').html();

选择表单中的input元素

$('#myform:input').html();

选择可见的div元素

$('div:visible').html();

选择所有的div元素，除了前三个

$('div:gt(2)');

选择当前处于动画状态的div元素

$('div:animated');

选择包含p元素的div元素

$('div').has('p');

选择class不等于myClass的div元素

$('div').not('.11');

选择class等于myClass的div元素

$('div').filter('.11');

选择第1个div元素

$('div').first();

选择第6个div元素

$('div').eq(5);

选择div元素后面的第一个p元素

$('div').next('p');

选择div元素的父元素

$('div').parent();

选择离div最近的那个form父元素

$('div').closest('form');

选择div的所有子元素

$('div').children();

选择div的同级元素

$('div').siblings();

链式操作

$('div').find('p').eq(1).html('test');

移动

$('div').insertAfter('p');
$('p').after('div');

复制、删除和创建

$('div').clone();
$('div').remove();
$("p").remove(".italic");
$('div').append('<div>sssss<s/div>')

工具方法

去除字符串两端的空格
$.trim();

遍历一个数组或对象
$.each();

返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。 
$.inArray();

返回数组中符合某种标准的元素
$.grep();

将多个对象，合并到第一个对象
$.extend();

将对象转化为数组
$.makeArray();

判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）
$.type();

判断某个参数是否为数组
$.isArray;

判断某个对象是否为空（不含有任何属性）
$.isEmptyObject();

判断某个参数是否为函数
$.isFunction();

判断某个参数是否为用"{}"或"new Object"建立的对象
$.isPlainObject();

判断浏览器是否支持某个特性
$.support;

this关键字

$('p').click(function () {
    $(this)
});

四、事件

鼠标单击
$('div').click(function () {
                    
})

鼠标双击
$.dblclick();

表单元素失去焦点
$.blur();

表单元素的值发生变化
$.change();

表单元素获得焦点
$.focus();

子元素获得焦点
$.focusin();

子元素失去焦点
$.focusout();

同时为mouseenter和mouseleave事件指定处理函数
$.hover();

按下键盘（长时间按键，只返回一个事件）
$.keydown();

按下键盘（长时间按键，将返回多个事件）
$.keypress();

松开键盘
$.keyup();

元素加载完毕
$.load();

按下鼠标
$.mousedown();

鼠标进入（进入子元素不触发）
$.mouseenter();

鼠标离开（离开子元素不触发）
$.mouseleave();

鼠标在元素内部移动
$.mousemove();

鼠标离开（离开子元素也触发）
$.mouseout();

鼠标进入（进入子元素也触发）
$.mouseover();

松开鼠标
$.mouseup();

DOM加载完成
$.ready();

浏览器窗口的大小发生改变
$.resize();

滚动条的位置发生变化
$.scroll();

用户选中文本框中的内容
$.select();

用户递交表单
$.submit();

根据鼠标点击的次数，依次运行多个函数
$.toggle();

用户离开页面
$.unload();

事件绑定

$('p').bind('click',function () {
    alert('test');
});

让事件运行一次

$('p').one('click',function () {
     alert('test');
});

解除事件绑定

$('p').unbind('click');

事件对象

$('p').click(function (e) {
                    
});

事件发生时，鼠标距离网页左上角的水平距离
e.pageX;

事件发生时，鼠标距离网页左上角的垂直距离
e.pageY;

事件的类型(比如click)
e.type;

按下了哪一个键
e.which();

在事件对象上绑定数据，然后传入事件处理函数
e.data;

事件针对的网页元素
e.target();

阻止事件的默认行为(比如点击链接，会自动打开新页面)
e.preventDefault();

停止事件向上层元素冒泡
e.stopPropagation();

五、特殊动画效果

$('p').show();

淡入
$('p').fadeIn;

淡出
$('p').fadeOut;

调整透明度
$('p').fadeTo();

隐藏元素
$('p').hidden;

显示元素
$('p').show();

向下展开
$('p').slideDown;

向上卷起
$('p').slideUp;

依次展开或卷起某个元素
$('p').slideToggle;

依次展示或隐藏某个元素
$('p').toggle();

$('p').fadeOut(300);
$('p').fadeOut('slow');

$('p').fadeOut(300,function () {
                    
});


animate()自定义
$('p').animate(
     {
           left:'+=50',
           opacity:0.25
     },
     300,
     function () {
                        
     }
);

停止特效的执行
$('p').stop();

延缓特效的执行
$('p').delay;

六、CSS 操作

$('p').css('color','red');
$('p').addClass('11');
$('p').removeClass('11');
$('p').toggleClass('blue');
$("p").css({"background-color":"yellow","font-size":"200%"});

七、尺寸

img_jquerydim.gif

$('p').width;
$('p').innerWidth();
$('p').outerWidth();

八、节点遍历

直接父节点
$('p').parent();
所有父节点
$('p').parents();
所有是ul的父节点
$('p').parents('ul');
介于p与h1之间的父节点
$('p').parentsUntil('h1');

$('div').find('p');
$('div').find('*');
$("div p").first();