<ul id="items"> <li>Item 1</li> <li>Item 2</li></ul><script src="jquery-1.11.0.min.js"></script><script type="text/javascript">// 缓存jQuery对象，方便多次使用var jObj = $(‘li‘);// 获取jQuery对象包装的对象的个数alert(jObj.length);// 获取第1个DOM对象alert(jObj[0]);alert(jObj.get(0));// 获取第1个jQuery对象alert(jObj.eq(0));// 遍历jObj.each(function( index, element) {  $(element).prepend( ‘<em>‘ + index + ‘: </em>‘ );});jObj.map(function( index, element) {  $(element).prepend( ‘<em>‘ + index + ‘: </em>‘ );});</script>

<ul id="items"> <li>Item 1</li></ul><script src="jquery-1.11.0.min.js"></script><script type="text/javascript">// 0. 缓存jQuery对象，方便多次使用var jObj = $(‘#items‘);// 1. 获取元素的内容 - HTML形式与Text形式alert(jObj.html());alert(jObj.text());// 2. 更新元素的内容 - 运行一下，体会使用html方法与text方法后，页面对于字符串的编码的不同alert(jObj.html(‘<li>Item 2</li>‘).html());alert(jObj.text(‘<li>Item 2</li>‘).html());// 3. 添加新的子元素 - 体会一下append与appendTo的不同、prepend与prependTo的不同jObj.append(‘<li>Item 3</li>‘);$(‘<li>Item 4</li>‘).appendTo(jObj);jObj.prepend(‘<li>Item 5</li>‘);$(‘<li>Item 6</li>‘).prependTo(jObj);// 4. 添加兄弟元素 - 体会一下after与insertAfter的不同、before与insertBefore的不同jObj.after(‘<ol id="itemsClone1"><li>Item 7</li><ol>‘);$(‘<ol id="itemsClone2"><li>Item 8</li><ol>‘).insertAfter(jObj);jObj.before(‘<ol id="itemsClone1"><li>Item 7</li><ol>‘);$(‘<ol id="itemsClone2"><li>Item 8</li><ol>‘).insertBefore(jObj);// 5. 处理父元素// - wrap方法：把包装集中每个元素都包装到一个指定的元素中// - wrapAll方法：把包装集中所有元素包装到同一个指定的元素中// - unwrap方法：移除当前元素的父元素。// - wrapInner方法：为当前元素的所有子元素，添加一个父元素。$(‘ul‘).wrap(‘<div style="color:Red"></div>‘);$(‘ul‘).wrapAll(‘<div style="color:Red"></div>‘);$(‘ul‘).unwrap();$(‘ul‘).wrapInner(‘<strong></strong>‘);// 6. 复制元素 - clone方法，包括id也会复制，所以通常clone完以后需要修改一下id以保证id唯一性jObj.after(jObj.clone());// 7. 移除元素// - remove方法：移除元素，包括其挂接的事件// - detach方法：移除元素，但保留挂接的事件// - replaceWith方法：元素替换$(‘li‘).remove();$(‘li‘).detach();$(‘li‘).replaceWith(‘<p>Items</p>‘);// 8. 获取/设置/移除属性值// 8.1 DOM对象的属性(property，如tagName,nodeName,className等)// - 由于jQuery对象可以很容易转换成DOM对象，所以第一种方式就是直接取得DOM对象执行操作// 这个例子在前面讲DOM操作的时候看过了，这里不再重复。// - 第二种方式就是在JQuery中直接设置/获取DOM对象的属性值，看下面的例子：$(‘li‘).prop(‘className‘, ‘big‘)alert($(‘li‘).prop(‘className‘)); // 8.2 页面HTML元素的属性(attribute，如id,class,src等)$(‘li‘).attr(‘title‘,‘tooltip...‘);alert($(‘li‘).attr(‘title‘));// 9. 获取/设置/移除CSS// 9.1 addClass方法，removeClass方法，toggleClass方法// - addClass方法用于添加一个class名字// - removeClass方法用于移除一个class名字// - toggleClass方法用于添加/删除一个class名字（如果无就添加，如果有就移除）。$(‘li‘).addClass(‘special‘)$(‘li‘).removeClass(‘special‘)$(‘li‘).toggleClass(‘special‘)// 9.2 css方法// - css方法用于获取/改变CSS设置。// 获取fontSize$(‘h1‘).css(‘fontSize‘);// css方法的参数是css属性名。// 需要注意，CSS属性名的CSS写法和DOM写法，两者都可以接受，比如font-size和fontSize都行。 // 设置css属性$(‘li‘).css(‘padding-left‘, ‘20px‘)// 或者$(‘li‘).css({  ‘padding-left‘: ‘20px‘}); // 10. 自定义数据利器 - data方法// 储存数据$("body").data("foo", 52);// 读取数据alert($("body").data("foo"));</script>

