jQuery事件处理
作者：互联网
引入工具库：
//网络路径
<script src="http://code.jquery.com/jquery-1.12.4.js"</script>
1、读取节点.innerHTML JQ.html()
console.log( $('selector').html )
2、读取节点的文本 JQ.text()
console.log( $('selector').text() )
3、读写标签的行间属性 JQ.attr()
console.log( $('selector').attr('属性名') ) //读
$('selector').attr('属性名','属性值') //写
$('selector').removeAttr('属性名') //删
4、表单的value读写
<!-- 表单标签 -->
<form action="" id="form">
<input type="text" name="user" value="aaa">
</form>
console.log( $('input[name=user]').val() )
5、JQ对象对所有的行间属性的操作，都是通过attr()方法的
<a href="http://www.baidu.com">百度</a>
console.log( $('a:contains(百度)').attr('href') )
通过当前节点获取其他节点
6、获取子级JQ对象集合 JQ.children[JQ选择器]当传参时，表 示查找子级中符合JQ选择器条件的标签
$('父级节点').click(function(){
$(this).childre()
$(this).childre("div:last")
})
7、获取第一个子级 JQ：eq(下标) 获取JQ集合中的指定下标对 应的 标签所构成的JQ对象
$('父级节点').click(function(){
$(this).childre().eq(0)
})
8、获取最后一个子级 JQ.eq(下标)
$('父级节点').click(function(){
var length = $(this).children().length;
$(this).children().eq(length - 1)
})
9、获取前一个
$('父级节点').click(function(){
$(this).prev()
})
10、获取前面所有的元素
$('父级节点').click(function(){
$(this).prevAll()
})
11、获取下一个
$('父级节点').click(function(){
$(this).next()
})
12、获取下面所有的元素
$('父级节点').click(function(){
$(this).nextAll()
})
13、查找后面的直到 指定的元素（且不包含这个指定元素）
$('父级节点').click(function(){
$(this).nextUntil('指定元素'),'until'
})
14、其他的兄弟集合
$('父级节点').click(function(){
$(this).siblings()
})
15、包含父级节点的JQ对象
$('父级节点').click(function(){
$(this).parent()
})
16、定位父级节点的JQ对象
$('父级节点').click(function(){
$(this).offsetParent()
})
17、获取节点所在父级 children() 节点的集合下标
$('父级节点').click(function(){
$(this).index()
})
18、获取指定后代的JQ节点
$('父级节点').click(function(){
$(this).find('JQ选择器')
})
19、获取JQ对象中的原生节点
$('父级节点').click(function(){
$(this).get(下标)
$(this)[下标]
})
JQ标签的创建
1、JQ节点 $("标签字符串")
JQ.appendTo( JQ选择器 | JQ对象 | 原生JS对象)
返回创建好的标签，可以实现链式操作
//创建h1放入wrap 最后一个位置中
$("<h1>娜娜</h1>").css()
.click(function () {})
.appendTo(".wrap")
2、给wrap中最后一个位置，放一个新创建的标签
JQ.append( JQ | 标签字符串)
$('.wrap').append("<h2>这是append</h2>")
3、创建一个 h3>span+p 放入wrap标签中
$('<h3></h3>').append("<span>span</span><p>p</p>")
.appendTo('.wrap')
4、 在第一个位置插入
JQ.prependTo(JQ选择器 | JQ | 原生DOM节点)
$('<h1>wrap_h1</h1>').prependTo('.wrap')
5、 在之前添加
JQ.insertBefore(JQ对象 | 选择器 | DOM节点)
$('<h1></h1>').insertBefore('.wrap')
6、在XX之前，插入 XXX
$('.wrap').before("<input>")
7、将XXX 插入到XX之后
JQ.inserAfter(JQ对象 | 选择器 | DOM节点)
$('<h1>之后</h1>').insertAfter('.wrap')
8、在XX之后 插入XXX
$('.wrap').after('<h2>wrap之后</h2>')
9、JQ.replaceWith(JQ | 标签 | DOM | callback)
return跟要替换的节点(JQ | 标签字符串 | DOM)
10、删除节点
<button>btn</button>
$('button:contains(btn)').click(function(){
$(this).remove();
})
11、清空节点的内容
<button>btn</button>
$('button:contains(btn)').click(function(){
$(this).empty();
})
12、克隆节点
JQ.clone(bool) bool:true带事件克隆 false不带事件克隆
<button>btn</button>
$('button:contains(btn)').clone(true).appendTo('body')
JQ事件注册
1、事件注册第一种方式
JQ.on(type,function(){})
<button class="btn"><button>
$('.btn').on('click',function(){})
2、JQ自己封装的以常见事件类型作为函数名
<button class="btn"><button>
$('.btn').click(function(){})
$('.btn').mouseover(function(){})
3、只绑定一次 JQ.one(type,function(){})
<button class="btn"><button>
$('.btn').one('click',function(){})
JQ事件注册的独有特性
1、JQ的事件绑定是可以传参的
<button class="btn"><button>
$('.btn').click('click',function(e){
alert( e.data )
})
2、事件代理
JQ父级.on("type","子级JQ选择器",事件处理
$('父级').on('click','选择器',"娜娜",function(e){
alert(e.data)
})
事件删除
1、JQ.off ==> 删除所有事件
<button class="btn"><button>
$('.btn').off()
2、JQ.off(type) ==> 删除一类事件
<button class="btn"><button>
$('.btn').off('click');
3、 精准删除指定类型的，指定事件处理函数
JQ.off(type,fn)
<button class="btn"><button>
$('.btn').off('click',函数)
JQ方法的属性扩展
JQ提供了方法和属性的扩展接口
$.fn.extend({
新增属性1 : "value",
新增方法1 : function(){ this -> 该方法的调用对象 指向JQ对象},
})
JQ.属性
标签：jQuery,事件处理,父级,function,JQ,click,btn,节点 来源： https://www.cnblogs.com/liujianjun/p/16388280.html