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

本文详细介绍了jQuery中的DOM操作、事件处理、动画效果及插件扩展等内容,并提供了实用的代码示例,帮助读者快速掌握jQuery的基本使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 * //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();








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值