jquery操作方法

1.jq创建节点 $("标签")

$(' <a href="http://www.baidu.com" target="_blank">创建节点</a>')

2.添加节点

（1）jq对象.append（jq对象）

$('div').append('<h1>哈哈哈</h1>')  //可以直接插入html字符串

$('div').append($('p'))

（2）jq对象.appendTo($('选择器'))  或者jq对象.appendTo('选择器')

$('p').appendTo($('div'))

$('p').appendTo('div')    //可以省略$符号

$('<h1>节点</h1>').appendTo('div')    //可以直接插入html字符串

（3）jq对象.prepend（jq对象）  

$('div').prepend($('h1'))

$('div').prepend($('<h1>哈哈哈</h1>'))   //可以直接插入html字符串

（4）jq对象.prependTo($('选择器'))   或者jq对象.appendTo('选择器')

$('h1').prependTo($('div')) 

$('h1').prependTo('div')   //可以省略$符号

$('<h1>呵呵呵呵</h1>').prependTo('div')   //可以直接插入html字符串

 3.清空元素   jq对象.empty（） 清空 jq对象内部元素

$('div').empty()

4.删除元素   jq对象. remove（） 删除元素，连自己也删除

$('div').remove()

5.克隆节点     jq对象.clone()

（1） jq对象.clone()

 $('p').clone().appendTo('div')

（2） jq对象.clone(true)   参数传入true，克隆的元素的事件也会克隆

$('p').click(function(){
   console.log(110)
 })
   $('p').clone(true).appendTo('div')
  })

 6.jq对象.val( )  表单的设置与获取操作

 $('#bt1').click(function(){
$('input').val('北京欢迎您')
 })
 $('#bt2').click(function(){
cons

 7.设置或者获取宽高

 （1）width（）和height(  )  设置或者获取宽高    

$('div').width(500)
$('div').height(500)
console.log($('div').width())    //获取content
console.log($('div').height())   //获取content

（2）innerWidth( )   innerHeight（）  获取宽高

console.log($('div').innerWidth())    //获取content+padding
console.log($('div').innerHeight())   //获取content+padding

（3）outerWidth()   outerHeight()     获取宽高

console.log($('div').outerWidth())    //获取content+padding+border

console.log($('div').outerHeight()    //获取content+padding+border

 （4）outerWidth(true)   outerHeight(true)     获取宽高

console.log($('div').outerWidth(true))     //获取content+padding+border+margin
console.log($('div').outerHeight(true))     //获取content+padding+border+margin

 （5）$(window).width()   / $(window).height()    获取可视区的宽高

console.log($(window).width())     
console.log($(window).height()) 

8.scrollLeft  /scrollTop    设置或获取页面的卷曲距离

  $(window).scroll(function(){
 console.log($(window).scrollTop())     
console.log($(window).scrollLeft())    
    })

   $(window).scroll(function(){
 console.log($(window).scrollTop())     
    })
 $('button').click(function(){
  $(window).scrollTop(0)
 })

 9.offset（）用于获取元素距离页面的位置

 console.log($('.son').offset())

10.position( )用于获取元素距离有定位的父元素的距离

 console.log($('.son').position())

 11.jq的链式编程

（1）prevAll()   //获取前面所有的兄弟元素 

（2）nextAll()   //获取后面所有的兄弟元素

（3）siblings()  //获取所有的兄弟元素

（4）prev()      //获取前一个兄弟

（5）next()     //获取后一个兄弟

 

 $('li').on('click',function(){
    $(this).css('backgroundColor',"red")
  .siblings().css('backgroundColor',"yellow")
})