jquery 常用方法及事件操作 $工具方法

/**
 * //dom常用操作,DOM操作
 * get()	就是把JQ轉成原生js
 * outterWidth();
 * 		類似原生offsetWidth :獲取不到隱藏元素(display:none)的值
 * 	text();
 * 	remove();
 * 	detach()跟remove一樣,不過會保留刪除這個元素的操作行爲
 * 	parents()獲取當前元素的所有祖先節點
 * 	closest()獲取最近的指定的祖先節點包括元素自身,必須要寫篩選的參數,只能找到一個元素
 * 	siblings() 
 * 	nextAll()下面所有的兄弟節點
 * 	prevAll()
 * 	parentsUntil()	到什麼爲止
 * 	nextUntil()
 * 	prevUntil()
 * 	clone(true) 可以接收一個參數,作用:可以複製之前的操作行爲 
 * 	warp()	外包裝
 * 	warpAll()
 * 	warpInner 內包裝
 * 	unwarp()刪除包裝刪除父級,不包括body
 * 	add()
 * 	slice()	截取
 * 	serialize()
 * 	serializeArray()
 * 	//運動
 * 	animate()
 * 	第三個參數:swing(默認)
 * 				linear
 * 	第四個參數 callback
 *
 * stop() 默認阻止當前運動
 * stop(true) 阻止後續的運動
 * stop(true,true) 可以立即停止到指定的目標點
 * finish()可以立即停止到所有指定的目標點
 *
 * delay()
 * //事件委託
 * delegate  //優點:省略了循環操作,對後續添加的內容應用了事件操作
 * undelegate() //阻止事件委託
 *
 * trigger //觸發被選中元素的指定事件
 * ev.data	e.target	ev.type
 */
 alert($(".div").get()[0].innerHTML);
 
 window.onload = function(){

 }
 
$(function(){
	//等DOM加載完
})
||
$(document).ready(function(){
	//等DOM加載完
})

//delegate
$("li").on("click",function(){
	// event
})
$("ul").delegate("li","click",function(){
	// event
	$("ul").undelegate(); //阻止事件委託
})

$("div").click(function(){ })
$("div").trigger('click'); //主動觸發

$(".div").on("click",{name:'hello'},function(ev){
	alert(ev.data.name);	//hello
	alert(ev.type);		//click
	alert(ev.target);	//事件源
})
<pre name="code" class="javascript">/**
 * $.xx(); 工具方法不僅可以jquery用,原生JS 也可以
 *
 * $.type()可以返回具體類型
 * $.trim()去掉空格
 * $.inArray()類似於indexOf
 * $.porxy()改變this指向
 * $.noConflict()防止衝突
 * $.parseJSON()
 * $.makeArray()
 *
 * //插件
 * $.extend 	擴展工具方法下的插件形式 $.xxx()
 * $.fn.extend : 擴展到JQ對象下的插件	$().xxx()
 */

var a = "string";
alert(typeof a);
alert($.type(a));

var arr = ['a','b','c','d'];
alert($.inArray('w',arr));	//-1

function show(n1,n2){
	alert(n1);
	alert(n2);
	alert(this);	//window
}
$.proxy(show,document)(); //document
$.proxy(show,document)(3,4);	//3,4 
$.proxy(show,document,3,4)(); 	//3,4
$.proxy(show,document,3)(4); 	//3,4

$(document).click($.proxy(show,window,3,4));	//window
//noConflict
var fun  = $.noConflict();
fun(function(){

})
//ajax
$.ajax({
	url : 'xx.php',
	data : 'name=xxx&age=xxx',
	type : 'POST',
	success : function(){

	},
	error : function(){

	}
})

// $.extend
$.extend({
	leftTrim : function(){
		return str.replace(/^\s+/,'');
	}
})
$.leftTrim()
//$.fn.extend()
$.fn.extend(function(){
	darg : function(){
		var disX  = 0;
		var disY  = 0;
		var This = this
		this.mousedown(function(ev){
			var disX = ev.pageX-$(this).offset().left;
			var disX = ev.pageX-$(this).offset().top;
			document.mousemove(function(){
				this.css('left',ev.pageX-disX);
				this.css('top',ev.pageY-disY);
			})
			document.mouseup(function(){
				$(this).off();
			})
			return false;
		})
	}
})

$("div").drag();








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章