click,focus,blur,scroll,resizekeydown/keypress/keyupmouseover/moouseout/mouseenter/mouseleave/hover

// 设置回调函数$(‘li‘).click(function (e) {  alert($(this).text());});// 主动的去触发回调函数$(‘li‘).click();

$( document ).ready(function() {  alert(‘ready!‘);});// 等价写法$(function() {  alert(‘ready!‘);});

$(‘li‘).on(‘click‘, function (e) {  alert($(this).text());});

// 同时挂接click与mouseleave事件$(‘li‘).on(‘click mouseleave‘, function (e) {  alert($(this).text());});// 给回调函数传额外的参数$(‘li‘).on(‘click‘, {name: ‘clicked‘}, function (event){    alert(event.data.name);});// 给子元素挂事件$(‘ul‘).on(‘click‘, ‘li‘, function (e){  alert($(this).text());});

$(‘li‘).trigger(‘click‘);

$(‘li‘).off(‘click‘);

$(‘li‘).one(‘click‘, function (e) {  alert($(this).text());});

show/hide/toggle：显示/隐藏当前元素。fadeIn/fadeOut：淡入/淡出特效。slideDown/slideUp/slideToggle：以从上向下滑入/从下向上滑出的方式显示当前元素。

$(‘li‘).show();$(‘li‘).show(300);$(‘li‘).show(‘slow‘);

jQuery.fx.speeds.fast = 50;jQuery.fx.speeds.slow = 3000;jQuery.fx.speeds.normal = 1000;

jQuery.fx.speeds.blazing = 30;// 调用$(‘.hidden‘).show(‘blazing‘);

$(‘p‘).fadeOut(300, function() {  $(this).remove();});

$(‘div‘).animate({    left: ‘+=50‘, // 增加50    opacity: 0.25,    fontSize: ‘12px‘  },  300, // 持续事件  function() { // 回调函数     console.log(‘done!‘);  });

$(‘#foo‘).slideUp(300).delay(800).fadeIn(400);

$(‘#stop‘).click(function() {  $(‘.block‘).stop();});

$.ajax({  type: ‘POST‘,  url: ‘some.php‘,  data: { name: ‘John‘, location: ‘Boston‘ }}).done(function( msg ) {    alert( ‘Data Saved: ‘ + msg );  });

// 使用http get方法向server申请一份数据// jQuery.get( url, [data], [callback], [type] )$.get( ‘ajax/test.html‘, function( data ) {  $( ‘.result‘ ).html( data );  alert( ‘Load was performed.‘ );});// 获取json数据的快捷方法：jQuery.getJSON( url, [data], [callback] )// 方法相当于jQuery.get(url, [data],[callback], ‘json‘)// getJSON函数将get函数的type参数设置为‘JSON‘，在回调函数中获取的数据已经是按照JSON格式解析后的对象了。$.getJSON(‘Sample.aspx‘, { ‘resultType‘: ‘json‘ }, function(data, textStatus){  alert(data.length);}); // 获取并执行一段脚本的快捷方法：jQuery.getScript( url, [callback] )// 方法相当于: jQuery.get(url, null, [callback], ‘script‘)$.getScript(‘../scripts/Sample.js‘, function(data, textStatus){  alert(data);  alert(textStatus);});// 使用http post方法向server申请一份数据$.post( ‘ajax/test.html‘, function( data ) {  $( ‘.result‘ ).html( data );});// 使用load方法直接获取一个页面信息，然后更新当前元素// 默认使用GET方式, 如果传递了data参数则使用Post方式$(‘#divResult‘).load(‘data/AjaxGetCityInfo.aspx‘, { ‘resultType‘: ‘html‘ });

// height/width/innerHeight/innerWidth/outerHeight/outerWidth// 上述函数取值时得到的都是以px为单位的值，设置值的时候默认单位是px，此外可以是em或者是%$(‘li‘).height();$(‘li‘).height(20);// offset/position 获取当前元素相对于窗口的偏移和相对于父元素的偏移(只对可见元素有效)$(‘li‘).offset();$(‘li‘).position();// scrollTOP/scrollLeft/// 获取/设置当前元素相对滚动条顶部/左边的偏移。此方法对可见和隐藏元素均有效。$("div.demo").scrollTop();$("div.demo").scrollTop(300);