引入工具库：

//网络路径
<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.属性