Jquery绝对简明手册

Jquery是一个很好用的javascript类库,它的可以简化js编程

同时配合Jquery UI可以很方便的做出各种拖拽,缩放等等很炫的效果

下面来介绍一下最常用的用法

文档加载完后,再执行代码

$(function(){
    alert(1)
})

CSS选择器

id选择器

HTML:

    <div id="css_select_1">
        唉,人生...
    </div>

JS:

加边框
    $('#css_select_1').css({border:'3px dotted #f00'})
去边框
    $('#css_select_1').css({border:''})

class选择器

HTML:

    <div class="who_are_you">
        唉,人生...
    </div>

JS:

报时间,同时变色
    $('.who_are_you').text(Date()).css({background:'#369',color:'#fff'})
插入html
    $('.who_are_you').html('<input/>').css({background:'',color:''})

tag选择器

所有 <pre>都淡出
    $('pre').fadeOut()

所有 <pre>都淡入
    $('pre').fadeIn()

绑定事件

所有pre鼠标移入后变粗,移出后还原

$('pre').mouseover(function(){
    $(this).css({fontWeight:"bold"})
}).mouseout(function(){$(this).css({fontWeight:""})})

当然 还有简便写法
$('pre').hover(
    function(){$(this).css({fontWeight:"bold"})},
    function(){$(this).css({fontWeight:""})}
)

Ajax

$("#links").load("/xx/xx/xxx");
其中url /xx/xx/xxx返回 test
等价于
    $("#links").html("test")


$.get("/xxx/xxx",{name:"张沈鹏"})
等价于
/xxx/xxx?name=%E5%BC%A0%E6%B2%88%E9%B9%8F

$.get("/xxx/xxx",{name:"张沈鹏"},function(txt){
    //txt是返回的内容
})

如果没有参数可以直接写

$.get("/xxx/xxx",function(txt){
    //txt是返回的内容
})

另外还有$.post,用法和$.get类似

拖拽(Jquery UI)

让所有pre元素可以拖拽

$("pre").draggable();

可选择

JS:
    $("#selectable").selectable();

CSS:
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    
HTML:
    <ol id="selectable">
    	<li class="ui-widget-content">Item 1</li>
    	<li class="ui-widget-content">Item 2</li>
    	<li class="ui-widget-content">Item 3</li>
    	<li class="ui-widget-content">Item 4</li>
    	<li class="ui-widget-content">Item 5</li>
    	<li class="ui-widget-content">Item 6</li>
    	<li class="ui-widget-content">Item 7</li>
    </ol>

可排序

CSS:
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
JS:
    $("#sortable").sortable();
    $("#sortable").disableSelection();

HTML:
<ul id="sortable">
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7

可放入

CSS:
	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
JS:
	$(function() {
		$("#draggable").draggable();
		$("#droppable").droppable({
			drop: function(event, ui) {
				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
			}
		});

	});
HTML:
    <div id="draggable" class="ui-widget-content">
    	<p>Drag me to my target</p>
    </div>

    <div id="droppable" class="ui-widget-header">
    	<p>Drop here</p>
    </div>

对话框

JS:
    $.ui.dialog.defaults.bgiframe = true;$('#dialog').dialog()

HTML:
    <div id="dialog" title="Basic dialog">
    	<p>The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>

演示

滑动条

<div id="slider"></div>
<script>
    $("#slider").slider({stop: function(event, ui) {alert(ui.value+"%")}});
</script>

选择日期

<p>Date: <input type="text" id="datepicker"></p>
<script>$("#datepicker").datepicker();</script>

Date:

渐变效果

<style type="text/css">
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; } 
</style>
<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Effect</h3>
		<p>
			Etiam libero neque, luctus a, 
		</p>
	</div>
</div>
<a 
onclick="$('#button').effect('transfer',{to: '#effect', className: 'ui-effects-transfer' },500);"
id="button" class="ui-state-default ui-corner-all">
Run Effect
</a>

Run Effect

firebug小技巧

console.info(xxx)可以用来观察对象