jquery 高级方法

最新推荐文章于 2022-09-10 11:26:12 发布

前端学习

最新推荐文章于 2022-09-10 11:26:12 发布

阅读量302

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/kaizi524/article/details/62432611

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery</title>
</head>
<script src="/js/jquery1.7.1.js"></script>
<body>
	
</body>
</html>
<script>
/**
 * detach 删除元素但保留节点
 * text() 
 * replaceWith() 替换
 * replaceAll()
 * append()
 * appendTo()
 * hover()
 * mouseenter()与mouseover区别子元素不会影响父级元素，mouseover会影响
 * mouseleave()
 * mouseover()
 * mouseout()
 * 
 * focusin()支持冒泡，使没有focus事件的父级元素
 * focueout()
 *  -focus,blur(不支持冒泡)区别
 *  
 *  one() 
 *  off('事件')
 *
 * on() 五个参数
 * $(selector).on(event,childSelector,data,function,map)
 * delegate()
 *
 * touchstart
 * originalEvent 获取原生event
 * changedTouches	
 *
 * 自定义事件triggerHandler自定义事件
 */
// 参考：http://www.runoob.com/jquery/event-on.html
$("#div").on('click','span',{name:'hello'},function(ev){
	console.log(ev.data.name);
})
$("#div").delegate('span','click',function(){

})
// touchstart
$("#div").on('touchstart',function(ev){
	//object
	alert(ev.originalEvent.changeTouched)
})
//鼠标滚动，放大缩小图片
$("img").on('zoomIn',function(){
	$(this).css("width",200);
})
$("img").on('zoomIn',function(){
	$(this).css("width",700);
})
$('img').on('DOMMouseScroll',function(ev){
	if(ev.originalEvent.detail > 0){
		$(this).trigger('zoomIn');
	}else{
		$(this).trigger('zoomOut');
	}
})
</script>

jquery高级方法二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery</title>
</head>
<body>
<script src="/js/jquery1.7.1.js"></script>
<style>
.div{width: 100px;height: 100px;background-color: #f00;}
</style>
<input type="text" class="input1">
<input type="button" class="input2" value="按钮">

<div class="div"><span class="span">span</span></div>

<span class="span1">mousedown</span>

<div class="data"></div>

<input type="button" value="全选" class="btn">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
</body>
</html>
<script>
/**
 * trigger 可以触发事件的默认行为
 * triggerHandler 不会触发事件的默认行为，会当作一哥自定义事件
 *
 * stopPropagation //只会阻止父级 
 * stopImmediatePropagation //阻止父级及自身（注意程序执行的先后顺序）
 *
 * which 鼠标键值配合mousedown
 *
 * $(function(){})
 * $(document).ready(function(){})
 * load()防止加载过慢获取宽度错误，img,flash,iframe,
 *
 * jquery的截止操作
 * parents();
 * parentsUntil(el)截止到祖先节点到el
 * nextUntil()
 * prevUntil()
 *
 * 数据缓存
 * data(key,value) //把数据存在一个集合中，防止内存泄露可以缓存大量数据
 * attr(属性,属性值) 通过setAttribute(设置)
 * prop() obj[index] = i以中括号或点的方式
 * removeAttr()
 * removeProp()
 *
 * json形式的设置
 * css({})
 * on({click:function(){},mouseover:function(){}})
 * attr
 * 支持回掉形式的设置
 * addClass()
 *
 * jquery工具方法
 * $.merge() 合并两个数组
 * $.map() 
 * $.grep()
 * $.unique() 针对dom节点的去重方法
 * $.inArray() 查找字符串位置 类似indexof
 * $.makeArray() 转数组
 * $.trim()
 */
$('.input1').on('focus',function(){
	$(this).css({'background':'#f00'});
})
$('.input2').on('click',function(){
	$('.input1').trigger('focus');
	$('.input1').triggerHandler('focus');
})
$('.div').on('click',function(){
	alert("123");
})
$('.span').on('click',function(ev){
	// ev.stopPropagation();
	ev.stopImmediatePropagation();
	// alert("123");
})
$('.span').on('click',function(){
	alert("456");
})

$('.span1').on('mousedown',function(ev){
	alert(ev.which)
})

$(function(){});
$(document).ready(function(){});//和上相同

$(window).load(function(){})
//防止加载过慢获取宽度错误，iframe,
$('img').load(function(){
	$('img').width();
})
//数据缓存
$('.data').data('name','hello');
// alert($('.data').data('name'));
// $('.data').attr('name','hello');
// alert($('.data').attr('name'));
// data
var oBtn = true;
$('.btn').click(function(){
	// $('input[type=checkbox]').attr('checked',true);
	// $('input[type=checkbox]').prop('checked',true);
	if (oBtn) {
		$('input[type=checkbox]').attr('checked',true);
	}else{
		$('input[type=checkbox]').attr('checked',false);
	};
	oBtn = !oBtn;
})

//json
//addClass给所有input添加class
$('input').addClass(function(i,oldClass){
	// a:索引
	// b:classname
	console.log(i);
	console.log(oldClass);
	return 'oBtn'+(i+1);
})
// map
var arr = ['a','b','c'];
arr = $.map(arr,function(a,b){
	// a:value
	// b:key键值
})
</script>

前端学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 高级方法

jquery /** * detach 删除元素但保留节点 * text() * replaceWith() 替换 * replaceAll() * append() * appendTo() * hover() * mouseenter()与mouseover区别子元素不会影响父级元素，mouseover会影响 * mouseleave() * mouseo
复制链接

扫一扫