<!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>